In my application I have a button which is represented by -
<div id="hamburgerIconId" class="hamburgerIcon"></div>
When I click on this button, it opens a side navigation box which is not visible initially. Clicking on the same button closes the side navigation box. The HTML of side navigation looks like this -
<div id="pdAppSidenav" class="sidenav show-xs hidden-lg">
Life Insurance
<section id="cd-timeline" class="cd-container">
BLAH BLAH BLAH
</section>
<!-- cd-timeline -->
<div class="pd-content-bottom">
<h3>HELP DESK </h3>
<p>Open 7am-5pm </p>
</div>
</div>
Also, I have set up a masking layer that becomes visible when the side navigation box is opened. This layer's is sandwiched between the side navigation box and the webpage. It basically is used to darken and disable the background when the sidenav is opened. Clicking anywhere on the screen should also close the sidenav
The masking layer -
<div id="left-nav-mask">
</div>
Below is my Javascript/Jquery code -
function leftnav() {
var collapse_sidebar_modal = document.getElementById('pdAppSidenav');
var collapse_sidebar_icon = document.getElementById("hamburgerIconId");
var left_nav_mask = document.getElementById("left-nav-mask");
var isOpen = false;
collapse_sidebar_icon.onclick = function() {
if (isOpen == false) {
console.log(event.target);
collapse_sidebar_modal.style.display = "block";
collapse_sidebar_modal.style.width = "250px";
left_nav_mask.style.display = "block";
isOpen = true;
} else {
console.log(event.target);
collapse_sidebar_modal.style.display = "none";
collapse_sidebar_modal.style.width = "0px";
isOpen = false;
}
}
$(window).bind("click touchstart", function(event) {
if (event.target == left_nav_mask && isOpen == true) {
console.log(event.target);
left_nav_mask.style.display = "none";
collapse_sidebar_modal.style.display = "none";
collapse_sidebar_modal.style.width = "0px";
isOpen = false;
}
});
}
When I click on the button, it opens the sidenav, clicking it again closes the sidenav. Also, when the sidenav is open, clicking anywhere outside the sidenav closes it.
Now, when I use the mobile emulator provided in Chrome's dev tools, clicking on the button while the sidenav is open does not close it. What happens is that the window.onclick fires and immediately after that the onclick function of the button fires.
Does anyone know the solution to this issue?
Related
When I click on a button to load a popup modal, the popup appears for a millisecond (you can just about see it and then it goes away again).
Does anyone know why this may be?
Below is the Java Script code I am using. As I mentioned the popup does load and then it goes away straight away.
Above this Java Script I do have another modal popup that does work and stays loaded once I click the button, but I am not sure how why the below will not work.
var contactModal = document.getElementById("contactModal");
var contactBtn = document.getElementById("Contact");
var span = document.getElementsByClassName("contactModalClose")[0];
contactBtn.onclick = function() {
contactModal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
contactModal.style.display = "none";
}
}
I have two javascript functions. The one shows and hides div's by their ID. This has been working fine until now. I have since added some code I found online that prevents iOS from opening links in a new window (when in fullscreen mode). Since adding this new code everytime I click on a div to show/hide it, the functions fires but then the page refreshes. Any help?
I have tried to put return false in every conceivable place.
I changed my onclick to 'return function();'.
I changed it to 'function();return false'.
I placed return false inside both functions.
(function(document,navigator,standalone) {
//Code by Irae Carvalho http://about.me/irae
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
if('href' in curnode ) {
e.preventDefault();
location.href = curnode.href;
}
return false;
},false);
}
})(document,window.navigator,'standalone');
function showHidden(id) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = '';
}else{
div.style.display = 'none';
}
return false;
}
<!-- The code below is in my php file -->
<a onclick="showHidden('divID')">
Clicking on the link fires the showHidden function correctly but then it also refreshes the page. I need the event listener to prevent iOS from opening links in a new window when in fullscreen mode but I also don't want the click listener to fire when I use the showHidden function, or at the least not refresh the page.
The reason it is changing pages is because you are not preventing the default action of a link click, which is in this case loading a different page. You can do this by invoking e.preventDefault() when the link is clicked.
Here is an example:
(function(document,navigator,standalone) {
//Code by Irae Carvalho http://about.me/irae
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
if('href' in curnode ) {
e.preventDefault();
location.href = curnode.href;
}
return false;
},false);
}
})(document,window.navigator,'standalone');
function showHidden(id) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = '';
}else{
div.style.display = 'none';
}
return false;
}
var links = document.querySelectorAll('a');
links.forEach(function (el) {
el.addEventListener('click', function (e) {
e.preventDefault();
var divID = this.getAttribute('hide-id');
showHidden(divID)
})
})
<a hide-id="div1">Click here</a>
<div id="div1">
This is content
</div>
<br />
<br />
<a hide-id="div2">Click here</a>
<div id="div2">
This is content
</div>
The best solution I found to this was to add a check in the eventlistener to check if the href tag was not empty:
if(curnode.href != '' )
And only after that firing the redirect:
location.href = curnode.href;
Testing multiple modals on a site. Both modals will open fine. However, the second modal (contmodal) will not close. Also this seems to create an issue causing other JS to break.
//* Get the Newsletter Modal
var newsmodal = document.getElementById('newsletter-modal');
var contmodal = document.getElementById('contact-modal');
// Get the button that opens the modal
var newsbtn = document.getElementsByClassName("signup-button")[0];
var editbtn = document.getElementsByClassName("contact-button")[0];
// Get the <span> element that closes the modal
var modalspan = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
newsbtn.onclick = function() {
newsmodal.style.display = "block";
}
editbtn.onclick = function() {
contmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
modalspan.onclick = function() {
newsmodal.style.display = "none";
contmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == newsmodal) {
newsmodal.style.display = "none";
}
if (event.target == contmodal) {
contmodal.style.display = "none";
}
}
Your code looks fine.
Here's this example you should refer to - http://jsfiddle.net/3Vykc/
Box 1
<div id="openModal1" class="modalDialog">
<div>
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3. </p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
Box 2
<div id="openModal2" class="modalDialog">
<div>
X
<h2>Modal Box 2</h2>
<p><strong>Box 2</strong></p>
<p>yadda yadda</p>
</div>
More references:
Using multiple modal dialogs in one page
How can I close multiple bootstrap modals with the close button on the last popped modal
I added the following javascript to Abhinav Ralhan's solution:
//* Get the Newsletter Modal
var modal1 = document.getElementById('openModal1');
var modal2 = document.getElementById('openModal2');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1 || event.target == modal2) {
window.location.href = "#"+close;
}
}
I have a problem with my positioning on a mobile navigation element layout of my design.
Because I have used various Z-index’s and positioning’s when you click on the Nav button to displays mobile navigational links, part of my design is still visible and it obscures the 'return back to normal' nav button.
What I would like to do is add some more JavaScript to the code that it will remove/hide the part of my normal design that is obscuring the Nav button when clicked and then toggle back to display normally when it’s clicked again.
Here is the JS I am using:
jQuery(document).ready(function($){
//move nav element position according to window width
moveNavigation();
$(window).on('resize', function(){
(!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
});
//mobile version - open/close navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
if($('header').hasClass('nav-is-visible')) $('.moves-out').removeClass('moves-out');
$('header').toggleClass('nav-is-visible');
$('.cd-main-nav').toggleClass('nav-is-visible');
$('.cd-main-content').toggleClass('nav-is-visible');
});
//mobile version - go back to main navigation
$('.go-back').on('click', function(event){
event.preventDefault();
$('.cd-main-nav').removeClass('moves-out');
});
//open sub-navigation
$('.cd-subnav-trigger').on('click', function(event){
event.preventDefault();
$('.cd-main-nav').toggleClass('moves-out');
});
function moveNavigation(){
var navigation = $('.cd-main-nav-wrapper');
var screenSize = checkWindowWidth();
if ( screenSize ) {
//desktop screen - insert navigation inside header element
navigation.detach();
navigation.insertBefore('.cd-nav-trigger');
} else {
//mobile screen - insert navigation after .cd-main-content element
navigation.detach();
navigation.insertAfter('.cd-main-content');
}
}
function checkWindowWidth() {
var mq = window.getComputedStyle(document.querySelector('header'), '::before').getPropertyValue('content').replace(/"/g, '').replace(/'/g, "");
return ( mq == 'mobile' ) ? false : true;
}
});
So what I would like to do is add to this a function the removes the div: “#bar_bg_default” onclick and then displays it again when its clicked again.
Something like this would work, but how would I fit it into my Nav JS code?
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Click here to toggle visibility of element #bar_bg_default
<div id="bar_bg_default">This is foo</div>
I have menu which is open on click and close automatically. I'm not very much into .js and don't know how exactly work.
What I want is this menu to not close automatically. When is open to stay open.
This is the .js
var current_item = 0;
// few settings
var section_hide_time = 400;
var section_show_time = 400;
// jQuery stuff
jQuery(document).ready(function($) {
// Switch section
$("a", '.mainmenu').click(function()
{
if( ! $(this).hasClass('active') ) {
current_item = this;
// close all visible divs with the class of .section
$('.section:visible').fadeOut( section_hide_time, function() {
$('a', '.mainmenu').removeClass( 'active' );
$(current_item).addClass( 'active' );
var new_section = $( $(current_item).attr('href') );
new_section.fadeIn( section_show_time );
} );
}
return false;
});
});
I suppose the part for open/close is in switch section but I'm not sure.
Try using Toggle();, then it won't close until you click the button again.
The "section_show_time" is what is making the menu close automatically. If you take that out of the javascript it should stay open when opened. You might want to take out the "section_hide_time" as well if you don't want it to do anything with out a users click.
I would recommend using completely different javascript to make a open and close toggle button:
In the HTML file:
<button onclick="toggleMenu()"> </button>
<div id="toggleMenu" style="display:none;">
<"menu content here">
</div>
JS:
<script>
function toggleMenu() {
if (document.getElementById("toggleMenu").style.display == "none"){
document.getElementById("toggleMenu").style.display = "block";
} else {
document.getElementById("toggleMenu").style.display = "none";
}
}
</script>
In js you could change out "block" to what ever you want the display to be when the menu is to be visible.