Wednesday, 15 February 2012

iframe - jQuery open fancybox if condition is met -



iframe - jQuery open fancybox if condition is met -

i have anchor opens fancybox. want fancybox open when selection selectbox made.

i found out binding click event anchor preventdefault or homecoming false not prevent fancybox opening. did find out way stop fancybox opening. have:

html

<div> <a id="brasil" href="<?php echo $this->url( array( "module" => "amodule", "controller" => "acontroller", "action" => "soccer"))?>" class="someclass bigfancybox"><?=$this->translate('soccer')?></a> </div>

the dimensions (width, height, etc defined in fancybox.js) of fancybox tied classname "bigfancybox" of anchor.

in jquery have check if selection on match_id made:

jquery("#brasil").fancybox({ onstart: function() { var matchid = jquery('#match_id').val(); if(matchid == '') { alert(selectmatchmessage); homecoming false; } } });

this works fine except if status met, fancybox opens in default dimensions , not opening iframe without jquery condition. there way check status first before opening fancybox in iframe?

you may have bind click event #brasil selector (or .bigfancybox selector if prefer) rather fancybox.

then, validate status after event , fire fancybox programmatically if status met otherwise nil (return false) :

jquery("#brasil").on("click", function () { var matchid = jquery('#match_id').val(); if (matchid !== '') { // status not empty, fire fancybox jquery.fancybox({ // fancybox api options href: this.href, type: "iframe" }); }; homecoming false; // prevent default , stop propagation }); // on click

see jsfiddle

note :

the fiddle uses fancybox v1.3.4 code seamlessly work fancybox v2.x too, create sure utilize right api options each version.

jquery iframe fancybox

No comments:

Post a Comment