Twitter Bootstrap: How to close modal dialog? - javascript

I'm trying to implement modal loading dialog with Twitter's bootstrap. My current attemp is:
$(document).ready(function () {
$('#loading_dialog')
.ajaxStart(function () {
$(this).modal('show');
})
.ajaxStop(function () {
$(this).modal('hide');
});
});
Problem is that the dialog won't close.

I didn't test it but the issue could depend on the context of the ajaxStart/Stop anonymous function.
Can you try this?
var loading_dialog = $('#loading_dialog');
loading_dialog
.ajaxStart(function () {
loading_dialog.modal('show');
})
.ajaxStop(function () {
loading_dialog.modal('hide');
});

Related

How to reload page after bootstrap modal closed

$("#customerAdded").modal("show").on("shown.bs.modal", function () {
window.setTimeout(function () {
$("#customerAdded").modal("hide");
}, 5000);
location.reload();
});
Ok, it works. But with location.reload(), despite I change the time, the page is reloaded immediately.
I would, after modal closed, that the page was reloaded according the time specified.
You could just fire the location.reload() when you hide your modal:
$("#customerAdded")
.modal("show")
.on("shown.bs.modal", function () {
window.setTimeout(function () {
$("#customerAdded").modal("hide");
location.reload();
}, 5000);
});
$("#customerAdded").modal("hide").on("hidden.bs.modal", function () {
location.reload();
});
Here is the code
$('#customerAdded').on('hidden', function () {
location.reload();
})

JQuery slide effects on drop down menu

I created jquery dropdown menu like this. I want to add slide effect on drop down menu. At the same time if I am placing my mouse over my menu tab the sub menu was opened now it is looking like one step up compare to the menu tab. I need slide like this. I here added my script.
function mainmenu() {
jQuery(" #na1").hover(function () {
//alert("hai-2");
jQuery(this).find('#content1').slideDown("fast");
}, function () {
jQuery(this).find('#content1').slideUp("fast");
});
}
$(document).ready(function () {
mainmenu();
});
Thanks in advance
$(document).ready(function () {
$("#na ul li").hover(function () {
$(this).siblings().find('ul').slideUp(400);
$(this).find('ul').slideDown(400);
}, function () {
$(this).find('ul').slideUp(400);
});
});
Demo:
http://jsfiddle.net/QkbDg/1/
Try this
$(document).ready(function () {
jQuery("#na ul li a").hover(function () {
jQuery(this).next('ul').slideDown(350);
}, function () {
jQuery(this).next('ul').slideUp(350);
});
});
DEMO
Try this:
function mainmenu(){
jQuery(" #na1").hover(function(){
jQuery(this).find('#content1').stop().slideDown("fast");
},function(){
jQuery(this).find('#content1').stop().slideUp("fast");
});
}
$(document).ready(function()
{
mainmenu();
});
Try this
function mainmenu(){
jQuery(".topm").hover(function(){
//alert("hai-2");
jQuery(this).find('.content').stop().slideDown("fast")
},function(){
jQuery(this).find('.content').stop().slideUp("fast");
});
}
$(document).ready(function()
{
mainmenu();
});
Demo : here

Accordion Opens But Won't Close

I am using Foundation Accordion and I added a script to have smooth opening and closing. It works but the problem is if you have only one panel you can open it but not close it.
Here is the code used:
$(".accordion").on("click", "dd:not(.active)", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("slow");
$(this).addClass('active').find(".content").slideToggle("slow");
});
I tried this code but it didn't work:
$("dd.active").on("click", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("slow");
});
How do I get this to close smoothly?
Here is a jsFiddle
Note: Open the Panel then Try to Close It.
Remove href from <dd><a>.
JS:
$(function () {
$(".accordion").on("click", "dd", function (event) {
if (!($(this).hasClass("active"))) {
$("dd.active").removeClass('active').find(".content").slideUp("fast");
}
$(this).toggleClass('active').find(".content").slideToggle("fast");
})
});
Updated fiddle here.

Add hide parameter to script

hi I currently have the following script and I'm trying to add a show and hide feature to it instead of just having one hide and show it. essentially "click me" shows it and the button hides it, fiddle example
http://jsfiddle.net/9M99G/
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
});
Just do the same with the .below div and slideToggle it with $(this) :
$('.below').on('click', function(){
$(this).slideToggle();
});
demo jsFiddle
See more about slideToggle()
Use slideToggle
$('.below').on('click', function(){
$(this).slideToggle();
});
That will switch display state; if hidden it will show, if shown it will be hidden
If you want just the hide functionality for the button , this code will do
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
$('.below').on('click', function(){
$(this).slideToggle();
});
});
Demo fiddle : http://jsfiddle.net/9M99G/4/
Or if you want to hide the Click Me while the hide button is being displayed the code below does exactly that
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).hide();
$('.below').show();
return false;
});
$('.below').on('click', function () {
$(this).hide();
$('.toggleBtn').show();
return false;
});
});
Demo fiddle : http://jsfiddle.net/9M99G/6/
DEMO
Try this, use slideDown and slideUp
$(document).ready(function () {
$('.below').hide();
$('.toggleBtn').click(function () {
$(this).next('.below').slideDown('slow');
return false;
});
$('.below button').click(function () {
$(".below").slideUp('slow');
});
});

How can I add a transition to the toggle?

I use this to toggle the sidebar:
$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle();
});
});
you can see it work here:
http://jsfiddle.net/Jacob_Sell/Ye7wp/
I think the toggle looks to jumpy at the moment, how can I add a transition to make it look smoother?
$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(300);
});
});
Updated DEMO
http://jsfiddle.net/Praveen16oct90/Ye7wp/4/
**$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(2000);
});
});**

Categories

Resources