ok so I'm calling in a page via ajax and animating it's height which is working wonderfully, next I have a accordion like function to toggle the visibility of an element and then additionally adjust the height of the containing element which does not work.
Why?
function accordionfaq(){
$('.question_all').on('click', function(event) {
event.preventDefault();
/* Act on the event */
var newHeight = $('.faq').height(); //new height
$(this).children('.answer').toggle('slow', function(){
$('#loadplace').delay(200).animate({
height:newHeight
}).fadeIn();
});
});
}
jsfiddle with complete code and error:
fiddle
Ok the problem here was that i was defining the height before the toggle event... I am dumb at times...:
fixed code here:
function accordionfaq(){
$('.question_all').on('click', function(event) {
event.preventDefault();
/* Act on the event */
$(this).children('.answer').toggle('slow', function(){
var newHeight = $('.faq').height(); //THIS NEEDS TO go in here!!! not outside...
$('#loadplace').delay(200).animate({
height:newHeight
}).fadeIn();
});
});
}
Related
I have multiple bootbox dialog boxes in my project and I want all of them to appear at the center of the screen, I cannot individually go and calculate the height of each box and position it at the center when the modal shows. Is there a common way to do this. Is there a way to trigger an event when the bootbox is made visible, I tried 'DOMNodeInserted', but this gives recursive error also tried livequery but this did not work. Can anyone tell me how to trigger an event when a dialog box is made visible at a common point.
jQuery(document).on('DOMNodeInserted', function(e) {
if(jQuery(e.target).hasClass('modal')) {
setTimeout(function(){
if(jQuery(e.target).height()/2 > 1){
var topPos = ((jQuery(window).height() - 30)/2) - jQuery(e.target).find('.modal-dialog').height()/2;
jQuery('.modal-content').css('top', topPos);
}
},200);
}
});
Regards,
Neha
try this code
.on("shown.bs.modal", function(e) {
alert("bootbox is visible");
});
DEMO
updated
align bootbox at center
.on("shown.bs.modal", function(e) {
$('.modal-content').css({
'transition':'margin-top 1s linear',
'margin-top': function (){
var w = $( window ).height();
var b = $(".modal-dialog").height();
var h = (w-b)/2;
return h+"px";
}
});
});
DEMO
Animation on scroll function is working fine on desktop view but it mess up the scrolling and scroll to random sections when I switch to mobile view and uses touch to scroll the screen. This is my animate on scroll function :
$(window).scroll(function() {
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
});
If I use the windows on scroll function, it mess up the mobile view. Please help to solve this issue so that animate on scroll can work on both mobile view with touch scroll and desktop view without messing the scroll.
For more Information these are the other scroll events:
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 54)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '#mainNav',
offset: 80
});
// Closes the Responsive Menu on Menu Item Click
$('#navbarResponsive>ul>li>a').click(function() {
$('#navbarResponsive').collapse('hide');
});
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
});
})(jQuery); // End of use strict
EDIT
Since this is the same function for both events...
Maybe calling it on the same handler and use an or to trigger only once will do the trick.
$(window).on("touchmove scroll", function(e) {
// Do the function on ONLY ONE of the two event.
if(e.type=="touchmove" || e.type=="scroll"){
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').not(".triggered").addClass("triggered").animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
}
});
EDIT
I've added a subtility using a triggered class.
.not(".triggered").addClass("triggered")
One the first iteration of the .each() function, none of the skillbar-bar has the trigered class.
So let's add it! Then trigger the animation.
On the second and all next iterations, the triggered class removes all skillbar-bar which already have the triggered class out of the collection.
This prevent the animate() function to be fired more than once on each skillbar-bar.
I think this was the issue.
Let me know if it works !
I'm try to make two scrollTop function. But it's not working. It's conflicting or calculating wrong. My first function for fixed header animation and second function for specific section animate scrollTop.
First function:
// HEADER SCROLL FUNCTION
$(window).scroll(function(){
if($(this).scrollTop() > 100) {
$('.main-menu').addClass('navbar-fixed-top');
} else {
$('.main-menu').removeClass('navbar-fixed-top');
}
});
Second function:
/* scrollTop function */
$(function () {
var headerHeight = $(".main-menu").height();
$('a[href^="\\#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({'scrollTop': $target.offset().top - headerHeight}, 1200);
});
});
Here is the live example for two function.
without header animation: http://rahulmoral.com/portfolio/goldsafe/
with header animation: http://rahulmoral.com/portfolio/goldsafe-hp/
Main issue is without header animation animate scrollTop function working well. But When I write header animation then it's not working. I don't understand why my code is not working.
Thanks.
I'm using this piece of code to populate a div with the contents of a hovered element.
$('.gallery .thumbs a').hover(
function(){
var target = $(this);
$('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
$('.hover-box').css({'display':'block', 'top':top, 'left':left});
},
function(){
$('.hover-box').hide();
}
);
The problem is - what many seem to have had - that after adding the 'mouseleave' handler both the events start firing uncontrollably.
I know the bubbling issues related with mouseover/out but this seems to behave the same.
Anyone have an idea why this is happening?
EDIT:
Here's the deal on fiddle. Not the prettiest sight but function the same as my problem.
FIDDLE
It's because your function fires and re-fires each hover and at the end of each hover, so any time you move the mouse it fires twice. What you want to do instead is fire it on mouseenter of .thumbs a and mouseleave of .hover-box, like this
jQuery(function () {
jQuery('.thumbs a').hover(
function () {
var target = $(this);
jQuery('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
jQuery('.hover-box').css({
'display': 'block',
'top': top,
'left': left
});
});
$('.hover-box').mouseleave(function() {
$('.hover-box').hide();
});
});
I have a div with scroll bar.
Using Firefox when I click on scroll bar to drag it down to see the div list the blur event is fired and hides my div which I have set to hide when blur is fired.
How can I prevent the blur to fire when the scroll bar is used:
$("#mydiv").blur(function () {
$('#mydiv').fadeOut();
console.log("fadeout blur");
});
I display this div using:
$('#mydiv').fadeIn();
I want the div to hide when its not active but not hide when I try to click on the scroll bar.
May be this is what you are looking for
$(document).ready(function(){
$('#mydiv').fadeIn();
$("body").bind('click', function(ev) {
var myID = ev.target.id;
if (myID !== 'mydiv') {
$('#mydiv').fadeOut();
}
});
});
This will bind the click event with the body and also check the id of the element which triggers the click event. If it doesn't match the DIV, the div will be closed else the div will be always open.
You can do this one:
$(window).scroll(function() {
$('#mydiv').css('display','block');
});
var scrolling = false, scrollingTimeout, blurTimeout;
$(window).scroll(function () {
if (scrollingTimeout) {
clearTimeout(scrollingTimeout);
}
scrolling = true;
scrollingTimeout = setTimeout(function(){
scrollingTimeout = null;
scrolling = false;
}, 300);
});
$("#mydiv").blur(function () {
var that = $(this);
if (!scrolling) {
that.fadeOut();
} else {
if (blurTimeout) {
clearTimeout(blurTimeout);
}
blurTimeout = setTimeout(function () {
blurTimeout = null;
that.focus();
}, 600);
}
});
see jQuery scroll() detect when user stops scrolling and Can I declare logic on jQuery for the start and end of a scrolling event?
Seems your scroll bar is not formed within the div & clicking on it causes call to blur. Please check the css/style used for showing scroll for div is doing what you are expecting (forming scroll bar inside div), if this is the case then use a parent div over both(div & scroll bar) & use focusOut/blur event on parent div containing both.