I am new to this so be kind...I am building a website and a large portion of the pages will have "city specific" information at the top. Below the "city specific" area I have three columns set to start at specific pixel levels. To create the info section, I assume I need to do something like a "read more" at a certain point in the text to truncate the additional text unless the reader wants to read more. I thought this would be simple but.... Does anyone have any suggestions?
If you were using Wordpress, you could just use the_excerpt(), but i'm assuming you're doing it from scratch.
The easiest way I can think of is if you make the container fixed, and give the text element (paragraph or whatever) text-overflow:ellipses and then put a read more button under it. If you wanted to only show the read more if the text is longer than the content box, then you would probably have to do some java/php to do so.
Yes, that is the direction I am headed. From scratch...gotta learn sometime :) . I will try the text element you describe. Is there an easy way to put a read more button? I assumed it would require some script.
Yeah, it looks like you do actually need to use some sort of javascript or php to get the ellipsis how you want. The text-overflow:ellipsis style only works on single lines. I made a sample setup just to give you an idea of how you could go about it, but not sure what to say about the ellipsis part.
So your thinking was that the "read more" would be directed to another page... right? That would be pretty hard to maintain...I have seen pages that just roll out the additional text. Maybe the simplest at this point is to have a fixed height text box that allows the reader to scroll up and down the content. Is that a simple approach? Not sure how to fix a height but am learning ALOT as I dive in. THANKS for the help btw.
Oh! That's my bad. I figured you wanted the content to go to another page. If you want it to slide down, that can easily be done with jQuery. I threw together a quick example. I'm not 100% sure it's the best way to get it to expand to full height, but I didn't have too much time to mess with it.
Basically, we're getting the original height of the full div, then resizing it to be the height you want them to be fixed at. When a user clicks the read more link, we're expanding the div to the full size of the paragraph, and then closing it if they click again.
The easiest way I can think of is if you make the container fixed, and give the text element (paragraph or whatever)
text-overflow:ellipsesand then put a read more button under it. If you wanted to only show the read more if the text is longer than the content box, then you would probably have to do some java/php to do so.text-overflow:ellipsisstyle only works on single lines. I made a sample setup just to give you an idea of how you could go about it, but not sure what to say about the ellipsis part.link: http://codepen.io/chrisxclash/pen/3/1
That would be pretty hard to maintain...I have seen pages that just roll out the additional text. Maybe the simplest at this point is to have a fixed height text box that allows the reader to scroll up and down the content. Is that a simple approach? Not sure how to fix a height but am learning ALOT as I dive in. THANKS for the help btw.
Basically, we're getting the original height of the full div, then resizing it to be the height you want them to be fixed at. When a user clicks the read more link, we're expanding the div to the full size of the paragraph, and then closing it if they click again.
link: http://codepen.io/chrisxclash/pen/3/5