$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn(1200);
});
});
This is for tabbed menu with contents (using jQuery, of course).
When I opening new tab, current contents fades out wery fast, but new tab contents opens slowly (as indicated 1200).
So, how can I edit this existing script to fade out contents slowly?
Example http://jsfiddle.net/2uts2kdt/7/
http://jsfiddle.net/2uts2kdt/9/
Check out the updated JSFiddle above. Basically you want to call the fadeIn once the fadeOut is complete. You need use promise().done() because the fadeOut is called on multiple elements. So once it is all done it will call the done code.
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).fadeOut(1200).promise().done(function() {
$(tab).fadeIn(1200);
});
});
});
If I understand correctly then you want to add a fadeOut call instead of just setting it to display:none
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).fadeOut(1200);
$(tab).fadeIn(1200);
});
Related
I'd like all tabs to be collapsed on page load. Right now the first one is open by default:
$(document).ready(function($) {
$('#forms').find('.forms-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".forms-content").not($(this).next()).slideUp('fast');
});
});
HTML and CSS are here:
https://jsfiddle.net/re8x8cx3/
Place this inside dom ready,
$(".forms-content").hide();
Then the code will be,
$(document).ready(function($) {
$(".forms-content").hide();
$('#forms').find('.forms-toggle').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".forms-content").not($(this).next()).slideUp('fast');
});
});
Fiddle
Please also improve you JS:
(function($){
//store reusable global vars
var $forms = $('#forms'),
$formContents = $forms.find(".forms-content");
//hide on load
$formContents.hide();
//attach only on handler to #forms instead of to every tab separately
$forms.on('click', '.forms-toggle', function(event){
event.preventDefault();
//reuse this value (only on reference)
var $thisContent = $(this).next(),
//Expand or collapse this panel
$thisContent.slideToggle('fast');
//Hide the other panels
$formContents.not($thisContent).slideUp('fast');
});
});
I have a set of tabs here: http://thetalbotcuckfield.co.uk/menus/
But I need to link to specific tabs from another page within the site e.g.
from here:http://thetalbotcuckfield.co.uk/whats-on/ the 'view menu' link will link through to the specific tab on the menu page.
The current query I have is as follows. It sets up the menus, but I can't figure a way to link through to specific tabs.
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
if (window.location.hash == "#tabs-container") {
$(".tabs-menu > li").removeClass("current");
$(".tabs-menu > li.xmas").addClass("current");
$(".tab .tab-content").hide();
$(".tab .tab-content#tab-5").fadeIn();
}
});
Here is my jQuery code:
$(document).on("click", '.sidebarExternalLink', function (e) {
if($(this).data("leftmenu")){
$('#sidebar .list a[href*="'+ $(this).data("leftmenu") +'"]').click();
}else{
$('#sidebar .list a[href*="'+ $(this).attr("href").split('?')[0] +'"]').click();
}
});
What this code does is when I click on a document link on main page it redirects to documents list page and clicks corresponding document and shows details. The problem is that now it's just redirecting to the page and then I have to scroll and look which document is opened. What I want to do is to scroll down automatically to the opened document. Any suggestion how to do that? If you have any questions I am happy to answer.
Here is the code on document list page:
$('.js-toggle-table-details').on('click', function() {
var $tablerow = $(this).next('.table-row-details');
$('.table-row-details').not($tablerow).hide();
$($tablerow).slideToggle("slow");
});
On document ready event I filtered the elements with css property and scrolled to opened one. Here is the code:
$(document).ready(function(){
var toggledItem = $('.table-row-details').filter(function() {
return $(this).css('display') == 'table-row';
});
$('html, body').animate({
scrollTop: toggledItem.offset().top
}, 500);
})
If you have better solution please post it.
Need help guys im new to javascript, how can i make the status of collapsed icon to "+" again when i click the current tab to collapsed? my problem is the "-" current tab has that sign whenever i close the tab again, here's the code and the sample link: http://www.dev.redefinegraphicstudio.com/acp/SLOCPI%20Mobile/HOMEPAGE.html
$(document).ready(function(){
$('.expand-collapse-menu > li > a').on('click', function(){
var $this = $(this);
if($this.parent().hasClass('current')){
$this.parent().parent().find('ul').stop().slideUp();
}else{
$this.parent().parent().find('li').each(function(){ $(this).removeClass('active'); })
$this.parent().parent().find('ul').stop().slideUp();
$this.parent().toggleClass('active');
$this.parent().find('ul').stop().slideToggle(500);
}
});
$(".tabs-menu").find('li').each(function(){
if($(this).hasClass('current')){
var tab = $(this).find('a').attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
}
});
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
The problem is your first function, when you change it to
$('.expand-collapse-menu > li > a').on('click', function () {
var $this = $(this);
if ($this.parent().hasClass('active')) { // change to active instead of current
$this.parent().toggleClass('active'); // add this line
$this.parent().parent().find('ul').stop().slideUp();
} else {
$this.parent().parent().find('li').each(function () {
$(this).removeClass('active');
});
$this.parent().parent().find('ul').stop().slideUp();
$this.parent().toggleClass('active');
$this.parent().find('ul').stop().slideToggle(500);
}
});
the class active that sets the background color to orange and the minus sign as background image will also be toggled for the active element. You could also remove the $this.parent().toggleClass('active'); from the if and else clauses and set it below as it should be toggled anyway.
As mentioned in the comments, if you want to keep changing the class of the clicked element in the if and else clauses, you can also consider to use addClass("active") and removeClass("active") instead of toggleClass("active") as it's known if the class should be added or removed.
I've set up a Fiddle with the relevant part from your page.
I've searched and serached and nothing really seems to answer what I'm looking for.
I'm pulling in html pages into a div. I finally got it to fadeout, load new href content, then fade in the new content. However, I can't get it to preventDefault on the link.
Here's my code. Any help is greatly appreciated!
$(document).ready(function() {
var url = $(this).attr("href");
$('#container').css('display', 'none');
$('#container').fadeIn(1000);
jQuery('a').click(function(e){
e.preventDefault();
$('a').removeClass('current');
$(this).addClass('current');
$("#container").fadeOut('1000',function(){
$('#container').load(url);
}).fadeIn('1000');
});
})
You need to call this fadeIn inside the load callback.
$(document).ready(function() {
var loading = false;
$('#container').css('display', 'none');
$('#container').fadeIn(1000);
$('a').click(function(e){
if(loading) return false;
e.preventDefault();
loading = true;
var url = $(this).attr("href"),
cont = $("#container"); //cache selector
$('a').removeClass('current');
$(this).addClass('current');
cont.fadeOut(1000, function(){
cont.load(url, function() {
cont.fadeIn(1000, function() {
loading = false;
});
});
});
});
});