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>
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")
For example, i have <div id="titlebar"></div> inside html, and also i have <div class="name">Content-text</div> inside same html. Now i want pass Content-text of div class name (<div class="name">Content-text</div>) to another my id <div id="titlebar"></div> through css or js. i tried several ways, but no effect
And when i scroll up the html the id titlebar will show the text of class name
My html:
<html>
<body>
<div id="titlebar"></div>
<div class="name">Content-text</div>
</body>
</html>
Css:
#titlebar{
text-align:center;
width: 101%;
position: fixed;
top:0px;
margin-left:-10px;
padding-right:1px;
font-family: Times New Roman;
font-size: 16pt;
font-weight: normal;
color: white;
display:none;
border: none;
}
Javascript:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("titlebar").style.display = "block";
} else {
document.getElementById("titlebar").style.display = "none";
}
}
Working Sample, jsFiddle
Please find it here.
<style>
#titlebar{
border: 1px solid black;
}
.name{
border: 1px solid red;
}
</style>
<div>
<div id="titlebar"></div>
<br/>
<div class="name">Content-text</div>
<button id='btn'>
Click to cpoy and put text inside titlebar
</button>
</div>
<script>
document.getElementById('btn').addEventListener('click', function() {
// Find your required code hre
let textInsideDivelementWithclass = document.getElementsByClassName('name')[0].innerText,
titlebarEle = document.getElementById('titlebar');
titlebarEle.innerText = textInsideDivelementWithclass;
});
</script>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var Content_text = $(".name").text();
$("#titlebar").text(Content_text);
});
});
</script>
</head>
<body>
<button>Copy</button>
<div class="name">Content-text</div>
<div id="titlebar">copy here</div>
</body>
</html>
First you get the text of your .name element:
let nameElement = document.querySelector(".name").textContent;
then you get the target element and assign the .name text to it :
document.querySelector("#titlebar").textContent = nameElement;
First of all you should determin an id for your div like this:
<div id="name">Content-text</div>
then use this code:
<script type="text/javascript">
var DivName = document.getElementById('name');
var DivTitlebar = document.getElementById('titlebar');
DivTitlebar.innerHTML = DivName.innerHTML;
</script>
Please try this..
You have to get the content from the div1 and div2 to two seperate variables div1Data and div2Data
Then from the HTML DOM innerHTML Property you can assign the content to your preferred div
function copyContent() {
var div1Data= document.getElementById('div1');
var div2Data= document.getElementById('div2');
div2Data.innerHTML = div1Data.innerHTML;
}
<div id="div1">
Content in div 1
</div>
<div id="div2">
</div>
<button onClick="copyContent()">Click to copy</button>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
$(document).ready(function(){
var Content_text = $(".name").text();
//alert(Content_text);
$(function() {
$(window).mousewheel(function(turn, scroll) {
if (scroll > 0) $('#titlebar').text('Content_text');
else $('#titlebar').text('Copy here');
return false;
});
});
//$("#titlebar").text(Content_text);
});
</script>
</head>
<body>
<div class="name" style="margin-top:50px;">Content-text</div>
<div id="titlebar" style="margin-top:50px;">Copy here</div>
</body>
</html>
I have a button that loads an 'iframe' and another one that closes, and I would like to merge the two functions into one button.
I do not know if this is possible.
I would like someone to help me.
<button class="hashtag" id="load">PLAY</button>
<button class="hashtag" onclick="parent.closeIFrame();">STOP</button>
<button class="hashtag" id="load">PLAY</button>
<!--<iframe id="myFrame" scrolling="no" src="https://www.rtp.pt/play/popup/antena3#player_prog" style="width:0;height:0;border:0; border:none;"></iframe>-->
<button class="hashtag" onclick="parent.closeIFrame();">STOP</button>
<script>
function closeIFrame() {
$('#myFrame').remove();
}
</script>
<div id="iframeHolder" style="opacity:0;width:0;height:0;"></div>
<script>
$(function() {
$('#load').click(function() {
$('#iframeHolder').html('<iframe id="myFrame" scrolling="no" style="border:0px;" src="https://example" style="width:0;height:0;border:0; border:none;"></iframe>');
});
});
</script>
Thanks in advance.
So I just made it into one button and changed the text to STOP once its clicked, also toggling a variable keeping track of whether or not the iFrame is loaded. If it is clicked when it says STOP is runs the close function and toggles it back to PLAY.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="hashtag" id="load">PLAY</button>
<div id="iframeHolder" style="opacity:0;width:0;height:0;"></div>
<script>
var loaded = false;
$(function(){
$('#load').click(function(){
if (!loaded) {
$('#load').text("STOP")
$('#iframeHolder').html('<iframe id="myFrame" scrolling="no" style="border:0px;" src="https://example" style="width:0;height:0;border:0; border:none;"></iframe>');
loaded = true;
} else {
$('#load').text("PLAY")
$('#myFrame').remove();
loaded = false;
}
});
});
</script>
Try this solution:
$(document).ready(function(){
$(".play").click(function(){
$(this).toggleClass("play close");
$(".hidden").toggleClass("show hidden");
if($(this).hasClass("close")){
$(this).html("CLOSE");
$("iframe").css({"display" : "block"})
}else{
$(this).html("PLAY");
$("iframe").css({"display" : "none"})
}
});
});
.play{
color: black;
}
.close{
color: red;
}
.hidden{
display: none;
}
.show{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="play">PLAY</button>
<iframe class="hidden"></iframe>
Tell me if it works for you
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 have a footer with some links:
<a href="javascript:void(0)" onClick="goToByScroll('newServices')">
Our Services
</a>
And if the user is in the home page the first IF works fine, but if the user isn't in the home page, this redirect to the home page, but doesn't open in the specific div.
function goToByScroll(id){
if ( window.location.href.indexOf('newhome') > -1 ) {
$('html,body').animate({scrollTop: $("#"+id).offset().top},1000);
}
else {
window.location = "/newhome/"
$('html,body').animate({scrollTop: $("#"+id).offset().top},1000);
}
}
Any ideas?
***********UPDATE*********************
var userClickID = id;
if ( window.location.href.indexOf('newhome') > -1 ) {
$('html,body').animate({scrollTop: $("#"+userClickID).offset().top},1000);
}
else {
window.location = "/newhome/";
$(document).ready(function() {
$('html,body').animate({scrollTop: $("#"+userClickID).offset().top},1000);
});
}
Still doesnt work.
Actually I'm doing these experiments on local .html files in my desktop:
file:///C:/Users/myusername/Desktop/page2.html
This example uses the ? url parameter to scroll to your div:
page2 - newServices
So create two .html pages in your desktop with this code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var href = window.location.href;
var split = href.split("?");
var afterSplit = "Error parsing url";
if (split[1] != null) {
afterSplit = split[1];
}
console.log(afterSplit);
goToByScroll(afterSplit);
});
</script>
<style type="text/css">
.myDiv {width: 200px;height: 2000px;}
#one {border: 3px solid green;}
#two {border: 3px solid blue;}
#three {border: 3px solid red;}
</style>
</head>
<body>
<div id="one" class="myDiv">ONE<button onclick="goToByScroll('two');">goToByScroll</button>page2.html?three</div>
<div id="two" class="myDiv">TWO<button onclick="goToByScroll('three');">goToByScroll</button></div>
<div id="three" class="myDiv">THREE<button onclick="goToByScroll('one');">goToByScroll</button></div>
<script type="text/javascript">
var timeMs = 1000;
function goToByScroll(ID){
$('body').animate({scrollTop: $('#'+ID).offset().top}, timeMs);
}
</script>
</body>
</html>
Tell me if this is what you want
Hope it helps