I have 2 tabs each of them displays different details. On clicking second tab, I have created a button clicking on which will display certain details. But would like to know if there are any method that calls the function directly when the tab is clicked.I tried activate function but it dint work.
$(function() {
$( "#tabs" ).tabs({
activate: function( event, ui ) {
fn.my_function(); }
});
});
Also I was wondering whether using activate function would be a good choice as the function is specific to second tab only.
Here is my code for the tabs :
<div id="tabs">
<ul>
<li>DEMO</li>
<li><a href="#tabs-2">Details
</a></li>
</ul>
<div id="tabs-1">
<p><font color="blue"> Code </font>: Code number</p></br>
<div id='popup-close'>Close</div>
</div>
<div id="tabs-2">
<p></p>
<input type="submit" name="call_function" id="call_function" value="Click for details" />
<table id='content'></table> // this is to display the details listed by the function in the table format.
<div id='popup-close1'>Close</div>
</div>
Any pointers to solve this would be appreciated.
Basically you can trigger function for the specific tab by just adding an id to it:
<li><a id="tab1" href="#tabs-1">DEMO</a></li>
...
$("#tab1").click(...);
Another option is to write a proper selector to get first/second/n-th... <li> element:
$("#tabs ul li:nth-child(2)").click(...)
Related
I have a toggle open/close DIV with UL list in it that look like this:
<div id="dropdown-1">
<div class="option-heading">
<i class="fa fa-angle-double-up"></i>
<i class="fa fa-angle-double-down"></i>
<h5>Title</h5>
</div>
<div class="option-content">
<ul class="check_list check_list_show">
<li><a href="#>Item 1</a><li/>
<li><a href="#>Item 2</a><li/>
<li><a href="#>Item 3</a><li/>
</ul>
</div>
</div>
And a JS code is:
<script>
$(document).ready(function() {
$(".option-content").hide();
$(".fa-angle-double-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".fa-angle-double-up, .fa-angle-double-down").toggle();
});
});
</script>
Once user selects a link from that list, the same page refresh and a results are displayed on it.
But, that DIV gets automatically closed and i would need it to stay open.
I am not a JS developer and i dont have any ideas on how to pass the open state of this after a refresh.Any suggestion would be greatly appreciated!
Fiddle: http://jsfiddle.net/bumL495j/
pass a query string in url (i. anchor tag) lik
<li>Item 1<li/>
$(document).ready(function() {
$(".option-content").hide();
$(".fa-angle-double-up").hide();
var urlstring = window.location.href; // check for menu toggle you can pass itemid also based on that you can highlight menus
if(urlstring.indexOf("menutoggle=open")>0){
$(this).next(".option-content").slideToggle(500);
$(this).find(".fa-angle-double-up, .fa-angle-double-down").toggle();
}
});
you need to paste this script in every page of that menu items links. i didn't know about localstorage but you can also google for it.
I have a menu with several options, I would like to know how to load different HTML into the same div (called #content) depending on the buttons you press of the menu.
I have this code for the menu:
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
<li>Biographie</li>
<li>Discographie</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
What do I need to do to send, for example, "index.html" into div#content when I press in the menu the option "Accueil"?
Using jQuery ajax you can do it
HTML
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
</div>
JAVASCRIPT(jQuery)
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});
jQuery load
You can use jQuery, it makes stuff like this easy:
Then you can do this:
$('#content>div').load('index.html');
You can either put this in onclick on some button, or in other place in your javascript code...
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');
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help
In my asp.net mvc application I have a modal popup.In modal popup i have three divs displayed like tabs.each div has buttons "Next","Back".on click of these buttons i want to navigate between these divs
sample code
<div id="Div1">
<ul>
<li><a id="btnone" href="#OneTab">one</a></li>
<li><a id="btTwo" href="#TwoTab">Two</a></li>
<li><a id="btnThree" href="#ThreeTab">Three</a></li>
</ul>
<div id="OneTab>
<input id="btnNext Type="button/>
<input id="btnBack Type="button/>
</div>
<div id="TwoTab>
</div>
<div>
Please suggest
Thanks
using foloowing line of code on "Onclick" event of button
$('#Div1').tabs("select", tabid);
Here tabid is the id of the tab on which you want to navigate
The code change done is
as below