Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope resizing boxes on click

I need to make some changes to a template I purchased. The template uses isotope for its blog page. Which is great, but I need the boxes to expand on click to reveal the full content of the post and I don't how to do this. Can you someone help, please?

User Gravatar

Reza

Posted Feb 5 2014 6:59 UTC

$30


  • Assigned To NBoychev
  • Solved
  • css
    isotope expand
  • 2295 Views

8 Replies


Hi Reza,

It seems like this task may require some thorough customization. Any chance you could post a link to your current template and an example to your desired state?

Thanks!

User Gravatar

CodersClan

Posted Feb 5 2014 8:51 UTC

Hi, thanks for getting back to me. The website is live and the page that needs this functionality is: http://2lk.com/newsMain.html

The client wants the main copy to be word counted to about 3 lines, with a "read more" button that expands the box to reveal the rest of the news item. There is a PHP driven CMS currently being created for the site that will allow the clientt to add posts.

User Gravatar

Reza

Posted Feb 5 2014 9:24 UTC

Hi Reza,

First you need to cut the text to only 3 lines:

.post-content { max-height: 57px; /* max height = 3 (lines) * 19px (line height) */ overflow: hidden; } 
.post-content p { padding-bottom: 19px; /* the padding of the paragraph should be the same as the lineheight */ }

.post-expanded .post-content { max-height: none; }


.post-more-toggle,
.post-more-toggle .label-expanded,
.post-expanded .post-more-toggle .label-collapsed { display: none;}

.post-has-more .post-more-toggle,
.post-expanded .post-more-toggle .label-expanded { display: inline-block; }

Here is how the HTML should look like:

<div class="post"><!--START POST-->
    <div class="post-media">        
        <img src="images/blogPics/blogImagesP_duncansBaby.jpg" />
    </div><!--END POST-MEDIA-->

    <div class="post-entry">

        <div class="post-title">                
            <h2>The 2LK family just gets bigger</h2>
        </div><!--END POST-TITLE-->     

        <div class="post-meta">             
            <ul>
                <li><span>Posted on</span> 12 November 2013</li>
            </ul>
        </div><!--END POST-META-->          

        <div class="post-content">                              
            <p>Introducing William Jon Smart, son of Business Development Manager Duncan Smart and the third staff baby to be born this year. Arriving on 7th November 2013, William packed a punch weighing in at 9lb 8oz! Congratulations to Duncan, Rose and big sister Alice. Proud dad is now back from paternity leave – he needed a rest!</p>

        </div><!--END POST-CONTENT -->

        <a href="#" class="post-more-toggle">
            <span class="label-collapsed">Show more</span>
            <span class="label-expanded">Show less</span>
        </a>
    </div><!--END POST-ENTRY-->     
</div><!--END POST-->

Then check every element height and handle clicks on post and expand/collapse the post:

;(function($){

    // Wait for document ready
    $(document).ready(function(){


        hasMoreCheck();


        // Handle post click
        $('.post-more-toggle').on('click', function(event){
            event.preventDefault();

            // Expand/collapse the post
            $(this).closest('.post').toggleClass('post-expanded');

            // Relayout isotope
            $('.blog-holder').isotope('reLayout');
        });
    });

    $(window).on('resize', function(){
        hasMoreCheck();
    });

    function hasMoreCheck(){        
        $('.post-content').each(function(){
            if($(this).height() < this.scrollHeight){
                $(this).closest('.post').addClass('post-has-more');
            };
        });

    };

})(jQuery);

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Feb 5 2014 13:11 UTC

Hi Nikola, thank you very much for your help on this. Not sure if we've done this correctly, but it still doesn't work:

http://2lk.com/newsMain_v1.html#

Any further advice will be much appreciated. Reza

User Gravatar

Reza

Posted Feb 7 2014 7:56 UTC

Hi Reza,

You are using too old version of jQuery:

jquery.1.4.4.js

Can you please update to the latest version? Here is link for the latest version: http://code.jquery.com/jquery-1.11.0.min.js

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Feb 7 2014 9:13 UTC

Hi

Yes, we did try that, but we got this result:

http://2lk.com/newsMain_v1.html#

User Gravatar

Reza

Posted Feb 7 2014 9:34 UTC

Hi Reza,

Sorry, there are plugins on that page that are outdated. Some of jQuery APIs are deprecated now.

You can try with this version: http://code.jquery.com/jquery-1.8.3.min.js

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Feb 7 2014 9:40 UTC

Solution

This didn't solve your task? Get your own custom solution.

Wow!! That might of worked. We're going to put the other boxes in and test it, and I'll let you know later this evening.

Thanks very much Nikola, you're a star. I'll pay you're $30 as soon as I know that's it's all ok.

User Gravatar

Reza

Posted Feb 7 2014 9:58 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions