SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie to jQuery & JS - Collapsible text and styling

    Im using the jQuery Expander Plugin. I am very new in working with jQuery and JS and I am having trouble changing the positioning of the "hide text." I like how the "read more" is directly after the paragraph, but the I want the "hide text" to float right. I hope this makes sense. I will include the code, the webpage, and an example of how I want it to look, positioning wise. Any advice would be greatly appreciated. Thanks in advance!

    The webpage in question: http://www.bobmccainhomes.com/testimonials.html
    An webpage example of how I'd like the "hide text" positioned (floating right.) http://www.homeaway.com/vacation-rental/p139410

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
        
    <style>
    
    .readmore {
        padding-bottom: 20px;
        
    }
    
    .readmore a{
        text-decoration:underline;
        color: #a10324;
    }
    
    
    </style>
        
    </head>
    <body>
    
    <div class="readmore">
    <b>Steve and Patricia Rezaie</b><br>
    <p>McCain Construction and Remodeling has done several jobs for us during the past three years. Two of the jobs were a standalone garage and the addition of a carport to our second home so that both look like they were not an afterthought. McCain Construction also repaired a significant problem created by a previous builder’s mistake on our primary home. Since the repair we have not had any further problems. Bob McCain was able to locate, identify, and repair the problem on our primary home within two weeks after having lived with the problem for over five years. The quality and professionalism of Bob McCain has been refreshing and greatly appreciated. We highly recommend McCain Construction and Remodeling at every opportunity because we know the high standards he sets for his work and his contractors. He closely monitors the work being performed so that it meets with his high standards. We will be remodeling the lake-side elevation of our primary home in the near future.  When we do, you can bet we will look no further than Bob McCain because we know that the work will be first quality and to our specifications.</p><br>
    
    &mdash;Steve and Patricia Rezaie<br>
    Lake Limestone<br>
    Jewett, Texas</div><!--end read more1-->
      
    
    </body>
    
    <script>
    
    <script type="text/javascript"<script type="text/javascript"
        src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js">
        </script>
        <script type="text/javascript"
        src="http://plugins.learningjquery.com/expander/jquery.expander.js">
        </script>
        <script type="text/javascript">
           $(function () {
                $('div.readmore').expander({
                    preserveWords: true,
                    widow: 7,
                    expandEffect: 'slideDown',
                    expandSpeed: 1000,
                    collapseEffect: 'slideUp',
                    collapseSpeed: 1000,
                    slicePoint: 300,
                    expandText: 'Read More',
                    userCollapseText: 'Hide Text'
                    
                });
            });
    </script>
    
    </script
    </html>
    Last edited by Force Flow; Jun 30, 2013 at 11:14. Reason: added code tags

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    The element in question can be targeted through its class "read-less".
    So, just add this to your CSS:

    Code CSS:
    .read-less{float: right;}

    As an aside, you have a malformed <script> tag in line 20 of your document which needs seeing to:

    Code:
    <script type="text/javascript"<script type="text/javascript"
        src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js">
        </script>
    HTH

  3. #3
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, I see how that worked now. Thanks for the tip! Also, thanks for catching my coding error. Much appreciated


Tags for this Thread

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
  •