...

View Full Version : show/hide div HELP!!



minis_r_me
05-05-2008, 09:57 PM
hi there i have a simple javascript that i found on the net to show/hide a div where it shows the div then when you click the link it hides the link.
i would like to modify it so that the div is hidden first then shows when the link is clicked.

i am new to javascript so sorry if this sounds a daft question:confused:


function toggleview(element1) { element1 = document.getElementById(element1);
if (element1.style.display == 'block' || element1.style.display == '') element1.style.display = 'none';
else element1.style.display = 'block'; return;}

thanks in advance
carl

coothead
05-05-2008, 10:29 PM
Hi there minis_r_me,

and a warm welcome to these forums. ;)

Have a look at this example, it may suit your requirements...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="#">

<style type="text/css">
#mylink {
color:#000;
}
#mydiv {
margin-top:10px;
display:none;
}
</style>

<script type="text/javascript">
var obj;
window.onload=function() {
obj=document.getElementById('mydiv').style;
document.getElementById('mylink').onclick=function() {
this.firstChild.nodeValue=(this.firstChild.nodeValue=='Hide Div')?'show div':'hide div';

invertdisplay(obj);
return false;
}
}

function invertdisplay(obj){
obj.display=(obj.display=='block')?'none':'block';
}
</script>

</head>
<body>

<div>
<a id="mylink" href="#">show div</a>
</div>

<div id="mydiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

</body>
</html>

coothead

minis_r_me
05-05-2008, 10:57 PM
cheers coothead :thumbsup:

i didnt think of changing my css to hide it i kept trying to change the javascript atleast its sorted now

cheers
carl

Bill Posters
05-06-2008, 08:21 AM
A few tips/observations about Coothead's code (if I might be so bold)

• Re: elements which will be initially hidden, but which can be made visible again using js…

It's best to make their initial hidden state dependent upon js. As the code stands, users with CSS on and js off/unsupported will have a hidden div and no way to show it.

• Any links which perform a solely js-dependent function should ideally be added to the page using js. Otherwise, those w/o js are offered a dead/unusable link.

• It's arguably better to add or remove a custom className rather than manipulate the style object directly. For simple on/off states - i.e. those without transitioning, such as animated fades or movement - adding a custom className to denote that an object is hidden can also provide semantic value to the document.

Fwiw, here's how I might go about it…

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

.hidden {
display: none;
}

</style>

<script type="text/javascript">

window.onload = function() {

var trgtObj = document.getElementById('myDiv');
trgtObj.className = 'hidden';

var toggleHolder = document.getElementById('toggleHolder');
var toggleLink = document.createElement('a');
toggleLink.href = '#';
toggleLink.onclick = function() {
toggleObj(trgtObj);
this.firstChild.nodeValue = (this.firstChild.nodeValue == 'Hide') ? 'Show' : 'Hide';
return false;
}

var toggleLinkText = document.createTextNode('Show');
toggleLink.appendChild(toggleLinkText);
toggleHolder.appendChild(toggleLink);

}

function toggleObj(trgtObj) {

trgtObj.className = (trgtObj.className == 'hidden') ? '' : 'hidden';

}

</script>

</head>
<body>

<div id="toggleHolder"></div>

<div id="myDiv">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

</body>
</html>

On a side-note:
Note that when manipulating the style.display property directly, it generally makes a toggle function more reusable if you avoid explicitly using 'block' as one of the values. By simply setting a blank value, unhidden objects will revert to their default display value: inline, block, etc…
However, as mentioned, adding/removing classNames is more optimal for most purposes.

The className handling in the code above could benefit from some checks to ensure that existing classNames are not overwritten and that classNames are more cleanly removed. I used that code above as a more complete, though not entirely complete, example of what I might consider a 'best practise approach' to the task in hand.
I can repost the example with the more considerate class handlers in their if you're interested.

coothead
05-06-2008, 09:14 AM
Hi there Bill,

thanks for reminding me that my coding skills are slipping back into sloppiness. ;)

This is due, well it's my excuse anyway, to my advancing years and an increasing shortage of grey cells. :(

coot

Bill Posters
05-06-2008, 09:47 AM
Hi there Bill,

thanks for reminding me that my coding skills are slipping back into sloppiness. ;)

This is due, well it's my excuse anyway, to my advancing years and an increasing shortage of grey cells. :(

coot
No worries. Being a jQuery user, I've grown rusty too when it comes to straight DOM scripting. Had to stop and think a couple of times.

Happens to the best of us. ;)

scribbles82
09-04-2008, 07:17 PM
if anyone can help please contact me at my email address
everlastinglove1982@gmail.com

thank you

so here is my issue i have the following code and i would like to put it on my url but i want it so that it is hidden from everyone


<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="435" style="width:435px; visibility:visible; height:270px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_regular.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=27746851">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_regular.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=27746851" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object><br /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15cGxheWxpc3Qub3Jn"><img src="http://www.myplaylist.org/mc/images/create_regular.jpg" border="0" /></a><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15cGxheWxpc3Qub3JnL3N0YW5kYWxvbmUvMjc3NDY4NTE=" target="_blank"><img src="http://www.myplaylist.org/mc/images/launch_regular.jpg" border="0" /></a><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15cGxheWxpc3Qub3JnL2Rvd25sb2FkLzI3NzQ2ODUx"><img src="http://www.myplaylist.org/mc/images/get_regular.jpg" border="0" /></a> </div>




thank you



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum