I am using a modal that when clicked it should popup full screen.
Everything is good, modal pops full screen but the header ( logo + menu ) still shows up.
I'm trying to use JS, so when the modal is clicked i want to apply a z-index to the header and when the close button is clicked i will apply another z-index to fix the header.
the link to be clicked is this:
<a class="vPlay vPlay-btn clickformodal" href="#modal-our-work-1" data-toggle="modal" data-video="241737557"><img src="/wp-content/uploads/2018/04/play1.png" /></a>
Now the JS code is this:
let open = document.selectElementByClassName("clickformodal");
let header = document.selectElementByClassName("mk-header");
let close = document.selectElementByClassName("close");
open.addEventListener('click', function () {
header.classList.add("headerbefore");
});
close.addEventListener('click', function () {
header.classList.remove("headerafter");
});
And this is the css that will be applied:
.headerbefore {
z-index: 1;
}
.headerafter {
z-index: 301;
}
The issue here appart that it's not doing what it is supposed too, google chrome shows an error in console saying that let open = document.selectElementByClassName("clickformodal"); is not a function.
What am i doing wrong here?
Help me out please, it's been 2 days that i'm trying to fix this and nothing till now :/
Thanks!!!
There are 2 things going wrong here:
it should be getElementsByClassName, not selectElementByClassName
as getElementsByClassName returns an element collection, you need to add [0] at its end, e.g. document.getElementsByClassName("clickformodal")[0]
let open = document.getElementsByClassName("clickformodal")[0];
let header = document.getElementsByClassName("mk-header")[0];
let close = document.getElementsByClassName("close")[0];
open.addEventListener('click', function () {
header.classList.add("headerbefore");
});
close.addEventListener('click', function () {
header.classList.remove("headerafter");
});
An option could be to use querySelector() instead
let open = document.querySelector(".clickformodal");
let header = document.querySelector(".mk-header");
let close = document.querySelector(".close");
open.addEventListener('click', function () {
header.classList.add("headerbefore");
});
close.addEventListener('click', function () {
header.classList.remove("headerafter");
});
If to add to more than 1, use querySelectorAll() (this sample assume there is as many open as close but only 1 header)
let open = document.querySelectorAll(".clickformodal");
let header = document.querySelector(".mk-header");
let close = document.querySelectorAll(".close");
for (var i = 0; i < open.length; i++) {
open[i].addEventListener('click', function () {
header.classList.add("headerbefore");
});
}
for (var j=0; j < close.length; j++) {
close[j].addEventListener('click', function () {
header.classList.remove("headerbefore");
});
}
Related
I was able to get an idea on how to close a modal window when clicking outside, but I am having issues to have it working when trying to have links inside the modal window.
I created a small code in Codepen to illustrate my point:
https://codepen.io/neotriz/pen/MRwLem
window.addEventListener('load', setup);
const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);
function setup() {
let modalRoot = get('modal-root');
let button = get('modal-opener');
let modal = query('.modal');
modalRoot.addEventListener('click', rootClick);
button.addEventListener('click', openModal);
modal.addEventListener('click', modalClick);
function rootClick() {
modalRoot.classList.remove('visible');
}
function openModal() {
modalRoot.classList.add('visible');
}
function modalClick(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}
remove e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();from modalClick . Thats the reason you are not able to click on inside links.
and modify the function rootClick
function rootClick(event) {
if (!(modal == event.target || modal.contains(event.target))) {
modalRoot.classList.remove('visible');
}
}
Codepen : https://codepen.io/anon/pen/ZZGwRr
I am using a plugin which has a modal pop up box for login (CM Registration Pro). I would like the background (body of my website) to not be able to scroll when the modal pop up is open.
I have tried the following code but am unable to get it to work
jQuery(document).ready(function ($) {
if($('.cmreg-overlay').length){
$('html').css('overflow', 'hidden');
}
});
If you would like to see the problem live my website is Redec
A Quick example that should work is:-
var element = document.querySelector('body');
element.addEventListener('click',function(){
if(element.classList.contains('.cmreg-overlay-visible')){
document.documentElement.style.overflow = 'hidden';
}
else{
document.documentElement.style.overflow = 'visible';
}
});
As it stands, your body has no background. If you mean you don't want your body to scroll when the modal box is open, then you can check whether .cmreg-overlay is shown, and if so then set overflow:hidden to the body.
I will assume that only #menu-item-16137, #menu-item-16194 and #menu-item-16195 are Here is how to do it:
// Prevent the body from scrolling when the modal opens
var x = document.querySelectorAll("#menu-item-16137, #menu-item-16194, #menu-item-16195");
for(var i = 0; i < x.length; i++) {
x[i].addEventListener("click", function() {
if($(".cmreg-overlay").style.display != none) {
document.body.style.overflow = hidden;
}
});
}
// Return the body back to scrolling when closing the modal
document.querySelector(".cmreg-overlay").addEventListener("click", function() {
document.body.style.overflow = "auto";
}
I am a little new to JS / jQuery and have done a hover function so when hover a link it shows a hidden DIV area but when I go to then hover over the div area shown of course it closes. I would like that if I then go into the content area won't close but stay open but then if leave that area would close?
JS:
$('.mini-cart').hover(
function () {
cartOpen();
},
function () {
cartClose();
}
);
var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");
function cartOpen() {
cartContainer.fadeIn("slow");
overlay.addClass("overlay");
}
function cartClose() {
cartContainer.fadeOut("medium");
overlay.removeClass("overlay");
}
HTML:
<a class="mini-cart">hover link</a>
<div id="cart_over" style="display:none;">testing</div>
You could introduce the usage of a flag (isCartOpen) variable which is going to control the whether the DIV should be displayed or not.
See this working JSFiddle example and find below the related code:
var isCartOpen = false;
$('.mini-cart, #cart_over').hover(
function() {
isCartOpen = true;
cartOpen();
},
function() {
isCartOpen = false;
setTimeout(cartClose, 1000); // after 1 sec
}
);
var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");
function cartOpen() {
cartContainer.fadeIn("slow");
overlay.addClass("overlay");
}
function cartClose() {
if (isCartOpen)
return;
cartContainer.fadeOut("medium");
overlay.removeClass("overlay");
}
Looks like you'll need to separate your open/close functions . Look at the following:
$('.mini-cart').hover(
cartOpen();
);
// You'll need to create a close button.. ex. <div class="close-button"></div>
$(".close-button").click(function(){
cartClose();
});
FAQ fiddle
JS code:
var $ = function (id) {
return document.getElementById(id);
};
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
var h2Node;
for (var i = 0; i < h2Elements.length; i++) {
h2Node = h2Elements[i];
}
$("first_link").focus();
$(document).ready(function () {
$("h2").click(function () {
if (h2.hasAttribute("class")) {
h2.removeAttribute("class");
} else {
h2.setAttribute("class", "minus");
}
if (h2.nextElementSibling.hasAttribute("class")) {
h2.nextElementSibling.removeAttribute("class");
} else {
h2.nextElementSibling.hide();
}
});
});
Upon clicking a question, that answer should show. When I click on a different question, all other answers should retract (be hidden). I tweaked it a few times and either the code wouldn't hide anything (all answers still open) or all answers wouldn't open at all.
Starting from $(document).ready(function () {, how do I get the question to open one at a time when clicked (close others)?
Any input would be much appreciated!
create a function to hide all other div's having class name open, like:
function hideOthers() {
var othersDivEle = document.getElementsByClassName("open");
for(var d = 0; d < othersDivEle.length; d++) {
othersDivEle[d].removeAttribute("class");
}
}
and change your code in :
...
} else {
hideOthers();
h2.nextElementSibling.setAttribute("class", "open");
}
to
..
} else {
hideOthers();
h2.nextElementSibling.setAttribute("class", "open");
}
Updated jsFiddle
I am trying to modify the script below to click a button that looks like this on a site:
<button id="checkPrice-02070" onclick="checkPrice(02070,null); return false;" class="orangeDark">
<span>check price</span>
</button>
I am using the code below. So far, the page seems to keep reloading; nothing else happens.
Any advice to someone new?
(function () {
window.addEventListener("load", function (e) {
clickConfirmButton()
}, false);
})();
function clickConfirmButton() {
var buttons = document.getElementsByTagName('button');
var clicked = false;
for (var index = 0; (index < buttons.length); index++) {
if (buttons[index].value == "check price") {
buttons[index].click();
clicked = true;
break;
}
}
if (!clicked) {
setTimeout("window.location.reload()", 300 * 1000);
}
}
A <button>s value is not the visible text. You'd want to search textContent.
However:
If that sample HTML is correct, you'd be better off searching for ids that start with checkPrice. See the code below.
Are you sure you want to reload if the button is not found? If it is added by AJAX this is not the best approach. See this answer.
Don't use setTimeout with a string (to evaluate) argument like that. See the code below.
You do not need to wrap the code in an anonymous function.
Anyway, this should work, given the sample HTML:
window.addEventListener ("load", clickConfirmButton, false);
function clickConfirmButton (zEvent) {
var button = document.querySelector ("button[id^='checkPrice']");
if (button) {
button.click ();
}
else {
setTimeout (function () { location.reload(); }, 300 * 1000);
}
}
To check the button text anyway, use:
function clickConfirmButton (zEvent) {
var buttons = document.querySelectorAll ("button[id^='checkPrice']");
var clicked = false;
for (var index = 0, numBtn = buttons.length; index < numBtn; ++index) {
if (/check price/i.test (buttons[index].textContent) ) {
buttons[index].click();
clicked = true;
break;
}
}
if (!clicked) {
setTimeout (function () { location.reload(); }, 300 * 1000);
}
}