Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

What's wrong with this javascript?

Options
  • 29-11-2005 10:55am
    #1
    chabsey
    Registered Users Posts: 1,341 ✭✭✭


    I'm trying to show and hide a layer based on a click. The previous script didn't work in Firefox, this new version doesn't work in any browser! What's wrong with it?!


    function toggleVisibility(me) {
    var object = document.getElementById(me);
    state = object.style.visibility;
    if (state == "hidden"){
    object.style.visibility ="visible";
    image_text.innerText="Hide Images";
    }
    else {
    object.style.visibility ="hidden";
    image_text.innerText="Show Images";
    }
    }



    Thanks.


Comments

  • Options
    #2
    Eoin
    Registered Users Posts: 21,257 ✭✭✭✭Eoin


    How are you invoking the JScript function? works fine for me in IE and Firefox using the code like this:

    [HTML]<html>
    <head>
    <title>test</title>
    </head>
    <script type="text/JavaScript">
    function toggleVisibility(me)
    {
    var object = document.getElementById(me);
    state = object.style.visibility;
    if (state == "hidden")
    {
    object.style.visibility ="visible";
    image_text.innerText="Hide Images";
    }
    else
    {
    object.style.visibility ="hidden";
    image_text.innerText="Show Images";
    }
    }
    </script>
    <body>
    <div id="theDiv">Some Text</div>
    <input type="button" onClick="toggleVisibility('theDiv')" value="Hide Images" id="image_text">
    </body>
    </html>[/HTML]


  • Options
    #3
    chabsey
    Registered Users Posts: 1,341 ✭✭✭chabsey


    eoin_s wrote:
    How are you invoking the JScript function? works fine for me in IE and Firefox using the code like this:

    This is the invocation:

    <a href="javascript:toggleVisibility('CarPhoto')"><span id="image_text" >Hide
    Images</span></a>

    Still doesn't work. I presume it's something to do with me not using a button?


  • Options
    #4
    Eoin
    Registered Users Posts: 21,257 ✭✭✭✭Eoin


    chabsey wrote:
    This is the invocation:

    <a href="javascript:toggleVisibility('CarPhoto')"><span id="image_text" >Hide
    Images</span></a>

    Still doesn't work. I presume it's something to do with me not using a button?

    I don't think it's to do with a button. You are sending "CarPhoto" in as the object to get the style of, but where is that object specified?


  • Options
    #5
    chabsey
    Registered Users Posts: 1,341 ✭✭✭chabsey


    eoin_s wrote:
    I don't think it's to do with a button. You are sending "CarPhoto" in as the object to get the style of, but where is that object specified?


    Just above the togglevisibility, this div is set :

    <div id="CarPhoto" >
    PHOTO HERE
    </div>


    And in the CSS it is declared as:


    #CarPhoto {
    float:right;
    margin-left: 5px;
    padding: 2px;
    background: #F0F0F0;
    }


  • Options
    #6
    Eoin
    Registered Users Posts: 21,257 ✭✭✭✭Eoin


    Try this - I changed it so instead of using an ID in the css, I used two classnames instead

    [HTML]<html>
    <head>
    <title>test</title>
    </head>
    <script type="text/JavaScript">
    function toggleVisibility(me)
    {
    var sClass = document.getElementById(me).className;

    if (sClass == "ShowCarPhoto")
    {
    document.getElementById(me).className = "HideCarPhoto";
    document.getElementById("image_text").innerHTML ="Show Images";
    }
    else
    {
    document.getElementById(me).className = "ShowCarPhoto";
    document.getElementById("image_text").innerHTML ="Hide Images";
    }
    }
    </script>
    <style type="text/css">
    .ShowCarPhoto
    {
    float:right;
    margin-left: 5px;
    padding: 2px;
    background: #F0F0F0;
    visibility: visible;
    }
    .HideCarPhoto
    {
    visibility: hidden;
    }
    </style>
    <body>
    <a href="javaScript: toggleVisibility('CarPhoto')"><div id="image_text">Hide Images</div></a>

    <div class="ShowCarPhoto" id="CarPhoto">
    PHOTO HERE
    </div>
    </body>
    </html>[/HTML]


  • Advertisement
  • Options
    #7
    mewso
    Moderators, Science, Health & Environment Moderators Posts: 8,960 Mod ✭✭✭✭mewso


    The problem may be with the javascript call in the href. You could add ";return false" to the end or change it to href="#" onclick="javascript..."


  • Options
    #8
    Eoin
    Registered Users Posts: 21,257 ✭✭✭✭Eoin


    OP - how did you get on?


  • Options
    #9
    chabsey
    Registered Users Posts: 1,341 ✭✭✭chabsey


    eoin_s wrote:
    OP - how did you get on?

    Still didn't work for me. I've ended up using a version that works in IE but not in Firefox. Baffles me what I was doing wrong.


  • Options
    #10
    Eoin
    Registered Users Posts: 21,257 ✭✭✭✭Eoin


    chabsey wrote:
    Still didn't work for me. I've ended up using a version that works in IE but not in Firefox. Baffles me what I was doing wrong.

    unless you post your HTML, not much we can help you with - I could only include the snippets you posted.


Advertisement