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.
Related
As soon as I load or reload the page. The gif i've included in the html starts playing.
$('.text').mouseover(function() {
$('.hover').css("visibility", "visible"); })
$('.text').mouseout(function() {
$('.hover').css("visibility", "hidden"); });
I want the gif to start whenever I hover over the relevant element and stop when I take my cursor off. This JS is in a script tag within the body of HTML doc. It works after I hover over the 'text' element for the first time. Would love some guidance on what I am doing wrong.
It's likely that the visibility of the image is visible on the initial page load. When you do your first mouseover, then mouseout, it gets set to hidden, which is your expected behavior. Try setting the visibility of the img to hidden, by one of these methods:
Add a style in the head of the page:
<html>
<head>
<style>
img.hover { visibility: hidden; }
</style>
</head>
<body>
<img src='path/to/image.gif' class='hover' />
</body>
</html>
Or, set the style inline in the image itself:
<html>
<body>
<img src='path/to/image.gif' class='hover' style='visibility: hidden' />
</body>
</html>
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
I have a website with an iframe and the website has its own backdrop / overlay. My goal is to set z-index of a child element of iframe, so only this child element should be on top of the overlay. I have access to both website inside iframe and the top website.
I reproduced it in Plunkr, so my goal is to get the green box (modal) to the top.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<iframe src="iframe.html" width="100%" height="500px" ></iframe>
<div class="backdrop">
Backdrop
</div>
</body>
Do you have an idea if it's possible? How?
You can't do what you want.
What you have is this:
document
body
iframe
- see document(2)
div[class="backdrop"]
document(2)
body
div[class="modal box"]
The two documents don't overlap and cannot interact with each other in such way. You can move your element to the top z-index within the iframe, but you cannot make the element "break out" of the iframe in the way you wish to achieve. You have to set the iframe itself to the top.
An alternative approach for you might be to use an ajax request, and then append the new element to the body, and style that to appear on top.
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/
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.