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

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

android - java.net.UnknownHostException(Unable to resolve host “URL”: No address associated with hostname) -

i developing app testing asp.net webservice in android.for simple webservice adding 2 numbers used.where numbers passed parameters.the result in dialogue.the webserver works in local. when application runs following result exception.i provided internet permission in manifest. java.net.unknownhostexception(unable resolve host “ http://url.com/ ”: no address associated hostname) my code given below main activity public static string rslt=""; /** called when activity first created. */ @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); button b1=(button)findviewbyid(r.id.button1); final alertdialog ad=new alertdialog.builder(this).create(); b1.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { // todo auto-generated method stub try { ...
Read more