andy's php projects
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Script and site usage:
All of the scripts on this site are provided free for non-commerical, personal or non-profit use. If you find these scripts useful to you, appreciate the free support, or are just an all round nice person, then why not donate a little dosh? If you wish to use any of these in a commercial system, please refer to the payment plan.


Can't drag or resize in IE
Goto page 1, 2  Next
 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Crop Canvas
View previous topic :: View next topic  
Author Message
allthingschildren
Newbie


Joined: 05 Nov 2005
Posts: 10
Location: Austin, TX

PostPosted: Sat Nov 05, 2005 7:23 pm    Post subject: Can't drag or resize in IE Reply with quote

Hi there, I was pointed to this piece of code by someone I was freelancing for, and they wanted it installed... It's a really great little script I have to say, I'm going to put it into my own site for something as well Very Happy So I had this installed and working as of a couple of days ago, only I do all of my work in Firefox... I was contacted today to see if it worked for me in IE because it didn't for them... I checked it out, and nope... at the time it was a different problem, which I ended up fixing thanks to these forums... It was wrapped in another div element and that was causing both the full sized image to not appear and the "theCrop" div window on top to jump around in the upper left corner and outside of the image area when attempting to drag it anywhere... but at least it was moving... I removed the page elements of the div containers so that it's all by itself now, and again, it works fine in Firefox, but now in IE I've got a different problem... I'm not able to drag or resize "theCrop" window at all... Before you ask, it works perfectly in your demo Smile I'm running IE 6, and I did change a few things in the code... one thing I did was to move the portion that displays the cropped area after form submission into a separate php file so that I could display the cropped image anywhere on the page... Since it requires outputting a header, I couldn't send any html before it, and I didn't like that, so by calling it like so:

Code:
<img src="makecrop.php?sx=blahblahblah"> // You get the idea :)


I was able to insert the cropped image anywhere on the page... that part works just fine... Also, I locked the resizing options so that you had to do it proportionally, because all of this person's thumbs are square... I also added a new function to be able to pass the cropped area along w/ width and height variables and have it crop the area and then resize it to the dimensions specified, because all of their thumbs are 75x75... All of that works fine, but for some reason, even though Firefox works 100%, in IE, I just can't move that window Smile If I submit the cropped area, it still comes through correctly, it just shows the upper left corner of the picture as the cropped area, since that's where the div defaults to... I've tried adding little javascript alert popups to pinpoint what's going on, and it seems that the DRAG and RESIZE functions aren't firing for some reason, possibly stemming from the onmousemove events not firing... When I added popup alerts into the initz function, they popped up to let me know it had gotten that far... I added them into function DRAG, and they failed to appear... I surrounded the if block within initz that actually makes the call to DRAG when onmousemove fires with braces, and added a popup into that if block, it failed to popup, so it seems to be there that the problem is occurring... for some reason, IE isn't reading that onmousemove event correctly or something, although, like I said, it works perfectly in your demo Smile Any ideas?

Richard Lindsey
Back to top
View user's profile Send private message Visit poster's website
allthingschildren
Newbie


Joined: 05 Nov 2005
Posts: 10
Location: Austin, TX

PostPosted: Sun Nov 13, 2005 4:48 pm    Post subject: Any comments? Reply with quote

It's been a while since I posted this and have no feedback on it yet, so I'm just curious as to whether anyone has any ideas out there? I may end up having to reinstall this all from scratch and then alter it little by little until it breaks again, unless someone can tell me a possible area to start looking in... Anyway, one more plea, thanks Smile

Richard.
Back to top
View user's profile Send private message Visit poster's website
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Wed Nov 23, 2005 9:40 am    Post subject: Reply with quote

Hi and welcome to the board!

I haven't been able to respond sooner as I've been on holiday and have only just come back.

In your setup, is the call to load the javascript (loadJavaScript) after the call to load the interface (loadInterface)? If not, then it needs to be.

Have you tried turning on javascript debugging in the browser and seeing if that kicks up an error message?

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
allthingschildren
Newbie


Joined: 05 Nov 2005
Posts: 10
Location: Austin, TX

PostPosted: Wed Nov 23, 2005 11:26 pm    Post subject: Reply with quote

Damn, I was hoping for the nice easy fix Smile But nope, the loadjavascript comes after the call to the loadinterface... Here's the code in question:

Code:

  $id = (isset($_GET['id']) ? $_GET['id'] : $_POST['id']);
  $sql = "SELECT * FROM gallery WHERE photo_id={$id}";

  $result = @mysql_query($sql, $db_connection) or die("Error #". mysql_errno() . ": " . mysql_error());

  $row = mysql_fetch_assoc($result);
  $photo_id = $row["photo_id"]; //name of field
  $photo_file = $row["photo_file"];

  require_once 'includes/class.cropinterface.php';
  $ci = new cropInterface();

  $ci->loadInterface('../../images/gallery/' . $photo_file);
  $ci->loadJavaScript();


Let me know if there's any specific code you would like to take a look at, since I mentioned making a few changes, but don't want to post the entire contents of all files here of course Smile And you probably know better than I what the key places to check for certain errors would be Smile

Richard.
Back to top
View user's profile Send private message Visit poster's website
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Nov 24, 2005 3:51 am    Post subject: Reply with quote

What might help is to see the problem in action. If you have it in an accessible area, PM me the address and I'll see if I can recreate the issue on my IE.
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
allthingschildren
Newbie


Joined: 05 Nov 2005
Posts: 10
Location: Austin, TX

PostPosted: Thu Nov 24, 2005 9:33 am    Post subject: Reply with quote

ok, i'll check w/ the guys i'm working for and see if that's acceptable to them... they originally pointed me here for the cropping class, so it's entirely possible, i'll let you know Smile

Richard.
Back to top
View user's profile Send private message Visit poster's website
allthingschildren
Newbie


Joined: 05 Nov 2005
Posts: 10
Location: Austin, TX

PostPosted: Fri Nov 25, 2005 1:10 pm    Post subject: Resolved! Reply with quote

Thanks to Andy for coming up w/ the solution to this, and for posterity's sake, I'll post it here, as I know how it feels to come across postings with the same problem from years ago, and they never came back to post their solution... It was an easy one really... The page source just needed to be surrounded by html and body tags, which it wasn't originally... Firefox didn't error out, because Firefox is a lot more forgiving about missing tags, and recovers nicely... But IE wants everything in its place perfectly, and even them it doesn't work sometimes Smile But for this, it works just fine, so if you have the same issue where you've tweaked this code some for your own environment, and now all of a sudden it doesn't seem to recognize the cropping square as an element that can be dragged around or resized at all, you might check that you've got the opening and closing html and body tags in place Smile

Richard.
Back to top
View user's profile Send private message Visit poster's website
vic318ic
Newbie


Joined: 29 Nov 2005
Posts: 6

PostPosted: Tue Nov 29, 2005 11:53 am    Post subject: Reply with quote

im experieincing the same problem, but with one extra kink. It works 100% in FF, but the image doesnt stay in the table, its spills out of it. Here is my HTML output of what the script spits out. It looks right I think.

In IE, the crop box is fixed at the top and doesnt move... Any ideas?

Code:

<div class="container">
<div class="holder">

<script type="text/javascript" src="wz_dragdrop.js"></script>

<div id="theCrop" style="position:absolute;background-color:transparent;border:1px solid yellow;width:112px;height:159px;background-image:url(transbg.png);"></div>
<table border="1" align="center"><tr><td align="center" ><strong>DSCF0001.JPG (640 x 480)</strong></td></tr>
<tr><td><img src="/dev/uploaded/DSCF0001.JPG" width="640" height="480" alt="crop this image" name="theImage"></td></tr>
<tr><td align="center"><input type="submit" value="Create Headshot" id="submiter" onClick="my_Submit();"></td></tr>
</table>

</div>
</div>
<script type="text/javascript">
<!--

    SET_DHTML("theCrop"+MAXOFFLEFT+0+MAXOFFRIGHT+640+MAXOFFTOP+0+MAXOFFBOTTOM+480+MAXWIDTH+640+MAXHEIGHT+480+MINHEIGHT+159+MINWIDTH+112,"theImage"+NO_DRAG);

    dd.elements.theCrop.moveTo(dd.elements.theImage.x, dd.elements.theImage.y);
    dd.elements.theCrop.setZ(dd.elements.theImage.z+1);
    dd.elements.theImage.addChild("theCrop");
    dd.elements.theCrop.defx = dd.elements.theImage.x;

    function my_DragFunc()
    {
        dd.elements.theCrop.maxoffr = dd.elements.theImage.w - dd.elements.theCrop.w;
        dd.elements.theCrop.maxoffb = dd.elements.theImage.h - dd.elements.theCrop.h;
        dd.elements.theCrop.maxw    = 640;
        dd.elements.theCrop.maxh    = 480;
    }

    function my_ResizeFunc()
    {
        dd.elements.theCrop.maxw = (dd.elements.theImage.w + dd.elements.theImage.x) - dd.elements.theCrop.x;
        dd.elements.theCrop.maxh = (dd.elements.theImage.h + dd.elements.theImage.y) - dd.elements.theCrop.y;
    }

    function my_Submit()
    {self.location.href = '/dev/crop.php?file=DSCF0001.JPG&sx=' +             (dd.elements.theCrop.x - dd.elements.theImage.x) + '&sy=' +
            (dd.elements.theCrop.y - dd.elements.theImage.y) + '&ex=' +
            ((dd.elements.theCrop.x - dd.elements.theImage.x) + dd.elements.theCrop.w) + '&ey=' +
            ((dd.elements.theCrop.y - dd.elements.theImage.y) + dd.elements.theCrop.h);
    }

    function my_SetResizingType(proportional)
    {
        if (proportional)
        {
            dd.elements.theCrop.scalable  = 1;
            dd.elements.theCrop.resizable = 0;
        }
        else
        {
            dd.elements.theCrop.scalable  = 0;
            dd.elements.theCrop.resizable = 1;
        }
    }

//-->
</script>
</body>
</html>


Last edited by vic318ic on Tue Nov 29, 2005 12:23 pm; edited 2 times in total
Back to top
View user's profile Send private message
allthingschildren
Newbie


Joined: 05 Nov 2005
Posts: 10
Location: Austin, TX

PostPosted: Tue Nov 29, 2005 12:02 pm    Post subject: Included file Reply with quote

Sounds like a standard header type of include... look somewhere in your script for like include('includes/header.php') or anything related to "header"... at least that would be my best guess Very Happy you can also try pasting some of the portions of the script in question, the one that's actually including this other file, and maybe we can help more when we see some of the stuff being included Smile

Richard.
Back to top
View user's profile Send private message Visit poster's website
vic318ic
Newbie


Joined: 29 Nov 2005
Posts: 6

PostPosted: Tue Nov 29, 2005 12:16 pm    Post subject: Re: Included file Reply with quote

allthingschildren wrote:
Sounds like a standard header type of include... look somewhere in your script for like include('includes/header.php') or anything related to "header"... at least that would be my best guess Very Happy you can also try pasting some of the portions of the script in question, the one that's actually including this other file, and maybe we can help more when we see some of the stuff being included Smile

Richard.


Thanks richard for the quick reply, I just edited my original post beceause i found where that stuff was coming from. I had put it in the crop.php file i created forgetting that I had included my normal hearder file already.. but im having problems with IE, and a kink iwth firefox.
Back to top
View user's profile Send private message
allthingschildren
Newbie


Joined: 05 Nov 2005
Posts: 10
Location: Austin, TX

PostPosted: Tue Nov 29, 2005 12:30 pm    Post subject: Div wrappers Reply with quote

yep, this was one of my original problems... This code doesn't like to be placed in nested div containers, so see what happens if you take the 2 outer div's away, see if that helps it start working right in both Smile

Richard.
Back to top
View user's profile Send private message Visit poster's website
vic318ic
Newbie


Joined: 29 Nov 2005
Posts: 6

PostPosted: Tue Nov 29, 2005 12:40 pm    Post subject: Reply with quote

I took it out of the nested divs.. which of course screwed the whole alignment of my page now.. but it still didnt work. In FF its still works, although the table is not in the right position anymore because its out of the nested div...

how did you get around it? did you redo your header file for the croop pages?
Back to top
View user's profile Send private message
vic318ic
Newbie


Joined: 29 Nov 2005
Posts: 6

PostPosted: Tue Nov 29, 2005 12:44 pm    Post subject: Reply with quote

I completely removed my header file and its still not displaying correctly. The crop div is jammed up in the top left of the table...
Code:

      
<html>
<head></head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<div id="theCrop" style="position:absolute;background-color:transparent;border:1px solid yellow;width:112px;height:159px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transbg.png',sizingMethod='scale');"></div>
<table border="1" align="center"><tr><td align="center" ><strong>cruz.JPG (640 x 480)</strong></td></tr>
<tr><td><img src="/dev/uploaded/cruz.JPG" width="640" height="480" alt="crop this image" name="theImage"></td></tr>
<tr><td align="center"><input type="submit" value="Create Headshot" id="submiter" onClick="my_Submit();"></td></tr>
</table>
<script type="text/javascript">
<!--

    SET_DHTML("theCrop"+MAXOFFLEFT+0+MAXOFFRIGHT+640+MAXOFFTOP+0+MAXOFFBOTTOM+480+MAXWIDTH+640+MAXHEIGHT+480+MINHEIGHT+159+MINWIDTH+112,"theImage"+NO_DRAG);

    dd.elements.theCrop.moveTo(dd.elements.theImage.x, dd.elements.theImage.y);
    dd.elements.theCrop.setZ(dd.elements.theImage.z+1);
    dd.elements.theImage.addChild("theCrop");
    dd.elements.theCrop.defx = dd.elements.theImage.x;

    function my_DragFunc()
    {
        dd.elements.theCrop.maxoffr = dd.elements.theImage.w - dd.elements.theCrop.w;
        dd.elements.theCrop.maxoffb = dd.elements.theImage.h - dd.elements.theCrop.h;
        dd.elements.theCrop.maxw    = 640;
        dd.elements.theCrop.maxh    = 480;
    }

    function my_ResizeFunc()
    {
        dd.elements.theCrop.maxw = (dd.elements.theImage.w + dd.elements.theImage.x) - dd.elements.theCrop.x;
        dd.elements.theCrop.maxh = (dd.elements.theImage.h + dd.elements.theImage.y) - dd.elements.theCrop.y;
    }

    function my_Submit()
    {self.location.href = '/dev/crop.php?file=cruz.JPG&sx=' +             (dd.elements.theCrop.x - dd.elements.theImage.x) + '&sy=' +
            (dd.elements.theCrop.y - dd.elements.theImage.y) + '&ex=' +
            ((dd.elements.theCrop.x - dd.elements.theImage.x) + dd.elements.theCrop.w) + '&ey=' +
            ((dd.elements.theCrop.y - dd.elements.theImage.y) + dd.elements.theCrop.h);
    }

    function my_SetResizingType(proportional)
    {
        if (proportional)
        {
            dd.elements.theCrop.scalable  = 1;
            dd.elements.theCrop.resizable = 0;
        }
        else
        {
            dd.elements.theCrop.scalable  = 0;
            dd.elements.theCrop.resizable = 1;
        }
    }

//-->
</script></body></html>
[/code]
Back to top
View user's profile Send private message
allthingschildren
Newbie


Joined: 05 Nov 2005
Posts: 10
Location: Austin, TX

PostPosted: Tue Nov 29, 2005 2:03 pm    Post subject: Actually... Reply with quote

I'm kinda new to the whole web dev scene, not even a year old yet Very Happy All of the layout work I do is with tables, as I haven't gotten fluent w/ div elements yet Very Happy I was putting this into a site for some other people, and they *did* use divs, and so I ended up just having to use a table structure in place of the divs... as long as you're not using overlapping div layers, it should look the same in the end Very Happy

Richard.

p.s. if you know of any good div tutorials, i'd love to learn em, i hear they're on the way to obsoleting tables these days Smile
Back to top
View user's profile Send private message Visit poster's website
vic318ic
Newbie


Joined: 29 Nov 2005
Posts: 6

PostPosted: Tue Nov 29, 2005 3:04 pm    Post subject: Re: Actually... Reply with quote

allthingschildren wrote:
I'm kinda new to the whole web dev scene, not even a year old yet Very Happy All of the layout work I do is with tables, as I haven't gotten fluent w/ div elements yet Very Happy I was putting this into a site for some other people, and they *did* use divs, and so I ended up just having to use a table structure in place of the divs... as long as you're not using overlapping div layers, it should look the same in the end Very Happy

Richard.

p.s. if you know of any good div tutorials, i'd love to learn em, i hear they're on the way to obsoleting tables these days Smile


Got it to work, but its still pretty weird how it worked. I really didnt do anyting differently, i just uploaded it to my production webserver which runs linux and boom, everything works fine.

ITs weird because the rendering of the images and placement of elements should be a client side process.

When i was trying to fix it on my dev winbox it never worked for IE and still doesnt. FF works flawlessly. OH well, i lucked out.

As far as css and div's. I remember making the switch, it was a pain, it seemed like designing with tables was alot easier and it def has its advantages, but using div's is the way to go. What frustrates me the most about divs is trying to get two divs side by side. You typically do it with the 'float' parameter, but its kinda finkiny on IE/FF . I cant really recommend a good tut, my best advice would be to constantly google everything.

Thanks for the help, the time in between you responding made me keep pluggin away at it, so you did help me out alot. Laughing Thanks.

BTW, this is such a sweet tool. Creating a standard image cutout works so well.
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Crop Canvas All times are GMT - 5 Hours
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group