Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Load New divs when scroll to bottom of page

    Hi,

    I am new to this and new to coding in general. I have done several HTML and CSS websites previously, but I am no expert!

    Basically I have a portfolio website that is one page. On the page is a header, some information and then a list of work I have produced. (The list of work includes an image and some text)

    The website is currently at:
    http://www.jb-design.me/tester/

    so you can see all the code there.

    I want to be able to add in new work as they are completed. So I have created a structure of:
    Code:
     
    <div id="worktemplatewhite">
    <div class="workimageholder">
    <div class="workimageslider"><img src="images/Slide-01.jpg" /></div>
    <div class="workimagetextbox"><p1>Uptaecepedia ducid quiame pra qui qui renimenditas estius ea veliquo idel erspel ma debita nis ut que volupta sseque de labores tiandae prero blacium dendam, sedi tem.</p1></div>
    </div>
    </div>
    <div id="spacer"></div>
    I plan to copy and paste this code and then just change the image and the text and put a 'spacer div' in-between to show through the background.

    The 'Worktemplatewhite' spans the full width of the screen and has a white background.
    The 'workimageholder' is 1000px wide and contains the 'workimageslider' (The image) and 'workimagetextbox' (textual content)

    ]I want the user to scroll to the bottom of the page and this will load up new 5 new posts below the ones on screen. Is this possible? If so, how can it be achieved?

    I would also like the 'web, print and logo' buttons to be click and only show the divs which relate to that... (No idea how to go about doing this)

    I am having one last attempt to sort this out before I pay for someone to complete it!

    Any help but would be appreciated but remember I am a beginner so be kind

    Thanks


    PS. The website is still ongoing to there are a few bugs and it has only been tested on safari and firefox for mac for now...

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    I'll give you some javascript one sec

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Create 5 divs at the very bottom of your page. Leave the innerhtml blank, and name them hiddendivs. <div class="hiddendivs"></div>

    Code:
    <script>
    
        $().ready(function () {
    	var hiddendivs  = document.getElementById("hiddendivs");
            var viewportwidth;
            var viewportheight;
            $(window).scroll(function () {
    
                if (typeof window.innerWidth != 'undefined') {
                    viewportwidth = window.innerWidth,
    			viewportheight = window.innerHeight
                }
    
                // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
                else if (typeof document.documentElement != 'undefined'
    			&& typeof document.documentElement.clientWidth !=
    			'undefined' && document.documentElement.clientWidth != 0) {
                    viewportwidth = document.documentElement.clientWidth,
    			viewportheight = document.documentElement.clientHeight
                }
    
                if ($(window).scrollTop() >= viewportheight) {
                   
    		  hiddendivs.innerHTML = "whatever is going into the hidden divs";
    
    	    }
            
            });
    
        });
        
    </script>

  • Users who have thanked sean3838 for this post:

    jbyrne (03-12-2012)

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    id also suggest validating your coding using http://validator.w3.org
    noticed there were a few duplicate ID tags

    you should be able to see it here
    http://validator.w3.org/check?uri=ht...Inline&group=0

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts

  • Users who have thanked aaronhockey_09 for this post:

    jbyrne (03-12-2012)

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    Sean3838 and aaronhockey_09

    Thanks for your replies! Will take a look at these first thing tomorrow and let you know how I got on!

    Really need to get to grips with all this but got to start somewhere I guess!

    Thanks for your help!

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    Create 5 divs at the very bottom of your page. Leave the innerhtml blank, and name them hiddendivs. <div class="hiddendivs"></div>

    Code:
    <script>
    
        $().ready(function () {
    	var hiddendivs  = document.getElementById("hiddendivs");
            var viewportwidth;
            var viewportheight;
            $(window).scroll(function () {
    
                if (typeof window.innerWidth != 'undefined') {
                    viewportwidth = window.innerWidth,
    			viewportheight = window.innerHeight
                }
    
                // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
                else if (typeof document.documentElement != 'undefined'
    			&& typeof document.documentElement.clientWidth !=
    			'undefined' && document.documentElement.clientWidth != 0) {
                    viewportwidth = document.documentElement.clientWidth,
    			viewportheight = document.documentElement.clientHeight
                }
    
                if ($(window).scrollTop() >= viewportheight) {
                   
    		  hiddendivs.innerHTML = "whatever is going into the hidden divs";
    
    	    }
            
            });
    
        });
        
    </script>
    In the 'whatever is going into the hidden divs, section, you highlighted red. I am using a div to go the length of the screen 'Width 100%' and then another container div for '1000px', then a div for an image and another div for the text on the right...

    Do I just paste in the html code for all this of using those divs in that section you highlighted red?

    Excuse my ignorance!

    I am planning on adding more elements each time so can I use this code and continue adding more content as time goes on? i.e. each time I scroll to the bottom of the page, 5 new strips of content load?

    Thanks in advance!

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Have found and adapted the code:

    Code:
    alreadyloading = false;
    nextpage = 2;
     
    $(window).scroll(function() {
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
            if (alreadyloading == false) {
                var url = "page"+nextpage+".html";
                alreadyloading = true;
                $.post(url, function(data) {
                    $('#projectscontainer').children().last().after(data);
                    alreadyloading = false;
                    nextpage++;
                });
            }
        }
    });
    I want when the user scrolls to the bottom of the page for content in a new page to load, that seems the best option. So in the new page 'Page2.html" I have put 5 divs going down with content in...

    I want the new content to appear below "#projectscontainer'"

    Why won't this work? Anyone know?

    Thanks


  •  

    Tags for this Thread

    Posting Permissions

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