Develop Reference

Toggle Bootstrap dropdown by click on the link in modal

When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.

Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

In my case it was enough to add
e.stopPropagation();

How to add button click alert droppable and sortabel but not working

I have a problem in adding a button in jquery ui sortable as an example in the following url:
http://jqueryui.com/droppable/#shopping-cart
I want to add a button when the button is pressed it will display the alert, the problem is when the button is pressed the alert does not appear
$( "<li><button onclick='saya()'>Berhasil</button></li>" ).appendTo("#cart ol");
I added a function to pop up alerts
function saya(){ alert("hello world");}

Don't set an onclick attribute directly in the html. Attach a click event instead :
$( '<li><button>Berhasil</button></li>').click(saya).appendTo("#cart ol");
demo

jQuery toggle and mouseup conflict

I have a simple button that toggles a menu onclick
If the menu is expanded/visible I hide it when clicking anywhere on the page (a part from the menu itself).
var menuBtn = $(".btn-menu"),
menuContainer = $(".menu"),
menuChildren = $(".menu").find("*");
menuBtn.on("click", function() {
menuContainer.toggle();
});
$(window).mouseup(function(e){
if(!menuContainer.is(e.target) && !menuChildren.is(e.target)){
menuContainer.hide();
}
});
When applying that function on mouseup, my toggle function no longer works. Menu will always stay open if clicking multiple times on the button (whereas it should hide & show).
jsfiddle here
Any idea how I could fix this?

mouseup event was fired before click.
try this
$(window).mouseup(function(e){
if(!menuContainer.is(e.target) && !menuChildren.is(e.target) && !menuBtn.is(e.target)){
menuContainer.hide();
}
});
fiddle js

How to fix this animation using JQuery?

I am using JQuery to make a 'Read More' button. When someone clicks onthe button a popup appears. This popup is actually a hidden div that appears. My problem is that while I click the button I want the div to appear from the button and when I click the cross mark on the popup it sould go back to the same button where it originated from but the result that I am getting is, when I click on the button the div appears from it whereas when I click cross it goes to the 'read more' button which I clicked the first. Please help me fix this. I guess there is a small glitch in my code. I have it on fiddle http://jsfiddle.net/shivkumarganesh/qLEbD/

Check this fiddle: http://jsfiddle.net/6uLF7/
The problem was with the local scope of the variables that store the target left and top offsets.
CHANGES
Added 2 declarations at the top:
var readMoreInfoTop = 0;
var readMoreInfoLeft = 0;
Removed var keyword from the top and left assignments inside the click handler
readMoreInfoTop = readMoreOffset.top + 10;
readMoreInfoLeft = readMoreOffset.left + 10;

Each time you open a button, you are adding another listener to the close button. You could unbind the close listener before rebinding it eg. http://jsfiddle.net/qLEbD/54/
or better yet...
bind the close listener once (outside the button click function) and store the left position on button click eg.
//doc ready...
function() {
var leftPosition;
$('.button').click(function() {
//animate popup to open
leftPosition = $(this).offset.left;
});
$('#close').click(function() {
//animate popup to close using leftPosition
});
}();

Exit dynamic popup by clicking outside of it?

I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});

You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K

Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});