Develop Reference

Jquery show div content onload and hide of the first click

I have created a side menu bar that menu items has id's 'h1-1', 'h1-2','h1-3' and so on. when first load the page I need to show the 'h1-1' content. so I've written code
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
But here, when I click other menu item first, 'h1-1' content is still show on the page and clicked list item content showing below the 'h1-1' content .
However when I 'h1-1' itself first and then click other list items, it works fine (when I 'h1-1' itself first, 'h1-1' content still showing and then click other list item 'h1-1' content go away and show clicked item content).
I've tried to write hide the 'h1-1' content on the first click but then, 'h1-1' content is not showing even when click the 'h1-1' list item itself.
Can anyone suggest a way how can I solve this..
Fiddle Demo

You are relying on the content of curPage to hide the previous page, but you initialize it to "". Instead, set it to the first page.
var curPage="h1-1";
Updated fiddle

try this... all the codes are there.. I just updated your code.
$(function() {
var curPage="";
$("#menu a").click(function() {
$('#h1-1').hide();
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/454/

I think you are complicating the things. Use a selector to get all elements to hide (jsFiddle).
$(function() {
$('#h1-1').show();
$("#menu a").click(function() {
var curPage = $(this).data("page");
$('.main div.content').hide();
$("#" + curPage).show();
});
});

Just change var curPage=""; to var curPage="h1-1";
$(function() {
var curPage="h1-1";
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/457/

If X matches href of Y add class 'active' - jQuery

I have links within an unordered list, when one is clicked it changes the url of a stylesheet link in the head. Using the cookie plugin the browser remembers which has been clicked.
I've managed to add an add/remove active class on click but I need to also have the correct active class on the corresponding a tag when the site is returned to. How do I use jQuery to check which stylesheet href has been used and assign the active class to the corresponding 'a' tag?
Current code is below.
Any help appreciated!
$(document).ready(function () {
$("#text-size a").click(function() {
$("link.fontsize").attr("href",$(this).attr('rel'));
$('ul li.active').removeClass('active');
$(this).closest('li').addClass('active');
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});

$(document).ready(function () {
$('#text-size a[rel="' + $('link.fontsize').attr('href') + '"]').closest('li').addClass('active');
});

Jquery Tabs Jumping and Height

I've got a problem with jquery tabs and It's very similar to the following problem already solved here:
Click here to see the website
I did the following, so the jumping while clicking on tabs changed.
But the problem is, the text on my content div differs very much in length and I got an footer in my layout, so if I click the tab with the most text and after that I click the tab with less text, there is a huge gap between text and the footer.
Is there any possibility that the height is always really adjusting exactly to the length of the text and doesn't stay the highest when you clicked a certain tab?
I hope my problem is understandable and I'd really appreciate the help.
Here is my example:
http://crossmediasolutions.de/cmsweb/index.htm
the jquery is:
$(document).ready(function() {
$(".tab_content").hide(); //Hide all content
$(".tabs li:first").addClass("current").show();
$(".tab_content:first").show();
$(".tabs li").click(function() {
$(".tabs li").removeClass("current");
$(this).addClass("current");
$('.tab_container').css('min-height', $('.tab_container').height()+'px');
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});

Your tab_container height should be bigger than your active content height.
You should try something like this:
$(".tabs li").click(function() {
$(".tabs li").removeClass("current");
$(this).addClass("current");
var activeTab = $(this).find("a").attr("href");
var h = $(activeTab).height() + 20;
$('.tab_container').css('height', h + 'px');
$(".tab_content").hide();
$(activeTab).fadeIn();
return false;
});

Using JavaScript to switch through tabs without changing layout?

My webpage is at http://sarahjanetrading.com/js/j/index.html
I have done all the layout and coding. I want the tabs to toggle when clicked over them. I tried google but was in vain. I am willing to achieve the effect using either JavaScript or jQuery. My tabs are empty right now, And I want the layout to remain the same.
NEW :
This is my code so far:
<script type="text/javascript">
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab-content").hide();
$("ul#main-tabs li a:first").addClass("active").show();
$("#wrap > div").hide().filter(":first").show();
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
});
</script>
For the full HTML and JavaSript code (new) please go to http://sarahjanetrading.com/js/j/index.html
What it does is that when I click on a list item, it changes the tab, but not the content. And when I click on the anchor of a list item, it changes the content, but not the tab. I want both the content and the tab to change consistently.
Thanks

jQuery UI is probably the best solution. You can use the .tabs()
to accomplish what you are trying to do. You can also edit the layout easily by using ThemeRoller.

This quick test is working pretty well
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
Of course it doesn't consider the content of the tabs, but it's a start :)

jquery add on page load show requested tab feature

I'm a newbie with jquery and i've used this code for tabs
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
What i need is to be able to load a specific tab when open a url like:
www.mysite.com/page.html#tab1
html link looks like this:
name link
name link2
name link3
I've tryied lots of scripts, but maybe is my fault (i'm a dude with javascript)
Thank you in advance

JQuery-UI have a tab-widget You can use.
Much simpler and more stable than writing your own.
For different URL's please have a look at this post.
It tells you how to leverage on the UI-themes and load different URl's.
Otherwise You have to do a $('#theIdOfTheDiv').load(url) on the click event in the tab

You need an anchor like click to see tab1
You need to redirect the user to #tab1 so you have to remove the return false; line of your function wich disables the redirecting
Your function is being triggered when the <a> is clicked, you need to trigger it once more when the page is being loaded
your function will look like this
$(function(){
onClickHandler = function() {
$('div.tabs > div').hide();
$(window.location.hash).show();
}
$('div.tabs ul.tabNavigation a').click(onClickHandler);
onClickHandler();
});

The tab you want displayed by default should have a class of selected in your HTML. So should the associated content wrapper. The others should not.

window.location has a hash attribute. So, you can check it against the empty string and if it's not empty, select that tab:
if(!window.location.hash === "")
$(window.location.hash).show();