I have jQuery tab menu call ajax.
Menu is working perfect, but now I want when page loaded it always show the first tab to be loaded (means active).
You can see the fiddle here: https://jsfiddle.net/waspinator/rw8ujfg3/
<ul class="nav nav-tabs tabs-up " id="friends">
<li active> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
JS
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
In this case, I want Contact content loaded on page loaded. How can set this?
$('#contacts_tab').trigger('click'); if you are allowed to use the id.
This should work. Just abstract the function, and bind it to the event, but also call it on load with the first tab selected to call it on. (EDIT: Sorry I got the spacing on your function wrong before because I mis-copied it. Also, tested it and changed a few things to work out a kink or two.)
function doAjaxStuff(event, tab) {
var $this = tab || $(this)
var $this = tab || $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
}
doAjaxStuff(null, $('.nav-tabs li:first-child a'))
$('[data-toggle="tabajax"]').click(doAjaxStuff);
Related
I have this code:
<ul id="tabsss">
<li class="underUl"> - History</li>
<li class="underUl"> - The Concept</li>
<li id="cst1" class="underUl"> - Why Choose CST?</li>
<li id="management1" class="underUl">- Management</li>
<li id="department1" class="underUl">- Department</li>
</ul>
In another page I have these <div>
<div class="tab-pane active" id="History">test</div>
<div class="tab-pane" id="Concept">test1</div>
<div class="tab-pane" id="Choose_CST">ssss</div>
<div class="tab-pane" id="Management">ssss</div>
<div class="tab-pane" id="Department">ssss</div>
I want to go to the specific tab in the other page. Right now it's only opening the first one only.
Aany help? Thanks in advance.
You'll need to add some javascript when loading the second page.
Something like :
if (window.location.hash == "History"){
$('.tab').hide(); //hide all other tabs
$('#History').show();
}
If you have your tabs on the about page, it could be done like this :
var currentTab = window.location.hash;
$('a[href="#'+currentTab+'"]').tab('show');
I read your question again, it can be easily achieved using JavaScript:
$(document).ready(function(){
url_params = window.location.hash;
tabParams = $('a[href="' + url_params + '"]');
console.log(tabParams);
console.log(url_params);
if (tabParams.length === 0)
{
//Activate first tab
//Show first tab content
}
else
{
tabParams.click();
}
});
I don't know if i described the title correctly ...
Basically i have a jquery script that loads content when link is clicked.
I would like to know to say lets say i loaded /contents/about.php via jquery into the div i specified.
<li class="nav__item ">
<a class="header__link subdued" href="#home" data-target="contents/home">
<span class="complimentary push--left">Home</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#news" data-target="panel/admin/news/news">
<span class="complimentary push--left">News</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#/contents/about" data-target="contents/about">
<span class="complimentary push--left">About Us</span>
</a>
</li>
Is it possible for me to enter http://localhost/#/contents/about or even http://localhost/contents/about and it would as the same function as the jquery click load script.
Alternatively is there a simple way to have a back/forward setup in jquery content load?
script:
<script>
$(document).ready(function(){
var trigger = $('#nav ul li a'),
container = $('#wrapper');
trigger.on('click', function(){
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
Hope it makes sense.
jQuery:
$(document).ready(function(){
var cur = window.location.href;
var a = cur.split("/");
var pos = a.indexOf("#");
if(pos != -1){
var trigger = $('#nav ul li a');
var container = $('#wrapper');
target = a[pos+1]+""+a[pos+2];
container.load("http://localhost/"+ target + ".php");
return false;
}
});
Try this, if not useful then i will remove this, cause i don't understand what you want.
I have the following navigation, using the jquery accordion code below. Currently each of the #top-level nav items are set to toggle open and close the <div class="slide"> to reveal the children items. I'd like to modify code so that the <div class="slide"> stays open when user lands on any of its children.
Screenshot for your reference:
Any help is much appreciated. Thanks in advance.
<ul class="nav">
<li id="top-level" class="has-drop"><a class="opener" href="/index.php/visitor-information/"><em>Visitor Information</em></a>
<div class="slide">
<ul>
<li>Visitor Information</li>
<li>About our town</li>
<li>Gallery</li>
<li>I'm Hungry</li>
</ul>
</div>
</li>
<li id="top-level" class="has-drop"><a class="opener" href="/index.php/membership/"><em>Membership</em></a>
<div class="slide">
<ul>
<li>Membership</li>
<li>Advocacy</li>
<li>Ambassadors</li>
<li>Board Of Directors</li>
</ul>
</div>
</li>
<li id="top-level" class=""><a class="opener" href="/index.php/upcoming-events/"><em>Upcoming Events</em></a></li>
<li id="top-level" class="has-drop"><a class="opener" href="/index.php/online-store/"><em>Online Store</em></a>
<div class="slide">
<ul>
<li>Online Store</li>
<li>Business Compliance Materials</li>
<li>Events</li>
<li>Membership Products</li>
</ul>
</div>
</li>
<li id="top-level" class=""><a class="opener" href="/index.php/contact-us/"><em>Contact us</em></a></li>
</ul>
jQuery Accordian plugin code:
/*
* jQuery Accordion plugin
*/
;(function($){
$.fn.slideAccordion = function(opt){
// default options
var options = $.extend({
addClassBeforeAnimation: false,
allowClickWhenExpanded: false,
activeClass:'active',
opener:'.opener',
slider:'.slide',
animSpeed: 300,
collapsible:true,
event:'click'
},opt);
return this.each(function(){
// options
var accordion = $(this);
var items = accordion.find(':has('+options.slider+')');
items.each(function(){
var item = $(this);
var opener = item.find(options.opener);
var slider = item.find(options.slider);
opener.bind(options.event, function(e){
if(!slider.is(':animated')) {
if(item.hasClass(options.activeClass)) {
if(options.allowClickWhenExpanded) {
return;
} else if(options.collapsible) {
slider.slideUp(options.animSpeed, function(){
hideSlide(slider);
item.removeClass(options.activeClass);
});
}
} else {
// show active
var levelItems = item.siblings('.'+options.activeClass);
var sliderElements = levelItems.find(options.slider);
item.addClass(options.activeClass);
showSlide(slider).hide().slideDown(options.animSpeed);
// collapse others
sliderElements.slideUp(options.animSpeed, function(){
levelItems.removeClass(options.activeClass);
hideSlide(sliderElements);
});
}
}
e.preventDefault();
});
if(item.hasClass(options.activeClass)) showSlide(slider); else hideSlide(slider);
});
});
};
// accordion slide visibility
var showSlide = function(slide) {
return slide.css({position:'', top: '', left: '', width: '' });
};
var hideSlide = function(slide) {
return slide.show().css({position:'absolute', top: -9999, left: -9999, width: slide.width() });
};
}(jQuery));
Are the children being loaded via AJAX or is the menu simply revealing content? If so, it sounds like the anchor tags inside are hooked up to the click event of your accordion.
I noticed there's an option: "allowClickWhenExpanded" which appears to prevent the slide from hiding on click:
if(item.hasClass(options.activeClass)) {
if(options.allowClickWhenExpanded) {
return;
} else if(options.collapsible) {
slider.slideUp(options.animSpeed, function(){
hideSlide(slider);
item.removeClass(options.activeClass);
});
}
}
So try enabling that to "true" at the top of the function (or when you initialize the accordion).
If you're looking to auto-expand the navigation menu based on the "current page", you could use jQuery:
if ($('.nav').length > 0)
{
var currentUrl = window.location.pathname;
var navLink = $('.nav').find("a[href='/" + currentUrl + "']"); // find current page in navigation
// find parent
var parentLink = navLink.parentsUntil('.has-drop').find('.opener');
// trigger click on accordion, effectively expanding it (assuming menu always starts collapsed)
parentLink.trigger('click');
}
I am trying to activate a tab via a link e.g.#blahblah However, to do that, the tabs would have to be link based but they are list based. Can anyone tell me on how i can do it with my current setup? e.g. website.com/#tab2
JQUERY
$(document).ready(function() {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return;
}
else{
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
}
});
});
HTML
<ul id="tabs">
<li>Description</li>
<li>Reviews</li>
</ul>
<div id="content">
<div id="tab1">
</div>
<div id="tab5">
</div>
</div>
I'm pretty sure that
Discription
would work.
I've created a jQuery dropdown menu that shows div dropdowns on hover.
It's for a website's navigation menu, but the problem is that some menu items don't need a dropdown and I can't hide the menu for these items.
Here's the JSFiddle. What I need is for the menu item titled "No Hover" to not show the dropdown div.
This is the JavaScript that I'm using:
$(function () {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
$oe_menu_items.bind('mouseenter', function () {
var $this = $(this);
$this.addClass('slided selected');
$this.children('.hover-div').css('z-index', '9999').stop(true, true).slideDown(200, function () {
$oe_menu_items.not('.slided').children('.hover-div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave', function () {
var $this = $(this);
$this.removeClass('selected').children('.hover-div').css('z-index', '1');
});
$oe_menu.bind('mouseenter', function () {
var $this = $(this);
$oe_overlay.stop(true, true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave', function () {
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true, true).fadeTo(200, 0);
$oe_menu_items.children('.hover-div').hide();
})
});
And the HTML structure:
<div class="oe_wrapper">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li>Home
<div class="hover-div">Content 1</div>
</li>
<li>Projects
<div class="hover-div">Content 2</div>
</li>
<li>No Hover
<div class="hover-div">This should not appear and no other menu divs or the dark overlay should be shown.</div>
</li>
<li>Events
<div class="hover-div">Content 4</div>
</li>
<li>Stores
<div class="hover-div">Content 5</div>
</li>
</ul>
Thanks for your help! Once again, the JSFiddle is here.
use a specific id for that item and check if it is hovered, do nothing!
if($(this).attr('id', 'TheID'))
return false;
How about add one more class for the item you don't want to show and update a few script?
DEMO http://jsfiddle.net/L6BEE/12/
CSS
<div class="hover-div not-shown">
This should not appear and no other menu divs or the dark overlay should be shown.
</div>
JQUERY
// updated code starts
if($this.children('.hover-div').hasClass('not-shown')){
$oe_menu_items.not('.slided').children('.hover-div').hide();
$this.removeClass('slided');
}
else{
$this.children('.hover-div').css('z-index', '9999').stop(true, true).slideDown(200, function () {
$oe_menu_items.not('.slided').children('.hover-div').hide();
$this.removeClass('slided');
});
}
// updated code ends
If you add a class to the li tags and change the jquery selector, it should work :
<li class="sub-menu">
var $oe_menu_items = $oe_menu.children('li.sub-menu');
http://jsfiddle.net/L6BEE/8/