Develop Reference

JQuery Don't work after using BxSlider plugin

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.

jquery not working with more than 1 function

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.

Unslider on Image Hover

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();
}
);
});

How would I control a JCarousel inside another JCarousel?

Using JCarousel I currently have a carousel inside another carousel, which I can trigger to start playing slides by clicking on a play button that I created on the outside carousel. These are all loaded dynamically.
I'd like to have the inner carousel stop animating and go back to it's original loaded position when I click to change the slide of the outer carousel.
Here is what I have currently for manipulating JCarousel:
//outer carousel
$('#carousel').jcarousel({
auto: 0,
wrap: 'circular',
scroll: 1,
initCallback: carousel_initCallBack,
itemVisibleInCallback: {
onBeforeAnimation: gallerycarousel_itemfirst
}
// Info Box
$('.info').click(function() {
var itemid = $(this).attr('id').substring(5);
$.ajax({
url: 'php/get_case_studies.php?item=' + itemid,
dataType: 'json',
success: function(data) {
var infobox = $('#box_info' + data.data[0].id)
infobox.html('');
var content = '<div class="main_sec">'+data.data[0].main_desc+'</div><div class="sec_sec">'+data.data[0].sec_desc+'</div><div class="visit"><span class="box_num"><img src="img/visitor.png" alt="#" /> Visitors:</span>'+data.data[0].visitors+'</div><div class="avg"><span class="box_num"><img src="img/time.png" alt="#"/> Average time on site:</span>'+ data.data[0].avg_time +'</div>';
infobox.append(content);
$('.box_info').animate({left: '0px'}, 200);
}
});
});
function carousel_initCallBack(carousel) {
carousel.clip.hover(function() {
$('.gallery_control').stop().animate({"top": "454px"}, 200);
carousel.stopAuto();
}, function() {
$('.gallery_control').stop().animate({"top": "524px"}, 200);
$('.box_info').animate({left: '-302px'}, 200 );
carousel.startAuto();
});
$('#gallerycarousel_controls .btn_right').click(function() {
carousel.next();
return false;
});
$('#gallerycarousel_controls .btn_left').click(function() {
carousel.prev();
return false;
});
$('.grid').click(function() {
$('.gallery_control').animate({"top": "524px"}, 200);
$('#grid_view').fadeIn('slow');
carousel.stopAuto();
$('#grid_view').mouseleave(function() {
$(this).fadeOut('slow');
carousel.startAuto();
});
});
$('#carousel_slides .btn_item').click(function() {
carousel.scroll($.jcarousel.intval($(this).attr('id')));
$('#grid_view').fadeOut('slow');
$('.gallery_control').animate({"top": "454px"}, 200);
return false;
});
//this is the play button which generates and starts the inner carousel
$('.play').click(function() {
var itemid = $(this).attr('id').substring(5);
$('#int_carousel' + itemid).load('get_slideshow.php?slideshow&item=' + itemid, function() {
$('#int_carousel' + itemid).jcarousel({
auto: 3,
wrap: 'circular',
scroll: 1
});
});
});
}
I have tried adding a click function within the 'carousel_initCallBack' function to see if I can control the inner carousel like this:
$('#gallerycarousel_controls .btn_right').click(function() {
$('#int_carousel' + itemid).stopAuto();
});
The above doesn't work as I have tried and this would probably not bring the inner carousel back to the original position of the slide.
I have went on multiple different forums and have been searching everywhere I could on the internet and I am still not able to find any solid help or assistance. I am in dire need of assistance on this as I ran out of options. Please if someone can help me, I'd appreciate it so much. I am still new to web development and need guidance.

How do enable tooltip on dynaically added code?

I have a site, which uses paging.
I use the following plugin for tooltips: http://plugins.jquery.com/project/tooltip
I use AJAX to update a div container. This is the code:
$(".page-number").live("click", function ()
{
var page = parseInt($(this).html());
var progressbarValue = ((page / $("#NumberOfPages").val()) * 100);
var catId = $("#CategoryID").val();
$.ajax({
url: '#Url.Action("QuestionList")',
data: { "categoryId": catId, "page": page },
success: function (data) {
$("#question-list").html(data);
$("#progressbar").progressbar("value", progressbarValue);
$("#progresstext").html("<p>" + Math.round(progressbarValue) + "% gennemgået</p>");
EnableDisableToolTip();
}
});
});
This is the function to enable/disable tooltips:
<script type="text/javascript">
function EnableDisableToolTip() {
var help_text = $("#helptext_checkbox").is(':checked:');
if (help_text) {
alert("true");
$(".tooltip").qtip("enable")
}
else if (!help_text) {
alert("false");
$(".tooltip").qtip("disable");
}
}
</script>
When i load a new page, i cannot see any tooltips when i hover the mouse over an element with class="tooltip". Also, when i view the source code, the dynamically added code isnt there. It works on the first page, and the source code with class="tooltip" is there. But not with the dynamic stuff.
How can i solve this issue?
[EDIT]
The tooltip code:
$(".tooltip").each(function()
{
$(this).qtip({
show: 'mouseover',
hide: 'mouseout',
style: {
name: 'light', // Inherit from preset style
width: {
min: 0,
max: 250
},
},
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomLeft'
},
adjust: {
screen: true,
scroll: false
}
}
});
});

Viewing the page source shows what was delivered to the client when the page was originally requested. It does not show the current DOM.
When you add the new content to the page, it does not know what has been run. You need to rescan the page for tooltips when the content is added.

In EnableDisableToolTip there is a condition to enable/disable the tooltip ($("#helptext_checkbox").is(':checked:')). Are you sure it is checked when you make a ajax call? I think it is not checked due to which the tooltip is not enabled.