I'm having a problem with disable scrolloing on iframe of Google My Maps (custom maps). Since this has also clickable events I cannot use CSS "pointer-events:none". I tried also "scrolling:no" on the iframe itself, but both this methods doesn't work. I finally use a javascript as.
<script>
$(".map").bind("mousewheel", function() {
return false;
});
</script>
And it works, but when I click in one of the links start scrolling again. How can I disable scrolling definetly but still use the clickable events.
A working example:
<!DOCTYPE html>
<html>
<head>
<style>
.scrolloff {
pointer-events: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#map').addClass('scrolloff'); // set the mouse events to none when doc is ready
$('#overlay').on("mouseup",function(){ // lock it when mouse up
$('#map').addClass('scrolloff');
//somehow the mouseup event doesn't get call...
});
$('#overlay').on("mousedown",function(){ // when mouse down, set the mouse events free
$('#map').removeClass('scrolloff');
});
$("#map").mouseleave(function () { // becuase the mouse up doesn't work...
$('#map').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
// or you can do it on some other event
});
});
</script>
</head>
<body>
<div id="overlay" class="map">
<iframe id="map" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
&q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
</div>
</body>
</html>
Live demo: http://kylelam.github.io/iframe.html
Related
I've looked at similar questions and answers on Stack Overflow which I can't get to work. everything is find when the page loads but when I mouse over it doesn't show the new gif.
When inspecting the code in the browser it seems to be switching between the two images.
<!DOCTYPE html>
<html>
<head>
<script>
function normalImg() {
document.getElementById("smile").src = "/smiley.gif"
}
function singing() {
document.getElementById("smile").src = "/sing.gif"
}
</script>
</head>
<body>
<img onmouseout="normalImg()" border="0" src="smiley.gif" alt="Smiley" width="32" height="32" id="smile"
onmouseover="singing()" border="0" src="sing.gif" alt="singing" width="32" height="32">
<p>onmouse out and onmouseover changing images</p>
</body>
</html>
you should have only one src attribute inside < img /> tag, you could try the code below:
<!DOCTYPE html>
<html>
<head>
<script>
function singing() {
document.getElementById("smile").src = "https://upload.wikimedia.org/wikipedia/commons/0/06/180717_%EC%97%B4%EB%A6%B0%EC%9D%8C%EC%95%85%ED%9A%8C_%ED%8A%B8%EC%99%80%EC%9D%B4%EC%8A%A4_%2818%29.jpg"
document.getElementById("smile").alt="smiling"
}
function crying() {
document.getElementById("smile").src = "https://upload.wikimedia.org/wikipedia/commons/c/cd/Chou_Tzuyu_at_the_Golden_Disc_Awards_2019.png"
document.getElementById("smile").alt="crying"
}
</script>
</head>
<body>
<img onmouseover="singing()" onmouseout="crying()" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chou_Tzuyu_at_the_Golden_Disc_Awards_2019.png" alt="singing" width="100" height="100" id="smile">
<p>onmouse out and onmouseover changing images</p>
</body>
</html>
You don't need the / at the start of your path to gif.
Replace
document.getElementById("smile").src = "/smiley.gif"
with
document.getElementById("smile").src = "smiley.gif"
Same for the sing.gif
Instead of using javascript to change image source on mouseout and mouseover, it will be better to change image source on based on just hover.
Check this out:
CSS: Change image src on img:hover
Hover handles both a mouseenter event and a mouseleave event.
Mouseover is best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. If you want to trigger some event on the element.
I'm trying to hide an element in same-origin iframe. However, this son of a bi*ch blinks for a few ms before getting hidden. So what I did was added display: none and remove it after iframe is loaded - great. But now, when user clicks inner page link of iframe, which also contains element to be hidden, it still blinks (because display:none is now removed). I need to detect when to add it again, i. e. just before another page starts to load.
Testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script
Here is what I tried:
<html class="js">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html.js #iframeID
{
display: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID').on('load', function()
{
$('#iframeID').contents().find('a').on('click', function()
{
$('html').addClass('js');
console.log('click');
});
console.log('loaded');
$('#iframeID').contents().find('#mySidenav').remove();
$('html').removeClass('js');
});
});
</script>
</head>
<body>
<iframe id="iframeID" height="800px" width="800px" src="https://www.w3schools.com/" ></iframe>
<script>
</script>
</body>
</html>
However, there are some a elements that don't load another page. In this example, try clicking on "TUTORIALS" at the top of that iframed webpage - it just opens up dropdown, not loads another page.
What should I do?
I noticed that "TUTORIALS" link has href="javascript:void(0)". Maybe I should be somehow selecting all a links without such href? But not sure if it's fool proof.
You can make use of load event on the iframe as such,
$('iframe').on('load', function(){
console.log('Iframe Loaded');
});
The iframe's load event is also called every time it's src changes.
$(document).ready(function(){
$('.iFrame_class').load(function(){
console.log('frame loaded');
});
});
Alternatively on start load solution:
Custom attribute for iframe:
iframe class="iFrame" src="some site" started="0"
Put this code to iframed page:
window.parent.$('.iFrame').attr("started","0"); //makes iframe started attr to false on page load
$(document.body).on("click","a", function() {
window.parent.$('.iFrame').attr("started","1");// makes iframe started attr to true for all clicked links
});
And listen; is started attribute changed to 1 on parent page?
I fixed the damn blinking by making 2 iframes and showing 2nd while 1st one is loading. While 1st one is loading, it's also hidden, becomes unhidden after it finishes loading. Anyway, here is my code, should help someone:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
iframe.js
{
display: none;
}
iframe.unclickable
{
pointer-events: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID1').on('load', function()
{
$('#iframeID1').contents().find('a[href!="javascript:void(0)"]').filter('a[target!="_blank"]').filter('a[target!="_top"]').filter('a[target!="_parent"]').on('click', function()
{
$('#iframeID1').addClass('js');
$('#iframeID2').removeClass('js');
});
$('#iframeID1').contents().find('#mySidenav').remove();
$('#iframeID1').removeClass('js');
$('#iframeID2').addClass('js');
$('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
});
});
</script>
</head>
<body>
<iframe id="iframeID1" height="800px" width="800px" src="https://www.w3schools.com/" class="js"></iframe>
<iframe id="iframeID2" height="800px" width="800px" src="https://www.w3schools.com/" class="js unclickable" ></iframe>
<script>
</script>
</body>
</html>
Is there a jquery/js script that will listen for an onHover event?
I'm building a listening library and we want to include the ability to help the website owner detect when a user initiates an onHover event - so they know it was taking the attention of their visitor/user.
Listen for onHoverStart (when they mouse on an element that has an onHover associated with it) & onHoverEnd (when they mouse away from the element).
This is a simple example which works with onmouseenter and onmouseleave I modified from http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
When a user hovers the image gets bigger. When hovering stops the image returns to normal size. You can also customize the function to do what ever you want onmouseenter and onmouseleave
<!DOCTYPE html>
<html>
<body>
<img onmouseover="WhenUserHovers(this)" onmouseout="WhenUserStopsHovering(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function WhenUserHovers() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function WhenUserStopsHovering() is triggered when the mouse pointer is moved out of the image.</p>
<script>
function WhenUserHovers(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function WhenUserStopsHovering(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
Also you can make use of jQuery (a javascript library) mouseenter and mouseleave http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
Or jQuery's mouseover and mouseout http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseover_mouseout
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
The difference between jQuery's mouseenter/mouseleave and mouseover/mouseout is mouseenter works when the mouse pointer enters the selected element while mouseover works when the pointer enters the element or any child elements of the element.
to detect the hover with jquery use this
$("selector").hover(function(){
//do something when it is hover
},function(){
//do something when you lose hover
});
you can read more about this here https://api.jquery.com/hover/
Two programs:
-one has a draggable div with an iframe inside.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
<style>
#draggable { width: 1500px; height: 300px; }
</style>
</head>
<body>
<div id="draggable" class="ui-widget-content" style="background:#ccc">
<p>Drag me around</p>
<iframe src="test.php" style="background:#eee;width:100%;height:240px;" frameborder='0' ></iframe>
</div>
</body>
-the other, the iframe program
<body>
<div onclick="alert('Clicked here')">Just a test with an input</div>
<input type="text" id="txtid">
</body>
Scenario: I click the mouse button inside the div to start dragging, and drag the mouse quickly from the div to inside the iframe. I lost the draggable capability (Its ok, I can leave with this). But then, I release the mouse button and move it out the iframe... and as soon the mouse touch the div repeat: without the mouse button pressed the drag remains active.
It is a bug or a feature of the drag method?
How can I force to stop the drag behavior? If you try it, youll notice it is a very annoying behavior.
TIA,
It's probably the case that any mouse events over the iframe aren't bubbling up to the parent document. Basically, when you release the mouse button, that event never makes it back to the draggable handler - it has no way of knowing that you don't have the mouse button pressed anymore.
You could use the draggable "helper" option to replace the iframe with a placeholder div while dragging - alternatively, you could cover the iframe with a transparent overlay while dragging.
I'm not sure if this is even possible.
I've got the following code;
<iframe src="http://www.domain.com/content.html" width="200" height="50"></iframe>
Now, I would have assumed that would've hyper-linked the entire iFrame area, however it only hyperlinks the border.
Is it possible to hyperlink the entire iframe area?
no, that's not valid. you can't even reliably get a click event off of the element containing the iframe.
e.g.,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bob').click(function(e){
alert('hi');
});
});
</script>
</head>
<body>
<div id="bob" style="padding:100px;background:red;"><iframe src="http://www.google.com"></iframe></div>
</body>
</html>
notice that if you click the iframe, no alert fires - but if you click anywhere else (in red), it will. if this were otherwise, there'd be abuse...
What actually do you mean by "hyperlink the iframe"?
You could try to use an onclick event for the iframe, or position a div with an onclick and transparent background above the iframe. Another possibility is to set the a to display: block and position it above the iframe.