connect a jquery function to bootstrap's carousel slide event - javascript

I created the following function:
//Toggle height of header-foto function
function height_toggler() {
$('body').toggleClass('large-slider small-slider',500);
$('#height-toggler').find('i').toggleClass('fa-rotate-270 fa-rotate-90');
}
I call this function when a user click the button:
// bind the function to a click on the toggler
$('#height-toggler').click( function() {
height_toggler();
});
this works perfectly, you can see it live on this page
My client also wants this function bound on the Bootstrap Carousel's slide event and only on pages with 100% height carousels.
I came up with the following code, but this triggers everytime the carousel slides (which I understand). How can I make it trigger only on the first slide after page load?
if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
$('.carousel').on('slide.bs.carousel', function () {
height_toggler();
});
}

You can use one() method.
if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
$('.carousel').one('slide.bs.carousel', function () {
height_toggler();
});
}

IF you want an event to be executed only once, you can use .one() instead of .on()
if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
$('.carousel').one('slide.bs.carousel', function () {
height_toggler();
});
}

Related

Animation in javascript works every other time

I get a dropdown-toggle (id="actions") with image (id=imgAction) in html. I added script in javascript
$(document).ready(function() {
var el = document.getElementById("actions");
if (el.addEventListener)
el.onmouseover = tadaAnimation;
function tadaAnimation() {
$(imgAction).toggleClass('animated tada');
}
});
and it works but every second time. Why it doesn't work every time I hover the dropdown-toggle.
Main problem area it that you are binding only mouseover event handler. You also need to attach mouseout event handler
Every time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter. So I would recommend you to use mouseenter instead of mouseover
As you are using jQuery bind event using it. I would suggest you to use .hover()
$(document).ready(function () {
function tadaAnimation() {
$("#imgAction").toggleClass('animated tada');
}
$("#actions").hover(tadaAnimation, tadaAnimation)
});
$(document).ready(function() {
var el = document.getElementById("actions");
if (el.addEventListener)
el.onmouseover = tadaAnimation;
el.onmouseout = tadaAnimation; // add this line, should works
function tadaAnimation() {
$(imgAction).toggleClass('animated tada');
} });

Bootstrap 3 Modal Event (Hidden.Bs.Modal) Keeps Repeating

I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code:
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
$('#featuresModal1').on('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
document.getElementById('#featuresModal1').style.display="none";
});
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal2').on('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
document.getElementById('#featuresModal2').style.display="none";
});
});
However, the problem is: Even when I close/hide the first modal ('#nextModal12') by clicking the CLOSE button instead of the next, the second modal appears.
I believe this is because the hidden.bs.modal function is picked up and called again even when I'm not clicking the next button. How do I prevent the script from picking up the hidden.bs.modal function indiscriminately?
Try use .one function instead of .on. When you use .on() your callback would be repeating again and again, beacuse you bind it again for each click;
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
$('#featuresModal1').one('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
});
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal2').one('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
});
});
Don't bind hidden.bs.modal again and again on modal click, just bind it once like,
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
});
$('#featuresModal1').on('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
$(this).hide();// you can use hide function
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
});
$('#featuresModal2').on('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
$(this).hide();
});
Alternatively, you can try
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide'); // hide first
$('#featuresModal2').modal('show'); // show second
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal3').modal('show');
});

Changing jQuery Event from click to on load

I am using the following onclick function that triggers the object to become full screen when clicked. I want the object to be fullscreen when the page loads without having to click.
fbNav.find('ul li.fullscreen').on('click', function(e){
if(!fullscreen) {
fbFullscreen.show();
fbFullscreen.append(fbCont);
$window.trigger('resize');
} else {
fbParent.append(fbCont);
fbFullscreen.hide();
$window.trigger('resize');
}
fullscreen = !fullscreen;
});
How can i achieve this?
You better put the main logic in a function and call the same function on ready and click.
function fullscreen(){
if(!fullscreen) {
fbFullscreen.show();
fbFullscreen.append(fbCont);
$window.trigger('resize');
} else {
fbParent.append(fbCont);
fbFullscreen.hide();
$window.trigger('resize');
}
fullscreen = !fullscreen;
}
//will be executed when page loads
$(document).ready(function(){
fullscreen();
});
//will be executed on click
fbNav.find('ul li.fullscreen').on('click', function(e){
fullscreen();
});
You can trigger click event on page load.
fbNav.find('ul li.fullscreen').trigger("click");

jQuery slideToggle breaking when you press a link inside a div

I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you
Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.
I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});

jQuery overlapping issue with animation

The whole problem is that I have a header that is fixed and there's a div under it that I need to move accordingly. Though there is a problem if I click really fast like 3 or 4 times one of the animations messes up and I end up having the 'under' div inside the content. I use stop before animating and sliding. I tried using queue and such.. No avail.
$(".header").click(function () {
$header = $(this);
$content = $header.next();
$content.stop().slideToggle(500, function () {
if(($('.lol').css('margin-top')) == '47px')
{
$(".under").stop().animate({'margin-top': "100px"}, 500)
}
else
{
$(".under").stop().animate({'margin-top': "47px"}, 500)
}
});
});
https://jsfiddle.net/zddzvxLy/8/
Here's jsfiddle to show the problem. Try clicking on the header a few times really fast and 'This one must be under" will appear inside CONTENT.
Firstly, you have no item with the class .lol - change that to .under
Secondly, change your stop() calls to stop(true, true)
Thirdly, I would take your animation call for .under out of the completed function and call it in parallel with your first animation.
https://jsfiddle.net/zddzvxLy/10/
Avoid calling animate() when the element is already being animated:
if ($('.content').is(':animated') === false)
{
// animate
}
else
{
return false;
}

Categories