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!
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 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 have downloaded source code for a hidden search bar, that when clicked, reveals a text input bar.
I have copied this html into my homepage.html:
<div id="reserveButtonOuter">
<button id="reserveButton">Reserve a Table</button>
</div>
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
This is connected to my HomePage.js file, in which I have the code below:
;( function( window ) {
function UISearch( el, options ) {
this.el = el;
this.inputEl = el.querySelector( 'form > input.sb-search-input' );
this._initEvents();
}
UISearch.prototype = {
_initEvents : function() {
var self = this,
initSearchFn = function( ev ) {
if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
ev.preventDefault();
self.open();
}
else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
self.close();
}
}
this.el.addEventListener( 'click', initSearchFn );
this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
},
open : function() {
classie.add( this.el, 'sb-search-open' );
},
close : function() {
classie.remove( this.el, 'sb-search-open' );
}
}
This is only a small part of the code, as it is several hundred lines.
The .css file is linked to my page fine as it is working for my other elements. The search bar is rendering as nothing more than an orange square, which when clicked shows no errors on the console. Im not sure what that means for the Javascript?
Any advice would be great, thanks!
My advice for you is to check in the developer tools what css is enforced on the element.
Maybe you are loading some values with higher priorities, or maybe your selectors are not correct, or you might have js exception thrown, before the css loading..
I have a .js document who allow me to switch between different page into the same html document.
I have a trigger button who activate the transition on click only and i wanted to activate it on scroll too or on scroll only.
I tried to add an onscroll parameter in my function but it doesn't worked. I think it's because I have my different pages who are in width:100% so I don't have any scrollbar...
Here is my HTML structure
<body>
<button id="iterateEffects" class="btn_bot"></button> <!--Trigger btn-->
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1">First page code inside</div>
<div class="pt-page pt-page-2">Second page code inside</div>
etc...
</div>
</body>
Here is my button function
$iterate = $( '#iterateEffects' ) //my iterateEffects var
function init() {
$pages.each( function() {
var $page = $( this );
$page.data( 'originalClassList', $page.attr( 'class' ) );
} );
$pages.eq( current ).addClass( 'pt-page-current' );
$( '#dl-menu' ).dlmenu( {
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' },
onLinkClick : function( el, ev ) {
ev.preventDefault();
nextPage( el.data( 'animation' ) );
}
} );
$iterate.on( 'click', function() {
animcursor = 3;
nextPage( animcursor );
} ); //Activate the function on click
}
Have you tried this:
$( document ).on( 'scroll', function() {
animcursor = 3;
nextPage( animcursor );
} );
Also make sure that your page is scrollable.
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).