How to set tab height to content height - javascript

I have incorporated a JQuery tab into my website, however I want my tabs to expand and contract the height to the content inside. For instance at the moment my first tab expands to the height of the content inside, when I go to the second tab it stays at the height of the first tab, even though it has much less content. Sorry if this is confusing.
Here is the code for the tab:
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
And here is a piece of code I use to control the height of the div with the surrounding div wrapper:
<script type="text/javascript">
$(function(){
var height = $("#content").height();
$(".tab_container").height(height);
});
</script>
If you need any more info let me know and I will provide it.

It seems that initially it works correctly because you have the code on page load, but once the content changes height, you don't have anything that recalls that function. I would wrap that function around a
$("ul.tabs li").click(function() {
var contentHeight = $("#content").height();
$(".tab_container").height(contentHeight);
});

I would think the wrapper div would expand and contract according to the height of the content. Are you sure the height is not being set somewhere? A link to an example in JSFiddle would be helpful.

Related

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/

Multiple .active classes for navigation with jQuery

I have a very simple page that uses jQuery to hide and show content. I have 3 links, and 3 divs related to those 3 links. When you click one of the links that div get displayed. The jQuery script also adds a .active class to the link so I can show what link is currently active.
My problem is that I need to have 3 different .active classes, one for each link, so they can all have a different background image when it's active. Here is the jQuery code that runs it all:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.link').click(function(e) {
e.preventDefault();
// Remove any active classes:
$('.active').removeClass('active');
$(this).addClass('active');
// Hide all the content:
$('.content').fadeOut();
$('.logo').fadeOut();
// Show the requested content:
var content = $(this).attr('rel');
$('#' + content).fadeIn();
});
});//]]>
</script>
I couldn't figure out how to create a jsfiddle, so I have a link to the dev page here: http://agoberg.tv/kiosk/index.html
I figured it out. I added 3 classes in the css, one for each link. Then I tweaked the jQuery to this:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.activediv1').removeClass('activediv1');
$('.activediv2').removeClass('activediv2');
$('.activediv3').removeClass('activediv3');
// Add the 'active' class to this link:
$(this).addClass('active' + content);
// Hide all the content:
$('.content').fadeOut();
$('.logo').fadeOut();
// Show the requested content:
$('#' + content).fadeIn();
});
});//]]>
</script>

Tabs java scripts with HTML

I have a tabs java scripts, but there is no default page.
I want to open the site to chose a page as a default tab.
Please help me
$(document).ready(function(){
$("#tabs a").on("click", function(e){
e.preventDefault();
var html = $(this).attr('href');
var htmlurl = 'html/'+html;
// update to the newest tab
$("#tabs a").removeClass("active");
$(this).addClass("active");
// set the new page content
$("#content-wrap").hide().load(htmlurl, function(){
$(this).fadeIn(400);
});
});
});
Your problem doesn't seem to be clear to me, hovewer these lines didn't make sense.
// update to the newest tab
$("#tabs a").removeClass("active");
$(this).addClass("active");
In these lines , you refer to $("#tabs a") and remove the class and by using this statement , again you re adding the class.

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 :)

Categories

Resources