We Keep Coding

Removing class on one div when other is clicked

Following is my HTML,
<div class="container">
<ul class="navbar">
<li class="nb-link"><a>Home</a></li>
<li class="dropdown">
<a>CBSE</a>
<ul class="dropdown-menu">
<li>10th Standard</li>
<li>12th Standard</li>
</ul>
</li>
<li class="dropdown">
<a>Engineering</a>
<ul class="dropdown-menu">
<li>JEE - Main</li>
<li>JEE - Advanced</li>
</ul>
</li>
</ul>
I have 2 dropdowns . When I click one, it comes down. But when I click another, even that comes down without closing the previous one . This creates an overlap. The way I'm handling this using JS is as follows
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$('.navbar').$this.children('.dropdown-menu').removeClass('open');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').addClass('open');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});
How can I achieve a functionality using JS such that the previous dropdown closes when I click a new dropdown ? Also, the dropdowns should close when anywhere on the page is clicked ?

can try this
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$('.dropdown').not($this).removeClass('active')
$('.dropdown-menu').not($this.find('.dropdown-menu')).removeClass('open');
$this.toggleClass('active');
$this.find('.dropdown-menu').toggleClass('open');
});
});
Working Demo
this is a function you can use if selectors is not target
// function for if selectors not target
function actionwindowclick(e , selector , action){
if (!$(selector).is(e.target) // if the target of the click isn't the container...
&& $(selector).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
and you can use it in window click event like this
$(window).on('click', function(e){
actionwindowclick(e , ".dropdown , .dropdown-menu" , function(){
$('.dropdown').removeClass('active')
$('.dropdown-menu').removeClass('open');
});
});
Working Demo
Note: I think you may need to
event.stopPropagation()
while you trying to click on .dropdown-menu itself
$('.dropdown-menu').click(function(e) {
e.stopPropagation()
});

Try:
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$this.children('.dropdown-menu').toggleClass('open');
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});

How to properly update URL hash upon selecting a jQuery tab?

HTML:
<div id="tabs">
<ul>
<li>Settings</li>
<li>Fields</li>
</ul>
<div id="settings">
//Tab Contents
</div>
<div id="fields">
//Tab Contents
</div>
</div>
How can I apply jQueryUI's Tab functionality and force it to update the URL hash upon selecting a new tab?

Use this code to create your jQuery UI tabs:
$('#tabs').tabs({
beforeActivate: function (event, ui) {
window.location.hash = ui.newPanel.selector;
}
});
I created this answer because I cannot find a single one with an up-to-date method. Hope this helps somebody else!

Besides updating the hash on tab change (with the beforeActivate event as in shruggernaut's reply) it is very useful to update the active tab on hash change (i.e. enabling browser history, back/forward buttons and user typing in the hash manually):
$(window).on('hashchange', function () {
if (!location.hash) {
$('#tabs').tabs('option', 'active', 0); // activate first tab by default
return;
}
$('#tabs > ul > li > a').each(function (index, a) {
if ($(a).attr('href') == location.hash) {
$('#tabs').tabs('option', 'active', index);
}
});
});

Open a New Jquery UI Dialog With Links in Existing Dialog

I am attempting to open a dialog from an existing dialog after clicking on a link in the existing dialog. I have been unable to get the new dialog to pop up. Below is the JavaScript:
$(function() {
$("#homepage-description").dialog({
autoOpen: false,
modal: true,
buttons: {
'Sign Up': function() {
$(this).dialog('close', function() {
$(this).dialog('close');
$("#signup-description").dialog("open");
});
},
'Log In': function() {
$(this).dialog('close');
$("login-description").dialog("open");
}
}
}).dialog("widget").find(".ui-dialog-buttonset button")
.eq(0).addClass("btn btn-large").attr('id', 'home-sign').end()
.eq(1).addClass("btn btn-large").attr('id', 'home-log').end();
$("#welcome-link").click(function() {
$("#homepage-description").dialog("open").load("/homepage/");
return false;
});
$(".ui-dialog-titlebar-close").click(function() {
$("#homepage-description").dialog("close");
});
$("#home-sign").click(function() {
$("#signup-description").dialog("open").load("/sign-up/");
return false;
});
$("#home-log").click(function() {
$("#login-description").dialog("open").load("/login/");
return false;
});
$(function() {
$("#tos-description").dialog({
autoOpen: false,
modal: true
});
$("#home-tos").click(function( event ) {
event.preventDefault();
$("#tos-description").dialog("open").load("/tos/");
return false;
});
$(".ui-dialog-titlebar-close").click(function() {
$("#tos-description").dialog("close");
});
});
This is the html:
<div id="home-body">
<p class="titles">Some Words Here</p>
<div id="home-photo">
<img src="{{ STATIC_URL }}img/frontimage.png">
</div>
<div id="home-list">
<ol>
<li class="flat-text flat-bold">Find</li>
<li class="flat-text flat-bold">Download</li>
<li class="flat-text flat-bold">Go</li>
<li class="flat-text flat-bold">Come back</li>
</ol>
</div>
<div id="home-buttons">
</div>
<div id="flat-links">
<a id="home-tos" href class="flat-text flat-bold">Terms of use</a> - <a id="home-privacy" href class="flat-text flat-bold">Privacy Policy</a> - <a id="home-site" href class="flat-text flat-bold">Sitemap</a>
<div id="tos-description"></div>
</div>
The ideal situation is to click on one of the links at the bottom of the html and have new dialog open. I have been unable to accomplish this and I am uncertain of what to do at this point. I have been able to get links to open a dialog, but the same approach fails when I attempt to open a new dialog from an existing one while clicking on links (I have been able to get a new dialog to open from an existing dialog when using buttons however.)

Actually this is possible and I just did it a few days ago.
Can you make sure your click event is bind correctly in your dialog? Maybe put an alert on click and see if it actually works?
Is this where you are opening the new dialog?
$("#home-tos").click(function( event ) {
event.preventDefault();
$("#tos-description").dialog("open").load("/tos/");
return false;
});
Can you just test something like this:
$("#home-tos").live("click", function() {
alert("click worked");
});
There's also an open method of dialog, where you could do this:
$("dialog-div").dialog({
autoOpen: false,
open: function() {
$(this).find("yourbutton")click(function() {
alert("click worked");
});
}
});
jsfiddle: http://jsfiddle.net/XkwyG/1/

Thanks to #Rafi W. for leading me down the right path. The click event was not binding so I did some more looking around and I ended up with the following JS:
$(function() {
var linkPop = {
autoOpen: false,
modal: true,
};
$(document).on("click", "#home-tos", function( event ) {
event.preventDefault();
$("#tos-description").dialog(linkPop).dialog("open").load("/tos/");
return false;
});
$(".ui-dialog-titlebar-close").click(function() {
$("#tos-description").dialog("close");
});
});
This question also helped in getting to the ultimate result

I'm styling a drop down menu that onclick will appear and on blur will disappear

Unfortunately I am having issues with the disappearing of the drop down. I'm currently using toggleClass to add/remove the class on click but I also need this process undone when the menu is blurred ie: clicking anywhere else on the page etc. Here is my jquery code:
$(function() {$('#srt-btn').click(function() {$('ul.toggle-off').toggleClass('toggle-on')});});
<ul id="sort">
<li><a id="srt-btn" class="srt-title">Sort ▾</a>
<ul class="sort-menu toggle-off">
<div class="droid"></div>
<li class="top">Notes</li>
<li>Photos</li>
<li>Videos</li>
<li class="divider"></li>
<li class="btm">Make List</li>
</ul>
</li>

function toggleMenu()
{
$('ul.toggle-off').toggleClass('toggle-on');
}
$(function() {
$('#srt-btn').click(toggleMenu);
$('#srt-btn').blur(toggleMenu);
});
Working example.

you could also use stopPropagation to cancel click events
$(function() {
$('#srt-btn').click(
function(e) {
$('ul.sort-menu').slideToggle();
e.stopPropagation();
}
);
$('.sort-menu li').click(
function(e) {
$('ul.sort-menu').slideUp();
e.stopPropagation();
}
);
$(document).click(
function(){
$('ul.sort-menu').slideUp();
}
);
});
And don't forget about setting your menu options ul to position:absolute else your elements will shift
Here is a jsFiddle

You could try something like this:
var IsInside = false,
$sortMenu = $('#sort'),
$toggleOn = $('.toggle-off');
$sortMenu.on('mouseenter', '#srt-btn', function(){
IsInside = true;
}).on('mouseleave', '#srt-btn', function(){
IsInside = false;
});
$sortMenu.on('click', '#srt-btn', function(){
$toggleOn.toggleClass('toggle-on');
});
$(document).on('click', 'body', function(){
if(!IsInside) {
$toggleOn.removeClass('toggle-on');
}
});
Here a jsFiddle.

jScrollPane Vertical Tabs - How can I simulate a click on a link/tab?

I've implemented with success a Vertical jScrollPane with tabs
I'm trying to make a tab show up by default.
Can I do this by simulating a click on the link with the id #default ? If so, how?
The code is identical to the on that site. Here's the javascript:
$(function()
{
// Create the "tabs"
$('.tabs').each(
function()
{
var currentTab, ul = $(this);
$(this).find('a').each(
function(i)
{
var a = $(this).bind(
'click',
function()
{
if (currentTab) {
ul.find('a.active').removeClass('active');
$(currentTab).hide();
}
currentTab = $(this).addClass('active')
.attr('href');
$(currentTab).show().jScrollPane();
return false;
}
);
$(a.attr('href')).hide();
}
);
}
);
});
Here's the html code:
<ul class="tabs">
<li>Pane 1</li>
<li>Pane 2</li>
<li>Pane 3</li>
</ul>
Thank you!

Does this not work as expected, after it's initialized?
$('#default').click()