Buy.Me.A.Beer

Like any coder, I highly appreciate a nice drink every now and then. If you like jQuery.PointAt, please consider buying me a beer, or even a very nice bottle of whiskey! I highly appreciate all gifts, but feel free to use the plugin even if you can't send me a beer right now. :)


Disclaimer: Just to make it clear, you're not buying a beer from me, you're buying a beer for me. I am of legal drinking age, and quite a bit older too. Money gifted this way might be used for something else than beer, like cat food for my Devon Rex called Fidel.


Select a drink:


jQuery.PointAt1.2

a simple jQuery plugin for pointing at stuff

To.Begin

To begin pointing at things, you need to include both jQuery.PointAt and a plugin that allows element rotation. If you use a plugin other than jqrotate you must specify the rotate functions name with the rotateFunction option.

			
<script src="jquery.pointat.min.js"
	type="text/javascript"></script>
<script src="jquery.rotate-1.0.1.min.js"
	type="text/javascript"></script>
			

Demo.1

Scroll the page. The arrow will always point to the "Buy me a beer" section, and will hide when the angle is greater than 342°.

The element is this way

How.Does.It.Work?

The basic functionality in this demo - that is, pointing to the menu - could have been initialized with just:

				
<img id="arrow1" src="arrow.png" />

<script>
	$("#arrow1").pointat({
		target: "#buymebeer"
	});
</script>
				

This is very simple, but to break it up, with $("#arrow1").pointat({...}) we're hooking the jQuery.PointIt plugin to the image with the id "arrow1", and with target: "#menu" we're the arrow to point towards the element with the id "menu". Simple! In this particular instance though we initialized the plugin with this:

(If this next part seems too complex, just jump past it. There's some simpler stuff ahead!)

				
<span id="demo1wrap" style="position: fixed;">
	<span id="demo1arrow">
		The menu is this way 
		<img id="arrow1" src="arrow.png" />
	</span>
</span>

<script>
	$("#arrow1").pointat({
		target: "#buymebeer",
		angleLessThan: 343,
		angleGreaterThan: 342,
		getAngleFrom: "#demo1wrap",
		angleLessThanFunc: function() {
			$("#demo1arrow").show();
		},
		angleGreaterThanFunc: function() {
			$("#demo1arrow").hide();
		}
	});
</script>
				

There's a few things added here, and that's because we want the arrow to vanish in this demo before it starts overlapping the "How does it work" section. Thus, we're hooking two functions to fire when the angle of the arrow reaches certain tresholds to show and hide the arrow. The tresholds are set with angleLessThan and angleGreaterThan, which take their values in degrees, and the functions are defined in angleLessThanFunc and angleGreaterThanFunc. getAngleFrom defines the element to count the angle to the target from. We're calculating the angle from the outermost wrapper, because calculating the angle from a hidden element doesn't work very well, and will cause flickering. We also have some text besides the arrow, so we've wrapped the whole thing in two spans: the outermost to have one span always visible (even though it wont have any visible content once the stuff inside has been hidden) to hook the angle calculation to, and an innermost span to have something to hide the text and image with. And that's it! You could of course hook whatever functions you wish with angleLessThanFunc and angleGreaterThanFunc.

Instead of hiding the arrow, we could also have used a sticky scroll plugin like jQuery Stick 'em stop the arrow from overlapping the text.

Demo.2

Drag the arrow. It'll always point to the target.

Drag me!

How.Does.It.Work?

This demo was initialized with:

				
<span id="pointer">Drag me!<br />
	<img id="arrow" src="arrow.png" />
</span>
<img id="target" src="target.png" />

<script>
	$("#pointer").draggable();
	$("#arrow").pointat({
		yCorrection: -50,
		xCorrection: -50,
		target: "#target",
		draggable: "#pointer"
	});
</script>
				

What's happening here, is that we're first of all making the container element pointer draggable with the jQuery UI function draggable(). We're again using a container element since there's some text associated with the arrow. Then when initializing jQuery.PointAt we're again settings the target, but now we're also defining the draggable element to let the plugin know to which element''s drag event it should hook it's listener to. What's more, we're settings some correction values (in pixels) with xCorrection and yCorrection. Sometimes this is necessary to get the arrow pointing towards the exact center of the target. Both negative and positive values are accepted.

Demo.3

Click on the boxes and drag the arrow. The arrow will always point towards the box last clicked.

Click me!Click me!Click me!

Drag me!

How.Does.It.Work?

And below is the code for the third demo. For clarity's sake the code for styling the boxes has been removed.

				
<table id="demoboxes">
<tr>
<td>
	<span id="demobox1">Click me!</span>
</td>
<td>
	<span id="demobox2">Click me!</span>
</td>
<td>
	<span id="demobox3">Click me!</span>
</td>
</tr>
</table>
<span id="pointer">Drag me!<br />
	<img id="arrow" src="arrow.png" />
</span>

<script>
	$("#pointer").draggable();
	$("#arrow").pointat({
		yCorrection: -50,
		xCorrection: -50,
		target: "#demobox1",
		draggable: "#pointer"
	});
	$("#demobox1").click(function() {
		$("#arrow").pointat({
			target: "#demobox1"
		});
	});
	$("#demobox2").click(function() {
		$("#arrow").pointat({
			target: "#demobox2"
		});					
	});
	$("#demobox3").click(function() {
		$("#arrow").pointat({
			target: "#demobox3"
		});					
	});
</script>
				

As you can see, there's no rocket sciense here either. The plugin is initialized in the same way as in demo 2, but this time we've hooked some functions to the click events on the demo table to change the target of the arrow. The settings you don't redeclare will stay the same as when the plugin was initialized.

Demo.4

Drag the target this time. If you can't trust just one arrow, here's 3 instead!


How.Does.It.Work?

And here's the code:

			
<img id="target" src="target.png" /><br />
<img class="arrows" src="arrow.png" />
<img class="arrows" src="arrow.png" />
<img class="arrows" src="arrow.png" />

<script>
	$("#target").draggable();
	$(".arrows").pointat({
		xCorrection: -50,					
		yCorrection: -50,
		target: "#target",
		draggable: "#target"
	});
</script>
				

This time we're initializing the plugin on the whole class .arrows, and since it's the target that's draggable, we're hooking the drag event listener to the element #target.

That's.It!

And there you have it! For full API documentation head to the API documentation page, or if you've seen enough you can download the plugin at the download page.



comments powered by Disqus