Develop Reference

jquery tabs access from urls

hello i have jquery tabs and want to access them from url using # but know know how can I full fill with it
requirement is mywebsite.com/#show_page1 will show the page 1 content
and if access from mywebsite.com/#show_page2 will show the page 2 content
here is the my js code
$(window).load(function(){
$(document).ready(function(){
$("#nav_tabbed a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #show_"+id[1]).fadeIn();
// remove classes from all
$("a").removeAttr("style");
// add class to the one we clicked
$(this).css("background-color","#1aaede");
// stop the page from jumping to the top
return false;
});
$("#menu_container #show_page1").show();
});
});
and html i have is
<div id="nav_tabbed">
<a id="show_page1" style="background-color:#1aaede;">Page 1</a> <a id="show_page2">Page 2</a>
</div>
<div id="menu_container">
<div id="show_page1">
<!-- content here -->
</div>
<div id="show_page2">
<!-- content here -->
</div>
</div>

location.hash; will give you the hash value added in the addressbar and you can use it the way you need to. My suggestion is added below.
What seems to me you want to hightlight your link with the hash located in the browser's addressbar and respective div you want to show. If this is what you want to implement then you can try this with slight changes in the markup and js:
CSS:
.active {
color:red;
}
#menu_container div {
display:none;
}
HTML:
<div id="nav_tabbed">
<a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar-->
Page 2
</div>
<div id="menu_container">
<div id="show_page1" style='display:block;'>Page 1</div>
<div id="show_page2">Page 2</div>
</div>
JS:
$(function () {
// below works for hash added in the browser.
var hash = location.hash;
if(hash.length){
$('#nav_tabbed a').removeClass('active');
$('#menu_container div').hide();
$('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
$('#menu_container div[id*="' + hash.slice(1) + '"]').show();
}
$(document).scrollTop(0);
// below works for click of the anchors
$('#nav_tabbed a').click(function(e){
e.preventDefault();
$(this).addClass('active').siblings('a').removeClass('active');
$('#menu_container div').hide();
$('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
});
});
A sample fiddle.

your posts shows a little confusion on the topic.
so first for explanation:
there are two meanings of a #
in a url, the # is a reference to the location hash.
in jquery, the # is a reference to an element id.
you want to use the hash change in this case.
first of all... why do you wrap the window.load around the dom.ready event?
as far, as i understood, jquery's dom ready fires when the dom is ready, jquerys window.load fires, after all images, iframes, plugins etc. have been loaded. so a dom.ready inside a window.load is kind of unnecessary ...
next: ID's have to be unique - you can't give your anchor the same id as the assigned div!
so let's get down to business - the html:
<div id="nav_tabbed">
Page 1
Page 2
</div>
<div id="menuContainer">
<div id="page1" class="contentTab activeTab">123</div>
<div id="page2" class="contentTab">456</div>
</div>
we use activeLink and activeTab classes to determine which tab is currently open
the css just sets the background of the activeLink:
.activeLink {
background-color:#1aaede;
}
the js:
$(window).load(function(){
$(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one
$("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color
$(".activeLink").removeClass("activeLink");
$(this).addClass("activeLink");
})
if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab
{
$(".activeTab").hide();
$(location.hash).show().addClass("activeTab");
}
});
//our hashchange event handles the loading of the desired tabs:
window.onhashchange = function () {
if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(location.hash).show().addClass("activeTab"); //show the clicked tab
}else //and per default show the first tab
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(".contentTab:first").show().addClass("activeTab"); //show the clicked tab
}
};
http://jsfiddle.net/ex46ndg1/3/

Twitter Bootstrap - Dynamically Add/Remove Tabs and Tab Content

Thanks in advance for any and all input/help/advice...
I'm using Twitter Bootstrap tabs to organize some information. The tabs will be located on a form page, and each tab will consist of a "contact form", in which the user can add multiple contacts to this page prior to submitting the whole form.
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Joe Smith<span>x</span></li>
<li>Molly Lewis<span>x</span> </li>
<li>+ Add Contact</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
<div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
</div>
</div>
Full code here: http://jsfiddle.net/Harlow/zQnck/34/
I'm trying to mimic the functionality of jQuery UI's "simple manipulation" example of tabs.
(http://jqueryui.com/tabs/#manipulation)
What I currently have will add a new tab, but I want to be able to add a new, unique tab with it's own ID (continuing from the code, like "contact_01, contact_02, etc.") by clicking on the "+ Add New Contact" which will always be the last tab, but not actually have it's own tab content pane. On the other side of dynamically adding content, I want to be able to delete it by click the small "x" on each tab.
--EDIT--
Just to clarify, the jQuery example trigger's a modal upon clicking "New Tab". For my purposes, I just want to create a new tab without inputting the tab name or content (the content will always be the same contact form, and I'm fine with the tab name being the same as the newly generated ID - I will have it automatically update to the contact's name later.)

EDIT: I reproduced the original fiddle as best as I could as both fiddles died.
New fiddle: http://jsfiddle.net/dogoku/KdPdZ/2/
$(".nav-tabs").on("click", "a", function(e){
e.preventDefault();
$(this).tab('show');
})
.on("click", "span", function () {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
});
$('.add-contact').click(function(e) {
e.preventDefault();
var id = $(".nav-tabs").children().length; //think about it ;)
$(this).closest('li').before('<li>New Tab<span>x</span></li>');
$('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>');
});
Note that I removed the hover function and instead used css
.nav-tabs > li:hover > span {
display:block;
}

Dogoku's jsfiddle seems to be 404, so I put together a quick jsfiddle of the solution here: http://jsfiddle.net/xQ3f5/
I updated this to stop the 'active' class being applied to the +Add Contact tab element, as that doesn't correspond to any of the tab elements. I'd also suggest switching the active tab to the newly created one. Here's the javascript:
$(".nav-tabs").on("click", "a", function(e){
e.preventDefault();
if(this.id == "add-contact"){return false;}
$(this).tab('show');
})
.on("click", "span", function () {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
});
$('#add-contact').click(function(e) {
e.preventDefault();
var id = $(".nav-tabs").children().length; //think about it ;)
$(this).closest('li').before('<li id="contact_tab_'+id+'">New Tab</li>');
$('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>');
$("#contact_tab_"+id+" a").tab('show');
});

Change jquery slider to slide down then slide up old section

Okay, long story short, what I am trying to do is change the jquery around to have the new section populate slide down on top of the old div, and then slide up the old div, to make only the new content box appear. as of right now, the code works perfectly sliding up the old section, and then sliding down the new content.
Code Sample for The Javascript
$(document).ready(function(){
function doTab() {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
}
// When a link is clicked
$("a.tab").click(doTab);
if (window.location.hash) {
$('a[title="' + window.location.hash.substring(2) + '"]').click();
}
});
Code for the tabs and sections
<ul id="tabs">
<li>type1</li>
<li>type2</li>
</ul>
<!--<div class="dpoint-holder"><div class="dpoint"></div></div>-->
<section id="type1" class="content">
<p>contents1contents1contents1contents1contents1</p>
</section>
<section id="type2" class="content content_2">
<p>contents2contents2contents2contents2</p>
</section>

jQuery tab disable jQuery scroll

I use jqueryUI tabs and want to implement a smooth scroll bar inside each tab. I tried several scrollable plugins like jQuery custom content scroller, TinyScrollbar and now areaaperta NiceScroll, but each time I stack with the same problem - scrollbar works only inside one tab..
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs" style="width:900px; font-size:100%;">
<ul>
<li><a href="#tabs-1" >FIRST</a></li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
<div id="tabs-1">
<div id="thisdiv">
<p><b>FIRST SCROLLABLE PARAGRAPH</b>...</p></div></div>
<div id="tabs-2"><div id="thisdiv2">
<p><b>SECOND SCROLLABLE PARAGRAPH</b>...</p>
</div></div>
<div id="tabs-3">
<p>THIRD TAB </p>
</div>
</div>
<script>
$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
$("#thisdiv2").niceScroll({cursorcolor:"#00F"}); }
);
</script>
Here is jsfiddle that shows that there is no conflicts between UItabs and two scrollbars of niceScroll plugin: http://jsfiddle.net/Fluc/EhcqX/4/
And here I tried to use same divs with scroll bars inside each tab: http://jsfiddle.net/Fluc/cJPT3/2/
As you can see, scrollable works only inside the first tab.. Same with other scrollable plugs..
I'm not jquery programmer but It feels like the problem is related to display property somewhere.
Any help would be very appreciated!

This one works perfect try and let me know.
<script>
$(document).ready(function() {
$("#tabs").tabs();
jQuery('#tabs').bind('tabsselect', function(event, ui) {
ui.tab
ui.panel
ui.index
if (ui.index==0) {
$("#tabs-1 > .scrollable").niceScroll({cursorcolor:"#00F"});
}else if (ui.index==1) {
$("#tabs-2 > .scrollable").niceScroll({cursorcolor:"#00F"});
}else if (ui.index==2) {
$("#tabs-3 > .scrollable").niceScroll({cursorcolor:"#00F"});
}
});
});
</script>
I have also updated your fiddle http://jsfiddle.net/cJPT3/9/

How to properly handle a 'body' jquery event to close a dropdown

I'm trying to make a dropdown very similar to dropbox dashboard, where if you click the username a flyout menu appears. Clicking the username again will close the flyout (toggling it every time you click).
The one caveat is that clicking anywhere except on the flyout itself will also close it.
So far, I have it working almost, but not 100%. If you click on the actual 'body' element directly, it will close the flyout as it should. By this I mean my website has a .wrapper element which doesn't take up the full height of the page. Theres a thin strip down at the bottom with no actual element covering it, only the <body> tag. Any place where .wrapper or some other element takes up space (even a 100% width invisible wrapper), it will not close the window if you click on anything where there is an element (besides body).
javascript:
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$(document).on('click',function(e) {
if ( $(e.target).parents($flyout).length === 0 ) {
$flyout.fadeOut(flyoutDuration);
}
});
HTML
<body>
<div class="blackbar">
<div class="container clearfix">
<div class="icon logo"></div>
<div class="flyout">
<h3>
Welcome back, username
</h3>
<div class="menu">
<ul>
<li><div class="users"></div>Users</li>
<li><div class="groups"></div>Groups</li>
<li><div class="configuration"></div>Configuration</li>
<li><div class="logout"></div>Logout</li>
</ul>
</div>
</div>
</div>
</div>
<div class="wrapper">
<! -- content here -->
</div>
</body>
The expected behavior should be any element you click on that isnt a descendent of .flyout should close the window (including .blackbar, the logo, etc)

To be honest - when I am doing something like this and I do not want clicks inside of the "box" to close the element - I prevent clicks from bubbling.
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$('.flyout').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('click',function(e) {
if(flyout-open) {
$flyout.fadeOut(flyoutDuration);
}
});

Jquery Menu Click - on click anywhere on body will close the menu
In my case i wanted to close a drop down menu if its clicked primary link or outside the link i.e. anywhere on the html/body
http://jsfiddle.net/austinnoronha/k2Lwj/
var toggleClick = function(){
var divObj = $(this).next();
var nstyle = divObj.css("display");
if(nstyle == "none"){
divObj.slideDown(false,function(){
$("html").bind("click",function(){
divObj.slideUp();
$("html").unbind("click");
});
});
}
};
$(".clickme").click(toggleClick);