Quote extender

[plato]

Hi all,

I'm not sure if its possible to do this in CSS, but I have a really lengthy quote to put onto a webpage and wondered if theres a way to put it so maybe the first few lines are displayed followed by a small (read more) text link which when clicked then immediately displays the rest of the quote instead of taking the user to a seperate page altogether.

Any ideas as to how to employ CSS to do this? Or if its a JavaScript thing can someone point me in the right direction.

Regards,

p.

[karinne]

Is this quote coming from a DB and you don't know the length of it?

CSS has nothing to do with this. CSS is for presentational issues: colors, backgrounds, fonts, margins, padding, etc...

[Lchad]

You can do this with javascript:

Code: Select all

<script language="JavaScript">
<!--
	function expand(param)
	{
		param.style.display=(param.style.display=="none")?"":"none";
	}
//-->
</script>

If you only have one quote:

Code: Select all

<a href="javascript:expand(document.getElementById('div1'))">Title 1</a>
	  <div class="dottedBorders" id="div1" width="300px" style="display:none">
                    <p>some text</p>
</div

More than one quote, repeat the code and change the div1 to another div id name.

[c010depunkk]

Or with a server-side language like PHP.

[karinne]

Yeah ... if his content is already drawn from a DB using PHP ... I would keep consistent and use PHP here too

[plato]

Thanks for the ideas guys. I was looking at a JavaScript widget they use at Flixster.com where the synopsis for a movie is given in two parts.

Code: Select all

<p id="plot" class="clearfix"><strong>Plot:</strong> some quick text and stuffs blah blah blah <span id="readMoreLink">...( <span class="jlink" onclick="synopsisWidget.showMore();">read more&nbsp;<img src="/static/images/icons/right-arrow.gif" alt="read more..."></span> )</span><span id="extraSynopsis" style="display: none;">more blah blah and extra information</span></p>

So I wondered exactly how it worked. I take it I should rule out any chance of a CSS fix? Then maybe this thread should be moved to a JavaScript sub-forum?

Regards.

[karinne]

I'm just wondering what the purpose of this is?

Like I asked in my first reply, is your content (ie: this quote) stored in a DB?

If not ... then why use JS at all? If everything is hard coded in the document, then why not just manually add a "Read more" link?

[plato]

hi Karinne, to answers your question. The content is not stored in a DB but is hard coded in the document but I wanted a convenient way to not cause the user to get overloaded by seeing too much info at once on screen. That way if they are interested by what they can see they can click 'read more' and more info will appear isntead of taking them to a whole new page.

The suggestion that Lchad provided above seems to work well I just need to a solution now to make the (read me) link in mid-text disappear on click as the new text is revealed.

Any ideas?

[karinne]

Ah ... gotcha! Now I understand.

I'll move this to the JS forum then

[plato]

Thanks Karinne, hopefully I'll get more help if it was in the JS forum too!

[karinne]

I'm sure you will ... I know jack about JS