March 22nd, 2007
11:40 PM
whoopee now a retired old Fart
Status: Offline!
show / hide text function
Hi - I wonder if anyone can help. I am looking for a javascript to enable a show / hide text function, To work just like the one on youtube:
http://www.youtube.com/watch?v=T-OAVsXefmA picked as a random video.
Next to where the video screen is you can see the data panel, there is a few lines of introductory text then a 'more' link. When you click 'more' the rest of the text is shown along with a 'less' link that returns to the default state.
I can do this with php but obviously the page has to be reloaded each time.
I wish to do it with javascript and load all the text everytime the page is loaded and just do a more or less each time to keep my page layout short. I need to do this on three separate occasions with different data on one page.
If anyone can point me in the right direction, or to the name of a script on hotscripts or similar I would be most gratefull
Hope this is clear
nn 
PS the above Youtube url is just and example - the actual code appears on every youtube page I have seen. I have tried lifting their code but unfortunately I am a newbie as far
as Javascript is concerned and cannot manage to figure it out.
March 23rd, 2007
05:39 AM
God's Son
Status: Offline!
<script language="Javascript 1.2"
type="text/javascript">
function show(id)
{
el = document.getElementById(id);
if (el.style.display == 'none')
{
el.style.display = '';
el = document.getElementById('more' + id);
el.innerHTML = 'less...';
} else {
el.style.display = 'none';
el = document.getElementById('more' + id);
el.innerHTML = 'more...';
}
}
</script>
and then for your link...
<a id="moreinfo" onclick="javascript:show('info');return false;" href="info.html" target="_new">more...</a>
<div id="info" style="display: none">
info here
</div>
This example will let you do it mulriple times on your page by changging the id of the div tags
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a><div id="foo">This is foo</div>
<a href="#" onclick="toggle_visibility('foo2');">Click here to toggle visibility of element #foo2</a><div id="foo2">This is foo2</div>
___________________
"The secret to creativity is knowing how to hide your sources." -- Albert Einstein
Last edited by Waldir, March 23rd, 2007 05:44 AM (Edited 3 times)
March 23rd, 2007
04:15 PM
what they do on youtube is that they have one layer with the short text that says "more", then they have the full text (including the text you saw in the first layer) in another <span> and when you click more it hides the first layer and shows the other layer, this gives the illusion that it displays the rest of the text although what it does is to actually show a completely different text.
I know how to do this in dreamweaver 8. (My javascript handcoding abilities is very very limited)
1. Create two layers on top of each other and fill them with the text, one with just a part of it (layera) and then the other layer with the full text (layerb).
2. Go to window>layers in the top menu to see the layers palette. Change it so that "layera" has an open eye and "layerb" has a closed eye.
3. Go into split (code/design) view and select the text (in the code window) in "layera" you want to make "layera" hide and show "layerb" and make it a fake link by typing # in the properties link textfield. hit enter.
4. Go to window>behaviors and press the + symbol on the behaviors palette and choose "Show-Hide Layers" and select "layera" and press the "Hide" button, and then select "layerb" and press the "Show" button and then press "OK".
5. go through step 3 and 4 for "layerb" but tell "layera" to show and "layerb" to hide instead.
Done
---------------------------------
heres the code that it generated when i made my example:
<!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=iso-8859-1" />
<title>layers - hide/show</title>
<style type="text/css">
<!--
#layera {
position:absolute;
left:70px;
top:50px;
width:90px;
height:135px;
z-index:2;
visibility:visible;
}
#layerb {
position:absolute;
left:70px;
top:50px;
width:90px;
height:135px;
z-index:1;
visibility:hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="layera">This is layer A. it will hide when u click this <a href="#" onclick="MM_showHideLayers('layera','','hide','layerb','','show')">link</a> and then show layer B </div>
<div id="layerb">This is layer B. It was just told to show itself when you clicked the link in layer A. <a href="#" onclick="MM_showHideLayers('layera','','show','layerb','','hide')">go back to A.</a></div>
</body>
</html>
___________________
//mr.oak
Last edited by mroak, March 23rd, 2007 04:29 PM (Edited 7 times)
March 24th, 2007
07:09 PM
whoopee now a retired old Fart
Status: Offline!
Thanks for all of your input - it is much appreciated. - Just before comming here this afternoon I decided to have a look on a couple of favorite CSS tutorial pages and I came across this one http://www.tjkdesign.com/articles/toggle_elements.asp - I have yet to decide what method I will use. Most of my punters use IE 6 and probably soon IE 7 but I obviously have to test the output in as many browsers as I can.
Many thanks
nn
