SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Multiple 'read more' links on one page...

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple 'read more' links on one page...

    I'd like to implement Viral Patel's cool dynamic read more links to a page I'm working on. I'd like to add another level so that I could embed some of these links into another div...See demo here

    Can I add this to the java or would it be better to create another script using a different div id?

  2. #2
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,414
    Mentioned
    39 Post(s)
    Tagged
    1 Thread(s)
    Unfortunately the example page is returning a 404
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apologies link fixed.....

    Quote Originally Posted by stephen_ View Post
    I'd like to implement Viral Patel's cool dynamic read more links to a page I'm working on. I'd like to add another level so that I could embed some of these links into another div...See demo here

    Can I add this to the java or would it be better to create another script using a different div id?
    I'd also like to allow h and p tags inside the comment div if possible?

  4. #4
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,414
    Mentioned
    39 Post(s)
    Tagged
    1 Thread(s)
    The link in your first post points to http://jsfiddle.net/valleysboy/P7Jtz/ and this is still returning a 404
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Pullo only chaged the quoted link its - http://jsfiddle.net/valleysboy/jvCSe/ (i'll wake up)

  6. #6
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,414
    Mentioned
    39 Post(s)
    Tagged
    1 Thread(s)
    Hi there,

    So the demo's working now.
    I can see three divs which display extra content when I click on the more link.

    But what is it exactly that you are trying to do. I didn't quite get it. Could you elaborate a little.
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo,

    I'd like to have the same <div class="comment more"> that could have the 3 divs inside of it - essentially another level up? (hope this makes sense).

  8. #8
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,414
    Mentioned
    39 Post(s)
    Tagged
    1 Thread(s)
    You'd like to have three <div class="comment more"> inside a <div class="comment more">.
    Something like:

    HTML Code:
    <div class="comment more">
      Some random text
      <div class="comment more">Some more random text</div>
      <div class="comment more">Some more random text</div>
      <div class="comment more">Some more random text</div>
    </div>
    Is that what you mean?
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apologies I should have added the html - Yes that is exactly what I'd like - also I cant seem to add any html elements inside the div's like <p> <img> tags - it stops the jqery from working, I'd like to fix this also if possible???

  10. #10
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,414
    Mentioned
    39 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stephen_ View Post
    I cant seem to add any html elements inside the div's like <p> <img> tags - it stops the jqery from working, I'd like to fix this also if possible???
    This works just fine for me. Here's a fiddle to demonstrate: http://jsfiddle.net/openFiddle/9bDJ6/5/

    The other problem is a little trickier.
    You're trying to toggle divs within a div which is toggleable and this cannot work with your current code.

    If I was you, I would use the show-hide plugin instead. Its homepage is here: http://papermashup.com/demos/jquery-show-hide-plugin/
    I've also made you a small demo here demonstrating nested content: http://hibbard.eu/blog/pages/show-hide-plugin-demo.html
    It is entirely configurable. If you don't like the animation effect, you can disable that.

    HTH
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    This works just fine for me. Here's a fiddle to demonstrate: http://jsfiddle.net/openFiddle/9bDJ6/5/

    (think I was hitting a conflict with other js files I had on the page i'll check this)...

    The other problem is a little trickier.
    You're trying to toggle divs within a div which is toggleable and this cannot work with your current code.

    If I was you, I would use the show-hide plugin instead. Its homepage is here: http://papermashup.com/demos/jquery-show-hide-plugin/
    I've also made you a small demo here demonstrating nested content: http://hibbard.eu/blog/pages/show-hide-plugin-demo.html
    It is entirely configurable. If you don't like the animation effect, you can disable that.

    HTH
    GENIUS - code is really well explained - thanks so much Pullo very appriciated!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •