jQuery Forum

Overlapping posts using infinite scroll + masonry

21-Sep-2014 11:45 AM
Forum: Using jQuery Plugins

I have installed the theme "Issue" on my tumblr blog, but infinite scroll + masonry is overlapping all the posts. I've read some threads about it, but nothing seems to work. This is the code:

$(function() {
$( '#posts' ).masonry({
    itemSelector: '.post',
    columnWidth: 1
}).imagesLoaded(function() {
    $( this ).masonry( 'reloadItems' );
});

if( Issue.index_page ) {
    if( Issue.infinite_scroll )
        $( '#posts' ).infinitescroll({
            navSelector: '#pagination',
            nextSelector: '#pagination #next',
            itemSelector: '.post',
            loading: {
                img: 'http://i.imgur.com/6RMhx.gif',
                msgText: '',
                donetext: ''
            }
        }, function( newElements ) {        
            $( '#posts' ).masonry( 'appended', $( newElements ), true ).imagesLoaded(function() {
                $( this ).masonry( 'reloadItems' );
            });

            preparePosts( newElements );
        });
}

preparePosts( '.post' );

This is the full source code: http://pastebin.com/kEQKFgXj

Any help would be much appreciated!

Problem with jquery plugin for tumblr
[1Reply]
- 14-May-2014 02:47 PM
- Forum: Developing jQuery Plugins
Hi! I was searching for a plugin that would get posts from tumblr into a html and I found the tumbax plugin ( http://www.codehandling.com/2013/05/tumbax-10-display-tumblr-feeds-on-your.html ). The problem is, I can't seem to get the images bigger, all the images showed in the lightbox have 250px size. Would anybody know how can I change it? I tried to contact the developer, but I haven't had a reply. Thanks in advance!

Problem using word search and highlight
[4Replies]
- 17-Mar-2014 12:28 PM
- Forum: Using jQuery
Hi! I was looking for a simple search and highlight code and I found this one:
2. $(function(){
3. function searchAndHighlight(searchTerm, selector) {
4. if(searchTerm) {
5. //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
6. //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
7. var selector = selector || "#bodyContainer"; //use body as selector if none provided
8. var searchTermRegEx = new RegExp(searchTerm,"ig");
9. var matches = $(selector).text().match(searchTermRegEx);
10. if(matches) {
11. $('.highlighted').removeClass('highlighted'); //Remove old search highlights
12. $(selector).html($(selector).html().replace(searchTermRegEx, ""+searchTerm+""));
13. $('.match:first').addClass('highlighted');
14. $('#next').on('click',i=1, function()
15. { $('.match').removeClass('highlighted'); $('.match').eq(i).addClass('highlighted');
16. if( i >= $('.match').length -1) {
17. i=0;
18. }
19. i=i+1;
20. });
22. if($('.highlighted:first').length) { //if match found, scroll to where the first one appears
23. $(window).scrollTop($('.highlighted:first').position().top);
24. }
25. return true;
26. }
27. }
28. return false;
29. }
30. $(document).ready(function() {
31. $('#search-button').on("click",function() {
32. if(!searchAndHighlight($('#search-term').val())) {
33. alert("No results found");
34. }
35. });
36. });
37. });//]]>
It works fine when the url is not the same as the link description, but when they are, it adds the class to both url and link description, and the url gets broken.
Something like this:
1. <a href="http://mywebsite.com/tagged/back">back</a>
Here's an example page.
Can somebody please help me? I've tried many solutions but none has worked. thanks in advance!

Response title

Attachments

jQuery Forum

Activity Trend