Quote extender

plato · #1 Aug 29th, 2007, 11:24

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 · #2 Aug 29th, 2007, 12:48

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 · #3 Aug 29th, 2007, 12:53

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 · #4 Aug 29th, 2007, 13:20

Or with a server-side language like PHP.

karinne · #5 Aug 29th, 2007, 13:22

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

plato · #6 Aug 29th, 2007, 13:36

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 · #7 Aug 29th, 2007, 13:41

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 · #8 Aug 29th, 2007, 13:47

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 · #9 Aug 29th, 2007, 14:04

Ah ... gotcha! Now I understand.

I'll move this to the JS forum then

plato · #10 Aug 29th, 2007, 14:16

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

karinne · #11 Aug 29th, 2007, 14:16

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
looking for job quote calculator	bonnit	PHP Forum	3	May 17th, 2008 14:29
Website Quote	Deano	Website Planning	0	Jan 11th, 2007 17:31
stock quote applet...	wlandymore	Other Programming Languages	0	Nov 26th, 2006 17:41
Freakish ASP quote handling	jakyra	Classic ASP	7	Sep 17th, 2003 18:11

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Quote extender