I've created your typical jQuery slider (code from here). Everything works just fine as is, except I don't want the fadeIn() to run when the page loads (it just looks weird since the user hasn't clicked anything yet). Any ideas how to fix this? Basically I want to leave it as is, except no fade on page load. Thanks!
// Tab slides
$(function () {
var tabContainers = $('div.slider > div');
$('div.slider ul.slider-nav a').click(function () {
tabContainers.hide().filter(this.hash).fadeIn();
$('div.slider ul.slider-nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
// Tab slides
$(function () {
var tabContainers = $('div.slider > div'),
loaded = false;
$('div.slider ul.slider-nav a').click(function () {
var tab = tabContainers.hide().filter(this.hash);
if (loaded){
tab.fadeIn();
}else{
tab.show();
}
loaded = true;
$('div.slider ul.slider-nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Explanation: The script is loading a click handler, then (once loaded) calling the click handler it just created. Because of this, it will fade (as the handler is instructing it to do). This can be avoided by added a check (in this cases the loaded variable) that basically lets the first click flow through without any intervention, but makes any future calls apply the fade.
You could set a flag after the first run, which is then checked on successive runs.
// Tab slides
$(function () {
var tabContainers = $('div.slider > div');
var firstRun = true;
$('div.slider ul.slider-nav a').click(function () {
tabContainers.hide().filter(this.hash);
if(!firstRun) { tabContainers.fadeIn(); firstRun = false; }
$('div.slider ul.slider-nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Well can't you just remove
tabContainers.hide().filter(this.hash).fadeIn();
?
Related
I am trying to get anchor links to open up tabs on a specific page.
Solutions like the one found on https://jonathanbossenger.com/using-anchor-links-to-open-accordions-and-tabs-in-divi/ only work when the anchor link is on the same page as the tabs.
I found a different thread on Stack that addressed this issue, but it had the finalized solution ironed out in a chat I don't have access to (Wordpress Divi Theme - Anchor link opens tab toggle).
I can see on their website that they were able to get it to work (https://www.elkodowntown.org/our-members/#member-tabs|3).
How can I access the site code of Elko Downtown to find the final version of the JavaScript below that got it to work?
jQuery(function($) {
$('.menu-item-179 a').on('click', function(event){
tabScroll('.et_pb_tab_0');
return false;
});
$('.menu-item-180 a').on('click', function(event){
tabScroll('.et_pb_tab_1');
return false;
});
$('.menu-item-181 a').on('click', function(event){
tabScroll('.et_pb_tab_2');
return false;
});
$('.menu-item-182 a').on('click', function(event){
tabScroll('.et_pb_tab_3');
return false;
});
$('.menu-item-183 a').on('click', function(event){
tabScroll('.et_pb_tab_4');
return false;
});
function tabscroll(target) {
$("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
setTimeout($('#member-tabs' + target + ' a').click(), 2000 );
}
$(function hash() {
var hash = window.location.hash.replace('#', "");
if (hash == '#shop') { tabscroll('.et_pb_tab_1'); }
if (hash == '#service') { tabscroll('.et_pb_tab_0'); }
if (hash == '#eat-drink') { tabscroll('.et_pb_tab_2'); }
if (hash == '#arts-entertainment') { tabscroll('.et_pb_tab_3'); }
if (hash == '#stay') { tabscroll('.et_pb_tab_4'); }
});
});
Every line of javascript transmitted over the web is visible by inspecting the browser. If all you're looking to do is see what they're finalized code is look below.
However, if you're using WP and trying to do things using JS/JQuery I strongly urge you to learn how to do the functions outside of WP first and understand what's going on, the code you take from will not always match your page structure/elements and you'll always wonder why things don't work.
Here's the code that's doing it for them:
function _setTab(){
// get current hash value
var curHash = window.location.hash.substr(1);
// only continue if hash provided and scoped to member tabs
if( !curHash || !curHash.match('member-tabs') ){ return false; }
// split and int val tab num
curHash = parseInt(curHash.split('|')[1]);
// ignore if tab is current state
if( curHash === window._tabSelected ){ return false; }
// set current tab to window
window._tabSelected = curHash;
// add click event to tab selected
switch(curHash){
case 0:
case 1:
case 2:
case 3:
case 4:
jQuery('#member-tabs .et_pb_tab_'+curHash+' a').click();
break;
default:
return false;
break;
}
// scroll to tabs container
_scrollToTabs();
}
// scroll to member tabs container with 50px offset
function _scrollToTabs(){
var oTabs = jQuery('#member-tabs');
if( oTabs.length > 0 ){
jQuery('html,body').animate({
scrollTop: (oTabs.offset().top - 50)
}, 1000);
}
return false;
}
// set falsey state for tab selected on load
window._tabSelected = false;
// we need to attach to window load because the tabs functions are initialized later in document
jQuery(window).on('load', function(){
// check for initial hash state
_setTab();
// add hash change window listener
jQuery(window).on('hashchange', function(){
_setTab()
});
// void submenu when we are in member section
var curPath = window.location.pathname;
if( curPath.match('our-members') ){
// only change hash and do not reload page
jQuery('#menu-item-98 ul li a').on('click', function(e){
e.stopImmediatePropagation();
window.location.hash = jQuery(this).prop('hash');
return false;
});
}
});
I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});
I've got to a point where my accordions open up at the same time - see http://www.bootply.com/Go4t29rYyF
When you click on "tab1" all the "tab1s" open, when you click on "tab2" all the "tab2s" open - great! But I cant open "tab1s & tab2s" at the same time, it only works when I close one of the tabs first before opening another. The issue is with my js but cant work it out.
$(function () {
var $active = true;
$('.panel-title > a').click(function (e) {
e.preventDefault();
});
$('.number1-collapse').on('click', function () {
if (!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.number1').collapse('hide');
} else {
$active = false;
$('.number1').collapse('show');
$('.panel-title > a').attr('data-toggle', '');
}
});
$('.number2-collapse').on('click', function () {
if (!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.number2').collapse('hide');
} else {
$active = false;
$('.number2').collapse('show');
$('.panel-title > a').attr('data-toggle', '');
}
});
});
I've tidied up your code and changed to using the toggle method instead of having various flags. The problem is that you are sharing the active flag between them. Here is the improved code and Bootply:
$(function () {
$('.panel-title > a').click(function (e) {
e.preventDefault();
});
$('.number1-collapse').on('click', function () {
$('.number1').collapse('toggle');
});
$('.number2-collapse').on('click', function () {
$('.number2').collapse('toggle');
});
});
You may want to specify which elements you are effecting in your function using the event parameter
Example:
$('.number2-collapse').on('click', function (event) {
var panelTitle = $(event.currentTarget).find('.panel-title > a');
var number = $(event.currentTarget).find('.number2');
if (!$active) {
$active = true;
$(panelTitle).attr('data-toggle', 'collapse');
$(number).collapse('hide');
} else {
$active = false;
$(number).collapse('show');
$(panelTitle).attr('data-toggle', '');
}
});
This is an example. You may need to alter this code for it to work in your situation
I'm trying to show this CSS on the first click and remove it on the next but toggleClass doesnt seem to work and neither does my code below. All I can get is the CSS to show and it never gets removed. This is for use on Safari on iOS. Thanks for the help!
var menu_enabled = false;
$('#nav a').click(function () {
if (menu_enabled == true) {
$(this).removeClass('sf-js-enabled');
var menu_enabled = false;
}
else {
var menu_enabled = true;
$(this).addClass('sf-js-enabled');
}
});
You should checkout .toggleClass(), looks like it's exactly what you're wanting.
$('#nav a').click(function () {
$(this).toggleClass('sf-js-enabled');
});
Perhaps using the .className attribute?
var menu_enabled = false;
$('#nav a').click(function () {
if (menu_enabled == true) {
$(this).className = "";
menu_enabled = false;
}else
{
menu_enabled = true;
$(this).className = 'sf-js-enabled';
}
});
I'm not exactly sure what you're trying to accomplish overall, but addClass and removeClass should work just fine. I would add an ID or class to the element that you want to have the click attached to but that's just a personal preference.
$(document).ready(function(){
$('#element').click(function(){
if($('#element').hasClass('sf-js-enabled')){
$('#element').removeClass();
}
else{
$('#element').addClass('sf-is-enabled');
}
});
});
I wonder if anyone can help to finally resolve an issue I brought up on SO a while back.
I am unable to untoggle these dropdown menus by clicking outside of the button, or anywhere else on the page.
Please see this jsFiddle.
I've seen folks using stopPropagaton() but am unsure how to apply it here.
Any ideas how to do this?
My toggling code:
var cur = null;
$(".toggle").click(function(e){
$('#nav ul:visible').hide();
if(cur == null || cur.currentTarget != e.currentTarget)
{
if(cur != null)
{
$(cur.currentTarget)
.children('a:first').children('span').removeClass('fc-state-active');
}
cur = e;
$(cur.currentTarget)
.children('a:first').children('span').addClass('fc-state-active');
$(cur.currentTarget)
.children('ul').show();
}
else
{
$(cur.currentTarget)
.children('a:first').children('span').removeClass('fc-state-active');
cur = null;
}
});
I believe the following should work for you. This utilizes jQuery's focusout() function:
$(".toggle").click(function(){
$('#nav ul:visible').hide();
$('span.fc-state-active').removeClass('fc-state-active');
$(this).children('a:first').children('span').addClass('fc-state-active');
$(this).children('ul').show();
}).focusout(function(){
$('#nav ul:visible').hide();
$('span.fc-state-active').removeClass('fc-state-active');
});
And here's an updated fiddle: jSFiddle
EDIT: The following works in FF & Chrome
New Fiddle: jsFiddle
$(".toggle").click(function(){
$('#nav ul:visible').hide();
$('span.fc-state-active').removeClass('fc-state-active');
$(this).children('a:first').children('span').addClass('fc-state-active');
$(this).children('ul').show();
hide = false;
});
$(document).click(function(){
if(hide){
$('#nav ul:visible').hide();
$('span.fc-state-active').removeClass('fc-state-active');
}
hide = true;
});
Reason: $(document).click() is called after $(".toggle").click()
EDIT 2: The working fiddle can be found here: jSFiddle
var hide;
$(".toggle").click(function(){
var active_span = $(this).children('a:first').children('span');
var active_ul = $(this).children('ul');
$(active_span).toggleClass('fc-state-active');
$("span.fc-state-active").not(active_span).removeClass('fc-state-active');
$(active_ul).toggle();
$("#nav ul:visible").not(active_ul).hide();
hide = false;
});
$(document).click(function(){
if(hide){
$('#nav ul:visible').hide();
$('span.fc-state-active').removeClass('fc-state-active');
}
hide = true;
});