midnitesun 0 Report post Posted December 26, 2006 so here is a simple tutorial of a code i wrote today and thought it may prove useful to someone out here toowhat it does is show a div when the page loads and then when user clicks on a link the div is hidden another div is shown ,you can do a lot based on this code <body onload="hide('xx')"><script language="JavaScript" type="text/javascript">function hide(obj){document.getElementById(obj).style.visibility="hidden";}function show(obj){document.getElementById(obj).style.visibility="visible";}</script><a href="gg" class="main" onclick="hide('ss');show('xx');return false;">change div</a><div id="ss" align="center">this is the div displayed when page loads</div><div id="xx" align="center">now this div is shown because you clicked on the link</div> Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted December 26, 2006 Looks interesting but could use a demo link of some sorts just in case something could go wrong. Share this post Link to post Share on other sites
midnitesun 0 Report post Posted December 26, 2006 yea thanks mike , made some changes and put a demo link too <body onload="hide('xx')"><script language="JavaScript" type="text/javascript">function hide(obj){document.getElementById(obj).style.visibility="hidden";}function show(obj){document.getElementById(obj).style.visibility="visible";}</script><div id="ss" align="center"><a href="gg" class="main" onclick="hide('ss');show('xx');return false;">change div</a><p>this is the div displayed when page loads</div><div id="xx" align="center"><a href="gg" class="main" onclick="hide('xx');show('ss');return false;">show previous div</a><p>now this div is shown because you clicked on the link</div> demo Share this post Link to post Share on other sites
salamangkero 0 Report post Posted December 26, 2006 ...you can do a lot based on this codeI so agree. One of the more readily apparent uses of this is in organizing content on your page. For another demo, if it is not too much, click here. As you can see, the links are sorted by category. Using the script avoids the visual clutter typical of the merest link directories.I'd like to add, if it is not too much, that there is more than one way to skin a cat, so to speak. It is not too complicated, though. It's a few letters shorter although it does nothing too spectacular.function hide(obj){document.getElementById(obj).style.display="none";}function show(obj){document.getElementById(obj).style.display="block";}It is what I actually use.Be reminded, though, that although you do not present all the content in these divs unless the user desires so, the browser will still download all the stuff in those divs whether the user actually views it or not. It goes to say that this approach is not desirable if you plan to pop long texts or humongous images in and out of visual existence. Unless, of course, you are a cold hearted 3@$+@rd who does not care if the page loads too slowly for us dialup users. Otherwise, it'd probably be better to use an actual hyperlink Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted December 26, 2006 Ah I thought that it looked familiar whats funny the site that does the same thing only he uses more code . Of course I think their is more to it in his coding though. Maybe this could help give your code another possible update in the future.http://www.flooble.com/scripts/expand.phpJS <!-- flooble Expandable Content header start --><script language="javascript">// Expandable content script from flooble.com.// For more information please visit:// http://http://www.flooble.com/scripts/expand.php//'>http://http://www.flooble.com/scripts/expand.php// Copyright 2002 Animus Pactum Consulting Inc.//----------------------------------------------var ie4 = false; if(document.all) { ie4 = true; }function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId); if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; } else { link.innerHTML = '+'; d.style.display = 'none'; } }</script><!-- flooble Expandable Content header end --> HTML<!-- flooble Expandable Content box start --><div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td></td><td align="right">[<a title="show/hide" id="exp1167161124_link" href="java script: void(0);" onclick="toggle(this, 'exp1167161124');" style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table><div id="exp1167161124" style="padding: 3px;"></div></div><noscript><a href="http://http://www.flooble.com/scripts/expand.php expanable content box is made using a free javascript from flooble</a> | Free <a href="http://http://www.flooble.com/scripts/animate.php text javascript script</a></noscript><!-- flooble Expandable Content box end --> This is another version tat I know of.http://forums.xisto.com/no_longer_exists/I would think the next step would be in your coding would be to try and mimic the examples I showed you and improve on them. Share this post Link to post Share on other sites
matak 2 Report post Posted December 26, 2006 (edited) very nice piece of code i must say..i was interested in some way of loading certain div from database or another file. when that would be possible and with this code you shown someone could make customizable menus for users on their site easily.what would be the simplest way to load certain div from database? (sorry for OT post)loading divs from database could be interesting beacouse users could maybe create their own menus and store them to database so that later they could easily access them when they login to site... Edited December 26, 2006 by matak (see edit history) Share this post Link to post Share on other sites
delivi 0 Report post Posted December 26, 2006 wow thats a great piece of code Share this post Link to post Share on other sites
Sharn 0 Report post Posted December 27, 2006 Wow. Been wondering how to do this for a while now. Thanks a lot for the code, midnitesun! Share this post Link to post Share on other sites
QuickSilva 0 Report post Posted January 15, 2007 Quite nice... Very effective if used in the right place. And some other examples too . Excellent! Share this post Link to post Share on other sites
farsiscript 0 Report post Posted January 16, 2007 nice dear midnitesun i really need this tut about close and open div with click , but if i have many div in page what can i do for close and open div's via click ? do you have sample codelike thishttp://forums.xisto.com/no_longer_exists/but i dont know how can i use it Share this post Link to post Share on other sites
coby 0 Report post Posted February 18, 2007 Thanks a lot for the code, Very effective if used in the right place. Excellent!coby Share this post Link to post Share on other sites
