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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Location
    SC, USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Annoying problem that's probably too simple for me to see

    I've got two div's with different pictures in them (pictures also act as links). I wrote a function so that when you clicked on whichever picture/div was on top the other one would then show up on top. However, when I try clicking on the picture/link I get a JavaScipt error that refers to the first character of the line containting the picture wrapped in the link wrapped in the div. Anyone out there know why this isn't working??

    http://www.clemson.edu/~csencsm/games/temp.html
    ----------------------------------------------------
    <html>
    <head>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function flip(cell){
    var the_cell = eval("document.all." + cell);
    if(parseInt(the_cell.z-index) == -1) the_cell.z-index = 1;
    else the_cell.z-index = -1;
    }

    // End -->
    </script>

    </HEAD>

    <BODY>
    <div style="position:absolute; top:0; left:0"><a href="#" onClick="flip('aa');"><img src="card_back.jpg" border=0></a></div>
    <div id="aa" style="position:absolute; top:0; left:0; z-index:-1"><a href="#" onClick="flip('aa');"><img src="zero.jpg" border=0></a></div>
    <br><br><br>

    </body>
    </html>

    Thanks for helping.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    I think it should be


    the_cell.style.z-index

    Just to point out as well that document.all is IE only, you should go with something like




    <html>
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function flip(cell){
    if(document.getElementById(cell).style.zIndex==3){
    document.getElementById(cell).style.zIndex=1
    }
    else{
    document.getElementById(cell).style.zIndex=3
    }

    }

    // -->
    </script>

    </HEAD>
    <BODY>
    <div style="position:absolute; top:0; left:0;z-index:2">
    <a href="#" onClick="flip('aa');">
    <img src="card_back.jpg" border=0>
    </a>
    </div>
    <div id="aa" style="position:absolute; top:0; left:0; z-index:3">
    <a href="#" onClick="flip('aa');">
    <img src="zero.jpg" border=0>
    </a>
    </div>

    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    May 2004
    Location
    SC, USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Whoo Hoo!

    [FONT=Times New Roman]Thanks Mr. J, that did the trick. Can't believe that I didn't see I left out 'style'. And I never new about getElementById(), I guess I need to find myself a new resource. Thanks again for helping me with this little delimma.
    (\/)att

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    If you are wanting your scripts to work in browsers other than IE then

    document.getElementById is the way to go.

    Without going into a lengthy novel concerning browsers and how Javascript and CSS are rendered or interpreted defferently depending on the browser I would at least download a copy of Mozilla so that you can see how things look and work in both browsers.

    Mozilla is supposed to be Standards compliant and is relatively new compared to IE but the way Mozilla is going I reckon it is going to be some serious competition for IE


  •  

    Posting Permissions

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