I'm trying to load a default tab in the tabbed ajax code that I've got, this is the source from the head tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.hastiefitness.com.au/wp-content/themes/hastie/jquery.fwd_tabs.js"></script>
And this is what I'm using in HTML:
<div class="tabs">
<ul class="tab-menu">
<li>TEAM TRAINING PROGRAM</li>
<li>VIRTUAL EDUCATION AND COACHING PROGRAM</li>
<li>PERSONAL COACHING PROGRAM</li>
</ul>
<div class="tab-content" id="tab-1">
The page in question is :
http://www.hastiefitness.com.au/programs/
The default tab is meant to be the middle one, which is tab-2.
How would I be able to perform this? I've searched and haven't been able to get it working at all.
Looks like the plugin used does not have any direct support for setting active tab so once the plugin is initialized trigger a click event on the desired anchor element
jQuery(function(){
$('.tabs').fwd_tabs();
$('.tabs a[href="#tab-2"]').click()
})
Demo: Fiddle
Related
I have a little problem there. I have accordion tabs with custom a tags. You can see the code below. I made a JS code to autoclick on different tab when the page is loaded. It works nice but it's scrolling down to the tab. I am not good in JS so I just come here to get help or advice. For me it will be better to not use "something a" but "#discussion" because there can be more tabs and I like to choose which tab will be autoclicked by the hash link not with "nth-child".
I can't use ID's on taband can't use jQuery (don't have permissions, just can use JS and adding code to body/head/footer)
Thank you! :-)
<div id="tabs-div" class="some-classes">
<ul id="tabs" class="some-classes">
<li class="ui-state-default ui-corner-top">
Description
</li>
<li class="ui-state-default ui-corner-top">
Discussion
</li>
</ul>
<div>
<script>
$link = $('#tabs li:last-child a');
$link[0].click()
</script>
I am trying to create a webpage with a menu on the left side and a content area on the right side. Mockup image below to give you an idea:
I am using jQuery UI to try to accomplish this. The goal is to have the content area on the right side to be set based on the menu item selected on the left. The area will always be a tabbed layout, but the content and amount of tabs will be different for each of the item selected from the left menu. Eventually, I want to integrate this into an ASP.NET MVC 5 app to include user authorization and roles affecting what menu items and tabs will be visible based on the logged in user. But for now, I am simply trying to get the tab menu to show up based on what I click on the left menu, and to show it specifically upon clicking one specific item. For the others, it will hide it again (I have not tried to implement the re-hiding yet, and that is not part of this question; I just want to get the initial show() to work).
So right now my approach is to hide the tabs on page ready, then use a function to display it when clicked, using the jQuery show() function. However, this doesn't work (tried in firefox and IE).
My attempt is at: https://jsfiddle.net/3mo28z1t/5/
In the fiddle, in the javascript section, if you change the "hide" to "show"
$("#tabsuseradmin").hide();
you will see the tabs menu, in case you want to get an idea of the layout before trying to fix the issue.
Specifically, I want the action of clicking on "Left menu item 3" to show the tabs.
Thank you.
I cleaned your fiddle up so that your scripts/css were in external resources. You must first define the target and then call the function with the target - you haven't targeted the individual tabs(i haven't done this for you either, i'm just pointing it out) Also you can't use show as a function name, as its reserved.
What i did do is create a toggle on the #leftmenu>li - see fiddle
$(function() {
$("#tabsuseradmin").tabs();
$("#leftmenu").menu();
});
$('#leftmenu>li').on('click', function(){
$("#tabsuseradmin").toggle();
});
$(function showTab(target) {
document.getElementById(target).show();
});
$(function hideTab(target) {
document.getElementById(target).hide();
});
#leftmenu {
display: inline-block;
}
#tabsuseradmin {
display: inline-block;
margin-right: 10px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
<ul id="leftmenu">
<li>Left menu item 1</li>
<li>Left menu item 2</li>
<li>Left menu item 3</li>
<li>Left menu item 4</li>
</ul>
<div id="tabsuseradmin">
<ul>
<li>Tab first</li>
<li>Tab second</li>
<li>Tab third</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
<div id="tabs-3">
<p>Tab 3</p>
</div>
</div>
</body>
<li id="clicker" onclick="show('tabsuseradmin')">Left menu item 3</li>
$(document).ready(
function(){
$("#clicker").click(function () {
$("#tabsuseradmin").show();
});
});
Updated Fiddle
There is an error in your code. If you check console, it specifically says - show is not defined. Show & hide are methods provided by jQuery. They are not the same in javascript.
In your example you are using document.getElementById(target).show();, but .show is a jQuery method
you should use something like :
$(document.getElementById(target)).show();
$('#'+target).show();
You can also declare your event handler differently to avoid the problem seen in jsfiddle (that show is not defined), see my updated jsfiddle for that
I love jQueryUI, but the Tabs widget seems to be complicating things too much (jQueryUI version 1.10.3).
I know it can load content on the fly and this is all wonderful, but I have here a very simple structure with a form and some DataTables, more or less like this:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form">
<form>...</form>
</div>
<div id="SubTable1">
DataTables 1 goes here
</div>
<div id="SubTable2">
DataTables 2 goes here
</div>
</div>
However, things break horribly when I apply jQueryUI Tabs to this. One reason I already know is the use of <base> tag in my code, which makes Tabs "think" I want to load my content on the fly, instead of simply hiding/showing content already there. But even using a hack to fix this, DataTables doesn't render correctly.
And frankly, I don't want to spend days trying to figure it all out to find a fix.
Instead, I would like to know if there is a way to "switch off" all the fanciness of JqueryUI Tabs, and make it just hide and show my tabs, using whatever is inside each div. Is it possible?
That would solve my problem. If I manually create some buttons and associate a click event that simply do a display: none / display: block to my divs, they work like a charm, including DataTables.
In fact, I'm considering dumping jQueryUI Tabs completely and creating the necessary code to do just that, but I would prefer to use jQueryUI Tabs, if possible.
Thanks a lot in advance!
I will admit this is a bit ham-fisted - but it works, as an example.
HTML:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form" class="tab active">
<form>My Form</form>
</div>
<div id="SubTable1" class="tab">
DataTables 1 goes here
</div>
<div id="SubTable2" class="tab">
DataTables 2 goes here
</div>
</div>
CSS:
.tab{display:none}
.active{display:block}
jQuery:
$('#MyContent a').on('click',function(e){
var id = $(this).attr('href')
$('div.active').toggleClass('active');
$(id).toggleClass('active', ($(this).attr('class') != 'active'));
console.log()
})
Working jsFiddle
Has anyone come up with any solution to the JQuery Mobile UL List View?
I'm currently using JQuery Mobile 1.1.2 Alpha, and the bug I am referring to is an old one:
jQuery Mobile proper way to initialize a listview
My list view looks like this:
<ul data-role="listview" id="store-info">
<li>My First Store</li>
<li>48 Big Oak Lane </li>
<li>Stamford</li>
<li>CT</li>
<li>06903</li>
</ul>
I have tried to use:
$( "#store-info" ).listview();
and also this:
$('#stores_main_view').trigger('create');
on the following
<div data-role="content" id="stores_main_view" class="content ui-content" role="main">
<ul data-role="listview" class="ui-listview">
<li>
<form class="product-form">
<ul data-role="listview" id="store-info">
<li>My First Store</li>
<li>48 Big Oak Lane </li>
<li>Stamford</li>
<li>CT</li>
<li>06903</li>
</ul>
</form>
</li>
</ul>
</div>
Both yield the same error when trying to create a list dynamically:
Uncaught TypeError: Cannot read property 'jQuery1710409190776059404' of undefined
Is there any good solution to this problem yet?
The jQuery mobile code (in the method _createSubPages, exactly the one you quoted in the comment) is expecting created controls to be in a .ui-page.
Simply adding the class on the page where the control resides before calling trigger('create') fixed the problem for me.
$('#page-id').addClass('ui-page')
It also works if you do a
$.mobile.loadPage('#page-id')
Hope this helps.
Try this:
$("#nav-panel").load("nav-panel.html", function () {
$(this).trigger("create");
});
If you have some Javascript experience I'd appreciate some help.
I'm having an issue trying top create a tabbed menu that looks like the one referenced in the screenshot below.
Basically, because I need to include a full width horizontal line below the heading tab, I am unable to get the first tab to remove it's active styling once one of the other tabs is removed.
So my question is: how can I separate the first tab from the others with a full length without creating two different menus.
BTW, I am aware this is a confusing explanation and understand that I am probably doing this completely wrong, but that's why I am looking for your help :)
Here is how I am trying to do this so far:
<script>
$(document).ready(function() {
/* Tabs Activiation
================================================== */
var tabs = $('.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
});
</script>
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<h1 class="tabs">
<a class="active" href="#tab1">Tab 1 (H1)</a>
</h1>
</nav>
<hr />
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<div class="tabs">
Tab 2
Tab 3
</div>
</nav>
<!-- Tab Content -->
<ul class="tabs-content grid6">
<li class="active" id="tab1">Tab 1 Content</li>
<li id="tab2">Tab 4 Content</li>
<li id="tab3">Tab3 Content</li>
</ul>
So I made a working model... uses jQuery but not hash tags
http://jsfiddle.net/nenvG/31/
I think it's easier to add content to, wouldn't need to rearrange the html for each of the elements.