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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with showing/hiding div layers

    Hi,

    I'm having trouble working out why my javascript code is showing more div layers that what I would like on each click of a href="javascript:changeDiv(1,1,7); button/link.

    Apologies for the size of the post but I presumed the more I supply the easy it will be to understand where I'm coming from......

    My setup up is this:

    3 column layout

    column 1 = a uk map graphic, with 7 clickable image maps relating to 7 areas of the uk (ie midlands, north west, north east etc)

    column 2 = when a user clicks an area, this column is populated with a clickable list of customers from that particular area

    column 3 = when a use clicks a customer, this column is populated with a testamonial from that particular customer

    My code uses the following javascipt functions:

    //the function to begin the change of the div been shown

    function changeDiv(pass, level, count) {
    var tonum = level+count;
    for (j=level;j<tonum;j++)
    {
    if (j == pass)
    {
    showDiv(j);
    }
    else
    {
    hideDiv (j);
    }
    }
    }

    //the function to show that particular div

    function showDiv(pass) {
    var divs = document.getElementsByTagName('div');
    for(i=0;i<divs.length;i++){
    if(divs[i].id.match(pass)){
    if (document.getElementById)
    divs[i].style.visibility="visible";
    else
    if (document.layers) // Netscape 4
    document.layers[divs[i]].display = 'visible';
    else // IE 4
    document.all.hideshow.divs[i].visibility = 'visible';
    }
    }
    }

    //the function to hide the other divs which aren't selected

    function hideDiv(pass) {
    var divs = document.getElementsByTagName('div');
    for(i=0;i<divs.length;i++){
    if(divs[i].id.match(pass)){//if they are 'see' divs
    if (document.getElementById) // DOM3 = IE5, NS6
    divs[i].style.visibility="hidden";// show/hide
    else
    if (document.layers) // Netscape 4
    document.layers[divs[i]].display = 'hidden';
    else // IE 4
    document.all.hideshow.divs[i].visibility = 'hidden';
    }
    }
    }

    The 7 region divs in column 2 use ids 1-7 id="1", id="2" etc

    The testamonial divs in column 3 use ids starting from 8, going up ie. id="8", id="9", id="10" etc

    The functions and parameters I call to display the 7 regions are:
    href="javascript:changeDiv(1,1,7);"
    href="javascript:changeDiv(2,1,7);"
    href="javascript:changeDiv(3,1,7);"
    href="javascript:changeDiv(4,1,7);"
    href="javascript:changeDiv(5,1,7);"
    href="javascript:changeDiv(6,1,7);"
    href="javascript:changeDiv(7,1,7);"

    My issue I haven't been able to solve is this:

    when the 1st region script is called (href="javascript:changeDiv(1,1,7);") my div in column 3 with id="10" displays.

    I presume this has something to do with the fact that this id includes the number 1, even though I haven't actually called the function href="javascript:changeDiv(10,1,7);"

    Please can someone enlighten me!?

    Once I have this working correctly I expect to have around 70 individual divs, each numbered accordingly ie. 21, 43, 55 etc etc, so in the current set-up any number of divs will be displayed at each function call.

    Thanks in advance for any assistance.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    id paseed as parameter is a string, not a number, thus is you want to use id for a further math add/substract or as an index for an array you should first transform it in a number like this:

    Number(string)
    or
    parseInt(string)
    or
    string*1
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for that Kor...

    can I presume that I need to add in something like (in bold):

    function changeDiv(pass, level, count) {
    var tonum = level+count;
    for (j=level;j<tonum;j++)
    {
    if (j == pass)
    {
    showDiv(Number(j));
    }
    else
    {
    hideDiv(Number(j));
    }
    }
    }


    Or is there an addition to make within the showDiv(pass) and hidsDiv(pass) functions?

    thanks again

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Nope, j is a number. Try:

    function changeDiv(pass, level, count) {
    var pass=pass*1;
    var level=level*1;
    var count=count*1
    ...
    the rest of the code

    2. on the other hand the modern / NS4 and IE4 variants are not correct

    - div[ i ] is an object, not an id
    - to use the indent as id, you should reset it as String
    - NS4 uses hide/show value for visibility
    - IE 4 uses also object.style.attribute, same as modern browsers

    Thus try:


    ...
    else
    if (document.layers) // Netscape 4
    document.layers[String(i)].visibility = 'show';
    else // IE 4
    document.all[String(i)].style.visibility = 'visible';
    }
    ...

    ...
    if (document.layers) // Netscape 4
    document.layers[String(i)].visibility = 'hide';
    else // IE 4
    document.all[String(i)].style.visibility = 'hidden';
    }
    ...
    Last edited by Kor; 12-16-2004 at 12:13 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply...

    but unfortunately, it still displays div ids 1 and 10 when the link to href="javascript:changeDiv(1,1,7);" is pressed.

    Are there any other areas that could be effecting which divs display on certain function calls?

    ta.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I reckon your code looks much too intricate...you need to transform strings in number back and forth...

    Wouldn't be easier to use the index order instead of id? leme think, and if time, I'll make an example
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you could Kor that would be excellent and much appreciated.

    Thanks

  • #8
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi all,

    At the recommendation of another programmer I have redone the functions to show and hide layers to what appears to be a cleaner and more simpler piece of code.

    If you look at the link below, the html code and script is exactly what has been recommended but I'm still having no joy as this page throws out errors.

    Would you have any comments on this.....

    http://www.thompsonsuk.net/customer...inprogress2.htm

    Thanks for your help!

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    The link posted in invalid...

    Question: Do you really need your code to be NS4 and IE4 compatible ?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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