Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript help with js code

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #167160
    cybershot
    Participant

    I have this code for for a filterable gallery

    if(filterVal == 'all') {  
                $('ul.sortable li.hidden').fadeIn('fast').removeClass('hidden');  
            } else {  
                $('ul.sortable li').each(function() {  
                    if(!$(this).hasClass(filterVal)) {  
                        $(this).fadeOut('fast').addClass('hidden');  
                    } else {  
                        $(this).fadeIn('fast').removeClass('hidden');  
                    }  
                });  
            }  
    
            return false;  
        });
    

    it works. I added a select box for responsive design purposes. I can’t get the dropdown to work with the gallery code above. I am assuming that this line

    $('ul.sortable li').each(function()

    needs to be changed to add in for the select box. Any ideas?

    #167190
    Alan C
    Participant

    Well just from this it is really hard to tell what you are missing. A demo in codepen would help lots. But just from a quick glance it I don’t see anyplace you are getting the value of the select box and setting it equal to filterVal

    Something like this mighty help
    http://codepen.io/anon/pen/trqCc/

    #167262
    cybershot
    Participant

    Here is all the code for the gallery. It’s a filterable gallery that hides content based on what you choose.

    $(document).ready(function(){
    
    
            $('ul#filter a').click(function() { 
            //$('.simplePageNav1 a').click();
            $(this).css('outline','none');  
            $('ul#filter .current').removeClass('current');  
            $(this).parent().addClass('current');  
    
            var filterVal = $(this).text().toLowerCase().replace(' ','-');  
    
            if(filterVal == 'all') {  
                $('ul.sortable li.hidden').fadeIn('fast').removeClass('hidden');  
            } else {  
                $('ul.sortable li').each(function() {  
                    if(!$(this).hasClass(filterVal)) {  
                        $(this).fadeOut('fast').addClass('hidden');  
                    } else {  
                        $(this).fadeIn('fast').removeClass('hidden');  
                    }  
                });  
            }  
    

    What I wanted to do was add a select dropdown for responsive purposes. So there in an inline list for regular screens and then that gets hidden for small screens and the select box appears. I haven’t been able to adjust the js to handle the selection of the dropdown

    #167418
    Alan C
    Participant

    Well it seems to me you would need to detect if the element exists and if it does override the value of filterVal.

    Here is a quick possibility. Mind you this should probably be cleaned up.

    http://codepen.io/anon/pen/GdemB

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.