Welcome to WebmasterWorld Guest from 107.22.87.205

Forum Moderators: open

Message Too Old, No Replies

Expanding/Collapsing dynamic generated content

     
5:05 pm on Dec 2, 2008 (gmt 0)

5+ Year Member



Hi,

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 />
tags therefore could jump down the height resriction too quickly.

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!

5:47 pm on Dec 2, 2008 (gmt 0)

5+ Year Member



Hi,

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]

10:55 pm on Dec 2, 2008 (gmt 0)

5+ Year Member



My god thank you!

I have been racking my brains for a few hours now thinking how I could get around this one.

Legend mate, absolute legend.

10:56 pm on Dec 2, 2008 (gmt 0)

5+ Year Member



Bah IE6 up to its old games! :) No worries though its a start, I will post back with some X browser code
11:08 pm on Dec 2, 2008 (gmt 0)

5+ Year Member



offsetHeight seems to work instead of clientHeight, now working in IE6 and IE7.

<!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>
11:27 am on Dec 3, 2008 (gmt 0)

5+ Year Member



Nice, glad I could help.

Andrew

 

Featured Threads

Hot Threads This Week

Hot Threads This Month