Advanced Search

Results 1 to 4 of 4

Thread: change css style when a position of the page is reached

  1. #1
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default change css style when a position of the page is reached

    Hello,
    I have to tell you immediately that Iīm very new to javascript (and so also in the forum) but I have an idea and I donīt even know where to start. Itīs a bit difficult to explain but Iīll try my best - sorry for mistakes.

    I have a normal 1 2 3 4 5 6 anchor navigation that make the page jump up and down when clicked. When you click 1, this becomes underlined and when you click 2, 1 goes back to not underlined and 2 become underlined... and so on. I would like to add the feature that when you scroll the page and the anchor 2 reaches the top (without clicking the buttons but only with scrolling) the button 2 becomes underlined like if it would have been clicked ... and so on with all buttons...

    Is it possible?

    Any help is very appreciated, links to tutorials or the definition of what Iīm searching for also very very much.

    Thanks in advance,
    salta

  2. #2
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, I figured a couple of things out by my own.
    And the buttons are now working onClick this way:

    html
    Code:
    <span id='first' class="selected"><a href="#1" onclick="first()">1 </a></span>
    <span id='secondo' class="normal"> <a href="#2" onclick="second()">2 </a></span>
    and so on for 3 4 5 6

    the "second()" function in javascript
    Code:
    function second() {
    	document.getElementById("first").setAttribute("class" , "normal");
    	document.getElementById("second").setAttribute("class" , "selected");
    }
    And this works good. I thought about checking the y position of the window with window.onscroll and call the same functions but it doesnīt work. The problem is that the pictures are in an absolute positioned DIV with overflow-y:auto. So when you scroll you donīt actually scroll the window but the DIV.
    Is there a way to control in javascript the scroll of a DIV?
    Or is there anything else I should change?

    Please help!

  3. #3
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    UPDATE

    I managed to call a javascript function onScroll of the div this way:

    <div id="right" onScroll="message()">
    .....
    </div>


    and if I do

    function message() {
    alert("hello');
    }

    It works!!

    Now Iīm trying to capture the y position of the DIV and call a function when higher than 100.


    var div = document.getElementById("right");

    function message() {
    if(div.pageYOffset<=100) {
    second();
    }
    }


    But it doesnīt work!

    Please help! iīm almost there!

    }

  4. #4
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    continue here

Bookmarks

Posting Permissions

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