Javscript switch states: show / hide

Discussion in 'JavaScript' started by m-powa, Mar 20, 2009.

0
  1. #1
    I need to finish a javascript function asap, but it doesnt work in mozzilla. The function needs to switch modes between show and hide and work on all popular browser. When clicked is on show open a new url tab. Default state is hide. I want to use as little code as possible.

    <script type="text/javascript">
    function toggleDisplay()
    {

    if(hidden.style.display=="none")
    {

    hidden.style.display="";

    javascript:window.open("http://www.yahoo.co.uk/");

    return false;
    }
    else {hidden.style.display="none"; }

    }
    </script>

    <a onclick="toggleDisplay()" onmouseover="this.style.cursor='pointer'"><u>Click to reveal hidden content</u></a><br/>
    <span id="hidden" style="display:none"><br/>here is the hidden content Yes</span>

    Bonus for first working example.
     
    m-powa, Mar 20, 2009 IP
  2. french-webbie

    french-webbie Peon

    Messages:
    194
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here's the javascript part:
    
function showDiv(div_id) {
	document.getElementById(div_id).style.visibility = 'visible';
	document.getElementById(div_id).style.display = 'inline';
}

function hideDiv(div_id) {
	document.getElementById(div_id).style.display = 'none';
	document.getElementById(div_id).style.visibility = 'hidden';
}

function showHideDiv(div_id) {
	if (document.getElementById(div_id).style.visibility == 'visible') {
		hideDiv(div_id);
	}
	else {
		showDiv(div_id);
	}
}
    PHP:
    And to call it:
    onclick="showHideDiv('div-to-show-hide')"
    PHP:
    <div id="div-to-show-hide" style="display: none; visibility: hidden;">Show/hide me</div>
    PHP:
     
    french-webbie, Mar 20, 2009 IP
    m-powa likes this.
  3. m-powa

    m-powa Peon

    Messages:
    79
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Awesome. Nice bit of code and easy to scale. Thanks french-webbie !
     
    m-powa, Mar 20, 2009 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Yes, I agree, it is very nice - now, I'd like to extend that to grasp a certain TagName (instead of ID) and use a if class == "something" to select all of the instances of that class - is that somehow possible by modifying this code somehow? I tried using getelementbytagname and modify it myself, but didn't really have any luck with it...
     
    PoPSiCLe, Mar 20, 2009 IP
  5. ads2help

    ads2help Peon

    Messages:
    2,142
    Likes Received:
    67
    Best Answers:
    1
    Trophy Points:
    0
    #5
    I think no, you have to stick with getElementById.

    Maybe you can put the IDs into an array and loop thru them in a function.

    - ads2help
     
    ads2help, Mar 21, 2009 IP
  6. aaron d.

    aaron d. Peon

    Messages:
    37
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6 
    
 var divs = window.document.getElementsByTagName("DIV");
    for (var i = 0; i < divs.length; i++) {
        if (/someclassname/.test(divs[i].className)) {
        showHideDiv(divs[i].id)
        }
     }
    Code (markup):
     
    aaron d., Mar 22, 2009 IP
  7. m-powa

    m-powa Peon

    Messages:
    79
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    one snag so far, the html &amp; isn't parsed in javascript window open in Firefox.

    javascript:window.open("http://www.example.co.uk/page.php&amp;s=1");
     
    m-powa, Mar 23, 2009 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    Place the javascript inside /* [[CDATA */-tags
    <script type="text/javascript">
    /* <![CDATA[ */
    script goes here
    /* ]]> */
    </script>

    and don't encode the & into &amp; - it will still validate
     
    PoPSiCLe, Mar 23, 2009 IP
  9. m-powa

    m-powa Peon

    Messages:
    79
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    That's the boy! Thanks Popsicle. (I almost had it, apart from the c style comments)
     
    m-powa, Mar 24, 2009 IP
  10. kenfrank

    kenfrank Peon

    Messages:
    28
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    What does that tagging do?

    Usually I just do this for older browsers, is this wrong?

    
<head>
<script type="text/javascript">
// <!-- hide from older browsers

script goes here

// -->
</script>
</head>
    PHP:
     
    kenfrank, Mar 24, 2009 IP
  11. french-webbie

    french-webbie Peon

    Messages:
    194
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    No, it's not wrong at all, but if you want to be XHTML compliant and use the doctype
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    You should use the CDATA structure, like
    
<script type="text/javascript">
//<![CDATA[
javascript code goes here
//]]-->
</script>
    PHP:
    This tagging prevents the XML parser to parse the javascript code.
    The easiest approach is to put the javascript code in another file, but for some pages it can get a bit complicated, thus the use of that tagging.

    A goog habit is to validate your pages with http://validator.w3.org/
     
    french-webbie, Mar 24, 2009 IP