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 7 of 7
  1. #1
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    Problem with onClick script

    Hi,

    Does anyone know how I can edit this script to meet my requirements?

    The code below reveals the hidden text "Hello Joe" when the user clicks on the hyperlink "TEST-LINK1".

    This works fine, however, I also would like previously revealed text (HELLO JOE) to be rehidden when the user clicks on another hyperlink, eg "TEST-LINK2" below which reveals the text "BYE JOE".

    Any ideas on how to do this?

    SCRIPT:

    PHP Code:
    <!-- ############# REVEAL HIDDEN TEXT ############# -->
    <script language="javascript" type="text/javascript">
    function 
    displayDiv()
    {
    var 
    dv document.getElementById("revealonclick");
    dv.style.display = ( dv.style.display != "block" ) ? "block" "none";
    }
    </script>
    <!-- ############# END REVEAL HIDDEN TEXT ############# --> 


    BODY:
    PHP Code:

    <span onclick="displayDiv('revealonclick1'); return false;">TEST-LINK-1</span>
    <
    div id="revealonclick1">  

    HELLO JOE

    </div>


    <
    span onclick="displayDiv('revealonclick2'); return false;">
    TEST-LINK-2
    </span>

    <
    div id="revealonclick2">  

    BYE JOE 

    </div

    CSS:
    PHP Code:
    #revealonclick{display:none;} 
    #revealonclick1{display:none;} 
    #revealonclick2{display:none;} 
    #revealonclick3{display:none;} 
    On the Internet, no one knows you’re a minifig…

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    CSS
    Code:
    .HideMe {display:none;}
    html
    Code:
    <span onclick="DisplayBox(1)"> Test One! </span>
    <div id="BoxToBeDisplayed1" class="HideMe">
    text
    </div>
    
    <span onclick="DisplayBox(2)"> Test Two! </span>
    <div id="BoxToBeDisplayed2" class="HideMe">
    text
    </div>
    javascript
    Code:
    <script type="text/javascript">
    function DisplayBox(index)
    {
    HideAll();
    var box = "BoxToBeDisplayed" + index;
    document.getElementByID(box).style.display = "block";
    }
    
    function HideAll()
    {
    document.getElementByClass("HideMe").style.display="none";
    }
    </script>
    should work but didn't test

    Edit: Also should have been posted in javasript forum

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    Partizan (11-15-2011)

  • #3
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    alykins, thank you for the feedback and your help. Also, apologies for not posting it in the Javascript section.

    I am just trying to get it to work and have a few basic questions.

    1. is this script meant to replace the script I had, or is it to be added to it?
    2. do I need to add

    #BoxToBeDisplayed1{display:none;}
    #BoxToBeDisplayed2{display:none;}

    to the css file, or something in addition to .HideMe {display:none;} ?

    Thanks!
    On the Internet, no one knows you’re a minifig…

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    replaces all you had... let's go through the logic of it

    onload all the boxes have class HideMe applied with display none, therefore no box will be displayed. On the click you send the index of the box you are targeting to the script function. The function fires, calls the other function (HideAll) which will go through and re-hide all boxes with that class (therefore hiding any shown boxes) then it will go through and un-hide the desired box

    (*or at least it should *)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    Partizan (11-16-2011)

  • #5
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    alykins,

    thanks for the explanation!

    I have copied the code word for word but it is not yet working...

    fyi, I have placed the script between HEAD tags.
    Last edited by Partizan; 11-16-2011 at 03:55 PM.
    On the Internet, no one knows you’re a minifig…

  • #6
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post
    Sir, did you see my this thread?

    http://www.codingforums.com/showthread.php?t=243811

    this is smiliar to current thread but i could not get proper solution.

    Please guide me also.

    Thanks

  • Users who have thanked tqmd1 for this post:

    Partizan (11-16-2011)

  • #7
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by tqmd1 View Post
    Sir, did you see my this thread?

    http://www.codingforums.com/showthread.php?t=243811

    this is smiliar to current thread but i could not get proper solution.

    Please guide me also.

    Thanks
    yes i did see that link- and I also followed it- why you have so much preventative "security" around your source code is beyond annoying but seeing scripts that (on first glance didn't really peruse them) seem to try and search my cookies for user info I would suggest no one else go to this link-

    Edit: Investigated it some more and it is behind a forum login thingy and the user id scripts and what not are not malicious; it is a required login site crap- can you post your code that you are trying in your thread- no one is helping because you have made it difficult to help
    Last edited by alykins; 11-16-2011 at 03:50 PM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox 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
    •