TWW - javascript help

go to bottom

Message Boards » » javascript help

Page [1]

quagmire02
All American
44225 Posts
user info
edit post

i didn't write this script completely myself...i'm not much of a javascript person, so i pieced it together (it's a pretty common function, i think)...anyway, you should be able to just copy and paste all of the code into a new file and it should run just fine without errors

there are two separate things i want to do with it:
1.) when one of the drop-down contents are open, and you click another, it hides the first one again
2.) i'd like to have it where there is a single drop-down box (as in a form), and when you make a choice, it displays the content (so that all content is loaded, no need for refreshing, and it dynamically changes the display based on the drop box selection)

also, if you have any suggestions for cleaning this up (i can muddle through, but really only done basic javascripts) or simplifying the code, they're appreciated

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript drop content</title>
<style media="screen" type="text/css">
div, p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	margin: 0;
	padding: 0;
}
ul, li {
	padding: 0;
}
ul {
	margin: 0 0 0 10px;
}
li {
	margin: 0 0 0 5px;
}
.contentBox {
	background-color: #ccc;
	border: 1px solid black;
	height: 0px;
	margin: 5px 0 0 10px;
	overflow: hidden;
	position: relative;	/* change to absolute to display on top of other content */
	visibility: hidden;
	width: 350px;
}
.content {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 1px 7px 5px;
	position: relative;
	width: 100%;
}
</style>
<script language="javascript" type="text/javascript">
var slideDownInitHeight = new Array();
var slidedown_direction = new Array();
var slidedownActive = false;
var contentHeight = false;
var slidedownSpeed = 5;	// higher = faster
var slidedownTimer = 1;	// lower = faster

function slidedown_showHide(boxId) {
	if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
	if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;
	if(slideDownInitHeight[boxId] == 0) {
		slidedown_direction[boxId] = slidedownSpeed;
	}
	else {
		slidedown_direction[boxId] = slidedownSpeed*-1;
	}
	slidedownContentBox = document.getElementById(boxId);
	var subDivs = slidedownContentBox.getElementsByTagName('div');
	for(var no=0; no<subDivs.length; no++) {
		if(subDivs[no].className=='content')slidedownContent = subDivs[no];
	}
	contentHeight = slidedownContent.offsetHeight;
	slidedownContentBox.style.visibility = 'visible';
	slidedownActive = true;
	slidedown_showHide_start(slidedownContentBox,slidedownContent);
}

function slidedown_showHide_start(slidedownContentBox,slidedownContent) {
	if(!slidedownActive) {
		return;
	}
	slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
	if(slideDownInitHeight[slidedownContentBox.id] <= 0) {
		slidedownActive = false;
		slidedownContentBox.style.visibility = 'hidden';
		slideDownInitHeight[slidedownContentBox.id] = 0;
	}
	if(slideDownInitHeight[slidedownContentBox.id]>contentHeight) {
		slidedownActive = false;
	}
	slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
	slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
	setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),
document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);
}
</script>
</head>
<body>

<ul>
	<li><a href="#" onclick="slidedown_showHide('box1');return false;">content 1</a>
    <div class="contentBox" id="box1"><div class="content" id="subBox1"><!-- slide down content goes here -->
        	<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
        <!-- End slide down content --></div></div></li>
  <li>other content</li>
	<li><a href="#" onclick="slidedown_showHide('box2');return false;">content 2</a>
    <div class="contentBox" id="box2"><div class="content" id="subBox2"><!-- slide down content goes here -->
        	<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
            <!-- End slide down content --></div></div></li>
</ul>

</body>
</html>

[Edited on January 7, 2009 at 12:11 PM. Reason : took out some of the Lorem Ipsum it was making it horizontal scroll]

1/7/2009 11:39:58 AM

RSXTypeS
Suspended
12280 Posts
user info
edit post

Just create a dropdown object so you can keep tabs on which is open and which needs to be closed when you click on a new dropdown. Example:

var dropdown = new function()
{
this.currentId = "";

this.reset = function()
{
this.currentId = "";
}
}

then in your javascript for opening and closing dropdowns you can run a check.

if (dropdown.currentId == "")
{
//open the clicked dropdown since no other is currently open
}
else if (dropdown.currentId == id)
{
//close the dropdown
}
else if (dropdown.currentId != id)
{
// close the dropdown with id of dropdown.currentId
// open the newly clicked dropdown
}

oh forgot to add:

when you open a dropdown you would call
dropdown.currentId = id;

or when you close a dropdown and don't open a new one you would call

dropdown.reset;

[Edited on January 7, 2009 at 11:54 AM. Reason : .]

1/7/2009 11:53:47 AM

qntmfred
retired
40726 Posts
user info
edit post

use jquery instead

http://ui.jquery.com/demos/accordion

1/7/2009 12:00:22 PM

BigMan157
no u
103354 Posts
user info
edit post

^

i'll never go back to not using a JS-framework except for only the tiniest things

1/7/2009 2:30:31 PM

RSXTypeS
Suspended
12280 Posts
user info
edit post

i like prototype and scriptacuolus

1/7/2009 2:50:40 PM

qntmfred
retired
40726 Posts
user info
edit post

also good choices

1/7/2009 3:03:35 PM

quagmire02
All American
44225 Posts
user info
edit post

i, too, prefer jquery

but this needs to be a single file, and it seems like overkill to include all of the extra jquery behavior code in the file for this one simple task, especially when it's almost completely put together...yes?

1/7/2009 3:05:33 PM

Tiberius
Suspended
7607 Posts
user info
edit post

I gotta be honest here, I'm too lazy to interpret that code or paste it into a file, and otherwise can't tell specifically what you're asking

put the HTML up somewhere so people can see what you mean and I am guessing the discussion will be less about how prototype is awesome and more about your specific problem

incidentally, prototype is pretty awesome

1/7/2009 5:25:13 PM

quagmire02
All American
44225 Posts
user info
edit post

okay, another (simpler) question...i am not at all a javascript person

so i've got a form with check boxes...when you select a check box, i want to show previously hidden data...this is easy and there are dozens of ways to do it...i went with this (css, script, implementation):

.hide{display:none;visibility:hidden;}
.show{display:block;visibility:visible;}

function toggle(id){
    var e = document.getElementById(id);
    if(e.className == "show") e.className = "hide";
    else e.className = "show";
}

<input type="checkbox" name="option_other" onclick="toggle('other_show');"/>Other (explain below)<br />
<div id="other_show" class="hide"><textarea name="option_other" rows="2" cols="25" wrap="virtual"></textarea></div>

easy, no problem, works like a champ...i chose this method because it's fairly flexible...i can use the javascript with pretty much anything, not just check boxes, and visibility is controlled by CSS classes...the problem is that if you refresh the page, the check box retains its state, which means that the hidden content may be hidden, but the check boxes are still checked...so now, the check boxes operate in an opposite manner (you uncheck to show content)...anyway, i figured a window.onload could take care of unchecking all check boxes...this seems like it should work, but it doesn't...what am i missing?

window.onload = function uncheck() {
    var tag = document.getElementsByName('input');
    for(var i=0; i<tag.length; i++) {
    if(tag[i].getAttribute('type') == 'checkbox') {
    tag[i].checked = false;
        }
    }
}

[Edited on March 13, 2009 at 11:37 AM. Reason : i'm not getting any errors, but it doesn't DO anything]

3/13/2009 11:34:57 AM

kiljadn
All American
44690 Posts
user info
edit post

Quote :
"i'll never go back to not using a JS-framework except for only the tiniest things"

3/13/2009 11:45:25 AM

Stein
All American
19842 Posts
user info
edit post

Quote :
"i'm not getting any errors, but it doesn't DO anything"

Firefox remembers your checkbox selections after a soft refresh. I'd imagine IE doesn't give you this problem.

Realistically, the solution to your problem should be hitting Ctrl+F5 in Firefox. That'll clean the slate.

3/13/2009 2:24:43 PM

RSXTypeS
Suspended
12280 Posts
user info
edit post

^or cmd+shift+R on a Mac

3/13/2009 2:25:53 PM

quagmire02
All American
44225 Posts
user info
edit post

SONOFABITCH >.<

thanks, y'all

3/13/2009 2:27:36 PM

Message Boards » Tech Talk » javascript help

Page [1]

go to top

Admin Options : move topic | lock topic