Forum Moderators: open
This one is quite tough been thinking about it for a while and cant work out a good method to do this.
I have some dynamically generated content in a blockquote that I need to restict the height on (as sometimes it can be very long) there i want to have a surrounding div with a height of 110px and overflow hidden.
Thats all great looks good fits in with the design. Then I need to get a link to show to full content if the user clicks this link. Now this would be a simple set the surrounding div height to auto and then change the link to a collapse link and set the height back to 110px if the user clicks again.
Other solution was a server side char length check however the content contains
<br />Only one problem is sometimes the content fits in the 110px area therefore do not wont to show this expanding link. I have thought of js checking the height if over 110px then adding a button then setting the height to 110px. However this causes a lot of jumping around on the page which I do not want.
Other problem is the content needs to remain in this blockquote for seo, it cannot be split out accross 2 divs or 2 blockquotes.
I have looked a little into onoverflow which is a XUL thing. Not 100% sure what this is (think its only FF as it seems to be mozilla).
Any ideas, thoughts, wacky methods would be welcome to try and bash this one out.
Cheers guys!
Take a look at this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">#wrapper{height:110px;overflow:hidden;}</style>
<script type="text/javascript">
function switchHeight(wrapper, link){
if(wrapper.style.height == 'auto'){
wrapper.style.height = '110px';
link.textContent = 'expand';
}
else{
wrapper.style.height = 'auto';
link.textContent = 'collapse';
}
}
</script>
</head>
<body>
<div id="wrapper">
<blockquote id="bquote">...</blockquote>
</div>
<script type="text/javascript">
var bquote = document.getElementById('bquote');
if(bquote.clientHeight > 110){
document.write('<a href="#"' +
' onclick="switchHeight(document.getElementById(\'wrapper\'),' +
' this);">expand</a>');
}
</script>
</body>
</html>
Andrew
[edited by: DrDoc at 11:09 pm (utc) on Dec. 3, 2008]
[edit reason] fixed side scrolling [/edit]
I have been racking my brains for a few hours now thinking how I could get around this one.
Legend mate, absolute legend.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">#wrapper{height:110px;overflow:hidden;}</style>
<script type="text/javascript">
function switchHeight(wrapper, link){
if(wrapper.style.height == 'auto'){
wrapper.style.height = '110px';
link.innerHTML = 'expand';
}
else{
wrapper.style.height = 'auto';
link.innerHTML = 'collapse';
}
}
</script>
</head>
<body>
<div id="wrapper">
<blockquote id="bquote">
LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL
LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL
LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL
LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL
LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL
LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL
LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL
LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL LOLOLOL
</blockquote>
</div>
<script type="text/javascript">
var bquote = document.getElementById('bquote');
if(bquote.offsetHeight > 110){
document.write('<a href="#" onclick="switchHeight(document.getElementById(\'wrapper\'), this);">expand</a>');
}
</script>
</body>
</html>
Andrew
