|
JavaScript - Tracking The Location Of A Movable Object
Hello,
I am currently working on a script that has a background image("target", i.e. the image with rings that you would fire a gun at) a movable image ("person1") which can be moved by the mouse, click and drag style. What I would like to be able to do is get the location (in pixels) of "person1" to update as it moves around the screen so that I could potentially calculate the distance between it and the center pixel of "target". However, my code currently only updates on the release (onmouseup I suppose?) of the image because I am using onMouseMove as my trigger and as long as it is dragging the image, it the mouse isn't "moving" because it is constant relative to this image. So, I am looking for any alternative suggestions on a method to find this information. I started working in HTML/javascript on Monday, but if you throw out any suggestions I don't understand, I'm sure I can just google it. My current code implementation includes: To make my image movable: Code: <STYLE>
@media all
{
move\:piece {
behavior: url(movable.htc);
cursor: move;
color: white;
background: transparent;
font: bold 10pt verdana;
mv--boundary:145 500 655 133;
z-index:4;
}
}
.bound {
position: absolute;
top: 100;
left: 100;
width: 120;
height: 120;
background: transparent
}
</STYLE>
and Code: <move:piece ><object><img id="person1" src="../../../../Project/person1.png" alt="person1.png, 1.2kB" title="person1.png, 1" height="15" width="10" onMouseMove=Tracker("coord"); style="z-index=4"></object></move:piece>
To find the position: Code: function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
}
function Tracker(coordID)
{
person_pos = findPos(person1);
document.getElementById(coordID).firstChild.nodeValue="(Left coordinate,Top Coordinate): ("+person_pos+")";
}
Thank you for your help, klarosa Similar Tutorialsif location is a property of window object that returns a string and im appending .indexOf() to location why is it not working?
hi, on my site: http://www.sbannister.co.uk/helix_site2/contact.html I am able to move my logo on my map, is there any way of locking it's position? thanks Code: <script language="JavaScript" type="text/javascript">
function confirmDelete(url){
var decision = confirm("Click OK to delete this post.");
if(decision == true){
window.location = url;
}
}
</script>
<!--HTML LATER ON -->
<a onclick="confirmDelete('deletePost.php?id=17')" href=''><img src='delete.png' alt='' title='Delete this post' /></a>
I get absolutely nothing out of this. The confirm box pops up, but a the URL never changes when I click OK. I have no clue what's going wrong here. I'm using Google Chrome to test this out if that helps. Also does not work in Firefox. Hi, I'm using the following Javascript code to show a div layer depending on the URL Code: <script type="text/javascript">
if (location.href.match(/folder/)) {
document.getElementById("div-layer").style.display="block";
}
</script>
This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example: http://www.domain.com/folder/sub-folder http://www.domain.com/folder/sub-folder2 etc. Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it? Thank you in advance. What are the differences between results of these two. Code: window.location.hostname or Code: document.location.hostname Since it is not clear to me where this post should fit in the forum, I'm just posting it here. Is it possible to create a tracking code that would allow me to: (1) a) Find out the identity of visitors to a certain website (a website unrelated to me and the visitors did not visit my website) b) The identity of those who recently searched for a certain keywords and/or... (2) Find out what websites certain individuals have recently visited (or visiting in real-time)? Just curious, what test case software have ya'll been using. Ive been using http://is.gd/h9SW1 this but were curious what others were using? It's pretty good btw, just curious what the rest of ya'll are doing for your testing process. Doesn't hurt to know all the resources that are out there, right!?
Hi, I wonder if anyone can help me. I have a header I use on my site which has a Javascript code for rotating banner ads. I'd like to try to track the clickthroughs on these ads and have been looking at the methods of doing this in google analytics, but they all seem to be for single links, such as the method he http://support.google.com/googleanal...n&answer=55527 which then don't work with the links as they are in the banner. I was wondering if anyone knew how I would be able to integrate the analytics code in that link into the banner I have, or of another method I can use to track clicks on the ads. Thanks! This is the banner I'm using: Code: <script type="text/javascript">function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
link = new initArray(
"http://www.jojingles.com",
"http://www.goals-solutions.com/",
"http://www.barleylands.co.uk/",
"http://www.blukangaroo.co.uk/onlineshop",
"http://www.explorelearning.co.uk/vebo",
"http://www.explorelearning.co.uk/vebo",
"http://www.allmumkind.com/",
"http://quintessencemassage.weebly.com",
"http://www.dw-beauty.co.uk",
"http://www.theclothestree.co.uk"
);
image = new initArray(
"http://www.essexmums.org/images/jojingleslong.gif",
"http://www.essexmums.org/images/goalssolutionbanner.jpg",
"http://www.essexmums.org/images/barleylandsbanner.jpg",
"http://www.essexmums.org/images/blukangaroo.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/allmumkind3.jpg",
"http://www.essexmums.org/images/quintessence.jpg",
"http://www.essexmums.org/images/dwbannerad.jpg",
"http://www.essexmums.org/images/clothestree.jpg"
);
text = new initArray(
"Jo Jingles",
"Goals Solution",
"Barleylands",
"Blu Kangaroo",
"Explore Lakeside",
"Explore Lakeside",
"Allmumkind",
"Quintessence",
"DK Beauty",
"The Clothes Tree"
);
function getrandom(){
var core2 = Math.floor(Math.random()*10); // amount of items in array
displaybanner(core2)
displaybanner(core2)
}
function displaybanner(theNum2){
var ranlink2 = link[theNum2];
var ranimage2 = image[theNum2];
var rantext2 = text[theNum2];
document.getElementById('theImg2').alt=rantext2;
document.getElementById('theImg2').src=ranimage2;
document.getElementById('theLink2').href=ranlink2;
}
</script><a href="#" target="_blank"
id="theLink2"><img src="" alt=""
id="theImg2" border="0"></a>
<script type="text/javascript">
getrandom();
setInterval("getrandom()", 22000);
</script>
I am trying to make a code that will get various stats from the user when he or she visits my site like : browser computer screen size ip address referrer etc. This is the code i have so far. I ma stuck on what i should do in the function. Code: <html>
<head>
</head>
<body>
<script type="test/javascript">
function stats (){
var data =
}
</script>
</body>
</html>
One more question will I need to use php to send it to my email of could javascript do this. How would I track how many times a user hit the OK button when prompted with a message using document.writeln?
Okay, so I built up 2 codes, which do the same cause. but which one would be most efficient? or maybe which one would be best compatible for browsers? CODE 1 : - this code allows for me to use an #id Code: <a onclick="trackClick('1');" href="http://www.google.com" rel="nofollow" target="_new">(track 1)</a>
function trackClick(trackid) {
ajax = ajaxFunction();
var url = base_url+ "app_trackClicks.php";
url = url+ "?trackid=" +trackid;
ajax.open("GET",url,true);
ajax.send(null);
}
CODE 2 - using the REL Code: <a rel="randomclicks" href="http://www.google.com" rel="nofollow" target="_new">(track 2)</a>
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(randomclicks);
function randomclicks()
{
if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if ((anchor.getAttribute("rel") == "randomclicks")){
anchor.onclick = function ()
{
ajax = ajaxFunction();
var url = base_url+ "app_trackClicks.php";
url = url+ "?randomclicks";
ajax.open("GET",url,true);
ajax.send(null);
};
}
}
}
Thanks Hello, I can tracking outgoing links now for html links. How can I track outgoing links in flash with jquery or something else? Best Regards Code: <html>
<head>
<meta charset="utf-8">
<title>Tracking outgoing links with JavaScript and PHP</title>
</head>
<body>
<p><a href="http://www.google.com/">Test link to Google</a></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
$('a').click(function() {
$.post('http://www.example.com/trackol.php', { result: 'click' }, 'html');
});
});
</script>
</body>
</html>
from: http://stackoverflow.com/questions/2077823/tracking-outgoing-links-with-javascript-and-php
Hi, every time I try and alert: [ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ] it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert? Thanks. I'm kind of new to javascript so forgive me for my ignorance. Is their anyway to track right mouse click within an iframe that is linked to an external site (i.e. www.nbc.com)? I'm trying to see if I can have a alert window say "This is an image" when i right click on an image within the iframe. I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be. Code: print<<<HERE
Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true,
onChange: function(item) {
var list = Sortable.options(item).element;
if(changeEffect) changeEffect.cancel();
changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
},
onDrop: function(item) {
var thing=Sortable.options(item).element.identify();
var anchors = document.getElementById(thing).childNodes.length-2;
if(anchors > 20){
alert('This box had 20 creatures in it already, your last action has not been saved.');
window.location.reload();
}
else{
new Ajax.Request("saveImageOrder.php", {
method: "post",
parameters: { data: Sortable.serialize("sortlist$box") }
});
}
}
});
HERE;
$box++;
}
?>
});
</script>
if you solve this I'll send ya $10 via paypal I created a method for displaying an object's properties: Code: renderfunction = false;
function showProperty (object, property)
{
document.write ('<td class="type">' + (typeof object[property]) + '</td>'
+ '<td class="name">' + property + '</td>');
document.writeln('<td class="value">' +
(
(typeof object[property] != 'function')
? object[property]
:(
(property != 'showProperties')
? (
renderfunction
? object[property]()
: ('<span class="self">NOT RENDERED</span>')
)
: ('<span class="self">THIS</span>')
)
)
+ '</td>');
document.writeln('<td class="hasOwnProperty" >'
+ (
object.hasOwnProperty(property)
? "Local"
: "Inherited"
)
+ '</td>');
if (typeof object[property] == 'function')
{
document.writeln ('<td class="function">' + object[property] + '</td>');
}
else
{
document.writeln ('<td class="function"> </td>');
}
}
As long as renderfunction = false, the object is fine coming out of this function. However, if I change renderfunction to true, all my properties become undefined. Why isn't this working as I expect it to? How should I fix it? Thanks in advance, -Brian. Hello together! I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()". In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need. I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly. Has anyone any idea?? Hi all, I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues? Code: function createClass () {
return new createClass()
function createClass() {
return new createInstance ()
function createInstance () {
//Default properties, values and methods which might later be extended
}
}
}
var createDoor = createClass();
var door1 = createDoor();
var door2 = createDoor();
var createChair = createClass();
var chair1 = createChair ();
var chair2 = createChair ();
Ignore post (if mod, please delete)
I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)... Problem is I'm not sure how to properly access those properties... see below please. <script> //This is an example of a problem im having in my own code... //I want to access the name of the object within the links array wintin the object... var objA = {name: "Object A", links: [objB, objC]}; var objB = {name: "Object B", links: [objC, objD, objE]}; var objC = {name: "Object C", links: [objB]}; var objD = {name: "Object D", links: [objE]}; var objE = {name: "Object E", links: [objD]}; //ex: I want to access the name of Object A's first link... console.log(objA.links[0].name); </script> I'm hoping to get "Object B"... But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object. Is there another way around this? Any thoughts are appreciated. |
|||||||