www.webdeveloper.com
Results 1 to 12 of 12

Thread: If scroll position > then .... (simple solution please)

  1. #1
    Join Date
    Mar 2009
    Posts
    17

    Question If scroll position > then .... (simple solution please)

    Hey,

    wondering if someone could point me in the right direction ....

    I'm having troubling finding 'a script' or 'name of a script', which allows me to be able to change a specific <div> when the user scrolls down the page after a certain point or between 2 certain points of the page.

    Example: http://jdstiles.com/java/scrollers/scroll_remote.html

    On this page, when you scroll down using the <div> scrollbar, the image on the left changes after you reach a certain point of scrolling.

    But, the only thing i wish to change is the image to text and i want it to work in the main body of the page rather then using 2 external <div>'s.

    Thanks for your help, and i'm sorry i can't explain it better, hopefully someone can understand this jibberish.

    regards,
    dan
    Last edited by dgsmigliani; 03-11-2009 at 11:58 PM.

  2. #2
    Join Date
    Mar 2009
    Location
    Australia
    Posts
    17

    Hopefully this is right..

    I'm not quite sure what you want when you say
    i want it to work in the main body of the page rather then using 2 external <div>'s.
    Try this code: (It will change the text within a <div> tag depending on the position of the scroll bar in the other div tag.) Paste the code within the body of your HTML document
    Code:
    <script type="text/JavaScript">
    function checkHeight() {
    	currentScrollPos = document.getElementById('text').scrollTop;
    	
    	if (currentScrollPos > 100 && currentScrollPos < 200)
    		document.getElementById('changingText').innerHTML = "This is the text inside of the div tag 'changingText'. This text will change depending on the current scroll position. The text after the scroll bar is greater than 100 pixels.";
    	else if (currentScrollPos > 200 && currentScrollPos < 300)
    		document.getElementById('changingText').innerHTML = "The text after the scroll bar is greater than 200 pixels.";
    	else if (currentScrollPos > 300)
    		document.getElementById('changingText').innerHTML = "The text after the scroll bar is greater than 300 pixels.";
    }
    </script>
    
    <div id="text" style="height: 100px; overflow:auto; background: #222FFF; width: 150px;" onscroll="checkHeight();">
    <p>Hello this is some text that is to be displayed inside the div tag with the id text.</p>
    <p>Hello this is some text that is to be displayed inside the div tag with the id text.</p>
    <p>Hello this is some text that is to be displayed inside the div tag with the id text.</p>
    <p>Hello this is some text that is to be displayed inside the div tag with the id text.</p>
    <p>Hello this is some text that is to be displayed inside the div tag with the id text.</p>
    <p>Hello this is some text that is to be displayed inside the div tag with the id text.</p>
    </div>
    
    <div id="changingText" style="width:150px;background:#888CCC">
    </div>

  3. #3
    Join Date
    Mar 2009
    Posts
    17

    Thumbs up thank you.

    thanks heaps for your reply ...

    the solution is so close!

    i've taken what you've said and played with it and created something closer to what i'm looking for ...

    check it out here

    basically, it's pretty much what i want, but 2 things ...

    (1) i want it to determine the scrolling on the actually "body" of the page, not the scrolling in the text <div>.

    (2) ... and instead of it changing value because of the pixel (px) value, is it possible to to determine the scrolling of the page by percentage (%)

    thanks again,

    regards,
    dan

  4. #4
    Join Date
    Mar 2009
    Posts
    17
    I found a solution to the BODY problem.

    check it out here

    only need 1 more thing!

    With the 'changingText' <div>, how can i get that to appear on page load? .... i've change the first IF element to "currentScrollPos > 0" (so how can i make it if currentScrollPos = 0)

    thanks,
    Last edited by dgsmigliani; 03-12-2009 at 09:33 PM.

  5. #5
    Join Date
    Mar 2009
    Posts
    17

    Exclamation 1 more solution needed !!!

    UPDATE

    NEED, changingText <div> to <body onload instead of <body onscroll ????


    THANK YOU!

  6. #6
    Join Date
    Mar 2009
    Location
    Australia
    Posts
    17

    Great Work

    I must say, great work on the code.
    You were so close. There were only needs to be a few adjustments.
    To run the function onload you should change your body tag to the following:
    Code:
    <body onload="checkHeight();" onScroll="checkHeight();">
    The JavaScript function checkHeight() needs an if statement at the start to check if the scroll bar is at 0 (the top of the page), just like you have said.
    Here is the entire function with the added code to check if the scroll bar is at the top of the page.
    Code:
    function checkHeight() {
    	currentScrollPos = document.documentElement.scrollTop;
    	
    	if (currentScrollPos == 0)
    		document.getElementById('changingText').innerHTML = "You are at the top of the page. At 0 pixels";
    	else if (currentScrollPos > 0 && currentScrollPos < 200)
    		document.getElementById('changingText').innerHTML = "The text after the scroll bar is greater than 0 pixels.";
    	else if (currentScrollPos > 200 && currentScrollPos < 400)
    		document.getElementById('changingText').innerHTML = "The text after the scroll bar is greater than 200 pixels.";
    	else if (currentScrollPos > 400 && currentScrollPos < 600)
    		document.getElementById('changingText').innerHTML = "The text after the scroll bar is greater than 400 pixels.";
    	else if (currentScrollPos > 600 && currentScrollPos < 800)
    		document.getElementById('changingText').innerHTML = "The text after the scroll bar is greater than 600 pixels.";
    	else if (currentScrollPos > 800 && currentScrollPos < 1000)
    		document.getElementById('changingText').innerHTML = "The text after the scroll bar is greater than 800 pixels.";	
    	else if (currentScrollPos > 1000)
    		document.getElementById('changingText').innerHTML = "The text after the scroll bar is greater than 1000 pixels.";		
    }
    Other than that, Great Work. Glad to help

  7. #7
    Join Date
    Mar 2009
    Posts
    17
    Thank you so much for your help,
    i must admit if it wasn't for you pointing me in the right direction i wouldn't know what to do

    Thanks again,
    dan

  8. #8
    Join Date
    Mar 2009
    Location
    Australia
    Posts
    17

    =]

    No problem. Your very welcome.

  9. #9
    Join Date
    Mar 2009
    Posts
    17

    Exclamation heeeeeeeelp.

    umm, slight problem ....

    here is where i'm at

    This script doesn't work in Safari or Google Chrome ???

    any ideas?

    thanks,

  10. #10
    Join Date
    Mar 2009
    Location
    Australia
    Posts
    17

    Smile The Fix.

    Ok, don't worry, this is an easy fix. Replace:
    Code:
    currentScrollPos = document.documentElement.scrollTop;
    in the function with
    Code:
    currentScrollPos = window.pageYOffset;
    This should solve your problem.

    Thanks,

  11. #11
    Join Date
    Mar 2009
    Posts
    17
    can't thank you enough ...

  12. #12
    Join Date
    Mar 2009
    Location
    Australia
    Posts
    17

    Your Welcome

    Your very welcome.
    Web Dev Blog - Badnmad.com
    Program because you enjoy it, don't program because you have to.

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