I have website with 5 divs and nav with 5 options. I manipulate those elements in JS like that:
var homeMain = document.getElementById('div_1');
var productMain = document.getElementById('div_2');
var contactMain = document.getElementById('div_3');
var helpMain = document.getElementById('div_4');
var loginMain = document.getElementById('div_5');
homeButton.addEventListener('click', function () {
toogle(homeMain);
});
productButton.addEventListener('click', function () {
toogle(productMain);
});
contactButton.addEventListener('click', function () {
toogle(contactMain);
});
helpButton.addEventListener('click', function () {
toogle(helpMain);
});
loginButton.addEventListener('click', function () {
toogle(loginMain);
});
registerButton.addEventListener('click', function () {
toogle(loginMain);
});
function toogle(element) {
this.homeMain.style.display = "none";
this.productMain.style.display = "none";
this.contactMain.style.display = "none";
this.helpMain.style.display = "none";
this.loginMain.style.display = "none";
element.style.display = "block"
}
And I have problem with login page. When I put bad login or password website refresh.
So it's main page. I want back to login page.
I don't want use jquery.
Related
I want to make button witch run function (Price List filter) after new page is loaded. How to do that (in Javascript)?
Let's say I have button like this:
var faceButton = document.getElementById('faceButton');
faceButton.addEventListener('click', function () {
window.location.href = '/pricelist.html';
window.onload = function () {
facePrizes();
}
});
function facePrizes(){
document.getElementById('nose').style.display = 'block';
document.getElementById('eyes').style.display = 'block';
document.getElementById('arm').style.display = 'none';
document.getElementById('leg').style.display = 'none';
}
After clicking on faceButton I want to go to prizes.html file and run facePrizes() after page it's load
So I manage to find a solution :)
I've added querystring to link -> if link is correct run function
Working code:
var faceButton = document.getElementById('faceButton');
faceButton.addEventListener('click', function () {
window.location.href = '/pricelist/?face';
});
if (window.location.href == "http:/example.com/pricelist/?face") {
facePrizes();
}
function facePrizes(){
document.getElementById('nose').style.display = 'block';
document.getElementById('eyes').style.display = 'block';
document.getElementById('arm').style.display = 'none';
document.getElementById('leg').style.display = 'none';
}
I have a checkbox that can hide header by pressing on it. I also made it save status in localStorage when checked (so it won't reset after reloading page). But even if it is showing as checked after reloading page and getting status from localStorage - header isn't hidden. Is there a way to make it work?
<div class="new-hide-header"><input id="chck" type="checkbox">
<label for="chck" class="check-trail">
<span class="check-handler"></span>
</label>
</div>
<script>
document.getElementById('chck').onclick = function() {
divTest = document.getElementById('ast-desktop-header');
divTest2 = document.getElementById('ast-mobile-header');
var mq = window.matchMedia("(max-width: 921px)");
if (mq.matches) {
// window width is at less than 570px
if (divTest2.style.display === "none") {
divTest2.style.display = 'block';
} else {
divTest2.style.display = "none";
}
}
// window width is more than 570px
else {
if (divTest.style.display === "none") {
divTest.style.display = 'block';
} else {
divTest.style.display = "none";
var checkbox = document.getElementById('chck');
localStorage.setItem('chck', checkbox.checked);
}
}
}
</script>
<script>
function load() {
var checked = JSON.parse(localStorage.getItem('chck'));
document.getElementById("chck").checked = checked;
}
load();
</script>
Call the onclick function after you set the checked property in load()
Stack snippets don't provide access to localStorage and no header html was provided so the following is a simplified example
const chckbox = document.getElementById('chck')
chckbox.onclick = function() {
const isChecked = this.checked;
console.log('isChecked =', isChecked);
}
function load() {
chckbox.checked = true;
chckbox.onclick();
}
load()
<input type="checkbox" id="chck">
I am using LiveChat on my website and trying to show a div if no agents are available, using their guide here
Javascript
LC_API.on_after_load = function() {
if (LC_API.agents_are_available()) {
$("#ChatLink2").hide();
} else {
$("#ChatLink2").show();
}
};
HTML
<div class='ChatLink2' id='ChatLink2'>Currently Unavailable</div>
However, the div ChatLink2 is not showing when no agents are available
It appears to be race conditions with both LiveChat and JQuery. Below checks for LC availability and uses vanilla JS instead of jQuery.
Also included state change callback if agents go offline after init.
var waitForLC = setInterval(function () {
if (window.LC_API === undefined) {
return;
}
clearInterval(waitForLC);
var showUnavailableStatus = function(show){
var statusDiv = document.getElementById("ChatLink2");
var style = show ? "block" : "none";
statusDiv.style.display = style;
}
LC_API.on_after_load = function() {
if (LC_API.agents_are_available()) {
showUnavailableStatus(false);
} else {
showUnavailableStatus(true);
}
};
LC_API.on_chat_state_changed = function(data) {
showUnavailableStatus(data.state==="offline");
};
}, 100);
Hey guys I need just a little bit of help with this.
So I have modal boxes hiding on my page and when I click on them using the video platform VERSE they work perfectly.
My questions is: How can I call the same modal boxes if I wan to call them from a regular link or button on the page.
Here is the sample:
http://digitalfeast.com/clients/nccv/ncc-verse.html
Here is my Javascript code:
(function() {
(function() {
window.onload = function() {
var frame = document.getElementsByName("verse-iframe")[0].contentWindow;
// Variables below (i.e. "menu-1") reference div id from your markup
function receiveMessage(event) {
var data = (typeof event.data === "String") ? JSON.parse(event.data) : event
var modalWindow1 = document.getElementById("ruben-1");
var modalWindow2 = document.getElementById("ruben-2");
var modalWindow3 = document.getElementById("menu-3");
var modalWindow4 = document.getElementById("menu-4");
// Variables below (i.e. "menu-1") reference the unique callback names entered for your hotspots in the Verse editor
if (data.data["identifier"] === "ruben-1") {
modalWindow1.style.display = "block";
}
if (data.data["identifier"] === "ruben-2") {
modalWindow2.style.display = "block";
}
if (data.data["identifier"] === "menu-3") {
modalWindow3.style.display = "block";
}
if (data.data["identifier"] === "menu-4") {
modalWindow4.style.display = "block";
}
}
var closeBtns = document.getElementsByClassName("modal-close");
for (var i = 0; i < closeBtns.length; i++) {
var btn = closeBtns[i];
btn.onclick = function (event) {
event.target.parentNode.parentNode.style.display = "none";
frame.postMessage({action: "play"}, "*");
};
}
window.addEventListener('message', receiveMessage);
var frame = document.getElementsByName("verse-iframe")[0].contentWindow;
};
}());
}());
Given your code, all you need to do is send the window a message using the Messaging API inside your button click handler.
Your event listener will then execute the receiveMessage function and open your model for ruben-1.
window.onload = () => {
document.querySelector('[data-modal="ruben-1"]').addEventListener("click", (e) => {
let postData = {
identifier: e.target.dataset.modal
};
window.postMessage(postData, "*");
});
window.addEventListener('message', m => {
alert(m.data.identifier);
});
}
<button data-modal="ruben-1">Ruben-1 Video</button>
I have a content script that runs from my chrome extension.
this script injects an iframe to the body of the current page.
i want to have the possibility to close the iframe from within the iframe.
how do i do this?
when i searched this issue on the web, almost each solution uses the window.parent.document property which for some reason is undefined in my case. any ideas?
EDIT - Code Sample:
in the HTML of the iframe:
<script type="text/javascript">
function frameClose() {
var windowFrames = window.parent.frames;
for (var i = 0; i < windowFrames.length; i++) {
var aFrame = windowFrames[i];
if (aFrame.name == 'myFrame') {
alert('in frame');
// WHAT TO DO HERE?
// window.parent.document is undefined
// aFrame.parentNode.removeChild(aFrame); - THIS DOES NOT WORK ALSO
break;
}
}
}
</script>
this is how i inject the iframe:
Extension.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {
file : "/js/PushIFrame.js"
}, function() {
if (chrome.extension.lastError) {
}
});
});
and in PushIFrame.js i have:
chrome.extension.sendMessage({
action: "pushFrame",
source: pushIframe(document)
});
function pushIframe(document) {
var existingFrame = document.getElementById('bmarkFrame');
if (existingFrame == null) {
var temp = document.createElement('iframe');
temp.id = 'myFrame';
temp.name = 'myFrame';
temp.setAttribute('scrolling', 'no');
temp.setAttribute('allowtransparency', 'true');
temp.style.border = 'none';
temp.style.height = '100%';
temp.style.width = '100%';
temp.style.position = 'fixed';
temp.style.zIndex = 99999999;
temp.style.top = 0;
temp.style.left = 0;
temp.style.display = 'block';
temp.src = 'https://www.mysite.com/';
document.body.appendChild(temp);
}
else {
existingFrame.style.display = 'block';
}
}
Let the content script (say PushIframe.js) bind a message event to the main frame. Then, whenever you want to hide the iframe, call parent.postMessage to notify the main frame. This message is received by the content script, from where you can hide the frame (as defined in your function pushIframe).
// PushIframe.js:
addEventListener('message', function(ev) {
if (ev.data === 'closeIframe') {
pushIframe(document); // Your code
}
});
// Iframe:
<script>
function frameClose() {
parent.postMessage('closeIframe', '*');
}
</script>