SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question A couple questions - please help!?

    Hi I have three questions:

    1. I need to get the css for position: fixed to work in ie6. I have tried attaching http://dean.edwards.name/ IE7.js because I was told it makes IE6 act like IE7 but it didn't work.. Any ideas?

    2. I have 2 separate divs that look kinda like this:
    <div id="menu">
    <ul>
    <li><a href="link1">1 link</a></li>
    <li><a href="link2">2 link</a></li>
    <li><a href="link3">3 link</a></li>
    </ul>
    </div>

    <div id="menu_content">
    <ul>
    <li><a name="link1"></a>line 1 text text</li>
    <li><a name="link2"></a>line 2 text text</li>
    <li><a name="link3"></a>line 3 text text</li>
    </ul>
    </div>

    What I want to happen is when you rollover link1 it will change the background colour of 'line 1 text text' in the menu_content div. Same goes for line 2 and 3 in the menu content.. Any ideas how to achieve this please?

    I have tried this JS which is not cross browser compatible:

    Code:
    <SCRIPT TYPE="text/javascript">
    function mouseover1()
    {
    document.getElementById("link1parent").style.backgroundColor='#FFCCCC';
    document.getElementById("link1child").style.backgroundColor='#FFCCCC';
    }
    function mouseout1()
    {
    document.getElementById("link1parent").style.background='white';
    document.getElementById("link1child").style.background='none';
    }
    
    function mouseover2()
    {
    document.getElementById("link2parent").style.backgroundColor='#FFCCCC';
    document.getElementById("link2child").style.backgroundColor='#FFCCCC';
    }
    function mouseout2()
    {
    document.getElementById("link2parent").style.backgroundColor='white';
    document.getElementById("link2child").style.backgroundColor='white';
    }
    function mouseover3()
    {
    document.getElementById("link3parent").style.backgroundColor='#FFCCCC';
    document.getElementById("link3child").style.backgroundColor='#FFCCCC';
    }
    function mouseout3()
    {
    document.getElementById("link3parent").style.backgroundColor='white';
    document.getElementById("link3child").style.backgroundColor='white';
    }
    
    </SCRIPT>
    Code:
    <div id="menu">
    <ul>
    <li id="link1parent" onmouseover="mouseover1()" onmouseout="mouseout1()"><a href="link1">1 link</a></li>
    <li id="link2parent" onmouseover="mouseover2()" onmouseout="mouseout2()"><a href="link1"><a href="link2">2 link</a></li>
    <li id="link3parent" onmouseover="mouseover3()" onmouseout="mouseout3()"><a href="link1"><a href="link3">3 link</a></li>
    </ul>
    </div> 
    
    <div id="menu_content">
    <ul>
    <li id="link1child"><a name="link1"></a>line 1 text text</li>
    <li id="link2child"><a name="link2"></a>line 2 text text</li>
    <li id="link3child"><a name="link3"></a>line 3 text text</li>
    </ul>
    </div>
    This kinda worked but it was not perfect in ie6.. What happens in IE6 is that the background only changed for line 1 text text and the other lines didn't change.. It did work in FireFox..

    Does anyone know how to achieve this effect so it works in all browsers?

    3. My last question relates to question 2..
    As you can see from the above code there are anchors within this page. I would like to apply some animated anchors within this page. I have looked into several example sites that have animated anchors so when you click on a link it scrolls down the page as opposed to jumping down the page. Unfortunately when I applied some of the animated anchor effect scripts it didnt work in IE6.. Typical.. Does anyone have a simple solution please?

  2. #2
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any answers?

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shtoom View Post
    Hi I have three questions:

    1. I need to get the css for position: fixed to work in ie6. I have tried attaching http://dean.edwards.name/ IE7.js because I was told it makes IE6 act like IE7 but it didn't work.. Any ideas?
    You can Google the circumstances under which that property breaks under I.E.; it is supported but it's fragile.
    2. I have 2 separate divs that look kinda like this:
    <div id="menu">
    <ul>
    <li><a href="link1">1 link</a></li>
    <li><a href="link2">2 link</a></li>
    <li><a href="link3">3 link</a></li>
    </ul>
    </div>

    <div id="menu_content">
    <ul>
    <li><a name="link1"></a>line 1 text text</li>
    <li><a name="link2"></a>line 2 text text</li>
    <li><a name="link3"></a>line 3 text text</li>
    </ul>
    </div>

    What I want to happen is when you rollover link1 it will change the background colour of 'line 1 text text' in the menu_content div. Same goes for line 2 and 3 in the menu content.. Any ideas how to achieve this please?
    Not sure why I.E. broke that but you can simplify it to this:
    Code:
    <div id="menu">
    <ul>
    <li id="link1parent" onmouseover="mouseover(this)" onmouseout="mouseout(this)"><a href="link1">1 link</a></li>
    <li id="link2parent" onmouseover="mouseover(this)" onmouseout="mouseout(this)"><a href="link1"><a href="link2">2 link</a></li>
    <li id="link3parent" onmouseover="mouseover(this)" onmouseout="mouseout(this)"><a href="link1"><a href="link3">3 link</a></li>
    </ul>
    </div> 
    
    <script>
    function mouseover(elem)
    {
     elem.style.backgroundColor='#fcc';
    }
    function mouseout(elem)
    {
     elem.style.backgroundColor='';
    }
    </script>
    3.Unfortunately when I applied some of the animated anchor effect scripts it didnt work in IE6.. Typical.. Does anyone have a simple solution please?
    Try SoftScroll
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I tried SoftScroll and it doesn't work in IE6 because of the IE6 fixed position hack I am using which seems to conflict with all the animated anchors I have tried using.

    This is the site in question:
    http://www.newmedia.lincoln.ac.uk/je...ulaab/menu.php
    I am only using fixed position on one page. I might have to find an alternative way of making this page work..

    Any suggestions on how to improve this or make the animated anchor work?

    I have been developing this on my laptop and the fixed menu is in the correct place on my laptop monitor but now I am looking at in on a CPU with a 17" Monitor and the fixed menu is not in the same position.. It is further to the left on this comp..


    Logic Ali -
    I tried your simplified version but I couldn't get the background to change on the child element.. Did you forget to implement this in the code? What my code did was when you rolled over Link 1 it would change the background of another element outside of its div..


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
  •