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.


quite messy when warapped with DIVs

 
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
Yanay
Newbie


Joined: 29 Apr 2004
Posts: 1

PostPosted: Thu Apr 29, 2004 4:33 am    Post subject: quite messy when warapped with DIVs Reply with quote

Hi,

can anyone help we with this:

The files work fine AS IS, but if I try to wrap the whole thing
into an absolute positioned DIV - the whole thing gets a little messy,
and the image doesn't synchronize with crop window.

I tried just about everything I can think of,
PLEASE HELP!

p.s. : I did positioned the JS right after the <BODY>

Thanks,
Yanay Z.
Back to top
View user's profile Send private message
amnuts
Site Admin


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

PostPosted: Thu Apr 29, 2004 10:22 am    Post subject: Re: quite messy when warapped with DIVs Reply with quote

Hi Yanay , and welcome ot the board.

Yanay wrote:
The files work fine AS IS, but if I try to wrap the whole thing into an absolute positioned DIV - the whole thing gets a little messy,
and the image doesn't synchronize with crop window.


I got your email re this, and started to look into it on my lunch break. Didn't get very far, mind you. The image and so on can be positioned easily, but the cropping area window doesn't appear on the picture at all. I assume this is the same kind of result you're getting?

My first thought is that the answer lies in the drag/drop javascript somewhere. Perhaps the website of that script holds the answer? (the address is in the documentation and on the project website - I just can't be bothered to go look it up right now. Wink )

Yanay wrote:
p.s. : I did positioned the JS right after the <BODY>


The javascript rendered by the 'loadJavascript' method should ALWAYS be the last thing displayed on the page.

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


Joined: 16 May 2004
Posts: 1

PostPosted: Sun May 16, 2004 2:39 am    Post subject: did this ever get resolved? Reply with quote

I'm having the exact same issue - any resolution. I could not find anyting an the other website....
Back to top
View user's profile Send private message
amnuts
Site Admin


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

PostPosted: Sun May 16, 2004 3:50 pm    Post subject: Reply with quote

Sorry, no resolution yet... Hell! I haven't even had a chance to look at the code past what I wrote on this board; I've been maxed out with work!

If I get a chance, I will... IF not, and someone else figures it out, please post up!

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


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

PostPosted: Fri Aug 06, 2004 8:34 am    Post subject: Reply with quote

Okay, it had been a while and to be honest I had forgotten about this issue. But, hopefully, you will be pleased to know that I have resolved it.

Find this line in the class.cropinterface.php class:

echo '<tr><td><img src="', $this->file, '" ', $this->img['sizes'][3], ' alt="crop this image" name="theImage"></td></tr>', "\n";

and replace it with this one:

echo '<tr><td><div id="theImage"><img src="', $this->file, '" ', $this->img['sizes'][3], ' alt="crop this image"></div></td></tr>', "\n";

and you'll probably need to tweak the table tag from this:

echo '<table border="1" style="border-collapse:collapse; border:1px solid black; width:', $this->img['sizes'][0], 'px;" align="center">';

to:

echo '<table border="1" style="position:relative;border-collapse:collapse; border:1px solid black; width:', $this->img['sizes'][0], 'px;">';

Now in my index.php file I have something like this:

PHP:
<?php <div style="position:absolute; top:100px; left:25px">
<?
php $ci->loadInterface($files[rand(0count($files)-1)]); ?>
</div> ?>


but it seems to work equally well if I do this:

PHP:
<?php

        $ci
->loadInterface($files[rand(0count($files)-1)]);
        
$ci->loadJavaScript();
        include 
"../../page_footer.php";

?>


There may be a few things to resolve, but first glance it seems promising.

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


Joined: 29 Nov 2005
Posts: 6

PostPosted: Tue Nov 29, 2005 1:41 pm    Post subject: still not working Reply with quote

thanks for doing the legwork on that.. its still not working for me for some reason.. when i apply the changes you made. It skewed the way FF displayed the image. The image now floated outside of the table. In IE, the crop div still cant move.. this is so frustraing. I just want my site header and footer to be included in this script and its proving to be quite the challenge..

Code:

here's my output with the changes:

<script type="text/javascript" src="wz_dragdrop.js"></script>
<div id="theCrop" style="z-index:4;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="0" align="center" cellspacing="0" cellpadding="0" style="position:relative;border-collapse:collapse; border:1px solid black; width:640px;"><tr class="header-grey">
<td style="padding: 2px; border: 1px solid ;" align="center" >
<strong>cruz.JPG (640 x 480)</strong></td></tr>
<tr><td style="padding: 2px;">
<div id="theImage"><img src="/dev/uploaded/cruz.JPG" width="640" height="480" alt="crop this image" name="theImage"></div></td></tr>
<tr><td align="center" style="padding: 2px;" ><input type="submit" class="submit" value="Create Headshot" id="submiter" onClick="my_Submit();"></td></tr>
</table>
</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=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>
Back to top
View user's profile Send private message
persod
Newbie


Joined: 17 Jan 2006
Posts: 3

PostPosted: Fri Jan 20, 2006 4:42 am    Post subject: My solution... Reply with quote

Had the same problem. Fixed by moving most of the code for the page to the cropinterface file and echoing them back, and voila! all div's worked perfectly fine. (Don't ask me why) Maybe you could try this?
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
Page 1 of 1

 
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