Im trying to use getElementsByClassName in my Javascript. I know I need to use a loop in order for it to work, but Im not sure how. I only need to use it for the 'showLeft' class. All the others can remain as they are. Here is my JS:
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
menuTop = document.getElementById( 'cbp-spmenu-s3' ),
menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
showLeft = document.getElementsByClassName( 'showLeft' ),
showRight = document.getElementById( 'showRight' ),
showTop = document.getElementById( 'showTop' ),
showBottom = document.getElementById( 'showBottom' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};
showRight.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRight' );
};
showTop.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuTop, 'cbp-spmenu-open' );
disableOther( 'showTop' );
};
showBottom.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuBottom, 'cbp-spmenu-open' );
disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRightPush' );
};
function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
if( button !== 'showRight' ) {
classie.toggle( showRight, 'disabled' );
}
if( button !== 'showTop' ) {
classie.toggle( showTop, 'disabled' );
}
if( button !== 'showBottom' ) {
classie.toggle( showBottom, 'disabled' );
}
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
if( button !== 'showRightPush' ) {
classie.toggle( showRightPush, 'disabled' );
}
}
Thanks very much.
Another question:
While i'm here, I thought I might as well ask one other question I have.
This code is for a off-canvas navigation menu which I have set to appear on the right of the screen. I am using the 'menuRight' menu and the 'moveLeft' button. Everything works very well, except I want the navigation menu to disappear when the user clicks on the body of the page. How can I do this?
You could do this :
var a=document.getElementsByClassName('menuRight');
for(var i=0;i<a.length;i++)
{
//do stuff. to access the elements use a[i]
}
If all "showLeft" elements are within the same parent element you add the click handler on the parent element and check the currentTarget property.
Otherwise you'll probably need to iterate over each element in the list you get back from getElementsByClassName, however that is kinda inefficent.
You can read more here: http://www.kirupa.com/html5/handling_events_for_many_elements.htm
Related
I am using the following jquery code to hide/show a mobile popup menu.
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); }
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else { hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
} }; removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
}; }
function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); }
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass };
// transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie ); } else { // browser global window.classie
= classie; }
})( window );
(function() {
var triggerBttn = document.getElementById( 'trigger-overlay' ), overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( 'button.overlay-close' ); transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.propertyName !== 'visibility' ) return;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
classie.remove( overlay, 'close' );
};
if( support.transitions ) {
overlay.addEventListener( transEndEventName, onEndTransitionFn ); }
else {
onEndTransitionFn(); } } else if( !classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); } }
triggerBttn.addEventListener( 'click', toggleOverlay ); closeBttn.addEventListener( 'click', toggleOverlay ); })();
$("a").click(function(){
if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
}
});
I'm trying to write a function that will change the class of div.overlay from 'open' to 'close' when an anchor within the div.overlay is clicked.
I tried this, but there's definitely some syntax and logical errors. also not sure where to put it in the function.
$("a").click(function(){
if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
}
});
Can someone help me write the function to achieve the change class to 'close' on anchor click, and instruct me on where to put it?
I tried to implement an answer, but to no avail. maybe looking at my html code will help. how specific do my selectors need to be?
thanks.
<p><button id="trigger-overlay" class="whitetext smalltext quickfade" type="button">MENU</button></p>
<div class="overlay overlay-scale">
<button type="button" class="overlay-close fade">Close</button>
<div class="info">
<div id="hamdiv">
<a id="hammenu" class="blacktext quickfade" href="home.html#graybox.html">ABOUT</a>
<a id="hammenu" class="blacktext quickfade" href="work.html">WORK</a>
<a id="hammenu" class="blacktext quickfade" href="home.html#footer">CONTACT</a>
</div>
</div>
</div>
First of all, your selector should not be just "a" but instead "div.overlay a" because you said you want to listen to <a> clicks inside div.overlay.
Secondly, you can use jQuery for the class changing part and also to verify if "div.overlay" has the class close toggled or not.
$("div.overlay a").click(function () {
if (!$("div.overlay").hasClass("close")) {
$("div.overlay").addClass("open");
//$("div.overlay").removeClass("close");
}
});
I also added a removeClass("close") call because you probably want it, but wether you need that bit of logic or not is your call.
Finally, regarding where you place this code, it could just be on top level (leftmost level) because it's just an event listener.
So there is some code from codepen.io http://codepen.io/karolpodlesny/pen/npKqu. It is uploaded here: http://fredricarms.com/javatestindex.html.
Now, the HTML, CSS and JavaScript for making the boxes expand and do all the cool things, are working how they are supposed to, being in separate files, so is the modernizr. I also the know that the js is being called because in the boxlayout.js I wrote some code to bring up and alert box and it worked just fine. So I am guessing that codepen fixes the code so it runs perfectly. I just don't know what is wrong with the code in the boxlayout.js that is not working on my server. Please help and thank you so much. Below is the code in the boxlayout js file.
var Boxlayout = (function() {
var $el = $( '#bl-main' ),
$sections = $el.children( 'section' ),
// works section
$sectionWork = $( '#bl-work-section' ),
// work items
$workItems = $( '#bl-work-items > li' ),
// work panels
$workPanelsContainer = $( '#bl-panel-work-items' ),
$workPanels = $workPanelsContainer.children( 'div' ),
totalWorkPanels = $workPanels.length,
// navigating the work panels
$nextWorkItem = $workPanelsContainer.find( 'nav > span.bl-next-work' ),
// if currently navigating the work items
isAnimating = false,
// close work panel trigger
$closeWorkItem = $workPanelsContainer.find( 'nav > span.bl-icon-close' ),
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
// transition end event name
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
// support css transitions
supportTransitions = Modernizr.csstransitions;
function init() {
initEvents();
}
function initEvents() {
$sections.each( function() {
var $section = $( this );
// expand the clicked section and scale down the others
$section.on( 'click', function() {
if( !$section.data( 'open' ) ) {
$section.data( 'open', true ).addClass( 'bl-expand bl-expand-top' );
$el.addClass( 'bl-expand-item' );
}
} ).find( 'span.bl-icon-close' ).on( 'click', function() {
// close the expanded section and scale up the others
$section.data( 'open', false ).removeClass( 'bl-expand' ).on( transEndEventName, function( event ) {
if( !$( event.target ).is( 'section' ) ) return false;
$( this ).off( transEndEventName ).removeClass( 'bl-expand-top' );
} );
if( !supportTransitions ) {
$section.removeClass( 'bl-expand-top' );
}
$el.removeClass( 'bl-expand-item' );
return false;
} );
} );
// clicking on a work item: the current section scales down and the respective work panel slides up
$workItems.on( 'click', function( event ) {
// scale down main section
$sectionWork.addClass( 'bl-scale-down' );
// show panel for this work item
$workPanelsContainer.addClass( 'bl-panel-items-show' );
var $panel = $workPanelsContainer.find("[data-panel='" + $( this ).data( 'panel' ) + "']");
currentWorkPanel = $panel.index();
$panel.addClass( 'bl-show-work' );
return false;
} );
// navigating the work items: current work panel scales down and the next work panel slides up
$nextWorkItem.on( 'click', function( event ) {
if( isAnimating ) {
return false;
}
isAnimating = true;
var $currentPanel = $workPanels.eq( currentWorkPanel );
currentWorkPanel = currentWorkPanel < totalWorkPanels - 1 ? currentWorkPanel + 1 : 0;
var $nextPanel = $workPanels.eq( currentWorkPanel );
$currentPanel.removeClass( 'bl-show-work' ).addClass( 'bl-hide-current-work' ).on( transEndEventName, function( event ) {
if( !$( event.target ).is( 'div' ) ) return false;
$( this ).off( transEndEventName ).removeClass( 'bl-hide-current-work' );
isAnimating = false;
} );
if( !supportTransitions ) {
$currentPanel.removeClass( 'bl-hide-current-work' );
isAnimating = false;
}
$nextPanel.addClass( 'bl-show-work' );
return false;
} );
// clicking the work panels close button: the current work panel slides down and the section scales up again
$closeWorkItem.on( 'click', function( event ) {
// scale up main section
$sectionWork.removeClass( 'bl-scale-down' );
$workPanelsContainer.removeClass( 'bl-panel-items-show' );
$workPanels.eq( currentWorkPanel ).removeClass( 'bl-show-work' );
return false;
} );
}
return { init : init };
})();
Your code relies entirely on jQuery, however you haven't included jQuery on your live site. On your CodePen example you're using jQuery 1.9.1:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
You can continue to use the Google-hosted version, or if you want to host it yourself you can download jQuery from jQuery's own website.
The problem is that you need to initialize your BoxLayout once your document has finished loading (all those jQuery variables you're using inside your library won't be defined because their equivalent dom elements are not yet rendered), that's why you need to init everything when dom is ready.
Add this line of code to the bottom of your boxlayout.js file:
$(document).ready(function() {
Boxlayout.init();
});
Just for testing purposes, open up the web developer console on your website, and run this js code:
Boxlayout.init();
You'll see everything will work just fine.
Hello Dear Programmers,
I have a header menu, with "Search", "Language", "Time" toggle functions.
Regarding display onClick it works correctly, but I need If I Click on "Search" show only "Search" and hide all "Language", "Time".
My code
.js
$( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
var that = $( this ),
wrapper = $( '.search-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
wrapper.find( '.search-field' ).focus();
}
} );
$( '.language-toggle' ).on( 'click.twentyfourteenn', function( event ) {
var that = $( this ),
wrapper = $( '.language-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
} );
$( '.time-toggle' ).on( 'click.twentyfourteennn', function( event ) {
var that = $( this ),
wrapper = $( '.time-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
} );
and html
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<div class="language-toggle">
<?php _e( 'Search', 'twentyfourteenn' ); ?>
</div>
<div class="time-toggle">
<?php _e( 'Search', 'twentyfourteennn' ); ?>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
<div id="language-container" class="language-box-wrapper hide">
<div class="language-box">
language
</div>
</div>
<div id="time-container" class="time-box-wrapper hide">
<div class="time-box">
time
</div>
</div>
If I understand what you mean you want to hide two different elements when clicking search you want the others to hide?
By using add you can group elements together then add classes to show or hide:
$('#element1_id').add('#element2_id').removeClass('show');
$('#element1_id').add('#element2_id').addClass('hide');
or just straight up hide them with jQuery.
$('#element1_id').add('#element2_id').hide();
You could also give the element you want to hide together a common class name:
ie: toggle
then you can simply use the class toggle to hide them:
$('.toggle').removeClass('show');
$('.toggle').addClass('hide');
or
$('.toggle').hide();
i think this will hide other parts, i have not tried this but hope will work for u
$( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
var that = $( this ),
wrapper = $( '.search-box-wrapper' );
that.toggleClass( 'active' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
wrapper.find( '.search-field' ).focus();
}
} );
$( '.language-toggle' ).on( 'click.twentyfourteenn', function( event ) {
var that = $( this ),
wrapper = $( '.language-box-wrapper' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
that.toggleClass( 'active' );
} );
$( '.time-toggle' ).on( 'click.twentyfourteennn', function( event ) {
var that = $( this ),
wrapper = $( '.time-box-wrapper' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
that.toggleClass( 'active' );
} );
This should solve the problem. You can view working demo with this link Working Demo
Summary of what I did.
I added some text as link in the html (just for testing)
I added .hide() Jquery class to hide the three wrapper classes before the click events
I added a little bit of animation to wrapper.toggle('slow')
I changed wrapper.toggleClass('slow') to wrapper.toggle('slow')
$('.search-box-wrapper').hide();
$('.language-box-wrapper').hide();
$('.time-box-wrapper').hide();
$('.search-toggle').on('click.SearchLink', function (event) {
var that = $(this),
wrapper = $('.search-box-wrapper');
that.toggleClass('active');
wrapper.toggle('slow');
if (that.is('.active') || $('.search-toggle .screen-reader-text')[0] === event.target) {
wrapper.find('.search-field').focus();
}
});
$('.language-toggle').on('click.LangLink', function (event) {
var that = $(this),
wrapper = $('.language-box-wrapper');
that.toggleClass('active');
wrapper.toggle('slow');
});
$('.time-toggle').on('click.TimeLink', function (event) {
var that = $(this),
wrapper = $('.time-box-wrapper');
that.toggleClass('active');
wrapper.toggle('hide');
});
Using tympanus.net modals (with greats animations) is easy to delete the backdrop div (<div class="md-overlay"></div>)letting me interact with menu items behind my modal but I don't know how to display just one modal at time as when I open a new one the previous still there and the new appear over it.
Everything is controlled from a class .md-show which is applied to the called modal.
I think what I need to do is delete all .md-show class applied before opening a new one with this same class. Maybe with a script?
UPDATE:
This is the script: Copyright 2013, Codrops //sorry, I can't place comments! They doesn't works!
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();
})();
I Think I need to remove .md-show here, before opening the new modal:
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 );
}
});
I made some tries without any success so some help will be appreciate! :) tympanus referring article
Found a funny solution using mousedown and mouseup events!
mousedown will delete all md-show classes
mouseup will add md-show
Easy but it took me 4 days to reach that without any knowledge on scripts!
FULL RIGHT CODE!
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( 'mouseup', 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 );
}
});
document.addEventListener( 'mousedown', function( ev ) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
} );
}
init();
})();
Please note that you need to add md-close class to md-trigger links!
I am using the modals found here on Codrops.
These modals have one close button (also closes when you click outside the modal), but I want to add more. The JavaScript is below:
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();
})();
I thought by just simply swapping:
close = modal.querySelector( '.md-close' );
With this:
close = modal.querySelectorAll( '.md-close' );
would do the trick -- and every element with the md-close class would close the modal. I was wrong (I'm new to JavaScript if you couldn't tell).
Thanks in advance for any help with this!
Updated Code:
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' ) );
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 );
}
});
modal.addEventListener( 'click', function( ev ) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
} );
}
init();
})();
The problem is likely that addEventListener only works on a single element at a time and close is a collection of elements. You're probably better off adding an event listener to the modal itself and checking for the md-close class:
modal.addEventListener('click', function (ev) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
Then you can ditch your close = ... variable as well.
Change
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
Into
document.addEventListener( 'click', function( ev ) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
And it will works!
NOW... I thought applying this hack solved also my problem as I wanted to add .md-close on my .md-trigger link to close a modal and open a new one but it didn't work! Someone could help me on this?
How to display a new modal window hiding the previous one?
Thanks!