am try to remove div when click like
my code
<div id="closebox" style="position: absolute;margin-right: 2px; opacity: 0;/* width:27px; */ /* height: 20px; */ /* overflow: hidden; */ width: 47px; height: 20px; overflow: hidden; right: 202px; bottom: 15px;">
<iframe id="closebox1" src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/0000000&layout=button_count&show_faces=false&width=60&action=like&colorscheme=light&height=31" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45px; margin-top:3px;padding-bottom: 0px;
padding-top: 0px; height:31px; z-index: 0; /* position: absolute; */opacity: 0;" allowtransparency="true"></iframe>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">نعم </button>
<script type="text/javascript">
$('#closebox1').click(function () {
$('#closebox1').hide();
});
</script>
i need when click into div id closebox or closebox1 remove iframe id closebox1
not working because click here it's into iframe content it's like botton not div
it's not posible with iframe like button if you use any other button it's work with your code but iframe into div it's not posible to click div because iframe take click on behalf of div.
if you click your button tag and remove iframe it's posible to remove iframe.
like this
<script type="text/javascript">
$('.btn-default').click(function () {
$('#closebox1').remove()
});
</script>
Here:
$('#closebox, #closebox1').click(function(){
$('#closebox1').hide();
});
That will hide the iframe when clicking on #closebox or #closebox1
Alternatively, do something similar but instead of hiding the iframe, change the 'src' attribute.
$("#closebox").click(function(){
$(this).children("iframe").remove();
});
Please Try This one.
Related
I have an embed element in which I provided path to pdf file. I want to prevent it from being download.
<embed src="test.pdf" width="760" height="800" oncontextmenu="return false" />
but when I right click on that t gives me options to save and print pdf. I want to prevent these options.
I tried
<script type="text/javascript">
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
</script>
but it disables right click on entire page except for PDF.
One simple and reliable solution, that is not affected by CORS or CSP, is to cover the embed with another element. I'm using an image here because you cannot embed pdfs on stack overflow.
.embed-cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Just for demonstration, remove this part */
opacity: 0.25;
background-color: red;
}
.wrapper {
position: relative;
overflow: hidden;
}
/* Not Important*/
img {
width: 300px
}
<h3>Normal img/embed/object element</h3>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
<hb/>
<h3>With cover</h3>
<div class="wrapper">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
<div class="embed-cover"></div>
</div>
The covering element 'catches' any click events and prevents them from reaching the underlying element (the image in this case)
You should use iframe and inject your javascript code.
To do:
Use iframe tag instead of embed tag and use myFrame as id. ex:
<iframe id="myFrame" width="760" height="800" />
In your parent document get iframe from DOM.
Call window.eval method of iframe, use
'document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);'
as string parameter.
Now iframe should not effected by right click.
It should look like this at the end:
var myFrame = document.getElementById('myFrame');
myFrame.window.eval('document.addEventListener("contextmenu", function (e) {e.preventDefault();}, false)');
with Wendelin's answer i was able to achieve what i wanted to achieve.
<html>
<head>
<style>
.embed-cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Just for demonstration, remove this part */
opacity: 0.25;
}
.wrapper {
position: relative;
overflow: hidden;
}
</style>
<script type="text/javascript">
function disableContextMenu() {
window.frames["pdfframe"].contentDocument.oncontextmenu = function(){return true;};
var myFrame = document.getElementById('pdfframe');
myFrame.window.eval('document.addEventListener("contextmenu", function (e) {e.preventDefault();}, false)');
}
</script>
</head>
<body onload="disableContextMenu();" oncontextmenu="return false">
<div class="wrapper">
<embed id="pdfframe" src="<url of myfile.pdf>#toolbar=0" width="100%" height="100%" ></embed>
<div class="embed-cover"></div>
</div>
</body>
You can try to use CSS to disable clics, but it will disable the scroll bar :
iframe {
pointer-events: none;
}
I've already tried to find out how to actually do it but the codes are always different and nothing works. I always end up ruining the link or the popup itself. So, I've got this code here:
.popup {
position:fixed;
display:none;
top:0px;
left:0px;
width:100%;
height:100%;}
#displaybox {
width:460px;
margin:50px auto;
background-color:#000000;}
.displaybox {
display:block;
position:relative;
overflow:hidden;
height:800px;
width:550px;}
.displaybox iframe {
position:absolute;}
<link><a id="object">click link</a></link>
<script>
$(function(){
$("link a").click(function(){
id = $(this).attr("id");
$(".popup:not(."+id+")").fadeOut(); $(".popup."+id).fadeIn();
});
$("a.close").click(function(){
$(".popup").fadeOut();
});
});
</script>
<div class="popup object">
<div id="displaybox"><a class="close">x</a>
<br>
<div class="displaybox"><iframe src="{theiframeblock}" height="800" frameborder="0" width="550"></iframe></div>
</div>
And I want to only load the iframe-block when I click on the "click link" link. How do I have to change the script for that? Any suggestions? :)
Update
The snippet I provided was pretty simple, so I assume when you tested it, you either missed some of the code or placed things in the wrong order, or your site is interfering somehow.
So what I did was made the primary page (index.html) with everything it needs to function on it's own. I made a second page as well (target.html) which is the test page that resides in the iframe.
Here's the DEMO
Simplified your functions by:
giving your popup an id #tgt
removed that <link> element; it's not an anchor <a> it's basically for external stylesheets
gave each anchor an empty href attribute
placed e.preventDefault() in each click function to avoid the <a> default behavior of jumping to a location.
replaced the iframe's src={..} template with the root, you can change that back, I just did that so the demo can function.
$(function() {
$("a.open").click(function(e) {
$('#tgt').fadeIn();
e.preventDefault();
});
$("a.close").click(function(e) {
$("#tgt").fadeOut();
e.preventDefault();
});
});
.popup {
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#displaybox {
width: 460px;
margin: 50px auto;
background-color: #000000;
}
.displaybox {
display: block;
position: relative;
overflow: hidden;
height: 800px;
width: 550px;
}
.displaybox iframe {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click link
<div id="tgt" class="popup object">
<div id="displaybox">X
<br>
<div class="displaybox">
<iframe src="/" height="800" frameborder="0" width="550"></iframe>
</div>
</div>
You can use:
$("#object").click(function() {
$("iframe").attr("src", "http://www.your-url.com");
});
Won't allow cross-origin requets
You can do it easily by using jQuery
Try this - https://jsfiddle.net/van06539/
HTML-
Click Link
<div id="iFrameContainer">
<iframe src="http://www.bbc.com" id="bestIframeEver" height="600" width="300" style="display:none;">
</iframe>
</div>
Javascript -
var isOpened = false;
$(document).ready(function() {
$("#openFrame").click(function() {
if (!isOpened) {
$("#bestIframeEver").fadeIn(1000);
} else {
$("#bestIframeEver").fadeOut(1000);
}
isOpened = !isOpened;
});
});
You can toggle the open / close state of the iframe
I have created a div that when I double click it, it will expand the entire contents of the div to full screen. I now want to be able to toggle this when double clicking so it goes back to original size.
The code was working to increase the div size, but once adding the toggle() function, it now changes the display to none when I double click the first time. I assume I am just using toggle incorrectly, but am unable to figure out how to make this work.
HTML
<div class="popout-box">
<button id="btnShow">Wallboard</button>
<div class='menu' style='display: none'>
<div id="framewrap">
<button id="btnHide">Close</button><br/>
<iframe id="frame" src="https://url.com">
</iframe>
</div>
</div>
</div>
</div>
jQUery
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
});
});
CSS
#framewrap {
background-color:#1886c5;
overflow:hidden;
box-shadow: 0px 2px 10px #333;
}
#frame {
width:100%;
height:100%;
background-color:#1886c5;
}
.popout-box {
width: 400px;
height: 300px;
}
.menu {
position: absolute;
right: 15px;
}
I believe this is what you're after:
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$(this).toggleClass('newClass');
});
});
CSS:
.newClass
{
width:100%,
height:100%,
...
...
}
jQuery
$(document).ready(function() {
$("#framewrap").on('dblclick', function() {
$("#framewrap").toggleClass('fixed');
});
});
CSS
.fixed {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:5px;
bottom:0
}
The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.
I'm using Telerik Radeditor which is rich text area and the editor content is an iframe, something like below:
<iframe frameborder="0"
src="javascript:'<html></html>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;"
title="hello world"
id="contentIframe"></iframe>
My goal is to display the "hello world" tooltip when a user mouse hover the iframe area.
As you can see I put "title" attribute but it is not showing up.
To mimic the tooltip behavior I tried placing overlay div and title which worked but then I lost mouse control because of the overlay div.
I also desperately tried putting title in the iframe body but then I had to click inside of iframe to make it happen which is not the solution.
var iframe_html = $(wrapper).find("iframe").contents().find("html");
$(iframe_html).prop("title", "hello my tooltip 1");
var iframe = $(wrapper).find('iframe');
$(iframe).prop("title", "hello my tooltip 2");
var iframebody = $(iframe).contents().find('body');
$(iframebody).prop("title", "hello my tooltip 3");
I'm using jQuery UI 1.8.16 which does not come with Tooltip capability thus that cannot be an option..
Could anyone help me figure how to show the tooltip?
You are able to assign a title to the iframe but you wont be able to see it in the iframe.. Change the frameborder to "2" and move your cursor to it.. there you go..Title appears...
To see the title on iframe you must set the title of iframe content and not the iframe itself..
just like i've done below..
<iframe frameborder="0"
src="javascript:'<div id=\'hey\' title=\'Hello World\'>Helllo World</div>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;"
title="hello world"
id="contentIframe">
</iframe>
Alternatively..
using jQuery
$(document).ready(function () {
$("#contentIframe").contents().find("body").attr('title','Hello World');
});
This is a fiddle for your reference..
I just added an iframe to the div in the w3 schools tooltip tutorial (TryIt editor here) and it worked perfectly. To my surprise.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #994444;
color: #ffffff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Proof of Concept</h2>
<p>This, cobbled from the W3 schools tutorial on CSS tooltips. I added an Iframe inside the div; one may still interact therewith, yet enjoy full tooltipitude.</p>
<p> So, move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Hello World</span>
<iframe height="600px" src="https://imgur.com/a/71J1gQZ" width="600px" ></iframe>
</div>
</body>
</html>
See it live here :
https://faustsstudy.blogspot.com/p/blog-page_14.html
but it requires support for data URIs.