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
    80
    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
    80
    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
    154
    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
    80
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.41209 seconds
  • Memory Usage 2,912KB
  • Queries Executed 15 (?)
More Information
Template Usage (36):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (3)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (74):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates