Forum FAQForum FAQSearchSearch MemberlistMemberlist Forum ignore listForum ignore list RegisterRegister ProfileProfile Log in to check your private messagesLog in to check your private messages Log inLog in
JS - crop box drugi put

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side
View previous topic :: View next topic  
Author Message
jojo



Joined: 27 Jan 2005
Posts: 1591
Location: insula aurea
PostPosted: 09.01.2006 14:32    Post subject: JS - crop box drugi put Add user to your forum ignore list Reply with quote
http://david.blackledge.com/XBMDrawLibrary.html - ovaj primjer je točno ono što mi treba ali ne radi u FF-u, znate li možda ašto ne radi ili link do nečeg sličnog što bi radilo?
kao npr http://encytemedia.com/demo/cropper/ u kojem se nažalost ne uspijevam snaći
radi se dakle o crtanju boxa preko slike povlačenjem miša i da se na kraju slika poveća na sadržaj unutar boxa

išla sam proučavati ova dva linka i zaključak je da prva verzija ne radi u FF-u a druga ne radi u IE-u, zaista lijepo Cool

_________________
deviant / malomorgen / videoholik / cimer fraj
Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
jojo



Joined: 27 Jan 2005
Posts: 1591
Location: insula aurea
PostPosted: 11.01.2006 09:52    Post subject: Add user to your forum ignore list Reply with quote
Probat ću još jednom pitati s konkretnim primjerom koji sam pronašla na netu i samo malo modificirala, lik kaže da radi u IE-u i mozilli ali FF ponovno ne radi - je li moguće ovo modificirati pa da proradi i u FF-u?
Evo koda:

<html>
<head>
<script>
var moz = ((document.all)? false : true);
var ie = ((document.all)? true : false);

function ImageBox(imgId) {
var origX, origY;
var imgPosition, imgDimension;
var dragDiv, overLayer;
var isCropped = false;

function init() {
var img = document.getElementById(imgId);
imgPosition = ElementUtil.getElementPosition(img);
imgDimension = ElementUtil.getElementDimension(img);

// I put this div over the image to remove drag behaviour
// on image in mozilla.
if(moz) {
overLayer = document.createElement("div");
document.body.appendChild(overLayer);
overLayer.style.position = "absolute";
overLayer.style.left = imgPosition.left;
overLayer.style.top = imgPosition.top;
overLayer.style.width = imgDimension.width;
overLayer.style.height = imgDimension.height;
}

dragDiv = document.createElement("div");
document.body.appendChild(dragDiv);
dragDiv.style.visibility = "hidden";
dragDiv.style.position = "absolute";
dragDiv.style.border = "1px solid blue";
dragDiv.style.width = "0px";
dragDiv.style.height = "0px";
dragDiv.style.zIndex = 3;
dragDiv.style.left = "20px";
dragDiv.style.top = "20px";
dragDiv.style.overflow = "hidden";

if(ie) {
// Removes default drag behaviour on image
ElementUtil.addEventListener(img, "drag", function() {return false;});
// Adds my "drag" behaviour to the image
ElementUtil.addEventListener(img, "mousedown", mouseDown);
}
if(moz) {
ElementUtil.addEventListener(overLayer, "mousedown", mouseDown);
}
}

function mouseDown(evt) {
if(!evt) {
evt = event;
}
dragDiv.style.visibility = "visible";
dragDiv.style.left = evt.clientX;
dragDiv.style.top = evt.clientY;
dragDiv.style.width = "1px";
dragDiv.style.height = "1px";
origX = evt.clientX;
origY = evt.clientY;
ElementUtil.addEventListener(document, "mousemove", mouseMove);
ElementUtil.addEventListener(document, "mouseup", mouseUp);
ElementUtil.removeEventListener(document, "mousedown", mouseDown);
evt.cancelBubble = true;
// Removes default drag behaviour on image
ElementUtil.addEventListener(img, "drag", function() {return false;});
return false;
}

function mouseMove(evt) {
if(!evt) {
evt = event;
}
if(evt.clientX < imgPosition.left) {
dragDiv.style.left = imgPosition.left;
dragDiv.style.width = origX - imgPosition.left;
}
else if(evt.clientX > (imgPosition.left + imgDimension.width)) {

dragDiv.style.left = origX;
if(ie) {
dragDiv.style.width = imgDimension.width - (origX - imgPosition.left);
}
else if(moz) {
dragDiv.style.width = imgDimension.width - (origX - imgPosition.left) - 2;
}
}
else {
var newWidth = evt.clientX - origX;
var newLeft = -1;
if(newWidth < 0) {
if(evt.clientX > imgPosition.left) {
newLeft = evt.clientX;
}
newWidth = origX - evt.clientX;
}
if(newLeft != -1) {
dragDiv.style.left = newLeft;
}
dragDiv.style.width = newWidth;
}

if(evt.clientY < imgPosition.top) {
dragDiv.style.top = imgPosition.top;
dragDiv.style.height = origY - imgPosition.top;
}
else if(evt.clientY > (imgPosition.top + imgDimension.height)) {

dragDiv.style.top = origY;
if(ie) {
dragDiv.style.height = imgDimension.height - (origY - imgPosition.top);
}
else if(moz) {
dragDiv.style.height = imgDimension.height - (origY - imgPosition.top) - 2;
}
}
else {
var newHeight = evt.clientY - origY;
var newTop = -1;
if(newHeight < 0) {
if(evt.clientY > imgPosition.top) {
newTop = evt.clientY;
}
newHeight = origY - evt.clientY;
}
if(newTop != -1) {
dragDiv.style.top = newTop;
}
dragDiv.style.height = newHeight;
}
// Removes default drag behaviour on image
ElementUtil.addEventListener(img, "drag", function() {return false;});

}

function mouseUp(evt) {
if(!evt) {
evt = event;
}
ElementUtil.removeEventListener(document, "mousemove", mouseMove);
ElementUtil.removeEventListener(document, "mouseup", mouseUp);
// Removes default drag behaviour on image
ElementUtil.addEventListener(img, "drag", function() {return false;});
if(ie) {
// Adds my "drag" behaviour to the image
ElementUtil.addEventListener(img, "mousedown", mouseDown);
}
if(moz) {
ElementUtil.addEventListener(overLayer, "mousedown",mouseDown);
}
}

init();

this.getX = function() {
return (parseInt(dragDiv.style.left) - parseInt(imgPosition.left));
}

this.getY = function() {
return (parseInt(dragDiv.style.top) - parseInt(imgPosition.top));
}

this.getWidth = function() {
return parseInt(dragDiv.style.width);
}

this.getHeight = function() {
return parseInt(dragDiv.style.height);
}

this.toggleCrop = function() {
var img = document.getElementById(imgId);
var str = "";
if(isCropped) {
str = "rect(auto auto auto auto)";
isCropped = false;
}
else {
var top = this.getY();
var left = this.getX();
var bottom = this.getY() + this.getHeight();
var right = this.getX() + this.getWidth();
if(moz) {
bottom = bottom + 2;
right = right + 2;
}
str = "rect(" + top + "px, " +
right + "px, " +
bottom + "px, " + left + "px)";
isCropped = true;
}
img.style.clip = str;
}

this.toString = function() {
var str = "Left: " + this.getX() + "px\n" +
"Top: " + this.getY() + "px\n" +
"Width: " + this.getWidth() + "px\n" +
"Height: " + this.getHeight() + "px";
return str;
}
}
ImageBox.boxes = new Array();
ImageBox.createBox = function(imgId) {
ImageBox.boxes[imgId] = new ImageBox(imgId);
}
ImageBox.getBox = function(imgId) {
return ImageBox.boxes[imgId];
}

var ElementUtil = new Object();
ElementUtil.getElementPosition = function(elt){
var position = new Object();
if(elt.style.position == "absolute") {
position.left = parseInt(elt.style.left);
position.top = parseInt(elt.style.top);
}
else {
position.left = ElementUtil.calcPosition(elt, "Left");
position.top = ElementUtil.calcPosition(elt, "Top");
}
return position;
}

ElementUtil.calcPosition = function(elt, dir){
var tmpElt = elt;
var pos = parseInt(tmpElt["offset" + dir]);
while(tmpElt.tagName != "BODY") {
tmpElt = tmpElt.offsetParent;
pos += parseInt(tmpElt["offset" + dir]);
}
return pos;
}

ElementUtil.getElementDimension = function(elt) {
var dim = new Object();
dim.width = elt.offsetWidth;
dim.height = elt.offsetHeight;
return dim;
}

ElementUtil.addEventListener = function(o, type, handler) {
if(ie) {
o.attachEvent("on" + type, handler);
}
else if(moz) {
o.addEventListener(type, handler, false);
}
}

ElementUtil.removeEventListener = function(o, type, handler) {
if(ie) {
o.detachEvent("on" + type, handler);
}
else if(moz) {
o.removeEventListener(type, handler, false);
}
}

window.onload = function() {
ImageBox.createBox("image");
ImageBox.createBox("image3");
}

</script>
</head>
<body>
<img style="position:absolute;left:100px;top:100px" id="image" src="http://mozilla.org/frontpage/productShotFirebird.jpg">
</body>
</html>

btw jedini script s neta koji radi otprilike ovo u FF-u a kojeg sam našla je onaj navedeni u gornjem postu koji je meni stvarno kompliciran. Mogla bih to kombinirati s ovim kodom gore pa da u FF-u vrti jedan script a u IE-u drugi al mi to nije baš neko rješenje. Radilo bi ali....

_________________
deviant / malomorgen / videoholik / cimer fraj
Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Adrian



Joined: 02 Apr 2004
Posts: 692
Location: Around & about
PostPosted: 11.01.2006 13:50    Post subject: Add user to your forum ignore list Reply with quote
Vidjeh sličan alat u aplikaciji " gallery " koja se može nabaviti kao appserv addon. Probaj to proguglati.

_________________
The quest for certainty blocks the search for meaning. Uncertainty is the very condition to impel a man to unfold his powers.
http://origami.hr
Back to top
View user's profile Send private message Visit poster's website
jojo



Joined: 27 Jan 2005
Posts: 1591
Location: insula aurea
PostPosted: 11.01.2006 14:35    Post subject: Add user to your forum ignore list Reply with quote
već sam proučavala desetak jscipta koji rade ovo...

oni koji rade u IE-u rade tako da naprave transparentni div s borderom pa ga resajzaju
a oni koji rade u FF-u naprave transparentni gif image pa s njim manipuliraju

u FF-u ovo s DIV-om izgledan ne radi jer prelaskom preko slike koja je u pozadini brovser preuzima neki behaviour vezan uz tu sliku a div ostavi... to se inače događa i u IE-u samo postoji način da se taj default behaviour makne

// Removes default drag behaviour on image
ElementUtil.addEventListener(img, "drag", function() {return false;});

ElementUtil.addEventListener = function(o, type, handler) {
if(ie) {
o.attachEvent("on" + type, handler);
}
else if(moz) {
o.addEventListener(type, handler, false);
}
}

...u ovom primjeru su napravili i alternativu te funkcije za mozzilu ali meni to kod testiranja ne radi

sve u svemu izgleda dosta komplicirano, i možda je na kraju najbolje rješenje raditi za IE s DIV-om a za FF-paralelno s gif-om
... a već mi je lagano pun kufer Brick wall

btw. ako to išta znači web je na win serveru, koristi asp i .NET, i Integraphov webmap

_________________
deviant / malomorgen / videoholik / cimer fraj
Back to top
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
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.    mi3dot.org Forum Index -> Client-side All times are GMT + 1 Hour
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