i have twitter bootstrap carousel running on site. code carousel generated using smarty templates. have tons of other carousels running using same code, 1 causing me grief. images rotating fine, error when click on 1 of controls advance carousel. here's error getting in firebug:
typeerror: $active.attr(...) undefined , curid = $active.attr('id').substring(7) (bootstrap.js, line 343) (chrome throws warning substring being undefined undefined element)
in case don't have copy handy, here relevant section of bootstrap.js:
, slide: function (type, next) { var $active = this.$element.find('.item.active') , $next = next || $active[type]() , iscycling = this.interval , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' , = , e = $.event('slide', { relatedtarget: $next[0] }) , curid = $active.attr('id').substring(7) it seems cause of error none of .item elements (the carousel images) .active. or active carousel element doesn't have id. can tell watching code in firebug neither of these things happening.
in case helps, here smarty code generates carousel controls, showing each element has id, , first element being assigned class of .active:
<div class="text-control"> {foreach from=$articles item=article name=artforeach} <a {if $article.source|strlen > 7}href="{$article.source}"{else}href="javascript:void(0)"{/if} {if $smarty.foreach.artforeach.first} class="active"{/if} id="name{$article.id}" data-target="{$smarty.foreach.artforeach.index}"> <h3>{$article.name}</h3> <p>{$article.teaser[0].content|strip_tags|truncate:100:"..."}</p> </a> {/foreach} </div> anybody have clue might going on here?
after whole day of trying different things , examining code, figured out problem related concept of "event bubbling". although .active class, id, , data-target applied element, click event handled h3 element inside element. , since h3 doesn't have class .active or id or data-target, carousel broke down. thought maybe had special block-level status of h3 element, happens if put span element or element in there.
this code works:
<div class="text-control"> {foreach from=$articles item=article name=artforeach} <a {if $article.source|strlen > 7}href="{$article.source}"{else}href="javascript:void(0)"{/if} {if $smarty.foreach.artforeach.first} class="active"{/if} id="name{$article.id}" data-target="{$smarty.foreach.artforeach.index}"> {$article.name} <p>{$article.teaser[0].content|strip_tags|truncate:100:"..."}</p> </a> {/foreach} </div> all i've done remove h3 tags. interestingly, p tags don't seem affect event bubbling @ all. long there plain text @ beginning of element, else seems fine.
Comments
Post a Comment