SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: One Link: Drop Down, Pull Up
-
Dec 27, 2006, 15:52 #1
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
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, 16:37 #2
- 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, 11:03 #3
- 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