Solved

Moo Crop JS in dot net page keeps breaking

Posted on 2009-04-04
10
704 Views
Last Modified: 2012-06-21
Im trying to us MooCrop (http://www.nwhite.net/MooCrop/ ) and cant get the script to run in my aspx page.  Can some show me what Im doing wrong. I get not response when I run the code or it breaks. Pasted code below.

Thanks!

I have the Moo Crop JS files in the same directory as this aspx page.
mootools.js
MooCrop.js


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="placeOrder.aspx.cs" Inherits="site_PlaceOrder" %>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Crop Image Page</title>

    

 <script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script>

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

             

     window.addEvent('load',function(){

       var crop new MooCrop('crop_example1'); 

        });   
 

 </script>

 

</head>

<body>

    <form id="form1" runat="server">

    <div>

    

        Image For Cropping.<br />

        

        <img src="crop_example1.jpg" id="crop_example1"/>

        

     </div>

    </form>

</body>

</html>

Open in new window

0
Comment
Question by:bmanmike39
  • 5
  • 5
10 Comments
 
LVL 5

Expert Comment

by:Pantalaim0n
ID: 24068841
I'm not sure, but I think you can't put inline JavaScript within a <script> tag that also has a src attribute.

Maybe try:

<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script>

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

<script type="text/javascript">

    window.addEvent('load',function(){

       var crop new MooCrop('crop_example1'); 

    });   

</script>

Open in new window

0
 

Author Comment

by:bmanmike39
ID: 24068909
Tried and i get a runtime error.
0
 
LVL 5

Expert Comment

by:Pantalaim0n
ID: 24068919
Can you give some details on the runtime error you got?
0
 
LVL 5

Expert Comment

by:Pantalaim0n
ID: 24068932
Ah, just noticed your call to the MooCrop function is faulty. Forgot the = sign:

var crop = new MooCrop('crop_example1'); 

Open in new window

0
 

Author Comment

by:bmanmike39
ID: 24068935
a runtime error occurred  do you wish to debug  line 13  error: Expected";"

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:bmanmike39
ID: 24068961
I added the "=" now it gives the error "Microsoft JScript runtime error: Object doesn't support this property or method"

this is line 32 of MooCrop.JS

Line is highlighted "if ( this.img.getTag() != )  return fasle
0
 

Author Comment

by:bmanmike39
ID: 24068974
This is the mooCrop.js file
/***

 * MooCrop (v. rc-1 - 2007-10-24 )

 *

 * @version			rc-1

 * @license			BSD-style license

 * @author			nwhite - < nw [at] nwhite.net >

 * @infos			http://www.nwhite.net/MooCrop/

 * @copyright		Author

 * 
 

 */

var MooCrop = new Class({
 

	calculateHandles : true,

	current : {},
 

	options : {

		maskColor : 'black',

		maskOpacity : '.4',

		handleColor : 'blue',

		handleWidth : '8px',

		handleHeight : '8px',

		cropBorder : '1px dashed blue',

		min : { 'width' : 50, 'height' : 50 },

		showMask : true, // false to remove, helps on slow machines

		showHandles : false // hide handles on drag

	},
 

	initialize: function(el, options){

		this.setOptions(options);

		this.img = $(el);

		if ( this.img.getTag() != 'img') return false;

		

		this.resizeFunc = this.refresh.bindWithEvent(this);

		this.removeFunc = this.removeListener.bind(this);
 

		this.buildOverlay();

		this.setup();

	},
 

	setup: function(){

		

		$(this.cropArea).setStyles({

			'width': this.options.min.width, 

			'height': this.options.min.height,

			'top' : (this.img.height - this.options.min.height)/2,

			'left': (this.img.width - this.options.min.width) / 2 

		});

		

		this.current.crop = this.crop = this.getCropArea();

		

		this.handleWidthOffset = this.options.handleWidth.toInt() / 2;

		this.handleHeightOffset = this.options.handleHeight.toInt() /2;

		

		this.fixBoxModel();

		this.drawMasks();

		this.positionHandles();

	},
 

	getCropArea : function(){

		var crop = this.cropArea.getCoordinates();

		crop.left -= this.offsets.x; crop.right -= this.offsets.x; // calculate relative (horizontal)

		crop.top -= this.offsets.y; crop.bottom  -= this.offsets.y; // calculate relative (vertical)

		return crop;

	},
 

	fixBoxModel : function(){

		var diff = this.boxDiff = (this.crop.width - this.options.min.width)/2;
 

		var b = this.bounds = { 'top' : diff, 'left' : diff, 

			'right' : this.img.width+(diff*2), 'bottom' : this.img.height+(diff*2),

			'width' : this.options.min.width+(diff*2), 'height' : this.options.min.height+(diff*2) };

		

		this.wrapper.setStyles({

			'width' : b.right, 'height' : b.bottom,

			'background' : 'url('+this.img.src+') no-repeat '+diff+'px '+diff+'px'

		});

		this.north.setStyle('width',b.right);

		this.south.setStyle('width',b.right);

	},
 

	activate : function(event,handle){

		event.stop();

		this.current = { 'x' : event.page.x, 'y' : event.page.y, 'handle' : handle, 'crop' : this.current.crop };

		if(this.current.handle == 'NESW' && !this.options.showHandles) this.hideHandles();

		this.fireEvent('onBegin',[this.img.src,this.getCropInfo(),this.bounds,handle]);

		document.addListener('mousemove', this.resizeFunc);

		document.addListener('mouseup', this.removeFunc);

	},
 

	removeListener : function(){

		if( this.current.handle == 'NESW' && !this.options.showHandles) this.showHandles();

		document.removeListener('mousemove', this.resizeFunc);

		document.removeListener('mouseup', this.removeFunc);

		this.crop = this.current.crop;

		this.fireEvent('onComplete',[this.img.src,this.getCropInfo(),this.bounds,this.current.handle]);

	},
 

	refresh : function(event){

		var xdiff = this.current.x - event.page.x;

		var ydiff = this.current.y - event.page.y;
 

		var b = this.bounds;  var c = this.crop;  var handle = this.current.handle; var styles = {}; //saving bytes

		var dragging = (handle.length > 2) ? true : false;

		

		if( handle.contains("S") ){//SOUTH

			if(c.bottom - ydiff > b.bottom ) ydiff = c.bottom - b.bottom; // box south

			if(!dragging){

				if( (c.height - ydiff) < b.height ) ydiff = c.height - b.height; // size south

				styles['height'] = c.height - ydiff; // South handles only

			}

		}

		if( handle.contains("N") ){//NORTH

			if(c.top - ydiff < b.top ) ydiff = c.top; //box north

			if(!dragging){

				if( (c.height + ydiff ) < b.height ) ydiff = b.height - c.height; // size north

				styles['height'] = c.height + ydiff; // North handles only

			}

			styles['top'] = c.top - ydiff; // both Drag and N handles

		}

		if( handle.contains("E") ){//EAST

			if(c.right - xdiff > b.right) xdiff = c.right - b.right; //box east

			if(!dragging){

				if( (c.width - xdiff) < b.width ) xdiff = c.width - b.width; // size east

				styles['width'] = c.width - xdiff;

			}

		}

		if( handle.contains("W") ){//WEST

			if(c.left - xdiff < b.left) xdiff = c.left; //box west

			if(!dragging){

				if( (c.width + xdiff) < b.width ) xdiff = b.width - c.width; //size west

				styles['width'] = c.width + xdiff;

			}

			styles['left'] = c.left - xdiff; // both Drag and W handles

		}

		var preCssStyles = $merge(styles);

		if( $defined(styles.width)) styles.width -= this.boxDiff*2;

		if( $defined(styles.height)) styles.height -= this.boxDiff*2;
 

		this.cropArea.setStyles(styles);

		this.getCurrentCoords(preCssStyles);

		this.drawMasks();

		this.positionHandles();

		this.fireEvent('onCrop',[this.img.src,this.getCropInfo(),b,handle]);

	},
 

	getCurrentCoords : function(changed){

		var current = $merge(this.crop);

		

		if($defined(changed.left)){

			current.left = changed.left;

			if($defined(changed.width)) current.width = changed.width;

			else current.right = current.left + current.width;

		}

		if($defined(changed.top)){

			current.top = changed.top;

			if($defined(changed.height)) current.height = changed.height;

			else current.bottom = current.top + current.height;

		}

		if($defined(changed.width) && !$defined(changed.left)){

			current.width = changed.width; current.right = current.left + current.width;

		}

		if($defined(changed.height) && !$defined(changed.top)){

			current.height = changed.height; current.bottom = current.top + current.height;

		}

		this.current.crop = current;

	},
 

	drawMasks : function(){

		if(!this.options.showMask) return;

		var b = this.bounds;  var c = this.current.crop; var handle = this.current.handle;

		this.north.setStyle('height', c.top + 'px' );

		this.south.setStyle('height', b.bottom  - c.bottom  + 'px');

		this.east.setStyles({ height: c.height + 'px', width: b.right  - c.right + 'px',  top: c.top  + 'px', left: c.right + 'px'});

		this.west.setStyles({ height: c.height + 'px', width: c.left + 'px', top: c.top + 'px'});

	},
 

	positionHandles: function(){

		if(!this.calculateHandles) return;

		var c = this.current.crop; var wOffset = this.handleWidthOffset; var hOffset = this.handleHeightOffset;
 

		this.handles.get('N').setStyles({'left' : c.width / 2 - wOffset + 'px', 'top' : - hOffset + 'px'});

		this.handles.get('NE').setStyles({'left' : c.width - wOffset + 'px', 'top' : - hOffset + 'px'});

		this.handles.get('E').setStyles({ 'left' : c.width - wOffset + 'px', 'top' : c.height / 2 - hOffset + 'px'});

		this.handles.get('SE').setStyles({'left' : c.width - wOffset + 'px', 'top' : c.height - hOffset + 'px'});

		this.handles.get('S').setStyles({'left' : c.width / 2 - wOffset + 'px', 'top' : c.height - hOffset + 'px'});

		this.handles.get('SW').setStyles({'left' : - wOffset + 'px', 'top' : c.height - hOffset + 'px'});

		this.handles.get('W').setStyles({'left' : - wOffset + 'px', 'top' : c.height / 2 - hOffset + 'px'});

		this.handles.get('NW').setStyles({'left' : - wOffset + 'px', 'top' : - hOffset + 'px'});

	},
 

	hideHandles: function(){

		this.calculateHandles = false;

		this.handles.each(function(handle){

			handle.setStyle('display','none');

		});

	},
 

	showHandles: function(){

		this.calculateHandles = true;

		this.positionHandles();

		this.handles.each(function(handle){

			handle.setStyle('display','block');

		});

	},
 

	buildOverlay: function(){

		var o = this.options;
 

		this.wrapper = new Element("div", {

			'styles' : {'position' : 'relative', 'width' : this.img.width, 'height' : this.img.height, 'background' : 'url('+this.img.src+') no-repeat' , 'float' : this.img.getStyle('float')  }

		}).injectBefore(this.img);
 

		this.img.setStyle('display','none');
 

		this.offsets = { x : this.wrapper.getLeft(), y : this.wrapper.getTop() };
 

		if(this.options.showMask){		// optional masks

			var maskStyles = { 'position' : 'absolute', 'overflow' : 'hidden', 'background-color' : o.maskColor, 'opacity' : o.maskOpacity};

			this.north = new Element("div", {'styles' : maskStyles}).injectInside(this.wrapper);

			this.south = new Element("div", {'styles' : $merge(maskStyles,{'bottom':'0px'})}).injectInside(this.wrapper);

			this.east =  new Element("div", {'styles' : maskStyles}).injectInside(this.wrapper);

			this.west =  new Element("div", {'styles' : maskStyles}).injectInside(this.wrapper);

		}
 

		this.cropArea = new Element("div", { 'styles' : { 'position' : 'absolute', 'top' : '0px', 'left' : '0px', 'border' : o.cropBorder, 'cursor' : 'move' },

		'events' : {

			'dblclick' : function(){ this.fireEvent('onDblClk',[this.img.src,this.getCropInfo(),this.bounds])}.bind(this),

			'mousedown' : this.activate.bindWithEvent(this,'NESW')}

		}).injectInside(this.wrapper);
 

		this.handles = new Hash();

		['N','NE','E','SE','S','SW','W','NW'].each(function(handle){

			this.handles.set(handle, new Element("div", {

			'styles' : { 'position' : 'absolute', 'background-color' : o.handleColor, 

						 'width' : o.handleWidth, 'height' : o.handleHeight, 'overflow' : 'hidden', 'cursor' : (handle.toLowerCase()+'-resize')},

			'events' : {'mousedown' : this.activate.bindWithEvent(this,handle)}

			}).injectInside(this.cropArea));

		},this);
 

	},
 

	getCropInfo : function(){

		var c = $merge(this.current.crop);

		c.width -= this.boxDiff*2; c.height -= this.boxDiff*2;

		return c;

	},
 

	removeOverlay: function(){

		this.wrapper.remove();

		this.img.setStyle('display','block');

	}
 

});

MooCrop.implement(new Events, new Options);

Open in new window

0
 
LVL 5

Expert Comment

by:Pantalaim0n
ID: 24068996
Hmm, never heard of a method named getTag(), could be a mootools element extension...
you could try changing this.img.getTag() to this.img.tagName.toLowerCase()
All it does is checking if it's an image tag or not..
0
 

Author Comment

by:bmanmike39
ID: 24069041
That helped a some, but now when i try to resize the box by pulling on the handles, it breaks

MS runtime error:' Page.x' is null or not an object

Line 100 of MooCrop.js
0
 
LVL 5

Accepted Solution

by:
Pantalaim0n earned 500 total points
ID: 24069399
Starting to wonder if your mootools framework is complete and/or up to date
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now