problem with layers

Discussion in 'Javascript' started by Jay, May 1, 2005.

  1. Jay

    Jay Guest

    Jay, May 1, 2005
    #1
    1. Advertising

  2. Jay

    RobG Guest

    Jay wrote:
    > http://www.wanganui.govt.nz/news/commsLink/index.asp
    >
    > When viewed with Firefox.
    > The show/hide function doesn't work as expected (evident when viewed).
    > Anyone know why? Which bit is FF not liking and how can it be altered to be
    > cross browser friendly?
    >


    It is better to have the hidden <li> elements shown by default and
    use JavaScript to hide them when the page loads. That way you don't
    need a separate link for non-JavaScript browsers.

    At the same time, you could assign the onclick function to each li,
    saving some code.

    The easy (for you) fix is to use:

    ...style.display = 'none'

    to hide the links, and ...style.display ='' to show them again.

    Another tip is to use one function to toggle between show and hide,
    rather than have a separate link to do it. I've created a
    dependency between the <span> and the ULs that are hidden based on
    the id.

    A re-write of a snipped below to show how to do some of the above,

    <script type="text/javascript">
    function initLinks(){
    // Hide all the ULs
    var base = document.getElementById('links');
    var ul = base.getElementsByTagName('ul');
    var i = ul.length;
    while (i--){
    ul.style.display = 'none';
    }
    // Add onclick to spans
    var sp = base.getElementsByTagName('span');
    i = sp.length;
    while (i--) {
    if ( sp.className && 'greyBack' == sp.className ) {
    sp.onclick = function() {showLinks(this)};
    }
    }
    }
    function showLinks(x){
    x = x.id.split('-')[1];
    x=document.getElementById(x);
    x.style.display = (x.style.display == '')? 'none':'';
    }
    window.onload = initLinks;
    </script>

    <div id="links">
    <img align="absmiddle" hspace="5" src="images/expandIssues.gif">
    <span id="s-191TO200" class="greyBack">Issues 191-200 </span>
    <br>
    <ul id="191TO200">
    <li><a href="issue200.asp" >Issue #200</a> 2nd April 2005</li>
    <li><a href="issue199.asp" >Issue #199</a> 26th March 2005</li>
    <li><a href="issue191.asp" >Issue #191</a> 29th January 2005</li>
    </ul>
    <img align="absmiddle" hspace="5" src="images/expandIssues.gif">
    <span id="s-181TO190" class="greyBack">Issues 181-190 </span>
    <br>
    <ul id="181TO190">
    <li><a href="issue190.asp" >Issue #190</a> 2nd April 2005</li>
    <li><a href="issue189.asp" >Issue #189</a> 26th March 2005</li>
    <li><a href="issue181.asp" >Issue #181</a> 29th January 2005</li>
    </ul>
    <img align="absmiddle" hspace="5" src="images/expandIssues.gif">
    <span id="s-171TO180" class="greyBack">Issues 171-180 </span>
    <br>
    <ul id="171TO180">
    <li><a href="issue180.asp" >Issue #180</a> 2nd April 2005</li>
    <li><a href="issue179.asp" >Issue #179</a> 26th March 2005</li>
    <li><a href="issue171.asp" >Issue #171</a> 29th January 2005</li>
    </ul>
    </div>
     
    RobG, May 1, 2005
    #2
    1. Advertising

  3. Jay

    Jay Guest

    "RobG" <> wrote in message
    news:42749b5b$0$23644$...
    > Jay wrote:
    >> http://www.wanganui.govt.nz/news/commsLink/index.asp
    >>
    >> When viewed with Firefox.
    >> The show/hide function doesn't work as expected (evident when viewed).
    >> Anyone know why? Which bit is FF not liking and how can it be altered to
    >> be cross browser friendly?
    >>

    >
    > It is better to have the hidden <li> elements shown by default and
    > use JavaScript to hide them when the page loads. That way you don't
    > need a separate link for non-JavaScript browsers.
    >
    > At the same time, you could assign the onclick function to each li,
    > saving some code.
    >
    > The easy (for you) fix is to use:
    >
    > ...style.display = 'none'
    >
    > to hide the links, and ...style.display ='' to show them again.
    >
    > Another tip is to use one function to toggle between show and hide,
    > rather than have a separate link to do it. I've created a
    > dependency between the <span> and the ULs that are hidden based on
    > the id.
    >
    > A re-write of a snipped below to show how to do some of the above,


    I've used your suggesting below and it works perfectly!
    (still on the Dev box at the moment)

    Many thanks

    Jay


    > <script type="text/javascript">
    > function initLinks(){
    > // Hide all the ULs
    > var base = document.getElementById('links');
    > var ul = base.getElementsByTagName('ul');
    > var i = ul.length;
    > while (i--){
    > ul.style.display = 'none';
    > }
    > // Add onclick to spans
    > var sp = base.getElementsByTagName('span');
    > i = sp.length;
    > while (i--) {
    > if ( sp.className && 'greyBack' == sp.className ) {
    > sp.onclick = function() {showLinks(this)};
    > }
    > }
    > }
    > function showLinks(x){
    > x = x.id.split('-')[1];
    > x=document.getElementById(x);
    > x.style.display = (x.style.display == '')? 'none':'';
    > }
    > window.onload = initLinks;
    > </script>
    >
    > <div id="links">
    > <img align="absmiddle" hspace="5" src="images/expandIssues.gif">
    > <span id="s-191TO200" class="greyBack">Issues 191-200 </span>
    > <br>
    > <ul id="191TO200">
    > <li><a href="issue200.asp" >Issue #200</a> 2nd April 2005</li>
    > <li><a href="issue199.asp" >Issue #199</a> 26th March 2005</li>
    > <li><a href="issue191.asp" >Issue #191</a> 29th January 2005</li>
    > </ul>
    > <img align="absmiddle" hspace="5" src="images/expandIssues.gif">
    > <span id="s-181TO190" class="greyBack">Issues 181-190 </span>
    > <br>
    > <ul id="181TO190">
    > <li><a href="issue190.asp" >Issue #190</a> 2nd April 2005</li>
    > <li><a href="issue189.asp" >Issue #189</a> 26th March 2005</li>
    > <li><a href="issue181.asp" >Issue #181</a> 29th January 2005</li>
    > </ul>
    > <img align="absmiddle" hspace="5" src="images/expandIssues.gif">
    > <span id="s-171TO180" class="greyBack">Issues 171-180 </span>
    > <br>
    > <ul id="171TO180">
    > <li><a href="issue180.asp" >Issue #180</a> 2nd April 2005</li>
    > <li><a href="issue179.asp" >Issue #179</a> 26th March 2005</li>
    > <li><a href="issue171.asp" >Issue #171</a> 29th January 2005</li>
    > </ul>
    > </div>
     
    Jay, May 2, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. murmur
    Replies:
    1
    Views:
    460
    Jerry Perkins
    Oct 27, 2003
  2. HoDeHoo

    Layers Problem

    HoDeHoo, Feb 27, 2006, in forum: HTML
    Replies:
    0
    Views:
    450
    HoDeHoo
    Feb 27, 2006
  3. HoDeHoo

    PHP/Layers Problem

    HoDeHoo, Feb 27, 2006, in forum: HTML
    Replies:
    6
    Views:
    541
    Neredbojias
    Feb 28, 2006
  4. subtenante

    Design problem : security layers

    subtenante, Apr 17, 2007, in forum: Java
    Replies:
    26
    Views:
    854
    subtenante
    Apr 19, 2007
  5. Bob

    HTML CSS layers problem

    Bob, Jun 28, 2008, in forum: HTML
    Replies:
    3
    Views:
    470
Loading...

Share This Page