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
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 divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/
I have a page that uses jQuery tabs. Each tab contains one or more jQuery accordions, which are generated dynamically, in addition to other stuff. Example:
<div id="tab1" class="tab">
<div>
Some stuff
</div>
<div class="accordion">
I am an accordion
</div>
</div>
<div id="tab2" class="tab">
<div class="accordion">
I am also an accordion
</div>
More stuff
<div class="accordion">
I am also an accordion
</div>
</div>
I would like the first accordion in each tab to remain open, while the others (if there are any) are collapsed. I have tried:
$('.tab .accordion:first')
which only selects the first accordion on the page (obviously). I also tried:
$('.tab .accordion:first-child')
This selects the first accordion in tab2 but it doesn't select the one in tab1 because there's some stuff above it. I've also tried:
$('.tab > .accordion').filter(':first-child')
$('.tab').children('.accordion:first-child')
Along with about every combination of selectors I can think of. At this point my brain is fried. Before you point me to a duplicate question, none of these are asking the same question exactly:
JQuery Tab each Selected tab first text box focus
jquery select first child with class of a parent with class
jQuery selector for each first element on every parent
jQuery Selecting the first child with a specific attribute
The difference in my case is I have very little control over what content shows up in these tabs.
I'd suggest:
$('.tab').find('.accordion:first');
JS Fiddle proof-of-concept.
Try this:
$('.accordion:first', '.tab')
I have a nav menu bar based on twitter bootstrap that uses scrollspy to for hightlighting.
this works by matching the value after the # in a link (e.g. <a href="#foo"> when <div id="foo"> scrolls into view). pretty basic, here's the doco: http://twitter.github.com/bootstrap/javascript.html#scrollspy
my problem comes when I introduce a link to a bootstrap modal dialogue box within an element that is being spied on. imagine I have:
<ul class="nav">
<li>a link</li>
<li>modal</li>
<li>a different link</li>
</ul>
<p> .. my page .. </p>
<div id="info"><a name="info"></a>info on my product</div>
<div id="products"><a name="products"></a>a list of my products</div>
<div class="modal hide fade" id="demo" tabindex="-1" role="dialog">
<div class="modal-header">my header</div>
<div class="modal-body">some content</div>
<div class="modal-footer"><button>close</button></div>
</div>
<p> .. more page </p>
the div that represents my modal overlay also uses the #id-of-target format for its href, but since it's included inside the nav (of course) then scrollspy ALSO highlights when the (hidden) div is in view. Depending on where the modal code in on the page, this confuses the menu system's highlighting.
I can see that scrollspy should be modified to only link to items that are visible (and therefore not activate when "demo" scrolls into view) but can't work out how to modify the plugin to only fire if the element is visible, or override the event some other way.
can anyone give me some pointers?
funny how typing out a question sometimes makes you think in the right way to solve it, where just thinking about it does not.
to make this work, I modified the scrollspy component of bootstrap so that it tests the target is hidden and bails out of the activate routine (also doesn't raise the activated event, since it's not active)
here it is: around line 1432 for me (+if ..
, activate: function (target) {
var active
, selector
if (target.is(":hidden")) return
this.activeTarget = target
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/