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
Related
So i am trying to have my iframe hidden on the page, until i click this button, but for some reason when the website loades the iframe is already there, i can hide it with the button, but im trying to have it hidden from the start.
var iframeShowing=false;
function show() {
var iframe1=document.getElementById("iframe");
iframe1.style.display=iframeShowing ? "block": "none";
iframeShowing=!iframeShowing;
}
<form> <button type="button" id="files" onclick="show()">Database</button> </form>
<iframe id="iframe" frameBorder='no' src="https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt"
width="600" height="460"></iframe>
Javascript has nice function for that (classList.toggle). And i suggest to start loading the table if somebody clicked the button. If you have many tables on your side the page will be very slow. I have included it as an example.
function show() {
const f = document.getElementById('myiframe');
const link = 'https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt';
document.getElementById('waiting').innerText = " - please wait";
f.classList.toggle('hide');
f.setAttribute('src', link);
}
.hide {
display: none;
}
<form>
<button type="button" id="files" onclick="show()">Database<span id="waiting"></span></button>
</form>
<iframe class="hide" id="myiframe" frameBorder='no' src="" width= "600" height="460" >...</iframe>
You can simple use classList, addEventListener, toggle methods in Vanilla JavaScript to manipulate the DOM, precisely .hide class in this case.
const btn = document.getElementById("files");
const iframe = document.querySelector("#iframe");
btn.addEventListener("click", () => {
iframe.classList.toggle("hide");
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hide {
display: none;
}
<form>
<button type="button" id="files">Database</button>
</form>
<iframe class="hide" id="iframe" frameborder="no" src="https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt" width="600" height="460"></iframe>
I'd avoid the inline "onclick" tag inside iframe, and I'd wrap everything inside a domcontentloaded callback:
<script>
window.addEventListener('DOMContentLoaded', function() {
var iframeShowing = false;
var iframe1 = document.getElementById('iframe');
iframe1.style.display = "none"
iframe1.addEventListener("click", show);
function show() {
iframe1.style.display = iframeShowing ? 'block' : 'none';
iframeShowing = !iframeShowing;
}
});
</script>
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'm developing a page in Chrome and I want it to show a modal when the user clicks an image but when I try it with my localhost it does nothing. I think there's a problema with a listener. This is my code:
$(document).ready(function() {
document.getElementByClass(".call-to-action").addEventListener("click", openModal());
});
function openModal() {
$("html").addClass("modal-open");
}
My CSS:
.modal-open
.modal
opacity: 1
pointer-events: all
Thanks!!
This might help you, cheers!
If you are using Jquery:
$(document).ready(function() {
$(".call-to-action").on("click", openModal);
});
function openModal() {
$("html").addClass("modal-open");
}
html.modal-open{
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="call-to-action" type="button" value="CTA"/>
</body>
If you are using javascript:
document.getElementsByClassName("call-to-action")[0].addEventListener("click", openModal);
function openModal() {
document.documentElement.classList.add("modal-open");
}
html.modal-open {
background: #ddd;
}
<body>
<input class="call-to-action" type="button" value="CTA" />
</body>
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>
I've created a simple web page to learn about JQuery, But whenever I click on Button: another one its making the event of click on li disappear, glitched, it does nothing when the li is clicked.. . Here is the code:
JS:
$(document).ready(function(){
console.log("Ready");
var toggle = 0;
$("li").on("click",function(){
console.log("Clicked on li");
try{
$(this).hide(800);
$(this).removeClass("con");
$(this).addClass("con");
}
catch(err){
console.log("Exception "+err.message);
}
});
$("input").on("focus",function(){
console.log("Focused on input");
$("li").hide(800);
$("#D").html("Open div");
toggle = 1;
});
$("input").on("focusout",function(){
console.log("FocusedOut on input");
$("li").html($("input").val());
$("li").show(500,function(){
$("#D").html("Close div");
toggle = 0;
});
});
$("button").on("click",function(){
console.log("Clicked button :"+$(this).html());
if($(this).attr("id")=="s"){
$("li").show(300);
}
else if($(this).attr("id")=="n"){
$("li").removeClass("con");
}
else if($(this).attr("id")=="C"){
$("li").addClass("con");
}
else if($(this).attr("id")=="an"){
console.log("Added to html : "+$(".uDefined").html()+"<br/><li>"+$("li").last().html().substring(0,7)+($("li").last().html().substring(7,8)-(1)+1+1)+"</li>");
$(".uDefined").html($(".uDefined").html()+"<br/><li>"+$("li").last().html().substring(0,7)+($("li").last().html().substring(7,8)-(1)+1+1)+"</li>");
}
else{
$(".list").slideToggle(1000,function(){
if(toggle==0){
$("#D").html("Open div");
toggle=1;
}
else{
$("#D").html("Close div");
toggle = 0;
}
});
}
});
});
HTML:
<html>
<style type="text/css">
.list{
font-size: 100;
background-color: white;
}
li{
margin-left: 100;
border-radius: 20;
border-width: 3;
background-color: Black;
color:White;
}
.con{
color:red;
}
.uDefined{
}
</style>
<body onload="" style="background-color:gray;margin:40" >
<title>JQuery TryOut</title>
<h3 style="margin-left:800;">Welcome</h3>
<button id="D">Close Div</button>
<button id="s">Show All</button>
<button id="n">Remove Classes</button>
<button id="C">Add Classes</button>
<div class="list">
<ul class="uDefined">
<li class="con">content1</li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
<li>content5</li>
<li>content6</li>
</ul>
</div>
<div>
<p>Please focus on this text box:</p><input id="ttt" placeholder="Enter text here" value="" type="text" />
</div>
<button id="an" >another one</button>
</body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
THANKS FOR HELPERS!
Direct events are only attached to elements (that exist) at the time the .on() method is called. So when you are adding buttons dynamically, you need to use delegated event handlers.
You should change your code like this:
$("ul").on("click", "li", function () {
...
});
More about delegated events:
http://learn.jquery.com/events/event-delegation/