javascript - Integrating Isotope with BBQ hash history -


i know it's popular question i'm struggling little tutorial on isotope site develop current isotope use bbq hash history.

i trying add bbq hash history current set can link directly filtered content.

this jquery code far, works perfectly.

jquery(function () {     var $container = jquery('.wwd-content-container');     $container.imagesloaded(function () {         $container.isotope({             itemselector: '.each-wwd-content',             filter: '.corporate'         });     });     jquery('.wwd-filters a').click(function () {         jquery('a.active-filter').removeclass('active-filter');         jquery(this).addclass('active-filter');         var selector = $(this).attr('data-filter');         $container.isotope({             filter: selector         });         return false;     }); });

and have changed filter navigation from:

<li><a href="#" data-filter=".<?php echo esc_attr( $page_class ) ?>"><?php the_title(); ?></a></li>

to

<li><a href="#filter=.<?php echo esc_attr( $page_class ) ?>"><?php the_title(); ?></a></li>

i using wordpress hence $page_class variables etc — don't spend time on that.

thanks , appreciated. r

update

this have far...

jquery(function () {     var $container = jquery('.wwd-content-container');     $container.imagesloaded(function () {         $container.isotope({             itemselector: '.each-wwd-content',             filter: '.corporate'         });     });     jquery('.wwd-filters a').click(function () {         jquery('a.active-filter').removeclass('active-filter');         jquery(this).addclass('active-filter');         var selector = $(this).attr('data-filter');         $container.isotope({             filter: selector         });         return false;     });     jquery('.wwd-filters a').click(function(){           // href attr, remove leading #       var href = jquery(this).attr('href').replace( /^#/, '' ),           // convert href object           // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }           option = $.deparam( href, true );       // set hash, triggers hashchange on window       $.bbq.pushstate( option );       return false;     });     jquery(window).bind( 'hashchange', function( event ){       // options object hash       var hashoptions = $.deparam.fragment();       // apply options hash       $container.isotope( hashoptions );     })       // trigger hashchange capture hash data on init       .trigger('hashchange'); });

it looks you've gotten rid of value variable selector, since tag no longer has attribute of data-filter. if set breakpoint value of selector, you'll see returns undefined instead of .corporate or of other values. means isotope doesn't filter anymore.

have on documentation this, linked below. http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html

your click event function should more or less documentation, particularly section titled 'jquery script'. function grabs selector href value, filters instance of isotope, , pushes through bbq hash history management.

i make sure have function bound hashchange well, written in documentation. it's important make sure hooking bbq's hashchange event make filtered content bookmarkable.

update

you've got 2 functions hooked on click. need second 1 fire isotope filter hashchange event.

have @ following code , compare earlier example: http://jsfiddle.net/hwwa4/1/


Comments

Post a Comment

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

since using iframes house external pages are, accounts "not preferred method" , disallowed sites (flickr, one), want dynamically generate browser tabs. e.g., when user submits form, want dynamically generate tab on browser in response submitted. e.g., might want add new tab url like: http://www.bigsurgarrapata.com/contact how in jquery? you want form target attribute action attribute. http://www.w3schools.com/tags/att_form_target.asp browsers have ultimate control on result of target attribute open new tab value of _blank. <form action="contact_submit.php" target="_blank" method="post">
Read more

node.js - Getting the socket id,user id pair of a logged in user(s) -

i have web application done using node js , in it,i have authentication system requires users log in before can access pages. have 2 pages,the homepage , updates page. from read docs,a new socket id issued when user opens tab in browser. me being admin,i know socket id of logged in user , more so,the socket id,logged in user id pair logged in users. what method can use socket id,logged in user id pair make sure broadcast realtime info users online?.
Read more

keyboard - C++ GetAsyncKeyState alternative -

i using windows.h library's getasynckeystate function define key pushed on keyboard . here program returns int value of pushed key example. #include <iostream> #include <windows.h> using namespace std; int main (){ char i; for(i=8;i<190;i++){ if(getasynckeystate(i)== -32767){ cout<<int (i)<<endl; } } return 0; } but trying make opengl simple game , function appeared slow . there function not need cycle 180 times , if statement . thanks you're trying make opengl game, you're going use glfw. if that's case can away using glfwgetkey() such: if (glfwgetkey(glfw_key_up) == glfw_press) {...} if (glfwgetkey(glfw_key_down) == glfw_press) {...} that method nicely explained in tutorial 6 opengl-tutorial.org . should start first tutorial of beginners tutorials , later intermediate tutorials . if you're going make win32 window can listen wm_keydown or wm_keyup messages , virtua
Read more