function Runjcarousel(){
$(".bww-carousel").jCarouselLite({
btnNext: ".bww-carousel-next",
btnPrev: ".bww-carousel-prev"
});
//add border to selected device
$('a[onclick*="selectHandset"]').click(function () {
$(".bww-carousel img").removeClass("active");
$(this).parent().find("img").addClass("active");
});
}
$(document).ready(function(){
Runjcarousel();
});
//Call on window resize
$(window).resize(function() {
Runjcarousel();
});
Rerun jquery function on resize noconflict
-
12-07-2023 - |
Pergunta
I have this script
jQuery.noConflict();
(function ($) {
$(".bww-carousel").jCarouselLite({
btnNext: ".bww-carousel-next",
btnPrev: ".bww-carousel-prev"
});
//add border to selected device
$('a[onclick*="selectHandset"]').click(function () {
$(".bww-carousel img").removeClass("active");
$(this).parent().find("img").addClass("active");
});
})
(jQuery);
which is in wordpress footer.php, I need to rerun jCarouselLite anytime the browser resizes.
I have tried:
jQuery.noConflict();
(function ($) {
$(".bww-carousel").jCarouselLite({
btnNext: ".bww-carousel-next",
btnPrev: ".bww-carousel-prev"
});
//add border to selected device
$('a[onclick*="selectHandset"]').click(function () {
$(".bww-carousel img").removeClass("active");
$(this).parent().find("img").addClass("active");
});
})
$(window).resize(function() {
jCarouselLite();
});
(jQuery);
as well as:
jQuery.noConflict();
(function ($) {
$(".bww-carousel").jCarouselLite({
btnNext: ".bww-carousel-next",
btnPrev: ".bww-carousel-prev"
});
//add border to selected device
$('a[onclick*="selectHandset"]').click(function () {
$(".bww-carousel img").removeClass("active");
$(this).parent().find("img").addClass("active");
});
$(window).resize(function() {
jCarouselLite();
});
})
(jQuery);
and
jQuery.noConflict();
var jCarouselLite = (function ($) {
$(".bww-carousel").jCarouselLite({
btnNext: ".bww-carousel-next",
btnPrev: ".bww-carousel-prev"
});
//add border to selected device
$('a[onclick*="selectHandset"]').click(function () {
$(".bww-carousel img").removeClass("active");
$(this).parent().find("img").addClass("active");
});
$(window).resize(function () {
jCarouselLite();
});
})
(jQuery);
all attempts have failed thus far, continue to get object is not a function (anonymous function) error in Chrome Console.
Suggestions?
Solução
Outras dicas
With some help from Rohit, here's what finally worked for me (for any future readers)
jQuery.noConflict();
(function ($) {
function Runjcarousel() {
$(".bww-carousel").jCarouselLite({
btnNext: ".bww-carousel-next",
btnPrev: ".bww-carousel-prev"
});
//add border to selected device
$('a[onclick*="selectHandset"]').click(function () {
$(".bww-carousel img").removeClass("active");
$(this).parent().find("img").addClass("active");
});
}
$(document).ready(function () {
Runjcarousel();
});
//Call on window scroll
$(window).resize(function () {
Runjcarousel();
});
})
(jQuery);
There's probably a shorter way to write it, but it behaves with WordPress' version of jQuery and does what I needed it to do so I'm happy. Thanks for the help Rohit! Wouldn't have figured it out with your help! :)
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow