Forum Moderators: open
Currntly I have a drop down box working with the folowing script: <snip> (its in Duch, but the code is in the square boxes).
This kind of does wat I want. When clicking on the link a box pops up with all the text in it. The text itself is drawn from a database and cannot be altered. In this situation before you click the link no square box and text is visible at all. What I want is to show a couple of lines and by cicking you can show the text in its entire.
So, is it possible to change the java code (or something else) so it shows like 4 lines of text, or "x" amount of characters or "x" amount of words, or it has a standard height of 40 or whatever when in default?
Thanks.
CODE:
<script type="text/javascript">
function kadabra(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display= "block";
}
return false;
} else {
return true;
}
}
</script>
<style type="text/css">
#tekst {
display: none;
width: 250px;
border: 1px solid black;
background-color: #cccccc;
padding: 5px;
font-size: 12px;
}
</style>
<body>
<p id="tekst">
TEXT VARIABLE</p>
</body>
<a href="#" onclick="return kadabra('tekst');"> LInk that opens the box</a>
[edited by: Joppiesaus at 9:03 am (utc) on Jan. 23, 2009]
have a look at this example, which degrades gracefully for those with javascript disabled. ;)
<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><style type="text/css">
#link {
width:130px;
padding:5px 0;
border:3px double #999;
text-align:center;
cursor:pointer
}
.hide {
display:none;
}
#tekst {
width:250px;
border:1px solid #000;
background-color:#ccc;
padding:5px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
text-align:justify;
overflow:hidden;
margin:auto;
}
#tekst p {
margin:0;
}
</style><script type="text/javascript">
if(window.addEventListener) {
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent) {
window.attachEvent('onload',init);
}
}function init() {
test=true;
obj=document.getElementById('link');
obj1=document.getElementById('tekst');h=obj1.offsetHeight-12; /* 12 represents twice the padding and border width */
n=53;
c=n;obj.className='';
obj1.style.height=c+'px';obj.onclick=function() {
if(test==true){
num=4;
expandDiv();
test=false;
obj.firstChild.nodeValue='Close the box';}
else {
num=-4;
expandDiv();
test=true;
obj.firstChild.nodeValue='Open the box';
}
}
}function expandDiv() {
if(c>h){
c=h;
clearTimeout(exp);
test=false;
return;
}if(c<n){
c=n;
clearTimeout(exp);
test=true;
return;}c+=num;
obj1.style.height=c+'px';
exp=setTimeout('expandDiv()',10);
}</script>
</head>
<body><div id="link" class="hide">Open the box</div>
<div id="tekst">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div></body>
</html>
Thanks! Looks really cool. One question: do you know if this can negatively affect SEO (search engine optimization) for google? I have a lot of rich unique content on this website and it would be very sad if Google couldnt read this content because of this drop down box/or rates it less in any way.
Hope you can enlighten or maybe someone other with seo knowledge?
Thanks.
Is it also possible to speed up the "unfolding" ?
I'm looking in the javascript but cant find a number or something like that to manage the speed...
to increase the speed, edit the highlighted values...
obj.onclick=function() {
if(test==true){
[blue]num=+4;[/blue]
expandDiv();
test=false;
obj.firstChild.nodeValue='Close the box';}
else {
[blue]num=-4;[/blue]
expandDiv();
test=true;
obj.firstChild.nodeValue='Open the box';
}
}
}
As for your SEO worries, I cannot think of any reason why this code should have any adverse effects. ;)
Bear in mind that, as a mere coder, I am no expert in that department and would suggest that you seek advice in the appropriate forum.
birdbrain
I askedmy question there.
I now also managed to make the height bigger so a bit more text is shown.
The only problem that remains is that in IE everything looks good, in all the other browsers my right edge is pushed out of sight and the bottom padding (or bottom white space) is a lot larger.
What can I do to make this the same for all browsers? Whatever I do it alway results in either a good look in IE or a good look in all other browsers...
the code that I gave you was tested in...
IE6, IE7, Opera 9.63, Safari 3.1 and Firefox 3.0.5
If you are now having problems, then you must have made an error in your coding. :(
Therefore you will need to post the full code here for examination. :)
birdbrain
