I am using BxSlider plugin of jQuery in my page, but it behaves very strange, when I use this code to make slider using BxSlider only the slider works nothing else work even my custom functions. Meaning all the other functions stop working without throwing errors in console. I am stuck! I have tried many things but no success, Is there anything wrong my this BxSlider code or something else?
Code for my BxSlider is:
var perLink = jQuery('#qc-per');
var nextLink = jQuery('#qc-next');
var CustomPager = jQuery('#qc-custom-pager');
var BxSlider;
var ActualPager;
window.onload = function() {
console.log('ready');
BxSlider = jQuery('.bxslider').bxSlider({
infiniteLoop: false,
touchEnabled: true,
pager: true,
pagerType: 'short',
pagerShortSeparator: ' de ',
nextText: 'SIGUIENTE',
prevText: 'ANTERIOR',
hideControlOnEnd: true,
slideWidth: 690,
adaptiveHeight: true,
autoControls: true,
onSlideAfter: function (slideElement, oldIndex, newIndex) {
var total = BxSlider.getSlideCount();
var current = newIndex + 1;
if (total == current) {
nextLink.css('visibility', 'hidden');
} else {
nextLink.css('visibility', 'visible');
}
if (current <= 1) {
perLink.css('visibility', 'hidden');
} else {
perLink.css('visibility', 'visible');
}
CustomPager.text(ActualPager.text());
}
});
ActualPager = jQuery('.bx-default-pager');
CustomPager.text(ActualPager.text());
perLink.css('visibility', 'hidden');
}
function doNext() {
BxSlider.goToNextSlide();
}
function doPerv() {
var slideNr = BxSlider.getCurrentSlide() - 1;
BxSlider.goToSlide(slideNr);
}
I have included the "jquery.bxslider.js" also, but the other functions stops working only if I use/insert the above code to make the slider.
I am using jquery-1.11.3.min.js and BxSlider v4.1.2. Also I have Mootools in the site too.
Thank you and please let me know if my question is not clear.
After spending 2 days on the same code and same page I found that the first slide of BxSlider was replecating all the page in it everytime and it was causing the js libraries load again within each time slider load.
The first slide or BxSlider was looking something like
<img src="...." >WHOLE PAGE WAS LOADING AGAIN IN IT WAS CAUSING PROBLEM</img>
I still do not know if its a bug of BxSlider or due to my both libraries, I a using Mootools and Jquery at the same time due to some reasons.
To resolve this I used
window.onload = function() {
//CODE ------
}
Instead of
jQuery(document).ready(function () {
//CODE ------
});
I hope it will help someone.
Related
Im using fancybox2 to display images in a lightbox. This works fine for images that are present initially. However the images that are loaded via ajax (an infinite scroll) do not display in fancybox.
The dark grey overlay appears, but there is no image.
From researching i understand i need to reinitialize fancybox - i have tried various ways of doing this after the additional content has loaded but its just not working.
My Fancybox script
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
"closeClick": "true",
"closeBtn": "true",
"overlay": "true",
"type": "image",
"nextClick": "false",
"scrolling": 'no',
helpers: {
overlay: {
locked: false,
css: {
'background': 'rgba(0, 0, 0, 0.50)'
}
},
keys: {
next: {
},
prev: {
}
},
}
});
});
</script>
Infinate Scroll Script
<script type="text/javascript">
var BlockNumber = 2; //Infinate Scroll starts from second block
var NoMoreData = false;
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) {
inProgress = true;
$("#loadingDiv").show();
$.post("#Url.Action("InfinatePopularScroll", "Wall")", { "BlockNumber": BlockNumber, "AlreadyShown": alreadyDone },
function (data) {
BlockNumber = BlockNumber + 1;
NoMoreData = data.NoMoreData;
$("#bookListDiv").append(data.HTMLString);
$("#loadingDiv").hide();
inProgress = false;
});
}
jQuery("abbr.timeago").timeago
//here is where i have tried to reinitialize
// i have tried copying the entire script posted in the code block above
// i have tried $(".fancybox").fancybox();
});
</script>
As you may be able to tell i suck at javascript - so any help or ideas would be appreciated.
Thanks in advance.
In the tips blog of fancybox exists an ajax example (#see http://fancybox.net/blog#tip5). In my opinion it should work with
$.fancybox.resize();
If not, maybe you can try to reinitialize the fancybox with a combination of the current data and the new content (like it is done in the example after the successful ajax call):
$.fancybox(data);
I'm trying to integrate jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel) with the plugin - jquery cycle2 plugin.
Everything was fine until I discovered that mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel.
On GitHub I found a plugin (https://github.com/amondit/jquery.scrollsteps.js) designed specifically for this plugin to handle with this problem.
I used the file jquery.scrollsteps-full-min.js.
That's how I call the plugin:
$(function() {
var $slider = $('.slider_overlay');
// slider initialize
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list',
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
// initialize scrollsteps plugin
$slider.scrollsteps({
up: $slider.cycle('prev'),
down: $slider.cycle('next')
});
});
And, when I start to scroll the page up and down, I get the following error message from firebug console:
"TypeError: i.down is not a function" or "TypeError: i.up is not a function"
Perhaps someone has any ideas or thoughts why this error may occur?
If I use a default mousewheel init (without scrollsteps plugin) - everything worked fine:
$slider.mousewheel(function(e) {
if (e.deltaY > 0) {
$slider.cycle('prev');
} else {
$slider.cycle('next');
}
});
but as I mentioned it triggers a lot of scrolling events.
Maybe I'm solve this problem incorrectly ? If somebody knows other solutions - will be very grateful for the help.
Аnswer )
$(function() {
var $slider = $('.slider_overlay');
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list'
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
function prev() {
$slider.cycle('prev')
}
function next() {
$slider.cycle('next')
}
$slider.scrollsteps({
up: prev,
down: next
});
});
I have created a click function on an ASPX page which worked fine, when I moved the code to my site.master which has a existing J query function it doesn't seem to work.
this is my J query function I created:
var scrolled = 0;
$(document).ready(function () {
try {
$("#downClick").on("click", function () {
scrolled = scrolled + 235;
$(".cover").stop().animate({
scrollTop: scrolled
});
});
$("#upClick").on("click", function () {
scrolled = scrolled - 235;
$(".cover").stop().animate({
scrollTop: scrolled
});
});
$(".clearValue").on("click", function () {
scrolled = 0;
});
} catch (e) { }
});
However, when I tried adding this to my main site, in the site.master, it just refreshes the page when I click more booklets.
Clearly the code works but something in the site.master making the page refresh.
I have another J query function in the site.master which I think may be causing this:
$(document).ready(function () {
try {
$('.slider1').bxSlider({
slideWidth: 960,
captions: true,
auto: true,
autoControls: true
});
} catch (e) { }
});
This is a slider on the page, but with the previous code added it doesn't work.
Any ideas why the first code doesn't work in my main page, am assuming its because threes other Jquery functions but still not sure why it refreshes. any help would be much appreciated.
You're using buttons inside a form; the button is causing a postback. Perfectly normal.
Instead, use an input of type button. Rewrite:
<button id="downClick">More Booklets</button>
So that it reads:
<input id="downClick" type="button" value="More Booklets" />
Your jQuery selectors are based on the id, so it'll still handle the click events as you'd expect.
I am using unslider, jquery light slider in my website which is working but can I keep the plugin in my image hover ?
I have tried these but doesnot work:
$(function() {
$('.banner').unslider({
autoplay:false;
});
});
$("#banner").hover(function(){
if($('#banner').autoplay('false')){
autoplay : true;
}, function (){
autoplay: false;
}
});
Your usage is quite strange and I guess you may want to temporarily stop sliding when you hover the banner. After checking out the documentation of unslider, I guess you may have a test on the following snippet:
$(function() {
var slidey = $('.banner').unslider({}),
data = slidey.data('unslider');
// I don't really know the relationship of $('.banner') and $('#banner') in your HTML code.
$('.banner').hover(
function() {
data.stop();
},
function() {
data.start();
}
);
});
I can get the tabs to auto rotate, and pause on hover, but can't seem to get them started again when you mouse out. Also, is "fadeInSpeed" done correctly? the Please take a look and see if you can help, it's much appreciated! Really glad to see jQueryTools doing well again!
$(function() {
var rotateDelay = 3500;
var rotateTabs=true;
var $tabItems = $('#flowtabs li a').hover(function(){
rotateTabs=false;
});
var tabs = $("ul#flowtabs").tabs('#flowpanes > div', {api:true, effect:'fade', fadeInSpeed: 100, rotate: true});
function doRotateTabs(){
if (rotateTabs) {
setTimeout(function(){
if (!rotateTabs) return;
if(tabs.getIndex() == $tabItems.length-1){
tabs.click(0);
}
else {
tabs.next();
}
doRotateTabs();
}, rotateDelay);
}
}
doRotateTabs();
});
Did you ever solve this problem
Why are you writing your own code to make it auto play I just passed the configuration for sideshow and it works. It seems to be pausing on mouse over and works like a charm.
My code is below
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: 'true'
});
});
I hope this helps Adity Bajaj