I have this code for js, html and css:
window.onload = function () {
console.log("aaa");
document.getElementById("back").addEventListener("mousedown", function () {
console.log("start");
}, false);};
and
<body>
<div id="mag-glass">
<object data="worldLow.svg" type="image/svg+xml">
</object>
</div>
<div id="back">
<object data="worldLow.svg" type="image/svg+xml">
</object>
</div>
<script src="mag-glass.js"></script>
and css
#back {position: absolute;
top: 0;
left: 0;
width: 1000px;
height: 1000px;
overflow: hidden; }
#back object {
width: 2000px;
height: 2000px; }
the problem is that the mouse down event is not fired. Is it because the object is bigger than the div? I tried to make the event for other elements as well but nothing helped.
It would work i have tried this on fiddle with some in html as i didnt have mag-glass.js but your problem was with event calling so it is working.
$(document).ready(function(){
console.log("aaa");
$("#back").on("mousedown", function () {
console.log("start");
});
});
Thanks for responses, I solved it with deleting object a nd substituing it with just svg itself. This way it works
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'm not certain of the reason, but this particular function does not seem to be working in both the Safari/iOS and Chrome browsers:
$(window).on('load',function(){
$('#preloader').fadeOut(800).hide();
$('#preload').fadeIn(800).css('display', 'initial').show();
});
I've currently inserted the script before the </head> tag. Could anyone explain why this is occurring?
UPDATE:
$(window).on('load', function() {
$('#preloader').fadeOut(800).hide();
$('#preload').fadeIn(800).css('display', 'initial').show();
});
.preloader-wrap {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
text-align: center;
line-height: 0;
}
#preloader {
margin: 40px 0;
padding: 0;
border: 0;
width: 45px;
height: 45px;
}
#preload {
display: none;
}
img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/4m2ikeh/q2Poxnx2k/jquery-3.2.1.min.js"></script>
<div class="preloader-wrap">
<img src="https://cdn.ndtv.com/vp/static/images/preloader.gif" id="preloader" />
</div>
<div id="preload">
<img src="https://78.media.tumblr.com/708bb6dcdaf359fd2ea83d11a0b5b4b8/tumblr_oyslstg5xk1unhdoco10_r1_1280.jpg">
</div>
Why do you use hide() when you use fadeOut() and show() when you use fadeIn(). However have a look at here:
$(document).ready(function() {
$("#preloader").fadeOut(800, function() {
$("#preload").fadeIn(800)
});
});
#preload {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
Preloader Content
</div>
<div id="preload">
Preload Content
</div>
It is working for me in Firefox, Chrome, Safari
Maybe those multiple concurring ways to show and hide the elements are in cause. I don't have any IOS device to be sure.
If you wish a delay and the fades one after the other, try this way:
$(window).on('load',function(){
setTimeout(function(){
$('#preloader').fadeOut(800, function(){
$('#preload').fadeIn(800); // FadeIn after fadeOut complete.
});
},800); // delay from the load event and the fadeOut.
});
I'm trying to get a gallery set up that, upon clicking a smaller image, it will show a hidden div with a larger size with that specific image that was clicked.
I'm wondering how you set up a Jquery where, upon clicking a div, it feeds the img src into another img tag (with a variable or otherwise).
I was playing around with something like
function getImageSrc(x) {
var x= document.getElementsByClassName("image").src,
return x;
Which I would then feed into another function, where x would be the img src from the getImageSrc function, but I just can't quite wrap my head around it. I can't seem to think of how to fire an onClick event inside the first function without throwing in an additional function inside the first one.
Any help would be great. I'll even take a whole new direction with this if this method won't work (besides plugins).
Here is the code snippet now that I have time to get to it. I'm basically trying to pass the image src into the .clicked when the image is clicked, upon which the .clicked will go from visibility: hidden to visibility: visible.
The next script that needs to run is when the .clicked div is visible and clicked, it goes back to hidden.
I'm mostly having trouble figuring out the first script.
.clicked {
visibility: hidden;
height: 100%;
width: 100%;
background: rgba(35,35,41,.9);
z-index: 100;
top:0;
}
.imgcontainer {
height: 200px;
width: 200px;
overflow: hidden;
}
<div class="clicked">
<img class="clickedimg" src="">
</div>
<div class="imgcontainer">
<img class="image" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</div>
Its pretty simple, Code explains itself
$(document).ready(function() {
$('.small > img').click(function() {
$('.big > img').prop('src', $(this).prop('src'));
$('.big').show();
})
});
.small {
height: 100px;
width: 100px;
}
.small >img,
.big > img {
height: 100%;
width: 100%;
}
.big {
height: 300px;
width: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small">
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" />
</div>
<div class="big">
<img />
</div>
You could do something like this,
function getImageSrc(x){
var x= document.getElementsByClassName("image").src;
//Call the function to append the img src to the new element
appendImageSrc(x);
}
function appendImageSrc(imageSrc){
//append the src to the new Element
document.getElementsByClassName("imageLarger").src = imageSrc;
}
Please try this code. I think this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
document.getElementById("SmallerImageURL").src = "https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_(JPEG-HDR).jpg";
});
function EnlargeImage() {
var SmallImg = getImageSrc("SmallerImageURL");
document.getElementById("EnlargedImageURL").src = SmallImg;
}
function getImageSrc(ImageClass) {
var x = $("."+ImageClass).attr("src");
return x;
}
</script>
<style>
.SmallContainer {
width: 250px;
float: left;
}
.LargeContainer {
width: 500px;
float: left;
}
.LargeContainer img,
.SmallContainer img {
float: left;
width: 100%;
}
.row {
width: 100%;
float: left;
}
</style>
</head>
<body>
<div class="SmallContainer">
<img id="SmallerImageURL" class="SmallerImageURL"/>
</div>
<div class="LargeContainer">
<img id="EnlargedImageURL" />
</div>
<div class="row">
<button onclick="EnlargeImage()">Enlarge Me</button>
</div>
</body>
</html>
I have made a small modification to your getImageSrc method. I think implementing the same in jQuery is much better.
$(document).ready(function() {
$("#open_page").click(function(){
var go_to_url = $("#redirect").find(":selected").val();
document.location.href = go_to_url;
});
});
You could do something like this
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 need some help with the following:
i have a an image placed in my body which has a hover function
<div id="wrapper">
<img style="position: absolute;" src="img/image.png" name="man" width="150" id="man_1" />
</div>
$("#man_1").hover(function () {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
},function () {
$('#hoverimg').remove();
console.log("leave mouse");
});
as you can see when im hovering the image, it appends another image which has the same top and left values as #man_1. The problem is, that when im leaving the mouse the remove does not fire because the mouse is actually on the new hoverimg
hope you get my point! Thanks
Working FIDDLE Demo
Maybe with another markup, it be easier to to this:
HTML
<div id="wrapper">
<div class="photo">
<div class="image"><img src="http://placekitten.com/200/220" /></div>
<div class="size"><img src="http://placehold.it/200x40" /></div>
</div>
</div>
CSS
.photo {
position: relative;
height: 220px;
overflow: hidden;
width: 200px;
}
.photo .image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.photo .size {
position: absolute;
height: 40px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin-bottom: -40px;
transition: margin-bottom 0.3s;
}
.photo .size.show {
margin-bottom: 0;
}
JS
$(function () {
$('.photo')
.on('mouseenter', function () {
$(this).find('.size').addClass('show');
})
.on('mouseleave', function () {
$(this).find('.size').removeClass('show');
});
});
You have to use the mouseenter and mouseout events
$("#man_1").mouseenter(
function() {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
});
$('#hoverimg').mouseout(
function() {
$('#hoverimg').remove();
console.log("leave mouse");
}
);
What if you bind the hover event to the #wrapper instead?
That works, in this FIDDLE.
Please have a look at http://jsfiddle.net/2dJAN/43/
<div class="out overout">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSuTs4RdrlAhxd-qgbGe9r0MGB9BgwFrHDvfr9vORTBEjIYnSQ8hg" />
</div>
$("div.overout").mouseover(function() {
$(this).append("<img src='http://files.softicons.com/download/system-icons/apple-logo-icons-by-thvg/png/512/Apple%20logo%20icon%20-%20Classic.png' id='hovering'/>")
}).mouseout(function(){
$('#hovering').remove();
});
I used mouseover and mouseout instead of hover.
I understood as you want to show both images on mouseover and remove the added image on mouseout. Is that correct or not?