Grow your CSS skills. Land your dream job.

Need a little help editing this simple js?

  • # February 13, 2013 at 5:18 pm

    This demo here http://viralpatel.net/blogs/demo/jqu…tened-content/

    Should be simple to the trained eye. Two thing… I would like to add a smooth animation to its open and close. And two can you see why it adds two characters to any given word it cuts short when it shows the remainder of the text? I can get around this error by using the exact character count to place the cut in a space. But that’s sloppy.

    I would just use expander plugin http://plugins.learningjquery.com/expander/ but when it shows more of the text it does it with inline-block so the remander of the text drops down on the next line as if a “br” was inserted. Maybe I was doing that wrong somehow. But could not see why. This would be a fine solution too as it has the smooth animation out of the gate but, as I said, drops it down to the next line. I played with many demos of this and they all seem to do it.

    Thanks,
    Eric

    # February 13, 2013 at 9:07 pm

    Your links is broken, but am I right in guessing you mean this? http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/

    Let me take a closer look and play around with it after dinner, and get back to you. It looks like the last demo on this page: http://plugins.learningjquery.com/expander/demo/index.html might be what you’re after, though.

    # February 13, 2013 at 9:13 pm

    Ahh ya sorry. Your right it was this one http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/. Ya that last one seems to be close I guess. I’ll play with it too. I would prefer the LESS link be positioned directly following the text and not below it though. But I guess that could do if nothing better is found.

    I just scoured google again. There is only one other I could find and there is no animation and the links are just blocked below the text.

    Thanks!
    Eric W

    # February 13, 2013 at 10:13 pm

    I suppose this would probably do: http://codepen.io/JoshBlackwood/pen/zgfcm

    I fixed the odd character insertion, and animated the toggle for you . . . very simple additions, honestly. If I were you, I’d use the plugin version, as it’s more easily modifiable and makes everything cleaner. Just modify the lines I’ve commented to get the effects I’ve added.

    # February 13, 2013 at 10:25 pm

    @JoshBlackwood awesome. Thank you very much. I will play with these and see what works best for me. Take care!

    # February 14, 2013 at 8:04 am

    I ended up going with the expander plugin. Finally found out how to make it do what I wanted. here is the result. I.E. Top paragraph http://www.websitecodetutorials.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".