homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Expanding/Collapsing dynamic generated content
offender




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

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!

 

Little_G




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

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]

offender




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

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.

offender




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

Bah IE6 up to its old games! :) No worries though its a start, I will post back with some X browser code

offender




msg:3798666
 11:08 pm on Dec 2, 2008 (gmt 0)

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>

Little_G




msg:3799022
 11:27 am on Dec 3, 2008 (gmt 0)

Nice, glad I could help.

Andrew

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved