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!
Related
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?
I have a question about JS dropdown menus.
I have multiple menus button, each has submenus. Unfortunatly once I open a menu, it stays open even if I click on another menus buttons and they visually overlap.
I´ve tried different solutions found on here, but apparently I´m doing something wrong.
Here is what I have:
$( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a, .widget_nav_menu .page_item_has_children > a, .widget_nav_menu .menu-item-has-children > a' ).append( '<button class="dropdown-toggle" aria-expanded="false"/>' );
$( '.dropdown-toggle' ).click( function( event ) {
event.preventDefault();
$( this ).toggleClass( 'toggle-on' );
$( this ).parent().next( '.children, .sub-menu' ).toggleClass( 'toggle-on' );
$( this ).attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
} );
And:
jQuery(document).ready(function($){
$(window).resize(function(){
var socialHeight = $('.social-icons').outerHeight();
$('.social-icons').css('margin-top',-(socialHeight/2));
}).resize();
});
Any advice is appreciated!
I have a task for WordPress website which use Contact Form 7 plugin.
How do I set textarea as required only if value of another field ( [number* number-265 min:0 id:antala] ) > 0 ?
So, it should be not like [textarea* stelnummera id:stelnummera] because this textarea will be required every time.
I have created javascript code which add some classes, attributes and alert message (how it add Contact Form 7 plugin):
$( "#antala" ).change(function() {
if ( $( "#antala" ).val() > 0 ) {
$( "#stelnummera" ).addClass( "wpcf7-validates-as-required wpcf7-not-valid" ).attr( "aria-required", "true" ).attr( "aria-invalid", "true" );
} else {
$( "#stelnummera" ).removeClass( "wpcf7-validates-as-required wpcf7-not-valid" ).attr( "aria-required", "false" ).attr( "aria-invalid", "false" );
}
});
$( ".wpcf7-form" ).submit(function( event ) {
if ( $( "#antala" ).val() > 0 && $( "#stelnummera" ).val() == "" ) {
event.preventDefault();
$( "#stelnummera" ).attr( "aria-invalid", "true" );
$( "#stelnummera" ).after( "<span class='custom-alert' style='color: #f00;'>Dette felt skal udfyldes</span>" );
if ($ ( ".invalid" ).length == 0 ) {
$ ( ".wpcf7-form" ).addClass( "invalid" );
}
} else {
$( "#stelnummera" ).attr( "aria-invalid", "false" );
$( ".custom-alert" ).remove();
}
});
But the form still submitting
I have just hide this textarea until value of number field will be > 0.
Textarea is required [textarea* stelnummera id:stelnummera]
$("#stelnummera").parent().parent().hide();
$("#stelnummera").val('n/a');
$("#antala").change(function() {
if ($("#antala").val() > 0) {
$("#stelnummera").parent().parent().show();
$("#stelnummera").val('');
} else {
$("#stelnummera").parent().parent().hide();
$("#stelnummera").val('n/a');
}
});
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();
});
There is something wrong with my jQuery script. It kinda works, but when I try to toggle between the classes it works at first.
the script changes classes just like it's supposed to. but when i try to do it again,
I have to click the link and then somewhere else, and then it works again.
I want to be able do repeat the whole procedure over and over without having to click two extra times.
var clickOnSettings = true;
$(".settings_link").click(function () {
event.preventDefault();
if (clickOnSettings) {
$("#coverup").toggleClass("cover1");
$("#settingani").toggleClass("settings1");
clickOnSettings = false;
}
});
$("#coverup").click(function () {
if (!clickOnSettings) {
$("#coverup").toggleClass("cover2");
$("#settingani").toggleClass("settings2");
clickOnSettings = true;
}
});
created a jsfiddle:
http://jsfiddle.net/5dzt1v6f/13/
If you toggle 'cover1', you basically toggle between having and not having 'cover1' on the element. That does not imply that you automatically get cover2 when you remove cover1.
You have to do that yourself. Fortunately, toggleClass has a second parameter that accepts a boolean. This allows you to easily toggle classes on or off based on your conveniently introduced boolean.
Furthermore, this makes the click handler for both elements the same:
var clickOnSettings = false;
$( ".settings_link, #coverup" ).click(function() {
event.preventDefault();
clickOnSettings = ! clickOnSettings;
//Toggle all classes.
$( "#coverup" ).toggleClass( "cover1", clickOnSettings);
$( "#settingani" ).toggleClass( "settings1", clickOnSettings);
$( "#coverup" ).toggleClass( "cover2", !clickOnSettings);
$( "#settingani" ).toggleClass( "settings2", !clickOnSettings);
});
http://jsfiddle.net/5dzt1v6f/20/
Why don't you just use addClass and removeClass for what you want to do.
var clickOnSettings = true;
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings) {
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
$( "#coverup" ).removeClass( "cover2" );
$( "#settingani" ).removeClass( "settings2" );
clickOnSettings = false;
}
});
$( "#coverup" ).click(function() {
if (!clickOnSettings) {
$( "#coverup" ).addClass( "cover2" );
$( "#settingani" ).addClass( "settings2" );
$( "#coverup" ).removeClass( "cover1" );
$( "#settingani" ).removeClass( "settings1" );
clickOnSettings = true;
}
});
http://jsfiddle.net/5dzt1v6f/15/
I fixed it!
Not the prettiest code. But this worked I needed to have another class for the settingani and not for the coverup. So I had to do it like this:
var clickOnSettings = 1;
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings == 1) {
$( "#settingani" ).removeClass( "settings0" );
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
clickOnSettings = 3;
}
});
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings == 2) {
$( "#coverup" ).removeClass( "cover2" );
$( "#settingani" ).removeClass( "settings2" );
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
clickOnSettings = 3;
}
});
$( "#coverup" ).click(function() {
if (clickOnSettings == 3) {
$( "#coverup" ).removeClass( "cover1" );
$( "#settingani" ).removeClass( "settings1" );
$( "#coverup" ).addClass( "cover2" );
$( "#settingani" ).addClass( "settings2" );
clickOnSettings = 2;
}
});
Thanks for all the help! =)