setting up jquery for drawing with Javascript - part 1 in a series

marking where the user has clicked


For the next thing, I want to demonstrate, I want to use a mouse for my program to receive input from the user. While handling mouse events is possible in native Javascript, javascript libraries make the task a lot easier. So, I will use one. JQuery seems to have the most momemtum. So, I will use that one.

This will be the first hub in another series. In this first hub, I will just get things, setup.

Putting a dot where the user clicks should be sufficient to get the mechanics I will want for the
next hub, in place.

jQuery setup is covered in lots of other places. The only twist I am adding is to merge it in with the graphing calculator application I developed and explained in my last series. Later I will expand how the user interacts with the graph using jQuery.

style sheet stuff

First I add a style for the target of mouse events.

.mousetarget { position: absolute; top:50; left:50; z-index: 2; opacity: "0%"; cursor:pointer; }

including jquery

Next, I include the jQuery library.  The commented out inclusion is to retrieve the jQuery library from a public server, but I want to be able to work while off-line.  So, I made a local copy.  The 1.4.4 and 1.4.2 are version numbers.  The latest is 1.5.1, as of this writing, but I doubt it will matter for what I want to do.

the hand-rolled javascript

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

<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>

I add a container for the mouse target style.

<div id="mousetarget" class="mousetarget" ></div>

Finally, I add some script to do what I want; put a dot where the user clicks:

<script type="text/javascript" >
$( document ).ready( function () {
	alert( "hello jquery world!" );
	$( "#mousetarget" ).css( "top", unitsquare.screeny1 );
	$( "#mousetarget" ).css( "left", unitsquare.screenx0 );
	$( "#mousetarget" ).height( unitsquare.screeny0 - unitsquare.screeny1 );
	$( "#mousetarget" ).width( unitsquare.screenx1 - unitsquare.screenx0 );
	$( "#mousetarget" ).bind( "click", function (e) {
		drawrectangle( "blackrectangle", e.clientY + 2, e.clientX - 2, 4, 4 );

jquery usage explained

The alert just lets me know everything is setup ok.  No typos that keep javascript from running, etc.  $ is the cryptic version of the jQuery function.  "#mousetarget" is an id based selector, that describes what DOM element I want jQuery to opperate on.

The jQuery function includes lots of methods that do useful things.  I only used four of them: css, height, width and bind.  I'm not sure why the "top" and "left" style properties don't have their own functions, like height and width do.  bind associates a function with mouse-click events, if the mouse is over my target object when it is clicked.  drawrectangle is a function I wrote and explained in my previous series of hubs.  Anyway, it is what puts a black square where the user clicked.

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.

    Click to Rate This Article