Response title
This is preview!
- Screen name: sswett1
sswett1's Profile
3 Posts
5 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
- 05-Apr-2010 02:58 PM
- Forum: Using jQuery UI
The attached zip file is a working drag and drop demo that uses sortable and connected lists to allow boxes to be dragged around on the page. My <ul> lists contain <li> items. Within the <li> items are <div> items. In one case, within the <div> is an <iframe> that holds a picture.
There is odd behavior, for Firefox only, when you drag a different box/div across the box/div that contains the <iframe>. I'm using a handle for clicking and dragging a box. The problem is this: while dragging within the <iframe>, the mouse pointer can become disassociated with the handle.
In my REAL application, which is too complex to post here, the disassociation is very obvious and occurs during natural movement. However, with this demo page, you have to try a little harder with your mouse in order to see the problem. Here are the steps you have to take:
1. Unzip the attached file to any folder on your PC.
2. Open TestDragAndDropPhase11.html in Firefox.
3. Put your mouse over Box 4.
4. When the "4-arrowed move icon" appears, click it and begin dragging.
5. Drag Box 4 over the large picture above it. Don't let go of the mouse yet.
6. Here's the tricky part: with Box 4 over the lower 1/3 or 1/2 of the large picture, very quickly move your mouse into the top upper 1/2 or 1/3 of the large picture. Don't let go of the mouse. The mouse pointer will become "disconnected" with Box 4. (You may have to try this a few times.)
Interestingly, while still holding the mouse, if you move it back on top of Box 4 you can reconnect with Box 4 and resume moving it around.
This problem doesn't occur on IE, Safari, Opera, or Chrome.
Does anybody know how to fix this? Thanks in advance.
P.S. EASIER WAY TO DUPLICATE PROBLEM: In Step 6, drag Box 4 around to the outside right of the big picture. Then drag Box 4 into the picture <iframe>. You'll notice the problem as you drag your mouse leftward over the <iframe>. Drag Box 4 to the right of the picture <iframe> to start over. Then drag it back over the picture again. (I noticed the same thing happens if you drag Box 4 from below the picture <iframe> instead of from the right of the picture <iframe>.)
P.S. #2: If the <iframe> tag is replaced with the following <img> tag, then the "disconnect" problem no longer happens:
<img src="./images/Steve_Tanner.jpg"/>
Unfortunately, I can't do that in my REAL app. But this does show that there is an issue with the <iframe>.
Attachments- TestDragAndDropPhase11.zip
- Size: 169.82 KB Downloads: 3432
- 10-Mar-2010 05:26 PM
- Forum: Using jQuery UI
My test page, of which a complete working example is attached, contains 4 connected lists of boxes that can be moved around. There are 2 rows on the page.
Row 1 - contains one wide list
Row 2 - contains 3 columns of narrower lists
When I try to drag the bottom-most box (Box B) in Row 1 to the top of the middle column in Row 2 (above Box 4), the placeholder (a gray-dashed rectangle) doesn't appear where I'd expect.
How can I make the placeholder behave correctly / intuitively?
To run the working example, do the following:
1. Unzip the attached file, TestDragAndDrop.zip, to any folder
2. Go to that folder and bring up TestDragAndDropPhaseThree.html
Thanks! This problem is driving me buggy.Attachments- TestDragAndDrop.zip
- Size: 47.3 KB Downloads: 3276
- 17-Mar-2009 05:17 AM
- Forum: Using jQuery
I'm trying to use the rounded corners plugin -- jquery.corners.js .
When I create a small test case, below, it works fine. However, when
I try to add corners to my production system I receive the following
error in Firefox's error console:
$('.edlBoxArea').corners is not a function
I'm only adding two things to my production system:
FIRST:
A reference to the plugin script, in the <HEAD> section of my html:
<script type="text/javascript" src="/jscripts/jquery/
jquery.corners.js"></script>
SECOND:
In my onload event handler a single Javascript stmt:
$('.edlBoxArea').corners("10px");
I've also tried using the following lines of Javascript code in the
<head> section instead of an onload event handler. It gives the same
error.
$(document).ready(function(){
$('.edlBoxArea').corners("10px");
});
I've verified via Firebug that the Javascript files are being loaded,
so it isn't a problem with referencing the external js files.
I'm using jQuery 1.2.6 and jQuery Corners 0.3. I've successfully used
jQuery and other plugins (hoverIntent) successfully. What could be
going wrong?
Here's the simple test case:
<html>
<head>
<title>corners</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript" src="./scripts/jquery.js"></script>
<script type="text/javascript" src="./scripts/jquery.corners.js"></
script>
<script language="JavaScript">
function onLoadHandler()
{
$('.edlBoxArea').corners("10px");
}
</script>
</head>
<body onload="onLoadHandler();">
<div id="outerDiv">
Maybe there's some text here.<br/>
And a little more text here.
<div class="edlBoxArea" style="background-color: lightblue;">
This is an<br/>
inner div<br/>
that should have <br/>
rounded corners <br/>
applied.
</div>
<div class="edlBoxArea" style="background-color: tan;">
This is another<br/>
inner div<br/>
that should have <br/>
rounded corners <br/>
applied.
</div>
</div>
</body>
</html>- «Prev
- Next »
Moderate user : sswett1