Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    modifying jquery filter

    Hello,
    I started working on functions and therefore I used a very nice live filter that I wanted to modify. Now my problem is that my modifications don't work.

    It works if I


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Guggenheim.js</title>
    <link type="text/css" rel="stylesheet" href="css/examples.css" media="screen"/>
    </head>
    <body>
    
    <div id="container">
            
                    <div id="basic-gallery" class="gallery">
                            <div class="guggenheim-slider">
                                    <div class="guggenheim-item marvel male powers avengers
    196201"><span class="sprite antman"></span></div>
                                    <div class="guggenheim-item dc male nopowers justiceleague
    193905"><span class="sprite batman"></span></div>
                                    <div class="guggenheim-item marvel male powers avengers
    194103"><span class="sprite captain-america"></span></div>
                                    <div class="guggenheim-item marvel female powers xmen
    198111"><span class="sprite rogue"></span></div>
                                    <div class="guggenheim-item marvel female powers avengers
    196403"><span class="sprite scarlet-witch"></span></div>
                                    <div class="guggenheim-item marvel male powers nogroup
    196208"><span class="sprite spiderman"></span></div>
                                    <div class="guggenheim-item marvel female powers xmen
    197505"><span class="sprite storm"></span></div>
                                    <div class="guggenheim-item dc male powers justiceleague
    193804"><span class="sprite superman"></span></div>
                                    <div class="guggenheim-item marvel male powers fantasticfour
    196111"><span class="sprite thing"></span></div>
                                    <div class="guggenheim-item marvel male powers avengers
    196208"><span class="sprite thor"></span></div>
                                    <div class="guggenheim-item marvel female powers avengers
    196306"><span class="sprite wasp"></span></div>
                                    <div class="guggenheim-item marvel male powers xmen 197408"><span
    class="sprite wolverine"></span></div>
                                    <div class="guggenheim-item dc female powers justiceleague
    194112"><span class="sprite wonder-woman"></span></div>
                            </div>
                            <div class="buttons">
                                    <a onclick="gallery.prev()">Prev</a>
                                    <a onclick="gallery.next()">Next</a>
                            </div>
                    </div>
    
                    <h2>Order</h2>
                    <a onclick="orderAlphabetically()" class="button order-bt current
    alphabetical">Order Alphabetically</a>
                    <a onclick="orderByAppearance()" class="button order-bt
    appearance">Order By First Appearance</a>
                    <a onclick="orderByTeam()" class="button order-bt team">Order By Team</a>
    
                    <hr/>
    
                    <h2>Filter</h2>
                    <form id="filter-form">
    
    
                            <div class="filter-set double">
                                    <h3>Team Affiliation</h3>
                                    <label>
                                            <input type="checkbox" value="" checked="checked"
    name="all-teams" onclick="toggleCheckboxes(this); filterGallery()">
                                            All
                                    </label>
    
                                    <label>
                                            <input type="checkbox" value="avengers" name="avengers"
    onclick="toggleCheckboxes(this); filterGallery()" class="team">
                                            Avengers
                                    </label>
    
                                    <label >
                                            <input type="checkbox" value="fantasticfour" name="fantasticfour"
    onclick="toggleCheckboxes(this); filterGallery()" class="team">
                                            Fantastic Four
                                    </label>
    
                                    <label>
                                            <input type="checkbox" value="justiceleague" name="justiceleague"
    onclick="toggleCheckboxes(this); filterGallery()" class="team">
                                            Justice League
                                    </label>
    
                                    <label>
                                            <input type="checkbox" value="xmen" name="xmen"
    onclick="toggleCheckboxes(this); filterGallery()" class="team">
                                            X Men
                                    </label>
    
                                    <label>
                                            <input type="checkbox" value="nogroup" name="nogroup"
    onclick="toggleCheckboxes(this); filterGallery()" class="team">
                                            Other / None
                                    </label>
                            </div>
    
            <div class="filter-set">
                                    <h3>Gender</h3>
                                    <label>
                                            <input type="checkbox" value="" checked="checked"
    name="all-gender" onclick="toggleCheckboxesg(this); filterGallery()">
                                            All
                                    </label>
    
                                    <label>
                                            <input type="checkbox" value="male" name="male"
    onclick="toggleCheckboxesg(this); filterGallery()" class="gender">
                                            Male
                                    </label>
    
                                    <label >
                                            <input type="checkbox" value="female" name="female"
    onclick="toggleCheckboxesg(this); filterGallery()" class="gender">
                                            Female
                                    </label>
                    </div>
                    </form>
    
    
                    <h2>Reset</h2>
    
                    <a onclick="resetGallery()" class="button">Reset Gallery</a>
    
    
    
            </div>
    </div>
    <script language="Javascript" type="text/javascript"
    src="js/jquery.min.js"></script>
    <script language="Javascript" type="text/javascript"
    src="js/guggenheim.min.js"></script>
    <script type="text/javascript">
    
                    function resetGallery(){
                            $('input[name="publisher"]').val([''])
                            $('input[name="gender"]').val([''])
                            $('input[name="powered"]').val([''])
                            $('input[type="checkbox"]').val([''])
                            $('.order-bt.current').removeClass('current')
                            $('.order-bt.alphabetical').addClass('current')
                            gallery.reset()
                    }
    
                    function orderAlphabetically(){
    
                            var els = $('.guggenheim-item')
    
                            $('.order-bt.current').removeClass('current')
                            $('.order-bt.alphabetical').addClass('current')
    
                            els.sort(function(a,b){
                                    var nameA = $('span',a)[0].className.replace('sprite ',''),
                                            nameB = $('span',b)[0].className.replace('sprite ',''),
                                            names = [nameA,nameB].sort()
    
                                    return names.indexOf(nameA) - names.indexOf(nameB)
                            })
    
                            gallery.order(els)
    
                    }
    
                    function orderByAppearance(){
                            var els = $('.guggenheim-item'),
                                    dateReg = new RegExp('[0-9]{6}')
    
                            $('.order-bt.current').removeClass('current')
                            $('.order-bt.appearance').addClass('current')
    
                            els.sort(function(a,b){
                                            var dateA = parseInt(dateReg.exec(a.className)[0]),
                                            dateB = parseInt(dateReg.exec(b.className)[0])
    
                                    return dateA - dateB
                            })
    
                            gallery.order(els)
                    }
    
                    function orderByTeam(){
                            var els = $('.guggenheim-item'),
                                    teamReg = new RegExp('(avengers|fantasticfour|justiceleague|xmen|nogroup)')
    
                            $('.order-bt.current').removeClass('current')
                            $('.order-bt.team').addClass('current')
    
                            els.sort(function(a,b){
                                    var teamA = teamReg.exec(a.className)[1],
                                            teamB = teamReg.exec(b.className)[1],
                                            teams = [teamA,teamB].sort()
    
                                    return teams.indexOf(teamA) - teams.indexOf(teamB)
                            })
    
                            gallery.order(els)
                    }
    
                    function filterGallery(){
                            var filters = [],
                                    teams = []
    
                            filters.push($('input[name="publisher"]:checked').val())
                            filters.push($('input[name="gender"]:checked').val())
                            filters.push($('input[name="powered"]:checked').val())
    
                            $('input[type="checkbox"]:checked').each(function(i,item){
                                    teams.push(item.value)
                            })
    
                            filters.push(teams.join('|'))
    
                            gallery.filter(filters)
                    }
    
                    function toggleCheckboxes(input){
                            if($('input[type="checkbox"].team:checked').length && input !=
    $('input[name="all-teams"]')[0])
                                    $('input[name="all-teams"]').attr('checked',false)
                            else
                                    $('input[type="checkbox"]').val([''])
                    }
    
                    window.onload = function(){
                            gallery = guggenheim('#basic-gallery')
                            filterGallery()
                    };
    
                    function filterGallery(){
                            var filters = [],
                                    genders = []
    
                            filters.push($('input[name="publisher"]:checked').val())
                            filters.push($('input[name="team"]:checked').val())
                            filters.push($('input[name="powered"]:checked').val())
    
                            $('input[type="checkbox"]:checked').each(function(i,item){
                                    genders.push(item.value)
                            })
    
                            filters.push(genders.join('|'))
    
                            gallery.filter(filters)
                    }
    
                    function toggleCheckboxesg(input){
                            if($('input[type="checkbox"].gender:checked').length && input !=
    $('input[name="all-genders"]')[0])
                                    $('input[name="all-genders"]').attr('checked',false)
                            else
                                    $('input[type="checkbox"]').val([''])
                    }
    
                    window.onload = function(){
                            gallery = guggenheim('#basic-gallery')
                            filterGallery()
                    };
    
      /*****************************************************************
       * Gauges Tracking Code -- PLEASE remove if copying this page!!!!
       *****************************************************************/
      var _gauges = _gauges || [];
      (function() {
        var t   = document.createElement('script');
        t.type  = 'text/javascript';
        t.async = true;
        t.id    = 'gauges-tracker';
        t.setAttribute('data-site-id', '4fb23ddcf5a1f57c4b000009');
        t.src = '//secure.gaug.es/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(t, s);
      })();
    </script>
    </body>
    </html>
    <!-- Localized -->
    I suppose the filters block each other but unfortunately I don't really know how to solve this.....

    Many Thanjs
    Last edited by VIPStephan; 09-13-2012 at 07:38 PM. Reason: fixed code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    What's making me scratch my head is what do you mean by filter and where is the css.

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Sunfighter,

    thanks for the reply.

    Basically I tried to modify this filter/selector
    http://oinutter.co.uk/guggenheim.js/

    Would be great if you could lead me into the right direction.
    Many Thanks,
    Klaus

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Sorry Klaus, but I'm not even gonna try to sort this one out.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •