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;
});
Related
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/
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.
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.
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 :)
I am using .slideToggle to open a panel when the user clicks a link:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script>
The content of the toggled div (#panel) is taller than the height of the containing div so scorllbars show up. I would like the vertical scrollbar to automatically scroll down to the reveal the new content when the div gets toggled. I think I could probably do this with .scrollTop to make this happen but Im not sure how to go about making it happen at the same time... Any ideas?
EDIT:
There seems to be a consensus that this is the best way to go about achieving what I described:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
var $panel = $("#panel");
$panel.slideToggle("slow");
if ($panel.is(':visible')){
$panel.parent().scrollTop($panel.height()-$panel.parent().height());
}
$(this).toggleClass("active");
return false;
});
});
</script>
This makes the panel slide but the scroll down effect isn't working..
I've done something like this before:
$(".btn-slide").click(function(event){
if ( $(this).hasClass("active"))
{
$(this).removeClass("active");
$("#panel").slideUp("slow");
}
else
{
$(this).addClass("active");
$("#panel").slideDown("slow");
var destination = $("#container ").offset().top + $("#container").height();
$("#container").animate({ scrollTop: destination},"slow");
//or
//$("#container").animate({ scrollTop: destination},"slow", "fx_name_here");
}
event.preventDefault();
});
Html:
Fire Panel
<div id="container">
<div id="panel">sdfsdfsdfs</div>
</div>
Would that help you?
EDIT:
If you download the jQuery Easing Plugin you can add different effects to the sliding, adding the fx name into the code (commented out line in answer)
Improved code so there is less code but same effect.