www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 20 of 20

Thread: One page scrolling website

  1. #16
    Join Date
    Jul 2013
    Posts
    57
    how about slider/ image slider?

  2. #17
    Join Date
    Mar 2014
    Posts
    2
    how to make the popup content of that web, i want to put it on my page too. thanks for the help.

  3. #18
    Join Date
    Jul 2013
    Posts
    57
    if i want to make it in fixed size, what the suitable height for every page so that it fit all browser window?

  4. #19
    Join Date
    Feb 2014
    Location
    Dubai, UAE
    Posts
    153
    I have got a list of best single page websites for 2012 and 2013 for you, check it here

    http://wistech.biz/2014/03/03/most-l...tes-2012-2013/

  5. #20
    Join Date
    Jul 2013
    Posts
    57
    ok now i have another problem.

    i make a slideshow, but it show half of the image. what the problem? here my code.

    HTML:
    Code:
    <div class="full-width">
    			<div class="inner">
    				<div class="slide">
    					<img src="images/slide1.jpg" width="1682" height="745">
    				</div>
    				<div class="slide">
    					<img src="images/slide2.jpg" width="1682" height="745">
    				</div>
    			</div>
    			<div class="slide-nav"></div>
    		</div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    	<script src="slider.js"></script>
    	<script>
    		$('.full-width').fullWidth();
    	</script>
    CSS:
    Code:
    .full-width {
        overflow: hidden;
        position: relative;
        background: #fff;
    }
    
    .full-width,
    .full-width .slide img {
        width: 100%;
    	height: 745px;
    	top: 140px;
    }
    
    .full-width:hover {
        background: transparent;
    }
    
    .full-width .inner {
        overflow-y: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
        filter: alpha(opacity=00);
        -moz-opacity: 0;
        opacity: 0;
    	height: 100%;
    }
    
    .full-width .slide {
        float: left;
        overflow-x: hidden;
        position: relative;
    }
    
    .full-width .slide img {
        height: 745px;
    	padding-top: 200px;
    }
    
    .full-width .slide div {
        color: #fff;
        position: absolute;
        padding: 0 5%;
        left: 0;
        width: 90%;
        text-align: right;
        font-size: 32px;
    }
    .full-width .slide div p {
        float: right;
        text-align: left;
        padding: 10px;
        margin: 0;
        background: rgba(0, 0, 0, 0.8);
    }
    .full-width .controls a {
        position: absolute;
        top: 50%;
        margin-top: -46px;
        display: block;
        background: rgba(0, 0, 0, 0.5);
        text-decoration: none;
        color: #fff;
        font-size: 40px;
        padding: 0 10px 2px 7px;
        line-height: 40px;
        *display: none;
    }
    .full-width .controls a.left {
        left: 0px;
    }
    .full-width .controls a.right {
        right: 0px;
    }
    .full-width .slide-nav {
        *display: none;
        font-size: 75px;
        margin: 0 auto;
        line-height: 50px;
        font-family: 'Helvetica', Arial, sans-serif;
    }
    .full-width .slide-nav span {
        cursor: pointer;
        color: #ccc;
    }
    .full-width .slide-nav span.current {
        color: #333;
    }
    .lt-ie9 .full-width p,
    .lt-ie9 .full-width .controls a {
        background: url('bg-trans.png') repeat;
        _background: #333;
    }
    JS:
    Code:
    (function($){ 
        
        "use strict";
        
        $.fn.fullWidth = function(options) {
                
            var defaults = {
                maxHeight   :    745,
                minHeight   :    375,
                delay       :    5000,
                transition  :    1000,
                maxFont     :    36,
                minFont     :    20
            }, settings = $.extend(defaults, options);
                            
            return this.each( function() {
            
                var full    =    $(this),
                inner       =    full.find('.inner'),
                slides      =    inner.find('.slide'),
                images      =    slides.find('img'),
                nav         =    full.find('.slide-nav'),
                controls    =    full.find('.controls a'),
                navCircles  =    '',
                smallest    =    9999,
                status      =    {current : 0, max : slides.length - 1},
                timers      =    {slides : '', resize : ''},
                
                move = function(direction, current){
                    if(inner.is(':animated')) return;
                
                    stop();
                
                    if(direction === 'right'){
                        status.current = status.current+1 > status.max ? 0 : status.current+1;
                    }else if(direction === 'left'){
                        status.current = status.current-1 < 0 ? status.max : status.current-1;
                    }else{
                        status.current = current || 0;
                    }
                
                    navCircles.removeClass('current').eq(status.current).addClass('current');
                    inner.animate({'margin-left' : '-'+100*status.current+'%'}, settings.transition ,function(){ start(); });
                
                },
                start = function(){
                    timers.slides = setTimeout(function(){ move('right'); }, settings.delay);
                },
                stop = function(){
                    clearTimeout(timers.slides);
                },
                resize = function(){
                    
                    var wWidth    =    $(window).width(),
                    newHeight     =    parseInt(wWidth/3, 10),
                    imageCSS      =    wWidth <= smallest ? ['100%', 'auto', '9999'] : ['', '', ''],
                    start         =    inner.height(),
                    divCSS        =    wWidth <= 480 ? ['0', '100%', 'none'] : ['', '', ''],
                    size          =    wWidth/41;
                    /*
                    size equals window width divided by 41 - 41 was chosen as it creates a nicely proportionate font size.
                    However, you can experiment with this if you want a generally larger or smaller size to be set.
                    For example: a width of 960px/41 = 23.4px, with 20 instead of 41 you'd get a font size of 48px.
                    It really depends on what kind of content you're displaying and how much text you've got on each slide.
                    */    
                    
                    size = size > settings.maxFont ? settings.maxFont : 
                                (size < settings.minFont ? settings.minFont : size);
    
                    inner.css('height', function(){
                        return newHeight > settings.maxHeight ? settings.maxHeight : 
                                (newHeight < settings.minHeight ? settings.minHeight : newHeight);
                    });
    
                    images.css({
                        'margin-top' : function(){
                            var curr = $(this).height();
                            return '-'+(start > curr ? 0 : curr-start)/2+'px';
                        },
                        'height' : imageCSS[0], 'width' : imageCSS[1], 'maxWidth' : imageCSS[2]
                    });
    
                    slides.find('div').css({
                        'font-size' : size, 
                        'top' : function(){
                            var diff = start-$(this).height();
                            return wWidth <= 480 ? diff : diff/2;
                        },
                        'padding' : divCSS[0], 'width' : divCSS[1]
                    }).find('br').css('display', divCSS[2]);
                    
                },
                attachEvents = function(){
                
                    $(window).resize(function(){
                        clearTimeout(timers.resize);
                        timers.resize = setTimeout(function(){ resize(); }, 100);
                    }).trigger('resize');
                    
                    controls.on('click', function(){
                        move(this.className);
                        return false;
                    });
                    
                    full.on('mouseenter mouseleave', function(e){
                        if(controls.is(':animated')) return;
                        e.type === 'mouseenter' ? controls.fadeIn() : controls.fadeOut();
                    });
                    
                    navCircles.on('click', function(){
                        move('direct', $(this).index());
                    });
                    
                    $(document).on('keydown', function(e){
                        if(!(e.which === 37 || e.which === 39)) return; 
                        move(e.which === 37 ? 'left' : 'right');
                    });
        
                };
            
                (function(){
                    
                    inner.css('height', settings.minHeight);
                    
                    images.each(function(){
                        var w = $(this).attr('width');
                        smallest = w < smallest ? w : smallest;
                    });
                    
                    slides.each(function(i){
                        $(this).addClass('slide-'+(i+1));
                    });
                    
                    inner.css('width', (slides.length*100)+'%');
                    
                    slides.css('width',  parseFloat(100/slides.length, 10)+'%').each(function(){
                        nav.append('<span>&bull;</span>');
                    });
                    
                    slides.find('div').wrapInner('<p />');
                    
                    navCircles = nav.find('span');
                    navCircles.first().addClass('current');
                    nav.css('width', function(){
                        return navCircles.length*26;
                    });
                    
                    $(window).load(function() {
                        attachEvents();
                        inner.fadeTo(1000, 1, function(){
                            start();
                        });
                    });
                }());
            
            });
        };
         
    }(jQuery));

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles