Response title
This is preview!
- Screen name: oliszewski
oliszewski's Profile
2 Posts
4 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- I am needing to use jQuery UI in a child iframe of my host page. My issue is that drag operations work poorly if the users mouse travels outside the child iframe and into the parent. If this happens the mousemove events or mouseup event are no longer sent to the UI control. I have solved this with my own GUI functions by simply having the parent pass these events to the child for processing but with jQuery UI I do not know how to pass these events through properly. In the sample below I show my failed attempt at using trigger to pass the event to the child iframe.Does anyone know of a way to pass these events through to the child iframe and have jQuery UI be able to process them properly ?Here is my host page:
- <!DOCTYPE html>
<html lang="en-us">
<head>
<script src="/SharedLib/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
var MouseMoveCallback;
function OnMouseMove(e) {
if (MouseMoveCallback)
MouseMoveCallback(e);
}
$(document).ready(function () {
$(document).mousemove(OnMouseMove);
});
</script>
</head>
<body>
<p>
If your mouse strays outside of the iframe during a drag of the slide handle
it no longer moves or detects mouseup.
</p>
<iframe src="EventTestChildFrame.html" style="width: 500px; height: 80px;">
</iframe>
</body>
</html>
Here is my child iframe which loses the mouse events:
- <!DOCTYPE html>
<html lang="en-us">
<head>
<link href="/SharedLib/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<script src="/SharedLib/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/SharedLib/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
function OnMouseMove(e) {
// this doesn't work...
$(document).trigger("mousemove", e);
}
$(document).ready(function () {
parent.MouseMoveCallback = OnMouseMove;
$("#slider").slider();
});
</script>
</head>
<body style="background-color: #D0D0D0;">
<p>Child iframe with jQuery UI control.</p>
<div id="slider" style="margin: 8px;"></div>
</body>
</html>
- 04-Jan-2012 09:53 PM
- Forum: Using jQuery
I am wanting to avoid loading a seperate instance of jQuery in each of many iframes. For the most part this is working well. The problem I'm having is with the ready event. It does not seem to work properly within a child iframe.parent.$(document).ready(function () { /* this fires before the DOM is ready.*/ });Based on what I have read I am guessing it is firing immediately when called rather than waiting for the DOM to be properly loaded first. I can get window.onload to work, but it fires late in the game. Is it possible to get a proper 'ready' event triggered within an iframe without loading a seperate instance of jQuery ?- «Prev
- Next »
- <!DOCTYPE html>
Moderate user : oliszewski
