SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with if statement

    hi,

    i am making a collapsable menu and at the moment are using show and hide functions to show and hide a <ul> when a link is clicked... which is working fine. What i am unsure of to do next, is how to have some sort of 'if' statement that will work so that if the menu is being shown, when the link's clicked it will apply the hide function, and vice versa. can anyone give me a hand or point me in the right direction of a tutorial where i can read up on how to do so. ill include my current code below.
    Code:
    function show() {
        for(var i=0; i<arguments.length; i++) {
            document.getElementById(arguments[i]).style.display = "block";
        }
    }
    
    function hide() {
        for(var i=0; i<arguments.length; i++) {
            document.getElementById(arguments[i]).style.display = "none";
        }
    }
    
    var str='<style type="text\/css" media="screen">';
    str+='#menu1, #menu2, #menu3{display:none;}';
    document.write(str+'<\/style>');
    HTML Code:
    <a onclick="show('menu1');hide('menu2');return false;" href="#">menu</a>
    thanks in advance
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe only use one function?
    Code:
    <div id="output">test</div>
    
    <a onclick="showHide('output'); return false;" href="#">menu</a>
    
    <script>
    function showHide() {
        for(var i=0; i<arguments.length; i++) {
    	var element = document.getElementById(arguments[i]);
    
    	element.style.display = (element.style.display == "none") ? "block" : "none";
        }
    }
    </script>

  3. #3
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome thanks man, i only dabble in scripting when i need to so usually miss the most obvious solutions.

    is there a way i can change the background image along with the display change? i tried a few things that made sense to me but didnt do a thing
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can change whatever you want with JavaScript. Just access the element and then change whatever CSS property you need to change. Note that you need to use camel-case when changing the CSS. So "background-image" becomes backgroundImage:
    Code:
    myElement.style.display.backgroundImage = "blah.gif";

  5. #5
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool you learn sumthin new every day.

    so to get this straight, i want to change the background of the link being clicked... so would i duplicate the function and instead of element.style.display = (element.style.display == "none") ? "block" : "none"; id have element.style.backgroundImage = "blah.gif") ? "blah2.gif" : "blah.gif";
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends what you want your function to do. And if you will reuse it in other parts of the code. You could the code changing the background image in another function. Again, it depends if you will reuse code.

  7. #7
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool thanks for the help man, cant get the background image to swap but ill keep workin at it. cheers
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella


Bookmarks

Posting Permissions

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