| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 3 of 3
Thread: One Link: Drop Down, Pull Up
-
Dec 27, 2006, 14:52 #1SitePoint Zealot
- Join Date
- Jun 2006
- Posts
- 144
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
One Link: Drop Down, Pull Up
I'm messing around with javascript and one of the most common uses for javascript is to make a drop down menu like the one found at the top of my js test page:
http://www.mndaily.com/ddtest2/test.php#
here is my code for this particular drop down thing
Is there a cleaner or better way to do this?Code:<head> <script type="text/javascript"> function down(){ document.getElementById('outer').innerHTML="<u href=# style=\"color: blue; cursor:pointer;\" onclick=up()>compress</u> <p><li>asdf<li>fsdajlealasdf<li>i like to eat subway<li>pita pit is good but expensive</p>" } function up(){ document.getElementById('outer').innerHTML="<u href=# style=\"color: blue; cursor:pointer;\" onclick=down()>expand</u>" } </script> </head> <h2>// TESTS A DROP DOWN PULL UP MENU</h2> <div id="outer"><u href=# style="color: blue; cursor:pointer;" onclick=down()>expand</u> </div>
-
Dec 27, 2006, 15:37 #2SitePoint Addict
- Join Date
- Oct 2005
- Location
- South Dakota
- Posts
- 215
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
what i like to do is to make a div that is position:absolute and visibility:hidden then put all the info you need into that div. then set an id to that div, and have javascript copy all the innerHTML from it to the div that you want to display the info.
for example i recently created this page which does exactly what i am talking about:
http://www.therealestategroupinc.com/idx
(look at the source)Did I help you?
You can repay me, support one of my projects (no money needed):
JavaScript Wiki, Another Web Forum, Paranormal Site
-
Dec 31, 2006, 10:03 #3SitePoint Addict
- Join Date
- Dec 2006
- Location
- Prague
- Posts
- 210
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here is a lot of way to do this, I can just recomend you rather change classname and keep content readable without javascript. You can try
<style type="text/css">
.expand .e{display:block}
.expand .c{display:none}
.compress .c{display:block}
.compress .e{display:none}
</style>
<script type="text/javascript">
function switcher(){
what=document.getElementById('outer')
what.onclick=function(){
this.className=this.className=='expand'?'compress':'expand';
}
}
if(document.childNodes){window.onload=switcher}
</script>
<h2>// TESTS A DROP DOWN PULL UP MENU</h2>
<div id="outer" class="compress">
<div class="e">
<p>expand</p>
</div>
<div class="c">
<p>compress</p>
<ul>
<li>asdf</li>
<li>fsdajlealasdf</li>
<li>i like to eat subway</li>
<li>pita pit is good but expensive</li>
</ul>
</div>
</div>
And style it as you want, this way it is all separated e.g. it the same as to use this
<div onclick="this.className=this.className=='expand'?'compress':'expand';" class="compress">
just less obtrusive
Bookmarks