Please help, I still learn about JS.
How to add multiple class when I've situation like this?
I've two trigger .m-trigger and d-trigger
var ModalEffects = (function() {
function init() {
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.d-trigger' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ) {
classie.remove( modal, 'md-show' );
if( hasPerspective ) {
classie.remove( document.documentElement, 'md-perspective' );
}
}
function removeModalHandler() {
removeModal( classie.has( el, 'md-setperspective' ) );
}
el.addEventListener( 'click', function( ev ) {
classie.add( modal, 'md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
} );
}
init();
I tried to add like this
document.querySelectorAll( '.d-trigger.m-trigger' )
and
document.querySelectorAll( '.d-trigger' '.m-trigger' )
the modal doesn't work correctly, the first code make any trigger doesn't work, and the second code only work on first class.
I've solution for this, just copy all code and change the class. but any solution for this?
Related
I created a custom them website in WordPress. http://www.seattlestormbasketball.com/stormcares/
Everything is working great, except in IE 11. The dropdown toggle on the navigation menu appears on the home page but not on any of the inside pages.
JS
(function( $ ) {
var masthead, menuToggle, siteNavContain, siteNavigation;
function initMainNavigation( container ) {
// Add dropdown toggle that displays child menu items.
var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false })
.append( $( '<i />', { 'class': 'dropdown-symbol fa fa-plus-circle' }) )
.append( $( '<span />', { 'class': 'screen-reader-text', text: ezmacScreenReaderText.expand }) );
container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
container.find( '.dropdown-toggle' ).click( function( e ) {
var _this = $( this ),
screenReaderSpan = _this.find( '.screen-reader-text' );
e.preventDefault();
_this.toggleClass( 'toggled-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
screenReaderSpan.text( screenReaderSpan.text() === ezmacScreenReaderText.expand ? ezmacScreenReaderText.collapse : ezmacScreenReaderText.expand );
});
}
initMainNavigation( $( '.main-navigation' ) );
masthead = $( '#masthead' );
menuToggle = masthead.find( '.menu-toggle' );
siteNavContain = masthead.find( '.main-navigation' );
siteNavigation = masthead.find( '.main-navigation > div > ul' );
// Enable menuToggle.
(function() {
// Return early if menuToggle is missing.
if ( ! menuToggle.length ) {
return;
}
// Add an initial value for the attribute.
menuToggle.attr( 'aria-expanded', 'false' );
menuToggle.on( 'click.ezmac', function() {
siteNavContain.toggleClass( 'toggled-on' );
$( this ).attr( 'aria-expanded', siteNavContain.hasClass( 'toggled-on' ) );
});
})();
// Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
(function() {
if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
return;
}
// Toggle `focus` class to allow submenu access on tablets.
function toggleFocusClassTouchScreen() {
if ( 'none' === $( '.menu-toggle' ).css( 'display' ) ) {
$( document.body ).on( 'touchstart.ezmac', function( e ) {
if ( ! $( e.target ).closest( '.main-navigation li' ).length ) {
$( '.main-navigation li' ).removeClass( 'focus' );
}
});
siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' )
.on( 'touchstart.ezmac', function( e ) {
var el = $( this ).parent( 'li' );
if ( ! el.hasClass( 'focus' ) ) {
e.preventDefault();
el.toggleClass( 'focus' );
el.siblings( '.focus' ).removeClass( 'focus' );
}
});
} else {
siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).unbind( 'touchstart.ezmac' );
}
}
if ( 'ontouchstart' in window ) {
$( window ).on( 'resize.ezmac', toggleFocusClassTouchScreen );
toggleFocusClassTouchScreen();
}
siteNavigation.find( 'a' ).on( 'focus.ezmac blur.ezmac', function() {
$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
});
})();
//Change Font-Awesome dropdown symbols on toggle
$(".dropdown-symbol").click(function(e) {
if( $(this).hasClass("fa-plus-circle") ) {
$(this).removeClass("fa-plus-circle").addClass("fa-minus-circle");
} else {
// if other menus are open remove open class and add closed
$(this).siblings().removeClass("fa-plus-circle").addClass("fa-minus-circle");
$(this).removeClass("fa-minus-circle").addClass("fa-plus-circle");
}
});
})( jQuery );
Like I mentioned before, works great in all other browsers and even older versions of IE but not IE 11
Any help would be greatly appreciated. Thanks!
I've searched and not found an answer to why my .js file keeps giving me an error wp not defined in the wp.customize function.
I've enqueued the script like this
function ws_customizer_live_preview(){ wp_enqueue_script( 'ws-themecustomizer', get_template_directory_uri() .'/library/js/theme-customizer.js', array( 'jquery','customize-preview' ), true ); } add_action( 'customize_preview_init', 'ws_customizer_live_preview' );
This was basically copied from WP Docs. The javascript is
(function( $ ) {
"use strict";
wp.customize( 'ws_display_header', function( value ) {
value.bind( function( to ) {
false === to ? $( '.header' ).hide() : $( '.header' ).show();
} );
});
wp.customize( 'ws_footer_copyright_text', function( value ) {
value.bind( function( to ) {
$( 'span#copyright-message' ).text( to );
});
}); })(jQuery);
I need to know why the wp.customize in the js is giving me wp not defined error.
Thank you
I have a tooltip associated with some textboxes as follows:
$(document).tooltip({
items: "[data-my-latitude]",
position: {
my: "center bottom-15",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
},
content: function() {
var element = $( this );
if ( element.is( "[data-my-latitude]" ) ) {
if (element.prop('disabled'))
return null;
return _map.build(element.val());
}
return null;
}
});
Everything works fine, but I will like to close the close the tooltip window if the user types a different value into the textbox.
If anyone is interested, I ended up doing this:
element.keyup( function () {
$(".ui-tooltip-content").parents('div').remove();
});
The following Javascript code is linked to my modal:
var ModalEffects = (function() {
function init() {
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ) {
classie.remove( modal, 'md-show' );
if( hasPerspective ) {
classie.remove( document.documentElement, 'md-perspective' );
}
}
function removeModalHandler() {
removeModal( classie.has( el, 'md-setperspective' ) );
}
el.addEventListener( 'click', function( ev ) {
classie.add( modal, 'md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
} );
}
init();
})();
This is the example html code for a modal:
div class="md-modal md-effect-2" id="modal-2">
<div class="md-content">
<h3>Modal Dialog</h3>
<div>
<p>This is a modal window. You can do the following things with it:</p>
<ul>
<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
<li><strong>Close:</strong> click on the button below to close the modal.</li>
</ul>
<button class="md-close">Close me!</button>
</div>
</div>
</div>
And this button currently triggers the modal onclick:
<button class="md-trigger" data-modal="modal-2">Slide in (right)</button>
However, now i want to trigger the modal programmatically from an Ajax success callback, how do i actually do that to call the modal directly, rather than using the button class/data-modal?
there is also an overlay div:
<div class="md-overlay"></div><!-- the overlay element -->
Thanks!
Here is a jsfiddle using POJS showing that return false; doesn't stop the event's propagation: http://jsfiddle.net/Ralt/Lz2Pw/
Here is another using jQuery showing that return false; does stop the event's propagation: http://jsfiddle.net/Ralt/D5Mtg/
Edit: The one explaining to me why jQuery does this - differing from the original behavior intentionally - (and where in the code) gets the answer.
Here is the code (long, but very easy to read):
HTML for both versions:
<div id="parent1">
<div id="child1">child1</div>
</div>
<div id="parent2">
<div id="child2">child2</div>
</div>
<div id="parent3">
<div id="child3">child3</div>
</div>
POJS:
document.getElementById( 'child1' ).onclick = function( e ) {
console.log( 'child1' );
e.preventDefault();
};
document.getElementById( 'parent1' ).onclick = function( e ) {
console.log( 'parent1' );
};
document.getElementById( 'child2' ).onclick = function( e ) {
console.log( 'child2' );
return false;
};
document.getElementById( 'parent2' ).onclick = function( e ) {
console.log( 'parent2' );
};
document.getElementById( 'child3' ).onclick = function( e ) {
console.log( 'child3' );
e.stopPropagation();
};
document.getElementById( 'parent3' ).onclick = function( e ) {
console.log( 'parent3' );
};
jQuery version:
$( '#child1' ).click( function( e ) {
console.log( 'child1' );
e.preventDefault();
});
$( '#parent1' ).click( function( e ) {
console.log( 'parent1' );
});
$( '#child2' ).click( function( e ) {
console.log( 'child2' );
return false;
});
$( '#parent2' ).click( function( e ) {
console.log( 'parent2' );
});
$( '#child3' ).click( function( e ) {
console.log( 'child3' );
e.stopPropagation();
});
$( '#parent3' ).click( function( e ) {
console.log( 'parent3' );
});
On line 3331 of version 1.7.1, in jQuery.event.dispatch:
ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
.apply( matched.elem, args );
if ( ret !== undefined ) {
event.result = ret;
if ( ret === false ) {
event.preventDefault();
event.stopPropagation();
}
}
A lot of packaging has happened before this line, but basically, it runs the handler function (either a raw function, or the handler memeber function of a handlerObject) using apply. If the result of that call is false, it does preventDefault and stopPropagation.
This is mentioned in the documentation for on():
Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault().
As for why they did it? I don't know, as I'm not not the jQuery design team, but I assume it's just because return false is a lot quicker to type than event.preventDefault(); event.stopPropagation();. (And if jQuery isn't about making sure you have less to type, I'm not sure what it's about.)
I don't believe the return value of an event handler is ever actually used anywhere in POJS (someone correct if that's wrong!). Thus, jQuery can safely have a return statement cause side effects in a handler (since returning false in a POJS handler is meaningless, no POJS functionality is harmed).