SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: help with if statement
-
Apr 6, 2007, 00:48 #1
- 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>
Heavens Rejects : Online Clothing Store
Alternative Clothing : Mr Blonde
Front end development : By the Webfella
-
Apr 6, 2007, 02:28 #2
- 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>
-
Apr 6, 2007, 03:03 #3
- 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 thingHeavens Rejects : Online Clothing Store
Alternative Clothing : Mr Blonde
Front end development : By the Webfella
-
Apr 6, 2007, 03:08 #4
- 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";
-
Apr 6, 2007, 03:24 #5
- 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
-
Apr 6, 2007, 04:37 #6
- 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.
-
Apr 6, 2007, 07:06 #7
- 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