I am using jquery UI tabs and want to know that , is it possible to point a div's id which is not present in
the main tab div container, means
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
</div>
<div id="outerdiv">
<p>Tab 3</p>
</div>
I tried this but div#outer contents not opening when i click on tab3. How can i do this?
I believe the default jQuery plugin is looking $(this).find("#outerdiv") (where this=#tabs) which your element is not.
There are ways of getting this to work, but I think the neatest thing to do would be to move #outerdiv into #tabs.
If you insist on keeping the markup the same, you can make use of the load method like so:
$("#tabs").tabs({
load: function (event, ui) {
switch (ui.index) {
case 2:
$("#tabs div").hide();
$("#outerdiv").show();
break;
}
}
});
But I don't know how this will affect the rest of your tab panels. You'll probably have to add them all into this switch function.
You could move the div using .appendTo() before initialising the tabs :
$("#outerdiv").appendTo("#tabs");
Working example here
Related
I have a problem with my jquery tab when i apply a new theme. Even using the template theme or customize theme, both are not working. My tab only working if i use the ui-lightness theme.
here sample that using ui-lightness theme : here
and here the same code but diff theme : here
html :
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<p>Tab one content.</p>
</div>
<div id="tabs-2">
<p>tab two content.</p>
</div>
<div id="tabs-3">
<p>tab three content.</p>
</div>
</div>
script :
jQuery(function($)
{
$( "#tabs" ).tabs();
});
im still new in jquery and could be wrong somewhere. Please advice me. and 1 more thing, Is it recommended to switch the theme?
It seems you are referencing a wrong jQuery UI css (version 1), try point to a 1.8.16 version like:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css
Demo: http://jsfiddle.net/vkq4vjtc/2/
You just need update CSS file like
http://jsfiddle.net/vkq4vjtc/1/
with
.ui-tabs .ui-tabs-hide {
display: none;
}
Good luck! :)
I have a navigation menu at the top of my webpage with a drop down. For example the service page under nav has a drop down of our other services that go to a service page with a tab structure like so:
<section class="tabs">
<ul class="tab-nav">
<li class="active">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div class="tab-content">
<p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
<p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
<p>Don't forget about me! I'm tab 3!</p>
</div>
</section>
and I would like like to make it so that I could use my achor tags on my home page to link directly to tab 3 or 1 or 2 of my choosing as well as when I refresh the page with the tabs the tab doens't jump to the active tab. How can I do this with javascript? I attempted it with this hash check function bit of code:
$(function () {
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");
$(".tab-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
});
The problem is, is that when I click the second tab, it shows the content on the first tab... but tab 3 looks fine. But when I click on tab 3 and then go back to tab 2, no content displays under tab 2. Maybe someone can simply my code for what I'm trying to accomplish?
ps. I'm using the gumby framework for my tabs
First of all, $($(this).attr('href')) isn't going to find anything, so none of the tabs would be working anyway.
Apart from that, the hash linking code seems to be fine.
I've rewritten the code so that it works now below.
Link: http://jsfiddle.net/s8Ttm/2/
Code:
$(".tab-nav a").bind('click', function (e) {
e.preventDefault();
$(this).parents('li').addClass("active").siblings().removeClass("active");
$('.tab-content').removeClass('active').hide();
console.log($('.tab-content:eq('+$(this).index()+')'));
$('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show();
});
$('.tab-nav a').first().click();
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
So I have this layout and I'm planning on using javascript/jquery to change the content in lower box depending on what link is active on the upper.
Before I choose how to do this I would like some inputs on what the best practice is. Im novice when it comes to changing html content using javascript. Specially if you want to factor in doing it in the most resource efficient way.
The layout in the lower box will be different from one another. So each lowerbox layout must be present in the html from the beginning? And each layout should be contained in a div element for easiest way to change the whole block. Am I thinking correctly here?
What jQuery functions should I utilize?
jsBin demo
Wrap all your DIVs .page inside a common container #pages:
<ul id="navigation">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<div id="pages">
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
<div class="page">Page 4</div>
<div class="page">Page 5</div>
</div>
Than just retrieve the index of the clicked navigation and make visible the .page with a same index:
jQuery(function($){
$('.page:gt(0)').hide(); // hide all pages but first
$('ul#navigation li').click(function(){
var liIndex = $(this).index();
$('.page').hide().eq(liIndex).show(); // hide all and show matching page!
});
});
I have recently been doing something similar. My advice would be to use jQuery UI's tabs feature. Each section on your page is a seperate DIV tag which you hide and show as needed. This will result in the whole page being loaded and available as soon as you press the buttons.
Go here to read more about jQuery UI tabs: http://jqueryui.com/demos/tabs/
If they must all be in the original HMTL page, then just put each block of content in it's own div, each with it's own id value and each with a common class name, and hide them all by default via CSS with display: none and then use javascript to show just the desired set of content based on a click. On each click, you can hide all of them and show the one you want to display.
Bootstrap itself has tabs support, you just need to get over included CSS style for such component in order to preserve yours.
I have several blocks of text separated into their own divs. I also have several links in a navigation bar that reference these divs with an anchor link. On click, I'd like to hide all other divs except the one referenced by the clicked link. I have:
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
So, when I click 'Link 3'. I'd like to hide all divs except #section3.
I'm fine actually hiding/showing each section of text using CSS, but I can't figure out how to use the link's href attribute to reference the div name.
Thanks for your help, and let me know if you need clarification of what I'm asking.
Try this:
$('#navbar a').click(function() {
$('div:not(#navbar)').hide();
$($(this).attr('href')).show();
return false; // You may or may not want this line.
});
You can see an example here.
You can use the anchor's .hash property as a selector, all you need to so is hide the divs you want first, like this:
$('#navbar a').click(function(e) {
$('.container > div').hide();
$(this.hash).show();
e.preventDefault(); //to prevent scrolling
});
This assumes you have the <div> elements you want to show in a container of some sort, like this:
<div class="container">
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
<div id="section4">Section 4</div>
</div>
You can test it out here.
I am going to have an ExpressionEngine weblog that will place user designed content blocks in the footer. But, it's only going to show one at at time.
My HTML looks like this:
<ul class="footernav">
<li class="first"><a class="active" href="#">Get in touch</a></li>
<li>Interested in joining?</li>
<li>Feedback</li>
<li>Link 4</li>
</ul>
<div class="copy gutters show">
<p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
<p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
<p>Lorem Ipsum</p>
</div>
I want to switch the show class to a hide class depending on the clicked link. Not sure how I can accomplish this. It has to be flexible enough to work with N number of content blocks--because they will be defined by the user in ExpressionEngine.
I'm pretty much brand new to JavaScript so I would really appreciate any insight, or solution for how I might accomplish this.
I think this would work with your structure:
// Cycle through each link in our ul.footernav element
$(".footernav a").each(function(i,o){
// Attach click-logic to each link
$(this).click(function(e){
// Prevent page from bouncing, reloading, etc.
e.preventDefault();
// Add .active class to this, but remove from all other links
$(this).addClass("active").closest("li").siblings("li").find("a").removeClass("active");
// Show any DIV having class .copy and same index as clicked link
// meaning, clicking the second link will show the second div
$("div.copy:eq("+i+")").show().siblings("div.copy").hide();
});
});
Demo Online: http://jsbin.com/ekecu