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';
}
Related
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.
To submit my form, the user need choice the price of your ticket by html droplist.
Here is JS the code:
var ticket = document.getElementById('ticket-box');
var member = document.getElementById('member');
var form = document.getElementById('form');
form.style.display = 'none';
ticket.style.display = 'none';
member.addEventListener('change', function() {
var chosen = member.options[member.selectedIndex].index;
if(chosen == 1) {
form.style.display = 'inline-block';
ticket.style.display = 'inline-block';
form.selectedIndex = 2;
form.options[0].style.display = 'none';
form.options[1].style.display = 'none';
form.options[2].style.display = 'inline-block';
form.options[3].style.display = 'inline-block';
form.options[4].style.display = 'none';
form.options[5].style.display = 'none';
$(function() {
$('#btnget').click(function(e) {
let formValido = document
.getElementById("formulario")
.checkValidity();
if(formValido){
$("#formulario")
.attr("action", $('#form').val())
.submit();
}
})
});
}
});
This only works in chrome (email is comming only in chrome).
Why is this happening?
form link: http://www.congressoprotecaodados.com.br/inscricao/form22.html
maybe you are using some javascript function or keyword which is only support to chrome .Please refer mozilla develope netword to check browser support for any javascript built in function .
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 made script tags that serves as the event holder when a button is click this events are triggered.The setup is like this: I have 6 buttons and I made that six times from btn1 to btn6.
<input type="button" id="btn1" value="AUS">
<script type="text/javascript">
var modal = document.getElementById('modal');
var shade = document.getElementById('shade');
document.getElementById('btn1').onclick = function() {
var src = "img2/Australia.jpg";
var img = document.getElementById("placeholderImg");
img.src = src;
img.style.display = "inline";
modal.style.display = shade.style.display = 'block';
};
document.getElementById('close2').onclick = function() {
modal.style.display = shade.style.display = 'none';
};
</script>
After I finished I noticed they are working however there are instances that they cease to function, my friend suggested to me, "what if you use a Jquery Switch statement?". Here's what I come up with but I can't make it to work if you can help me to point out my mistake. I would be very grateful.
Jquery Code:
$('.sbutton').on('click', function () {
switch (this.val()) {
case 'btn1':
var src = "img2/Australia.jpg";
var img = document.getElementById("placeholderImg");
img.src = src;
img.style.display = "inline";
modal.style.display = shade.style.display = 'block';
break;
}
});
In the event handler, this is a native DOM element.
Change
switch (this.val()) {
to
switch ($(this).val()) {
or (better)
switch (this.value) {
But you should have seen an error in the console. Please read Using the console.
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>