blacksharkmedia Posted July 8, 2010 Share Posted July 8, 2010 Hello all, I have a layout with 2 sides(left side and right side). I get from mysql the menus name and content text for every menu. I want when I click o a menu on the left side div to display in the right side div the content text for that menu. Example: LEFT SIDE div | RIGHT SIDE div ______________|_____________ Left menu1 | menu1 content text Left menu2 | content text menu1 any ideas? Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 8, 2010 Share Posted July 8, 2010 For each menu item create a DIV for the content to be displayed. Each div should have a name in the format: "content_1", "content_2" etc. In the menu items have an onclick event which calls a function and passes the number for each div. The function can iterate through all of the divs and set the display property for each div based upon the one which was selected. Example: <html> <head> <script type="text/javascript"> function showContent(menuID) { var index = 1; var divObj; while(document.getElementById('content_' + index)) { divObj = document.getElementById('content_'+index); divObj.style.display = (index==menuID) ? 'block' : 'none'; index++; } return; } </script> </head> <body> <div id="menu" style="border:1px solid black;float:left;"> <a onclick="showContent('1');">Menu 1</a><br /> <a onclick="showContent('2');">Menu 2</a><br /> <a onclick="showContent('3');">Menu 3</a><br /> </div> <div id="content_1" style="border:1px solid black;display:none;"> Content for menu item 1<br /> Content for menu item 1<br /> Content for menu item 1<br /> </div> <div id="content_2" style="border:1px solid black;display:none;"> Content for menu item 2<br /> Content for menu item 2<br /> Content for menu item 2<br /> </div> <div id="content_3" style="border:1px solid black;display:none;"> Content for menu item 3<br /> Content for menu item 3<br /> Content for menu item 3<br /> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
blacksharkmedia Posted July 9, 2010 Author Share Posted July 9, 2010 Many thanks for the replay I've tested the example you provided and it works with default values but not to the ones I have(my right div has custom position) <script type="text/javascript"> function showContent(menuID) { var index = 1; var divObj; while(document.getElementById('content_' + index)) { divObj = document.getElementById('content_'+index); divObj.style.display = (index==menuID) ? 'block' : 'none'; index++; } return; } </script> <div id="menu" style="border:1px solid black;float:left;"> <a onclick="showContent('1');">Menu 1</a><br /> <a onclick="showContent('2');">Menu 2</a><br /> <a onclick="showContent('3');">Menu 3</a><br /> </div> <div id="content_1" style=" width: 260px;height: 490px;position:relative;right: 20px;top: -475px;overflow: hidden;float:right;display:none;"> Content for menu item 1<br /> Content for menu item 1<br /> Content for menu item 1<br /> </div> Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 9, 2010 Share Posted July 9, 2010 Seriously? You're giving the DIV a relative position of "top: -475"!!! That is 475 pixels above the viewable area of the browser window. The DIV has a height of 490 pixels. So, IF the DIV had content to completely fill the height the user would only see the bottom 15 pixels of it. The code is working perfectly - you just can't see the div because you placed it outside the viewable area. Quote Link to comment Share on other sites More sharing options...
blacksharkmedia Posted July 9, 2010 Author Share Posted July 9, 2010 Yes I'm amased too, but curiously it displays ok in both firefox & IE. Thanks for the answers but I will not use this solution anymore, in exchange I will make use of POST and GET and I will finish it in 2 sec. Thanks again for the help Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 9, 2010 Share Posted July 9, 2010 No it does not display OK in IE & FF. If you remove the "display:none" from the DIV style properties you still won't see it. Because it is outside the page boundries - at least using the code you provided. The position is relative. So, if you place the code for that DIV where the "inline" position would be at least 475 pixels down from the top, then it will be visible. Are you purposefully setting that value to -475 for a reason or are you setting it through trial and error. If the latter you may need to reevaluate your placement/styles as there seems to be a problem. Quote Link to comment Share on other sites More sharing options...
blacksharkmedia Posted July 9, 2010 Author Share Posted July 9, 2010 Hy, That div is inside another div, a container, and yes it was a trial and error positioning, the design is pretty simple so it won't be modified on the future. Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.