I have this code that detects when a click inside the iframe.
Within the 'if', if the click, I create a cookie.
But the cookie is being created as I enter the page, not only when there is a click.
How can I make the cookie is created only when the click event happen?
focus();
var listener = addEventListener('blur', function() {
if(document.activeElement = document.getElementById('bloco')) {
message.innerHTML = 'Creat a cookie visits';
jQuery.cookie('visits', 1 , { expires: 7, path: '/' });
}else {
message.innerHTML = 'fail';
}
removeEventListener(listener);
});
bloco {
width: 300px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div id="message"></div>
<div id="bloco">
<iframe src="//example.com" width="300" height="400"></iframe>
</div>
Related
I'm trying to make this dialog popup for the duration of the execution of the AddConclusionSlide function, but I get the exception: "TypeError: Cannot find function show in object Presentation." Is there an alternative to "show" for Google Slides Script (This works perfectly in google docs)?
function AddConclusionSlide() {
htmlApp("","");
var srcId = "1Ar9GnT8xPI3ZYum9uko_2yTm9LOp7YX3mzLCn3hDjuc";
var srcPage = 6;
var srcSlide = SlidesApp.openById(srcId);
var dstSlide = SlidesApp.getActivePresentation();
var copySlide = srcSlide.getSlides()[srcPage - 1];
dstSlide.appendSlide(copySlide);
Utilities.sleep(3000); // change this value to show the "Running script, please wait.." HTML window for longer time.
htmlApp("Finished!","");
Utilities.sleep(3000); // change this value to show the "Finished! This window will close automatically. HTML window for longer time.
htmlApp("","close"); // Automatically closes the HTML window.
}
function htmlApp (status,close) {
var ss = SlidesApp.getActivePresentation();
var htmlApp = HtmlService.createTemplateFromFile("html");
htmlApp.data = status;
htmlApp.close = close;
ss.show(htmlApp.evaluate()
.setWidth(300)
.setHeight(200));
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
}
.gap-10 {
width: 100%;
height: 20px;
}
.gap-20 {
width: 100%;
height: 40px;
}
.gap-30 {
width: 100%;
height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Function is running... This could take a while. It's a lot of data...</p>
</div>
<p id="status">(innerHTML).</p>
<div id="imageico"></div>
<script>
var imageContainer = document.getElementById("imageico");
if (<?= data ?> != "Finished!"){
document.getElementById("status").innerHTML = "";
} else {
document.getElementById("status").innerHTML = "";
}
if (<?= close ?> == "close"){
google.script.host.close();
}
</script>
</body>
</html>
Unlike Spreadsheet object, Slide object doesn't have a show method. So, class ui needs to be used:
SlidesApp.getUi().showModalDialog(htmlApp.evaluate()
.setWidth(300)
.setHeight(200), "My App")
I'm trying to use Slider Revolutions tabs to redirect to a page.
The buttons (tabs) have this structure:
<div data-liindex="1" data-liref="rs-12" class="tp-tab selected" style="width: 170px; height: 50px; left: 190px; top: 0px;"><span class="tp-tab-title">ARMENIA</span></div>
The buttons defer from eachother by data-liindex parameter. 0, 1, 2,...
I tried this code but cannot figure out how to getElement by the custom id.
<script type="text/javascript">
document.getElementById("1").onclick = function () {
location.href = "www.google.com";
};
</script>
I cannot alter the button code though. Its generated by Slider Revolution so I cannot add parameters to it any more than what it is now.
If you want to select element with data- attribute you can do like:
document.querySelector("[data-liindex='1']");
Or you want to select the element by ID you can add the id to the tag you want to select:
<div data-liindex="1" data-liref="rs-12" class="tp-tab selected" style="width: 170px; height: 50px; left: 190px; top: 0px;"><span class="tp-tab-title">ARMENIA</span></div>
document.querySelector('#1')
Simplified the HTML for the demo. Does this help? (NOTE: Commented out the location.href for the demo)
let arrayUrl = [
"www.google.com",
"www.bing.com",
"www.yahoo.com"
];
document.addEventListener('DOMContentLoaded', function() {
// Add Click Listeners
Array.from(document.getElementsByClassName('tp-tab')).forEach(el => {
el.addEventListener('click', function(event){
console.log(`${event.target} - ${event.target.dataset.liindex}`);
let url = arrayUrl[ event.target.dataset.liindex ];
console.log(url);
// location.href = url;
});
});
});
<div data-liindex="0" data-liref="rs-12" class="tp-tab">ARMENIA
</div>
<div data-liindex="1" data-liref="rs-12" class="tp-tab">Canada
</div>
<div data-liindex="2" data-liref="rs-12" class="tp-tab">Europe
</div>
This code did the job. Need to be inserted in the SETTINGS of the current slider, not in the slides separatly.
jQuery(document).ready(function ($) {
$('body').on('click', '.tp-tab', function () {
switch($(this).attr("data-liindex")) {
case "1":
window.location.href = "https://google.com/";
break;
case "2":
window.location.href = "https://blizzard.com/";
break;
default:
break;
}
});
});
I have a subscription box and im trying to make a X close button that remembers to not display next time with web storage or cookies. when i click the close button my whole side bar is set to display none. In stead of just id="gfxhsub" .
JavaScript
<script type="text/javascript">
window.onload = function(){
document.getElementById('mailclose').onclick = function(){
this.parentNode.parentNode.parentNode
.removeChild(this.parentNode.parentNode);
return false;
};
};
</script>
html
<div id="gfxhsub" style="margin: 2em 0.5em; height: auto;">
<span id='mailclose'><i class="fa fa-times"></i></span>
[newsletter_signup_form id=6]
</div>
You can achieve this by using the following code in your click event handler.
// 1st line: Select the div you want to hide.
// 2nd line: Set the style of the element to display: none;
var elem = document.querySelector('#gfxhsub');
elem.style.display = 'none';
Here's a working example.
#mailclose {
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script type="text/javascript">
window.onload = function() {
document.getElementById('mailclose').onclick = function() {
var elem = document.querySelector('#gfxhsub');
elem.style.display = 'none';
return false;
};
};
</script>
html
<div id="gfxhsub" style="margin: 2em 0.5em; height: auto;">
<span id='mailclose'><i class="fa fa-times"></i></span> [newsletter_signup_form id=6]
</div>
I am trying to create a button from Chimp.net that when you click on it opens an iframe with a pop up window, but I have an error in the code and I can not recognize it.
Can anybody see the problem?
This is the page where I am getting the code:
http://blog.chimp.net/chimp-custom-widget/
Code:
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"><strong>Button</strong><br> You can click on this div! It'll open the form.</div>
<script type="text/javascript">
$(document).ready(function() {
$("#custom-chimp-button").on("click", function() {
var frame = document.getElementById("chimp-form-oriol");
var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*");
frame.style.opacity = 1;
frame.style.display = "block";
});
});
</script>
You are missing the jquery.min.js reference on your page I guess. Please add it and see what you get.
Here on SO; iframe are not allowed so it won't show up in this code snippet.
$(document).ready(function() { $("#custom-chimp-button").on("click", function() { var frame = document.getElementById("chimp-form-oriol"); var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*"); frame.style.opacity = 1; frame.style.display = "block"; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"> <strong>Button</strong><br> You can click on this div! It'll open the form.</div>
No jquery. Pure javascript. I am using a Sharepoint html content editor. I have marked the sources to the images and urls as confidential. I am trying to get it so that when the user clicks on one of the images it triggers the function 'open(this)' and will create a popup window (modal) to a specific url. So far when the user clicks one of the two images it pops up the window but always to the confidential2 url. So when it should match the first case in the if statement of 'open(this)' it is not going to that url. And yes I have checked to make sure I have different urls. I switched the urls around too and it ALWAYS goes to confidential2!! Please help if you can.
<script type="text/javascript">
function opac(x) {
x.style.opacity=.5;
}
function opac_back(x) {
x.style.opacity=1;
}
</script>
<script type="text/javascript">
var options = {
url: theurl,
title: "Learning_Technology",
allowMaximize: true,
showClose: true,
width: 625,
height: 525,
dialogReturnValueCallback: silentCallback};
function open(x) {
var theurl;
if (x.id == "1") {
theurl = "confidential1";
} else if (x.id == "2") {
theurl = "confidential2";
} else {
}
SP.UI.ModalDialog.showModalDialog(options);
}
function silentCallback(dialogResult, returnValue) {
}
function refreshCallback(dialogResult, returnValue) {
SP.UI.Notify.addNotification('Operation Successful!');
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
} </script>
<div style="background-color: rgb(237, 237, 237); width: auto; height: auto;">
<center><h2 style="color: green;">MyLearning Requests</h2></center>
<div style="height: auto; width: auto;">
<center><img width="164" height="42" border="0" id="1" name="button22694Img" src="confidential" onmouseout="opac_back(this)" onmouseover="opac(this)" alt="" style="opacity: 1;"/>
<img width="164" height="42" border="0" id="2" name="button27129Img" src="confidential" onmouseout="opac_back(this)" onmouseover="opac(this)" alt="" style="cursor: pointer; opacity: 1;"/>
</center>
</div>
</div>
You're calling open(this) on the link tag therefor this will be the link and not the image. As the link has no id attribute you're comparing undefined with "1" and "2" which will fail both. You will have to do some little DOM traversal to get the image in the link :)
function open(x) {
var theurl,
img = x.firstChild;
if (img.id == "1") {
theurl = "confidential1";
} else if (x.img == "2") {
theurl = "confidential2";
} else {
}
SP.UI.ModalDialog.showModalDialog(options);
}
You don't have any id attributes on the a tag
You are updating the var theurl but not updating options.url