I've put together a very simple tabbed browser which you can see here
http://jsfiddle.net/zandergrin/sN2Eu/
I'm just wondering if there was a way to smarten up the script so that all the numbering is handled automatically - ie I can add a new tab and wouldn't need to add new javascript.
I know I can do it with jquery ui, but a) I'm trying to lkeep it super lightweight and, more importantly, b) I'm trying to learn!!
Thanks - I'm pretty basic on my javascript so any explanations would be greatly appreciated
You need to add a comman class to each tab so you can select all of them and a unique id that is also the value in the href of the links.
Also add a common class to all the links..
<div class="tab-nav">
<ul>
<li>Overview</li>
<li>Specs</li>
<li>More Info</li>
</ul>
</div>
<div id="tab1" class="tab">
<p>content1</p>
</div>
<div id="tab2" class="tab" style="display: none">
<p>content2</p>
</div>
<div id="tab3" class="tab" style="display: none">
<p>content3</p>
</div>
and your javascript now can be
function tabActions(e) {
// e.preventDefault(); // stop default browser action of link will not add the hash to the url
var targetId = $(this).attr('href'); // extract the value in the href (the #tab1 for example)
$('.tabclick').removeClass('active'); // remove the active class from all links (find them by their common class)
$(this).addClass('active'); // add it to the currently clicked link
$('.tab').hide(); // find all tabs (by the common class) and hide them
$(targetId).show(); // show the current tab
};
$('.tabclick')
.click(tabActions) // bind handler
.filter(function(){ // find the link that points to the hash in the url
return this.hash == window.location.hash;
})
.click(); // manually trigger click on it
Demo at http://jsfiddle.net/gaby/sN2Eu/3/
Related
I've created a webpage that has the following structure:
Main html that uses a side menu;
Secondary html that has the information that I want to show in the main html.
I want to achieve the following. Let's say that the secondary html has a section named intro. I want to link that section to a menu item. So when I press the corresponding button, I want to show in my main html the secondary html starting at the #intro section.
This is my sidebar nav in the main html
<div id="main">
<div class="wrapper">
<!-- LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav leftside-navigation">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-blue active"><i class="mdi-action-view-carousel"></i> Field</a>
<div class="collapsible-body">
<ul>
<li class="active">Intro
</li>
</ul>
</div>
</li>
</ul>
</li>
</aside>
</div>
This is the section in the 2nd html.
<div class="divider"></div>
<div class="section" id="intro">
<li style="list-style: disc">
some text.
</li>
</div>
</div>
When I press the Intro button in the left side nav, I want to open in my main html the 2nd one at the Intro section.
The reason I want to load the 2nd html in my main one is that It uses different css styles and It ruins my formatting if I merge them.
Any solution?
Thank you!
It can be easily achieved with jQuery:
Here's my suggestion:
Step 1
First of all, make sure you have those sections in your secondary.html file:
<div id="intro">Intro section</div>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
An, in main.html, make sure you have an element with id=content. This will be your placeholder. Like this:
<div id="content"></div>
Step 2
Modify your anchors:
point href to a dummy url (#).
add a class so we can catch this with jQuery. I named here btn-load-section.
add data- attributes so we can add some useful data to each anchor, to grab it later. I added here data-url and data-section.
Like this:
<li>Intro
<li>Section 1
<li>Section 2
<li>Section 3
Step 3
At the end of our <body> section (in main.html), you can add this code:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
/*
Executes the script inside the anonymous function
only when the page is loaded
*/
$(document).ready(function() {
/*
select all anchors with 'btn-load-section' class (class = dot before)
and bind a click event
*/
$("a.btn-load-section").on("click", function(e) {
e.preventDefault(); //this cancel the original event: the browser stops here
var url = $(this).data('url'); //get the data-url attribute from the anchor
var section = $(this).data('section'); //get the data-section attribute from the anchor
var contentDiv = $("#content"); //select the div with the ID=content (id = hash before). This will be our target div.
/*
executes the jQuery .load function
It will load the url and search for the correspondent section (load page fragment)
e.g. will call load with "secondary.html #intro" (#intro is our fragment on the secondary.html page).
*/
contentDiv.load(url + " #" + section);
});
});
</script>
As I don't know how familiar you're with jQuery, I added some comments.
The first script tag loads jQuery from a CDN.
You can read more about the jQuery's .load function here. But basically it allows to load page fragments:
The .load() method, unlike $.get(), allows us to specify a portion of
the remote document to be inserted. This is achieved with a special
syntax for the url parameter. If one or more space characters are
included in the string, the portion of the string following the first
space is assumed to be a jQuery selector that determines the content
to be loaded.
This is just a possible approach. Hope it helps!
I have an image-picker that goes through each of my categories and outputs every title/image of every post. Each of these categories, along with all the posts are held inside of a bootstrap tab-pane. The problem is that when the image picker generates all the post images, each tab-pane, whether it's active or not, has a selected image.
I was going to go along with route of limiting only the active tab-pane to be allowed a "selected" image, where all other tab-panes have no images with class "selected", but have decided to go with another route:
I'm basically trying to locate the image that's selected (has class "selected"), ONLY if the parent-parent-parent(x3) element is selected (has class "active"). Here's an example:
<div class="tab-pane active" id="someID1">
<ul class="thumbnails image_picker_selector">
<li>
<div class="thumbnail selected">
<img class="image_picker_image" src="something.jpg">
</div>
</li>
... <!-- More list options -->
</ul>
</div>
<div class="tab-pane" id="someID2">
<!-- This tab also has one div with classes "thumbnail selected" -->
</div>
<div class="tab-pane" id="someID3">
<!-- This tab also has one div with classes "thumbnail selected" -->
</div>
I've found a code that gets ALL of the "src" attributes from all selected thumbnails, but how would I go about getting ONLY from the active tab?
Here was the code to get all thumbnail selected src attributes:
var req = $("div[class='thumbnail selected']").children('img');
var imagessource = [];
$(req).each(function (datakey, datavalue) {
src = $(datavalue).attr('src');
imagessource.push(src);
});
console.log(imagessource);
Is this what you are after? The jquery selector supports css selector, so no need to write div[class='...'] unless you want to match exactly a div that have just those two class names in that order
$('.tab-pane.active div.thumbnail.selected').children('img')
Just a suggestion (You don't need to wrap each img in a jQuery wrapper)
And .map() seems like a better fit for the job
var imagessource = $(req).map((idx, elm) => elm.src)
And you don't need to wrap req another time in $() since it's already a jquery object. So you can just write
req.map(....)
result:
var
req = $('.tab-pane.active div.thumbnail.selected img'),
imagessource = req.map((idx, elm) => elm.src);
console.log(imagessource);
I am using foundation 5 vertical tabs. It is working fine, but clicking on tabs adding id's to the URL.
<dl class="tabs vertical" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>tab1</p>
</div>
<div class="content" id="panel2">
<p>tab2.</p>
</div>
<div class="content" id="panel3">
<p>tab3.</p>
</div>
</div>
http://localhost:3000/#panel1
http://localhost:3000/#panel2
http://localhost:3000/#panel3
I don't want the href to show up in the URL. Is there any option I could pass to avoid the URL?
Edit: In foundation tab page they are showing a bunch of examples for tabs and in their examples the anchors are not getting added to the URL so there must be an option to avoid it which is not mentioned in the documentation.
No there is not... you are using anchors for id as a symbol for the place where it should aim.
On the same page that you linked there is a piece of info about deep linking
To enable deep linking set data-options="deep_linking:true". If the
location hash maps to an element ID within a tab content pane, then
the appropriate tab will become active and the browser window will
scroll to the specified element. If you do not want to scroll to the
specified element then set data-options="scroll_to_content: false".
I would try setting scroll_to_content and deep_linking to false if that is what you need
$("ul.tabs li a").bind('click', function (e) {
e.preventDefault();
});
Above code will resolve your issue
I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.
When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,
... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.
What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),
...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).
It is only if the user happens to click on one of the images that it expands,
...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.
I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.
Or maybe I should write a new script to add the active class?
Any help much appreciated!
I have the abbreviated html and the jQuery function below.
_Cindy
ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.
<div class="articles-scroll">
<ul class="images-scroll">
<li><!-- I need only one of these tags to have a class of active to start -->
<a href="#">
<span class="set-image-border" style="float: none;">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
<li>
<a href="#">
<span class="set-image-border">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
</ul>
<div class="clear-float"></div>
<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->
<div class="wrapper">
<ul class="images-content">
<li>
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
</ul>
</div>
jQuery(".images-scroll li a").click(function() {
jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
jQuery(this).parent().addClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
var step = ((-250)*(jQuery(this).parent().index()-1))-60;
//alert(step);
jQuery(this).parent().parent().css("margin-left", step+"px");
return false;
});
The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $()) or $(window).load(). Just add the following lines below or above your existing code.
jQuery(function(){
var $listItems = jQuery('.images-scroll li');
$listItems.first().addClass('active');
// Second list item
$listItems.eq(1).addClass('active');
// Third list item
$listItems.eq(2).addClass('active');
});
Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery, and it should do the same.
I am doing a leaderboard for a website we are working on.
Essentially, we have a div with this months winner for location A
Below we have ajax tabs, where user can click tabs which relate to locations, like :
Location A
Location B
etc etc
So by default, when page loads, tab A is open. And the div above we need to give a matching ID, because...
I want as the user clicks tab B for the div above to change, with different DIV ID. So basically we can change content in the div based on the tab the user clicks.
So the content div is like:
<div id="???"> content goes here </div>
The tabs are like:
<ul class="tabs">
<li><span class="stateTab">NSW</span></li>
<li><span class="stateTab">QLD</span></li>
<li><span class="stateTab">VIC</span></li>
<li><span class="stateTab">SA</span></li>
<li><span class="stateTab">WA</span></li>
<li><span class="stateTab">ACT</span></li>
<li><span class="stateTab">NT</span></li>
<li><span class="stateTab">TAS</span></li>
<li><span class="stateTab">AUSTRALIA</span></li>
</ul>
So if user clicks #tab2 then a different DIV loads into the div id="???" .
I think its fairly simple, just cannot figure it out. I realise I possibly have to set all the divs up, like so:
<div id="tab1"> content goes here </div>
<div id="tab2"> content goes here </div>
<div id="tab2"> content goes here </div>
And set visibility hidden to the divs.. any help appreciated.
*** ADDED INFO *******
The tabs, onclick ( presently ) display content from dataTables.
So obviously when we click on tab1, the content below the tabs , shows the content fetched from our dataTables, in a div with id1
The issue now is, with wanting to change the content ABOVE the tabs aswell as the content BELOW the tabs... the 2 id's are conflicting, and one shows and one hides...
The TABS also change content below them, presumably we need to chain the id actions somehow, to get two sets of content to change in harmony
Set it up the way you planned in HTML adding style="display: none" to each div except the one you want to show by default. Then add to you javascript (at the bottom, or in $(function(){ //Document ready });
$('.tabs a').click(function(){
$('div[id^=tab]').hide();
$(this.href).show();
return false;
}
);
As for your Update, you can change your divs to have a class instead of an id. Like
Content Above 1
Content Above 2
Tabs
<div class="tab1 tabContent">Content Below 1</div>
<div class="tab2 tabContent">Content Below 2</div>
Then you can change the javascript:
$('.tabs a').click(function(){
$('div.tabContent').hide();
$('div.'+this.href).show();
return false;
}
);
You'll also need to remove the hashes from your anchors, so the href becomes "tab1" instead of "#tab1"
You could use jQuery to do this: http://jsfiddle.net/YQdQm/
Not sure if this meets your requirements exactly (also, haven't yet tested on IE).
var tabs = $('div[id^=tab]');
tabs.hide();
$('#tab1').show();
$('.tabs a').click(function () {
var tab_id = $(this).attr('href');
tabs.hide();
$(tab_id).show();
});
I would suggest use existing tab control from jquery UI
however if not you will need markup like that
<div class='tabs'>
<ul>
<li data-id='tab1'>tab 1</li>
....
</ul>
<div id='tab1'></div>
<div id='tab2' class='expanded'></div>
...
</div>
and code
$('.tabs ul li').bind('click',function() {
var id = $(this).data('id');
$('.tabs div').removeClass('expanded');
$('#'+id).addClass('expanded');
});
I know this is a bit brute force, but I like to do it this way:
JS:
function hidetabs(){
$("#tab1").hide();
$("#tab2").hide();
//And so on
}
function shobwtab(id){
$("#"+id).show();
hidetabs();
}
HTML:
<li><span class="stateTab">NSW</span></li>
Of course you could also add click listeners in your docready function to run the functions instead of using onClick.