not sure on what this would be called

dr16049 · 01-03-2012, 03:25 AM

Little help. Not sure if its a script or what, but what I would like to do is on my web page, when reading a story, if the story is long I would like to have "read more" option that I have seen before with the little arrow, that when clicked would open the rest of the story in the same frame and push everything below it down. I do not want to link via a read more option to another page. Just want to have it open there. If anyone would point me in the right direction I would appreciate it. Thanks

conor · 01-03-2012, 09:14 AM

Hi,

you could do this with some javascript/jquery. say this is the markup for your stories:

Code:

<div id="stories">
   <!-- First story -->
   <div class="story" id="story-1">
      <div class="story-content">
        <h1>Story 1</h2>
        <p>Story content goes here</p>
       </div>
       <div class="read-link"></div>
   </div>
   <!-- Second Story -->
   <div class="story" id="story-2">
      <div class="story-content">
        <h1>Story 2</h2>
        <p>Story content goes here</p>
       </div>
       <div class="read-link"></div>
   </div>
</div>

You just need to add a bit of javascript which does three things:

1. adds a link to each story called "read full"
2. saves the full content
3. adds an event so that when the new read full link is clicked all of the content appears
and the read-full link is removed

I've written an example here so you can try it out and view the code: http://jsfiddle.net/rDrys/3/

PixelPusher · 01-03-2012, 03:07 PM

You will want to use javascript. Try looking at jquery. The function that came to mind right away is ".animate()" This will allow you to animate css properties of a given html element.

For example, say you have a container that holds the paragraphs for your story. By default the container can have a defined height and the overflow can be hidden. When a user clicks the "read more" button, it will adjust the height property to auto, allowing it to expand to the length of your story. Also, by using animate() the expansion can have an animated/easing effect. If you dont want the animation effect, try using ".css()" instead.

So in short look into:
jQuery .animate();
jQuery .css();

Janja · 01-03-2012, 03:28 PM

Maybe an accordion style spry would be what you are loooking for? Dreamweaver has an option for vertical accordion menu.
http://jquery.bassistance.de/accordion/demo/
or
http://docs.jquery.com/UI/Accordion
You can style it to not have any background colors, so it looks like the rest of the page.

dr16049 · 01-03-2012, 09:46 PM

Ok,

Conor.... I followed your link, that is what I would like. If possible is there a way to also close it? I could not find how you defined how much of the story showed before expansion, to be able to adjust that. And where would I put the js? In the head portion? Please forgive me I have no formal education in doing this. I will put it in my page and test how it works. Also, some stories will and some wont have this, So I would just use this on the ones that do.

Pixlepusher: I will look at what you are saying

Janja: I will look at that also.

Thank you for helping me, I wish I had looked into finding a site like this years ago, would have saved me countless hours of learning the hard way.....
Trial and error.

Janja: I like the accordion, but not for what I am speaking of now. I may incorporate that into other portions of the pages for info. I may have questions when i use that also.
Pixle: Thats not what I need now, but once again, I like it and will keep it in mind for the future, today, I learned a few new things!

dr16049 · 01-05-2012, 03:56 AM

Here is what I found.

http://plugins.learningjquery.com/ex...emo/index.html

exactly perfect so far. I have a major problem. I have tried to put this in, and have searched all over to find a step by step tutorial on how to do this. I cant find one. So, obviously I cant use it if I cant install it.

I need an infantile step by step amount of help. Anyone willing? Or point me to something that does.

Really appreciate the help.

conor · 01-05-2012, 10:38 AM

To use that plugin you need to download both the plugin and jquery http://jquery.org and link to the javascript files from the header section in your html like this:

Code:

<script type="text/javascript" src="jquery.min.js"></script>
// do the same for the jquery expander plugin

To get this to work you just need to add a class called something like "expand" to each of the items you want to expand in html. Then add a bit more javascript in the header which tells jquery: for each class "expand" load the expander plugin:

Code:

<script type="text/javascript">
// this means when the page has loaded, execute this code
$(function(){
    // make elements with class "expand" expand
    $( '.expand' ).expander( );
});</script>

That's it! you can also add options to the expander plugin to make it more customised, see the jquery expander website for details.

dr16049 · 01-06-2012, 07:28 PM

Thanks!!! Didnt see this till I had it in. I actually had jquery on my site from other app I had. It mustve been an auto install I used or something. So I watched a buch of videos on installation, downloaded the latest version and put that in. Moved some files around so everything was together. Still couldnt make it work. took a bit of trial and error but I got it. Also adjusted the cut off point which really helped, it was too short in the download.

Now, I would like to code it to ignore images in the stories so they wont be cut out. At my new cut off point most show, but To prevent future problems, Is there a way to do that?

Quote:

To get this to work you just need to add a class called something like "expand" to each of the items you want to expand in html. Then add a bit more javascript in the header which tells jquery: for each class "expand" load the expander plugin:

thats the part that was not explained on the videos or any instructions very well. I ended up looking at all the examples they had and realized the problem.

PixelPusher · 01-13-2012, 03:39 PM

Glad you got it working.
Just an fyi, all this can be achieved without this plugin. Lol this is very similar to what i mentioned originally. The animate function can provide the same results as the expander plugin and you would only have one link tag in you document head.

dr16049 · 01-17-2012, 05:42 AM

Thanks pixle, I did go back and read your post again, but keep in mind, I am not as versed as you, so if I tried that, I think you would have tired of all the questions and problems I would have had in the attempt.

If you want to look: http://nor-calatv.com is the site I did this on, and if you have a comment or see another issue let me know. This is just a local inform site, nothing big, but I am always trying to improve on what we have.

Thanks to everyone for all the help, I really appreciated it!

01-03-2012, 03:25 AM	#1
dr16049 New Member Join Date: Jan 2012 Posts: 5	not sure on what this would be called Little help. Not sure if its a script or what, but what I would like to do is on my web page, when reading a story, if the story is long I would like to have "read more" option that I have seen before with the little arrow, that when clicked would open the rest of the story in the same frame and push everything below it down. I do not want to link via a read more option to another page. Just want to have it open there. If anyone would point me in the right direction I would appreciate it. Thanks

01-03-2012, 09:14 AM	#2
conor Gold Member Join Date: Oct 2008 Location: Ireland Posts: 349	Hi, you could do this with some javascript/jquery. say this is the markup for your stories: Code: <div id="stories"> <!-- First story --> <div class="story" id="story-1"> <div class="story-content"> <h1>Story 1</h2> <p>Story content goes here</p> </div> <div class="read-link"></div> </div> <!-- Second Story --> <div class="story" id="story-2"> <div class="story-content"> <h1>Story 2</h2> <p>Story content goes here</p> </div> <div class="read-link"></div> </div> </div> You just need to add a bit of javascript which does three things: 1. adds a link to each story called "read full" 2. saves the full content 3. adds an event so that when the new read full link is clicked all of the content appears and the read-full link is removed I've written an example here so you can try it out and view the code: http://jsfiddle.net/rDrys/3/ __________________ Conor

01-03-2012, 03:07 PM	#3
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	You will want to use javascript. Try looking at jquery. The function that came to mind right away is ".animate()" This will allow you to animate css properties of a given html element. For example, say you have a container that holds the paragraphs for your story. By default the container can have a defined height and the overflow can be hidden. When a user clicks the "read more" button, it will adjust the height property to auto, allowing it to expand to the length of your story. Also, by using animate() the expansion can have an animated/easing effect. If you dont want the animation effect, try using ".css()" instead. So in short look into: jQuery .animate(); jQuery .css(); __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

01-03-2012, 03:28 PM	#4
Janja Bronze Member Join Date: Jul 2011 Location: Vista, CA Posts: 65	Maybe an accordion style spry would be what you are loooking for? Dreamweaver has an option for vertical accordion menu. http://jquery.bassistance.de/accordion/demo/ or http://docs.jquery.com/UI/Accordion You can style it to not have any background colors, so it looks like the rest of the page. __________________ JANJAWATSON www.jewel-webdesign.com

01-03-2012, 09:46 PM	#5
dr16049 New Member Join Date: Jan 2012 Posts: 5	Ok, Conor.... I followed your link, that is what I would like. If possible is there a way to also close it? I could not find how you defined how much of the story showed before expansion, to be able to adjust that. And where would I put the js? In the head portion? Please forgive me I have no formal education in doing this. I will put it in my page and test how it works. Also, some stories will and some wont have this, So I would just use this on the ones that do. Pixlepusher: I will look at what you are saying Janja: I will look at that also. Thank you for helping me, I wish I had looked into finding a site like this years ago, would have saved me countless hours of learning the hard way..... Trial and error. Janja: I like the accordion, but not for what I am speaking of now. I may incorporate that into other portions of the pages for info. I may have questions when i use that also. Pixle: Thats not what I need now, but once again, I like it and will keep it in mind for the future, today, I learned a few new things! Last edited by dr16049; 01-03-2012 at 09:53 PM. Reason: more info

01-05-2012, 03:56 AM	#6
dr16049 New Member Join Date: Jan 2012 Posts: 5	Here is what I found. http://plugins.learningjquery.com/ex...emo/index.html exactly perfect so far. I have a major problem. I have tried to put this in, and have searched all over to find a step by step tutorial on how to do this. I cant find one. So, obviously I cant use it if I cant install it. I need an infantile step by step amount of help. Anyone willing? Or point me to something that does. Really appreciate the help.

01-05-2012, 10:38 AM	#7
conor Gold Member Join Date: Oct 2008 Location: Ireland Posts: 349	To use that plugin you need to download both the plugin and jquery http://jquery.org and link to the javascript files from the header section in your html like this: Code: <script type="text/javascript" src="jquery.min.js"></script> // do the same for the jquery expander plugin To get this to work you just need to add a class called something like "expand" to each of the items you want to expand in html. Then add a bit more javascript in the header which tells jquery: for each class "expand" load the expander plugin: Code: <script type="text/javascript"> // this means when the page has loaded, execute this code $(function(){ // make elements with class "expand" expand $( '.expand' ).expander( ); });</script> That's it! you can also add options to the expander plugin to make it more customised, see the jquery expander website for details. __________________ Conor

01-13-2012, 03:39 PM	#9
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Glad you got it working. Just an fyi, all this can be achieved without this plugin. Lol this is very similar to what i mentioned originally. The animate function can provide the same results as the expander plugin and you would only have one link tag in you document head. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

01-17-2012, 05:42 AM	#10
dr16049 New Member Join Date: Jan 2012 Posts: 5	Thanks pixle, I did go back and read your post again, but keep in mind, I am not as versed as you, so if I tried that, I think you would have tired of all the questions and problems I would have had in the attempt. If you want to look: http://nor-calatv.com is the site I did this on, and if you have a comment or see another issue let me know. This is just a local inform site, nothing big, but I am always trying to improve on what we have. Thanks to everyone for all the help, I really appreciated it!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode