jquery assigning click function from a plugin -
it's old project i'm updating not th prettiest of coding.
i trying adapt plugin specific needs, plugin in question simple colapsible panel plugin.
i want able style each panel different color depending on rel assigned div.
its php code generates css , code div, call jquery apply collapsible panel plugin.
it styles ok click function not work, pointers helpfull: thinking need apply .delegate() somewhere not sure how to.
the url: http://www.reelfilmlocations.co.uk/new%20search/fullsearch_rework.php test results: click [choose all] above select borough selector , click search button.
the code creates panel:
//all wrapped in php loop: <style type="text/css"> .c_<?php echo $mycurrentborough ?>_color{ color:<?php echo $row_rs_myboroughs['color']; ?>; font-family: arial, helvetica, sans-serif; font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight: bold; } .collapsiblecontainer<?php echo $mycurrentborough ?>{ border: solid 0px <?php echo $row_rs_myboroughs['color']; ?>; } .collapsiblecontainertitle<?php echo $mycurrentborough ?>{ cursor:pointer; color:#000000; background-color:<?php echo $row_rs_myboroughs['color']; ?> } .collapsiblecontainertitle div<?php echo $mycurrentborough ?>{ padding-top:5px; padding-left:10px; background-color:<?php echo $row_rs_myboroughs['color']; ?>; color:#607882; } .collapsiblecontainercontent<?php echo $mycurrentborough ?>{ padding: 10px; background-color:<?php echo $row_rs_myboroughs['color']; ?>; } </style> <?php if($boroughcounter > 0){?> <div class="collapsiblecontainer<?php echo $mycurrentborough; ?>" tabindex="<?php echo $mycurrentborough; ?>" title="locations found in <?php echo $row_rs_myboroughs['borough_name']; ?>" rel="<?php echo $mycurrentborough; ?>"> div content goes here </div> <script type="text/javascript"> $(document).ready(function() { $(".collapsiblecontainer<?php echo $mycurrentborough; ?>").collapsiblepanel(); }); </script> <?php } //end check see if locations exist in borough?>
the jquery plugin:
(function($) { $.fn.extend({ collapsiblepanel: function() { // call configurecollapsiblepanel function selected element return $(this).each(configurecollapsiblepanel); } }); })(jquery); function configurecollapsiblepanel() { $(this).addclass("ui-widget"); // wrap contents of container within new div. $(this).children().wrapall("<div class='collapsiblecontainercontent"+$(this).attr("rel")+" ui-widget-content' rel='"+$(this).attr("rel")+"'></div>"); // create new div first item within container. put title of panel in here. $("<div class='collapsiblecontainertitle"+$(this).attr("rel")+" ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependto($(this)); // assign call collapsiblecontainertitleonclick click event of new title div. $(".collapsiblecontainertitle"+$(this).attr("rel")+"", this).click(collapsiblecontainertitleonclick()); } function collapsiblecontainertitleonclick(myid) { // item clicked title div... parent (the overall container) , toggle content within it. $(".collapsiblecontainercontent"+$(this).attr("rel")+"", $(this).parent()).slidetoggle(); }
the click method invoking function, instead of passing reference function. remove () , event trigger.
current code: $(".collapsiblecontainertitle"+$(this).attr("rel")+"", this).click(collapsiblecontainertitleonclick());
fixed code: $(".collapsiblecontainertitle"+$(this).attr("rel")+"", this).click(collapsiblecontainertitleonclick);
Comments
Post a Comment