I am working on a website. The layout is horizontal when you click on the navigation it slides to the page you want. That all works but I then added a dimmer to each page so when you are on the your selected page the others are dimmed out. I was wondering if there is a better way to write this code, at the moment it is a function for each page and I wanted to know if there is a way to shorten this.
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".test").click(function(){
$(".dimmerservices").fadeOut('slow', function() {
// Animation complete.
});
$(".dimmerother1").fadeIn('slow', function() {
// Animation complete.
});
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
$(document).ready(function(){
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".casestud").click(function(){
$(".dimmercase").fadeOut('slow', function() {
// Animation complete.
});
$(".dimmerother2").fadeIn('slow', function() {
// Animation complete.
});
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
$(document).ready(function(){
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".aboutclick").click(function(){
$(".dimmerabout").fadeOut('slow', function() {
// Animation complete.
});
$(".dimmerother3").fadeIn('slow', function() {
// Animation complete.
});
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
$(document).ready(function(){
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".contactbutton").click(function(){
$(".dimmerend").fadeOut('slow', function() {
// Animation complete.
});
$(".dimmerother4").fadeIn('slow', function() {
// Animation complete.
});
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
As Sufyan described, you bound the close events and #fuzz multiple times which wasn't necessary. In regards to the dimmer code, you can just bind that in the navigation anchor click function by fading in the hidden dimmer, and fading out the current dimmer, like so:
$('ul.nav a').bind('click', function(event) {
...
// show hidden dimmer
$('.dimmer:hidden').fadeIn('slow');
// fade out current dimmer
$($anchor.attr('href')).find('.dimmer').fadeOut('slow');
}
This removes the need for all the other click events you bound on the anchors.
I've updated your jsFiddle to show this in action: http://jsfiddle.net/uQH37/1/
Try this one, i have removed extra document.ready(), close functions.
$(document).ready(function () {
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the message box is closed, fade out
$(".close").click(function () {
$("#fuzz").fadeOut();
return false;
});
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".test").click(function () {
$(".dimmerservices").fadeOut('slow', function () {
// Animation complete.
});
$(".dimmerother1").fadeIn('slow', function () {
// Animation complete.
});
return false;
});
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".casestud").click(function () {
$(".dimmercase").fadeOut('slow', function () {
// Animation complete.
});
$(".dimmerother2").fadeIn('slow', function () {
// Animation complete.
});
return false;
});
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".aboutclick").click(function () {
$(".dimmerabout").fadeOut('slow', function () {
// Animation complete.
});
$(".dimmerother3").fadeIn('slow', function () {
// Animation complete.
});
return false;
});
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".contactbutton").click(function () {
$(".dimmerend").fadeOut('slow', function () {
// Animation complete.
});
$(".dimmerother4").fadeIn('slow', function () {
// Animation complete.
});
return false;
});
});
//Adjust height of overlay to fill screen when browser gets resized
$(window).bind("resize", function () {
$("#fuzz").css("height", $(window).height());
});
Related
I have a button that does a "flyin" animation when click. But if the user clicks the button to deselect their choice i need to disable the animation.
The class changes when they have selected their choice from ".simple-button" to ".simple-button active".
jQuery(document).ready(function ($) {
$(".simple-button").on('click', function () {
//Scroll to top if cart icon is hidden on top
$('html, body').animate({
'scrollBottom': $(".view-my-beds").position().top
});
//Select item image and pass to the function
var itemImg = $(this).parent().find('img').eq(0);
flyToElement($(itemImg), $('.view-my-beds'));
});
});
It my experience, it's best to add a class on click. This means we can detect if it's in use, thus - making your problem simple to solve:
$('.simple-button').on('click', function ()
{
if (!$(this).hasClass('active')) {
$('html, body').animate({
'scrollBottom': $('.view-my-beds').position().top
});
var itemImg = $(this).parent().find('img').eq(0);
} else {
// do whatever without animation
}
})
I am redesigning my website, in each page I am showing a list of images, if you clcik on it a modal window pops up covering the entire page and displaying a bootstrap carousel vertically and horizontally centered. Everything works fine. I have just tried to enable the touch swipe for the mobile but it doesn't work anymore.
This is the js code that works
/* copy loaded thumbnails into carousel */
$('.immagini .thumbnail').on('load', function() {}).each(function(i) {
if (this.complete) {
var item = $('');
var itemDiv = $(this).parents('div');
var title = $(this).parent('a').attr("title");
item.attr("title", title);
$(itemDiv.html()).appendTo(item);
item.appendTo('.carousel-inner');
if (i == 0) { // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({
interval: false
});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function() {
$('.modal-title').html($(this).find('.active').attr("title"));
})
$('.immagini .thumbnail').addClass("point");
/* when clicking a thumbnail */
$('.immagini .thumbnail').click(function() {
var idx = $(this).parents('div').index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
});
$(".myModal").on('show.bs.modal', function() {
setTimeout(function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
$(".modal").addClass("modal-fullscreen");
$(".modal-body").removeAttr("style");
}, 0);
});
$("#myModal").on('hidden.bs.modal', function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
});
// Vertical centered modals // you can give custom class like this //
This is the bit that I have added to enable the swipe
$(document).ready(function() {
$("#modalCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#modalCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
Can you try this. You may need to reinitialize carousel.
$(".myModal").on('show.bs.modal', function() {
setTimeout(function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
$(".modal").addClass("modal-fullscreen");
$(".modal-body").removeAttr("style");
$('#modalCarousel').carousel()
$("#modalCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#modalCarousel").swipeleft(function() {
$(this).carousel('next');
});
}, 0);
});
Try using jQuery 'on' instead, this may prevent the need for re-initialising the carousel
Query( ".selector" ).on( "swiperight", function( event ) { ... } )
I have a div, inside which I'm using as a slide show. It all works fine but when the page is scrolled so the slideshow isn't in view, and the fadeIn animation happens then the page auto scrolls to show the animation. Is there anyway to stop this?
I'm really newbie with javascript :(
window.setInterval(function(){
if(fader < <?php echo count($homePageFavs);?>) {//it's not the last image so we can move right
var newFade = fader;
newFade++;
$(".fader_"+fader).fadeOut( "slow", function() {
// Animation complete.
$(".fader_"+newFade).fadeIn( "slow", function() {
// Animation complete
});
});
fader = newFade;
} else { // loop back to the first one
$(".fader_"+fader).fadeOut( "slow", function() {
// Animation complete.
$(".fader_1").fadeIn( "slow", function() {
// Animation complete
});
});
fader = 1;
}
}, 10000);
please look at this fiddle http://jsfiddle.net/rabelais/4X63B/3/
In this fiddle when one hovers on the bars the animations start and stop. I want to know how to change this Jquery code so that the animation starts and stops on click instead? Also when one animation is started and the user clicks on the other bar it will pause to. At the end of each animation a refresh button is display to reset the animation.
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})
});
$('#refresh-1').click(function(){
$('.alt0').width(0);
$(this).hide();
})
$('#one').mouseleave(function(){
$('.alt0').stop()
});
Try
$('#one').on('click', function () { //when first is clicked
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active'); //remove seconds active class
if ($(this).hasClass('active')) { //check if clicked item has active class
$('.alt0').stop(); //stop animation
$(this).removeClass('active'); //remove active class
} else { //if not active or animating
$(this).addClass('active'); //add active class
$('.alt0').animate({ //start animation
width: $(this).width()
}, ($(this).width()) / 2 * 1000, "linear", function () {
$("#refresh-1").show();
});
}
});
$('#refresh-1').click(function () {
$('.alt0').width(0);
$(this).hide();
})
Similarly do the same for second bar. If you dont want another bar to stop animating on click of other bar
just remove the part from code
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active');
$('.alt0').stop(); //stop firstanimation
$('#one').removeClass('active');
Full example http://jsbin.com/UseTIji/1/
First change mouseenter to mouse click
$('#one').mouseenter(function() → $('#one').click(function()
Enter some variable that will change on every click:
var oneIsPlayed = false
$('#one').click(function() {
oneIsPlayed = !oneIsPlayed;
if ( oneIsPlayed ) {
//code to stop
} else {
//code to start animation
}
})
Breaking down the code:
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
This is the part that starts the animation when the mouse enters the element. You can change it so the animation starts on a mouse click by changing it to click:
$('#one').click(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
You can do the same with the stop animation component:
$('#one').click(function(){
$('.alt0').stop()
});
If you want to make a click on one bar stop the animation on the other, you can add a stop method call to the start animation call:
e.g.
$('#two').click(function(){
$('.alt1').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-2").show();
$('.alt0').stop();
})});
It seems that you jsfiddle isn't loading for me at the moment, so I can't test. But I hope that can get you in the right direction.
On click of that div, applying animation. Give some duration for that animation and when the duration get over you can get its callback so then remove that style.
$(document).ready(function () {
$('#service').click(function () {
$("#ServiceSublist").animate({opacity: 0.25,
left: "+=50",
height: "toggle"
}, 1000, function() {
alert("amination complete");
});
});
});
So, i have some animation actions, this is for my login panel box:
$('.top_menu_login_button').live('click', function(){
$('#login_box').animate({"margin-top": "+=320px"}, "slow");
});
$('.login_pin').live('click', function(){
$('#login_box').animate({"margin-top": "-=320px"}, "slow");
});
now i need to add some hiding action after click on body so i do this:
var mouse_is_inside = false;
$('#login_box').hover(function () {
mouse_is_inside = true;
}, function () {
mouse_is_inside = false;
});
for stop hiding this element on body click, and this for body click outside by login-box
$("body").mouseup(function () {
if (!mouse_is_inside) {
var login_box = $('#login_box');
if (login_box.css('margin-top','0')){
login_box.stop().animate({"margin-top": "-=320px"}, "slow");
}
}
});
Everything is fine but this panel animates after each body click, how to stop this and execute only one time? Depend on this panel is visible or not?
You'd normally do this sort of thing by checking if the click occured inside the element or not, not by using mousemove events to set globals :
$(document).on('click', function(e) {
if ( !$(e.target).closest('#login_box').length ) { //not inside
var login_box = $('#login_box');
if ( parseInt(login_box.css('margin-top'),10) === 0){
login_box.stop(true, true).animate({"margin-top": "-=320px"}, "slow");
}
}
});
And live() is deprecated, you should be using on().