JavaScript - Javascript Tracking Code

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

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

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.

Hi there,

I'm sure someone can help me with this simple fix. I am putting a site together for a friend and I found a Javascript code that I'm using which basically causes an image to enlarge on mouse rollover.

The website, which I just started, is: Home 2

What I'm trying to do is get the larger image to appear a little more to the right than it currently does, so it is not right on top of the thumbnails.

I hope someone can tell me what code (and where) I need to add to accomplish this. I'm quite new at this so I really need specific instruction.

Thanks in advance for your help!

Here is the code for the onmouseover routine:

Code:

<head> 
<script language="JavaScript"> 
function showlargeimage(imgshow) 
{document.getElementById('image').src=imgshow;} 
function showlargeimage(imgshow) 
{document.getElementById('image').src=imgshow; 
document.getElementById('image').style.display='block'; 
} 



</script> 
</head> 
<body> 
<TABLE> 
<TR> 
<TD> 
<!--THUMBNAILS--> 
<img src="thumbnail1.jpg" onmouseover=showlargeimage('image1.jpg')><br> <br> 
<img src="thumbnail2.jpg" onmouseover=showlargeimage('image2.jpg')><br> <br> 
<img src="thumbnail3.jpg" onmouseover=showlargeimage('image3.jpg')><br> <br> 
<img src="thumbnail4.jpg" onmouseover=showlargeimage('image4.jpg')><br> <br> 
<img src="thumbnail5.jpg" onmouseover=showlargeimage('image5.jpg')><br> <br> 
</TD> 
<TD> 
<!--image SCREEN--> 
<img src='#' id='image'> 
<img src='#' id='image' style='display:none'>
</TD> 
</TR> 
</TABLE> 
</body>

Ok this is supposed to be a slot machine that works when I click the "Slot" button. If all the images match, then it is supposed to say "Congratulations...". If all the images do not match, then it is supposed to say "Sorry, you lose....". For one thing, I want the images to load after I hit the slot button and not when I refresh the page. Also, I've screwed up somewhere and I think I need another function option but I don't know where to put it or what to do. And last, my if, else statement isn't working. I'm pretty much new to Javascript and I don't know if the way I assigned the images to variables is even correct. Someone please help me. It would greatly appreciated.


PHP Code:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
        <title> Slot Machine</title>
        <style type = "text/css">
            table { width: 45em }
            th { text-align: left }
            th { text-align: center }
            th { text-align: right } 
            div.red { color: red }
        </style>
        <script type = "text/javascript">
           <!--
   
           var pictures = [ "star", "blueSeven", "berry" ];
           var pic1;
           var pic2;
           var pic3;
           
           pic1 = document.write ( "<img src = \"" +
           pictures[ Math.floor( Math.random() * 3 ) ] + ".gif\" />" );
           pic2 = document.write ( "<img src = \"" +
           pictures[ Math.floor( Math.random() * 3 ) ] + ".gif\" />" );
           pic3 = document.write ( "<img src = \"" +
           pictures[ Math.floor( Math.random() * 3 ) ] + ".gif\" />" );
           
           function play()
           {
               var statusDiv = document.getElementById( "status" );
               
               if ( pic1 = pic2 ) 
                 {
                 if ( pic2 = pic3 ) 
                        statusDiv.innerHTML = "Congratulations, you win!"; 
                 }
              else
                 statusDiv.innerHTML = "Sorry, you lose. " + "Please try again."; 
              
           }
                                   
        </script>
     </head>
     <body>
       <form action = "">
          <table>
          <tr><td /><td><input type = "button" value = "Slot"
            onclick = "play()" /></td></tr>
         </table>
         <div id = "status" class = "red">
         Click the Slot button to play</div>
      </form>
    </body>
</html> 

Hey guys,
Im kind of a newb and i need help with this dice game im trying to build to help me learn javascript.
If you open up the code up in your browser and click the roll button, it will clear everything and write var a in the top left corner.
What i am trying to do is write the var a into the text box.
any suggestions??




[CODE]
<html>
<head>
<script type="text/javascript">


</script>
<style type="text/css">
body
{
background-image: url(http://projectraw.files.wordpress.com/2010/02/background_brick_wall.jpg);
}
h1
{
font-family:"sans-serif",tahoma;
background-repeat: no-repeat;
color:white;
}
p
{
color:white;
font-family:"sans-serif",tahoma;
font-weight:900;
}
</style>
</head>
<body>
<center><h1>Ghetto Dice Project</h1></center>
<center>
<p>
Hand coded with care by Tanner Beck
</p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p>
<center>
<table BGCOLOR="#888888" BORDER="3" CELLPADDING="5">
<tr>
<input type="text" name="number" size="4" value=a>
</tr>
</br>
<tr>
<button onclick="
a=(Math.floor(Math.random()*13));
document.write(a)">ROLL</button>
</tr>
</table>
</br>
</center>
</p>
</body>
</html>
[CODE]

Hello to all. I need someone to help me with making code for some page, because I don't know lot about coding. What I want is to this script work only when someone click on text like "Start script", not when someone open page where this script is. Can someone help me with that? Thanks a lot.

Quote:
<script type="text/javascript">
var win = window.open("http://www.mysite.com/", "mywindow");
var interval;
function closePopup()
{
win.close();
clearInterval(interval);
}
interval=setInterval(closePopup,10000);
</script>

Hi guys my friend has created a game where there are four boxes each numbered from one to four. When you click on these boxes you either get a tick or a cross. In every turn 3 boxes will have ticks and one will have a cross and the aim is to get as many ticks as possible (each tick gets you a point and when you come across a cross your points are all deleted). Anyway i was wondering if theres a way to guess which box will have a cross beforehand. He claims its random but i wanted to make sure. heres the javascript:

var spath;
var failbox;
var score;
var pushnumber;
var clickedEl;
var clickedElT;
var waitEvent = 1;

function losegameget() {
waitEvent = 1;
$(".games3of4 > .box > div").each(function (boxli) {
jQuery(this).removeClass("check");
jQuery(this).removeClass("check2");
jQuery(this).removeClass("heart");
jQuery(this).removeClass("heart2")
});
jQuery(".savegame").css("visibility", "hidden");
$(".asama").find("span").html("0");
jQuery(clickedEl).removeClass("heart");
jQuery(clickedEl).removeClass("heart2");
$(".losebox").css("display", "block");
$(".box").css("display", "none");
jQuery.get("/game1of3");
jQuery.get("/game1of3?score=1", function (json) {
var jsonall;
eval("jsonall = " + json + ";");
jQuery("#scoreliste").html("");
for (var i = 0; i < jsonall.length; i++) {
jQuery("#scoreliste").append(jQuery('<li><div class="order">' + (i + 1) + "</div>&nbsp;" + jsonall[i]["username"] + " <span>(" + jsonall[i]["score"] + ")</span></li>"))
}
});
}

function gameget() {
var dd = $(".asama").find("span").text();
if (dd == "0") {
$(".asama").find("span").text(0);
}
score = eval($(".asama").find("span").text());
$(".asama").find("span").empty().html(score + 1);
$(".games3of4 > .box > div").each(function (boxli) {
jQuery(this).removeClass("check");
jQuery(this).removeClass("check2");
});
waitEvent = 1;
}
function wgame() {
waitEvent = 0;
$(".games3of4 > .box > div").each(function (a) {
jQuery(this).removeClass("check");
jQuery(this).removeClass("check2");
});
if (parseInt(jQuery(clickedEl).attr("rel")) == 1 || parseInt(jQuery(clickedEl).attr("rel")) == 2) {
jQuery(clickedEl).addClass("check")
}
if (parseInt(jQuery(clickedEl).attr("rel")) == 3 || parseInt(jQuery(clickedEl).attr("rel")) == 4) {
jQuery(clickedEl).addClass("check2")
}
setTimeout("gameget();", 200);
}
function losegame() {
waitEvent = 0;
$(".games3of4 > .box > div").each(function (a) {
jQuery(this).removeClass("check");
jQuery(this).removeClass("check2");
jQuery(this).removeClass("heart");
jQuery(this).removeClass("heart2");
});
if (parseInt(jQuery(clickedEl).attr("rel")) == 1 || parseInt(jQuery(clickedEl).attr("rel")) == 2) {
jQuery(clickedEl).addClass("heart");
}
if (parseInt(jQuery(clickedEl).attr("rel")) == 3 || parseInt(jQuery(clickedEl).attr("rel")) == 4) {
jQuery(clickedEl).addClass("heart2");
}
setTimeout("losegameget();", 400);
}
function ifagain() {
jQuery(".box").hide();
jQuery(".savegame").hide();
jQuery(".asama").hide();
jQuery("#againcall").show();
jQuery(".yes").click(function () {
jQuery.get("/game1of3?start=1", function () {
jQuery(".box").show();
jQuery("#againcall").hide();
jQuery(".savegame").css("visibility", "visible");
jQuery(".asama").show();
})
})
}
function playSound(a) {}
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"], {
random: function (c, d, b, e) {
if (d == 0) {
jQuery.jQueryRandom = Math.floor(Math.random() * e.length)
}
return d == jQuery.jQueryRandom;
}
});

function countGet() {
jQuery.get("/game1of3?count=1", function (a) {
jQuery("#defa").html(a + " Defa Oynandı<br />");
})
}
$(document).ready(function () {
setInterval("countGet();", 20000);
jQuery(".savegame").click(function () {
if (confirm("Puanınızı kaydetmek istediğinizden emin misiniz ?")) {
jQuery.get("/game1of3?save=1", function () {
jQuery(".box").hide();
jQuery("#saved").show();
jQuery(".boxaga").show();
jQuery(".savegame").css("visibility", "hidden");
$(".highpoint").find("b").html($(".asama").find("span").text());
$(".asama").find("span").html("0");
})
}
});
z = 0;
$(".games3of4 > .box > div").each(function (boxli) {
$(this).click(function () {
if (waitEvent) {
clickedEl = this;
clickedElT = jQuery(this).attr("rel");
jQuery.get("/game1of3?res=" + jQuery(this).attr("rel"), function (data) {

if (data == 'umustbelogin')
{
window.location.href = '/uye/giris?&redirect_to=/oyun';
}
else
{
var r;
r = (data.indexOf("true") != -1);
}

if (r) {
wgame();
} else {
losegame();
}
})
}
});
});
$(".try").click(function () {
$(".losebox").css("display", "none");
$(".box").css("display", "block");
jQuery(".savegame").css("visibility", "visible");
});
$(".try2").click(function () {
$(".boxaga").css("display", "none");
$(".box").css("display", "block");
jQuery("#saved").hide();
jQuery(".savegame").css("visibility", "visible");
});
$.playgame = function (kcode) {
score = eval($(".score").find("span").text());
if (kcode == 49) {
pushnumber = 1
}
if (kcode == 50) {
pushnumber = 2
}
if (kcode == 51) {
pushnumber = 3
}
if (kcode == 52) {
pushnumber = 4
}
clickedEl = $(".gamecontent li")[pushnumber - 1];
clickedElT = pushnumber;
jQuery.get("/game1of3?res=" + pushnumber, function (data) {
score = eval($(".score").find("span").text());
var r = eval(data);
if (r) {
wgame();
} else {
losegame();
}
})
};
jQuery.get("/game1of3");
});


cheers!

Hi guys, as you can see i am newbie..

So ive been working with javascipt and html for about 2 days now.

What im trying to do it make a really annoying website
kind of like www.mudkipz.ws [go at your own risk],
the site is a youtube video of mudkip pokemon that are really annoying they just say Mud-kip for about 9 minutes..
once you try to exit, messages pop up saying
"Mud" And "Kip" After Clicking "ok"
Its a Loop That goes on for ever!

im trying to make something like this on dreamweaver but i have very little experience!
Does anyone know how i could be able to make it so it can say

[ "hahah i got you!" |
|"Only way to exit is by going to this link" |
| "Link" |
|___________[ok]____________________ |


Edit: I got the exit pop up message to work, now i just need the loop code!
Any idea of how to put a link in the exit pop up message?

Hello i have problem is i have penny auction script and i try to add auction

and it show on indexpage assume 05-05-2011 but when the time hit 00.00 so date become to 6 and back to 5 in the morning maybe 12 hour

and i try to change var.match round to var math.floor

date become to 4 before midnight 2 minute and back to 5 when the time hit midnight again...so if this day is 5 and before midnight it will not become to 4 but when midnight come it will become to 6...so i dont know when item can end then

this is code if someone can sort it out

function calc_counter_from_time22(diff)
{

if (diff > 0) {
hours=Math.floor(diff / 3600)
minutes=Math.floor((diff / 3600 - hours) * 60)
seconds=Math.round((((diff / 3600 - hours) * 60) - minutes) * 60)
} else {
hours = 0;
minutes = 0;
seconds = 0;
}

if(diff < 86400){
return twodigit(hours) + ":" + twodigit(minutes) + ":" + twodigit(seconds);
}
else{


var Tday = Math.floor(diff / (60 * 60 * 24));

var addDay = Tday;
var d = new Date();
d.setDate(d.getDate()+addDay);
mkMonth=d.getMonth()+1;
mkMonth=new String(mkMonth);
if(mkMonth.length==1){
mkMonth="0"+mkMonth;
}
mkDay=d.getDate();
mkDay=new String(mkDay);
if(mkDay.length==1){
mkDay="0"+mkDay;
}
mkYear=d.getFullYear();
return mkDay+"-"+mkMonth+"-"+mkYear;
}

I'm trying to get a drop down box to change the image i've managed to get it working for one but can't seem to get it working when both scripts are on. any help would be much appreciated!


http://humza-productions.co.uk/test/

this is the code i'm using, it's for the baseball jacket one but the one that's working live on the website is currently working for the hoodie



Code:

<script type="text/javascript">
window.onload=function()
{


	bp='images/', //base url of your images
	imgnum=3, //Number of your images. This should match on your comboboxes options.
	thumb=document.getElementById('sho1'), //id of your image that will be changing
	combobox=document.getElementsByName('os1')[0]; // id of your combobox.
	
	
	combobox.onchange=function()
	{
	thumb.src=bp+'shop'+this.value+'.png';
	}
}
</script>

I am creating a web/shopping cart using Big Commerce. I am not a programer so I need help creating a code for the following:

a.- PRICING DISOCOUNTS - The variations features allows for setting prices for diferent size, colors, etc. but will not allow for price discounts. Meaning if you buy 1 ea the price is $10.00 ea 2 $ 8.00 ea or 5 or more $ 7.00 ea.

We sell health supplements so Price Discounts are important.

Tech support said I needed a simple java cript code written. Need to give a set $$ discount or % discount to all products or individually as required.

Can anyone help? I just started a small business but I am willing to pay some for quick delivery.

Thank you very much.

J.C.

Hi everyone hope all well.

I need your expertise. I have a problem with the email part of this javascript. Everything is working fine except for It will not validate when i add a period (.) before the @ sign. I am wanting to be able to put in an email like this

abc.def@gmail.com

or

abc+def@gmail.com

Here is the code for you to look at

Code:

<script type="text/javascript">
function validate_form() {

    if (!ValidatePhoneNumber(document.second.HomePhone.value)) {
        return false;
    }
	if(!ValidateZip(document.second.ZipCode.value))
	{
			return false;
	}
    if ( document.second.degreeLevel.selectedIndex == 0 )
    {
        alert ( "Please select degree level" );
        return false;
    }
	if ( document.second.ProgramInterest.selectedIndex == 0 )
    {
        alert ( "Please select area of study" );
        return false;
    }
	if ( document.second.LevelofEducationCompleted.selectedIndex == 0 )
    {
        alert ( "Please select level of education" );
        return false;
    }

	 if ( document.second.FirstName.value == '' )
    {
        alert ( "Please Enter a First Name" );
        return false;
    }

	 if ( document.second.LastName.value == '' )
    {
        alert ( "Please Enter a Last Name" );
        return false;
    }

	 if ( document.second.Address.value == '' )
    {
        alert ( "Please Enter a Address" );
        return false;
    }

	 if ( document.second.City.value == '' )
    {
        alert ( "Please Enter a City" );
        return false;
    }

	 if ( document.second.State.selectedIndex == 0 )
    {
        alert ( "Please Select a State" );
        return false;
    }
	if(!ValidateName(document.second.FirstName.value))
	{
		return false;
	}
	if(!ValidateName(document.second.LastName.value))
		{
			return false;
	}

	
	function ValidatePhoneNumber(field) {
	    var valid = "0123456789";
	    var hyphencount = 0;
	    if (field.length != 10) {
	        alert("Please enter your 10 digits phone.");
	        return false;
	    }
	    for (var i = 0; i < field.length; i++) {
	        temp = "" + field.substring(i, i + 1);
	        if (valid.indexOf(temp) == "-1") {
	            alert("Invalid characters in your phone.  Please try again.");
	            return false;
	        }

	    }
	    return true;    
	}  

    
      
    if(!EmailValid(document.second.Email.value))
    {
    	return false;
    }
    function ValidateZip(field) {
		var valid = "0123456789";
		var hyphencount = 0;
		if (field.length!=5 ) {
			alert("Please enter your 5 digit zip code.");
			return false;
		}
		for (var i=0; i < field.length; i++) {
			temp = "" + field.substring(i, i+1);
			if (valid.indexOf(temp) == "-1") {
				alert("Invalid characters in your zip code.  Please try again.");
				return false;
			}

		}

	return true;
	}
	function ValidateName(field)
	{
		var invalid="0123456789()-+=@#$%^&*!~`{}][|:;<>,?/";
		for (var i=0; i < field.length; i++) {
			temp = "" + field.substring(i, i+1);
			if (invalid.indexOf(temp) != "-1") {
				alert("Invalid characters in your name field.  Please try again.");
				return false;
			}

		}
		return true;
	}
   function EmailValid(email)
   	{
   		if(email=="")
   		{
   			alert("Email is required field!")
   			return false
   		}
   		len = email.length

   		if((email.charAt(1)=='.')||(email.charAt(1)=='@')||(email.charAt(1)=='.'))
   		{
			alert("Invalid Email Please try again!")
			return false
   		}
   		if((email.charAt(len-2)=='@')||(email.charAt(len-2)=='.'))
   		{
			alert("Invalid Email Please try again!")
			return false
   		}



   		count=0
   		dotcount=0
		for (i=0; i< email.length; i++)
			{
				if(email.charAt(i)=='@')
				count++
				if(email.charAt(i)=='.')
				dotcount++
   		 	}

		 if((count !=1)||(dotcount !=1))
			{
			alert("Invalid Email Please try again!")
			return false
			}


   	return true
	}

}
</script>

Im sure it is something small. i have tried changing things around but it will not work for me.

Any help would be great.

Thanks everyone

Nim

Code:

<script type="text/javascript">

var aURL = "http://xmegatop100.com/";

if (aURL == http://xmegatop100.com/)
  {
  document.write("<p style="text-align: right;">
	<a href="{$list_url}/index.php">1-50</a> | <a href="{$list_url}/index.php?start=51">50-100</a> | <a href="{$list_url}/index.php?start=101">100-150</a> | <a href="{$list_url}/index.php?start=151">150-200</a></p>
<br><br>
");
  }
else
  {
  document.write("<p style="text-align: right;">
	<a href="{$list_url}/index.php?cat={$category_url}&amp;start=1">1-50</a> | <a href="{$list_url}/index.php?cat={$category_url}&amp;start=51">50-100</a> | <a href="{$list_url}/index.php?cat={$category_url}&amp;start=101">100-150</a> | <a href="{$list_url}/index.php?cat={$category_url}&amp;start=151">150-200</a></p>
<br><br>
");
  }
</script>

What im trying to do is if i have url as http://mysite.com

then read1 code , if my site has http://mysite.com/index.php?cat=~~~~

Then reads the else part.. am i doing something wrong? this doesnt work..

Hi all,

Can some body help me
i need a textbox and submit button.when i
enter date in text box and click on
submit button.Then my chart should display
by passing my date(dynamic) through the code.

how to design and code.

Thanks..