JavaScript - Setting Margin Issue

I am trying to get my script working in FF, IE and Opera
but the getAttribute isn't working for me.

The domain name isn't getting picked up

I have tried this:

var dom_name = document.getElementById('dom_nm').getAttribute("value",2);

and this:

var dom_name = document.getElementById('dom_nm').getAttribute('value');


After this I use the domain name like this:

Code:

if (per2 == 0) {
  item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" No Privacy.";
 }

if (per2 > 0){
  item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" Including: Privacy: "+per2+"year.";
}

   
document.getElementById('item_pay').setAttribute("value","item_desc");

( I also tried:

Code:

document.getElementById('item_pay').setAttribute('value') = item_desc;

but that didn't seem to work either )


The HTML is like this:

Code:

<div style="margin: 5px auto;">
<table>
	<th>Your New Domain Name Order</th>
	 <tr><td>Product</td><td>Cost</td><td>Years (max. 10)</td><td style="text-align: right;">Total Cost</td></tr>
	 <tr><td id="dom_nm" value="John.Doe"><?php echo "Domain: $N_dom.$N_tld" ?></td><td id="price" value = '<?php echo "$priceN" ?>' ><?php echo $priceN ?></td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_1" size = '10' value = '<?php echo "$period_1" ?>' ></td><td><input type='TEXT' id="total_1" style="text-align: right;" value = '<?php echo "$total_1" ?>'></td></tr>
	<tr><td>Domain Privacy</td><td>8.70</td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_2" size = '10' value = '<?php echo "$period_2" ?>'></td><td><input type='TEXT' id="total_2"  style="text-align: right;" value = '<?php echo "$total_2" ?>'></td></tr>
	<tr><td>Total Order.</td><td> --- </td><td> --- </td><td><input type='TEXT' id="total_3"  style="text-align: right; font-weight: bold;" value = '<?php echo "$total_3" ?>'></td></tr>
</table>
</div>

The result is that I get a zero ( 0 ) where the domain should be.

Like this:
Domain Name and DNS set up. Domain: 0 Period: 2year Including: Privacy: 2year. Plus Free Blog Install.


Any ideas what I am doing wrong ?

Thanks

Hi,

I'm banging my head off a brick wall with setting up a 3 dimensional array and trying to loop through it. I'm using the EJS framework (http://embeddedjs.com/).

We currently have a 2D array set up to list out features. See below:

topfeatures: [
"Feature 1",
"Feature 2",
"Feature 3",
"Feature 4",
"Feature 5",
"Feature 6"
]


<ul>
[% for(var i = 0; i < this.topfeatures.length; i++) { %]
<li>[%= this.topfeatures[i] %]</li>
[% } %]
</ul>


However, the request we have requires headlines for each set of features.

Headline 1
Feature1
Feature2
Feature3

Headline 2
Feature4
Feature5
Feature6


Any ideas how I can do this?

Hi All,

I would like to enable / disable my field validation based upon the status of a given checkbox in my form but I am unsure about how to "unset" the varibles that control the validation. If the user clicks the checkbox, this displays the fields ant enables my validation just fine. But if the user then unckeck the box, the field is hidden but the validation remains enabled and the form cannot be submitted. Here is my code:

Code:

if (document.getElementById("OnAirVariance").checked) {
var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]});
var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]});
}else{
I NEED TO BE ABLE TO REVERSE THE SET VARIABLES SO THE VALIDATION WILL NOT STAY IN EFFCT
}

Thanks in advance for any help.

Kind regards,

Ken

Hello!

I have a superclass where I create a "div" element as a property and then proceed to try and set the element's "id" attribute in a subclass.

Interestingly, if I create multiple instances of the subclass with different "id"s, they all end up having the last "id" I specify. I would like it if they retain the individual "id" I specify.

Here is the code.

Code:

function Drag() {
	this.ele = document.createElement("div"); }

function Icon(id) {
	this.ele.id = id; }

Icon.prototype = new Drag();

var hello = new Icon("hello");
var goodbye = new Icon("goodbye");

What I'm trying to do is to do something similar to what this person wanted on their question:
http://www.webmasterworld.com/javascript/3338586.htm

I already have it so when the user clicks on one of the links, then it changes to the active class. But now I would like to have the first link already have the active class (which is the effect the links will have when the user clicks on it) and then have the same effect happen thereafter the user clicks on the links.

Here is the Javascript:
Code:

<script type="text/javascript">
var hrefs=document.getElementsByTagName("a");
var hrefs=document.getElementsByClassName("links");
var preA="";
for(var i=0;i<hrefs.length;i++){
hrefs[i].onclick=function(){
if(preA!="" && preA!=this){
preA.className="links";
}
this.className="active";
preA=this;
}
}
</script>

Here is the CSS:
Code:

a.links:link {
	color: #FFF;
	text-decoration: none;
}
a.links:hover {
	color: #96C;
	text-decoration: none;
}
a.active {
	color: #96C;
	text-decoration: none;
}

Here is the HTML:
Code:

<a class="links" href="#">Curriculum Vitae</a> | <a class="links" href="#">Teaching Philosophy</a> | <a class="links" href="#">Artist Statement</a>

I am a newbie and am writing a function. I want the function to refer to an arrays elements to get the biggest, but I dont know how to do this.
Here is the code:
Code:

function unique(first,second,third)
{
	var answer;
	if (first > second)
	{
	answer = first - second;
	}
		if (second > third)
		{
		answer = second - third;
		}
			if (third > first)
			{
			answer = third - first;
			}
return answer;
}
//function call
unique (digitArray(0,1,2));

what I am trying to do, is get the array elements to be called and give me an answer. Will I need to add the array to the function? It is further down the code after the function at the moment. Or will I need to add the array elements to the function? Hope it is clear

Greetings and salutations.

My text and what I have been researching on the internet has not been very helpful in determining the code that I need to prevent a user from entering his/her information more than once. Here is my current code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD.HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/htm14/loose.dtd">

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

 

<head>

 

<title>Kudler Fine Foods Contact Page</title>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">

 

<!---Kami Demnyan

                21 December 2009-->

 

<script type="text/javascript">

/*<![CDATA[*/

<!--This code ensures that the zip code and telephone numbers are actual numerical digits, not letters-->

function checkForNumber(fieldValue) {
   var numberCheck = isNaN(fieldValue);
   if (numberCheck == true) {
  	window.alert ("Please enter a numerical value");
	return false;
	}
}

<!--This code ensures that all of the fields contain text and I have it functioning now-->

function submitForm() {
   if (document.forms[0].name.value == ""
	|| document.forms[0].address.value == ""
	|| document.forms[0].city.value == ""
	|| document.forms[0].state.value == ""
	|| document.forms[0].zip.value == ""
	|| document.forms[0].phone.value == ""
	|| document.forms[0].email.value == "") {
	window.alert("Please enter your missing information");
	return false;
}
   else
	return true;
}

function getCookie(NameOfCookie) {
   if (document.cookie.length > 0) {
	begin = document.cookie.indexOf(NameOfCookie+"=");
   if (begin != -1) {
 	begin += NameOfCookie.length+1;

end = document.cookie.indexOf(";", begin);

   if (end == -1) end = document.cookie.length;
	return unescape(document.cookie.substring(begin, end)); }
}
	return null;
}



function setCookie(NameOfCookie, value, expiredays) {
   var ExpireDate = new Date ();
	ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
   document.cookie = NameOfCookie + "=" + escape(value) +
	((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}



function delCookie (NameOfCookie){
   if (getCookie(NameOfCookie)) {
	document.cookie = NameOfCookie + "=" +"; expires=Tues, 02-Feb-10 00:00:01 GMT";
}

}

/*]]>*/

</script>

</head>

 
<body>

 
<h1> KUDLER FINE FOODS </h1>

<h2> JOIN OUR MAILING LIST</h2>

<!--This is where the user will input all of their information to join the mailing list-->

<form action="completeform.html" method="get" onsubmit="return submitForm();"
   enctype="application/x-www-form-urlencoded">

 
<p>Name<br />

<input type="text" name="name" size="50" /></p>

 

<p>Address<br />

<input type="text" name="address" size="50" /></p>

 

<p>City, State, Zip <br />

<input type="text" name="city" size="30" />

<input type="text" name="state" size="3" />

<input type="text" name="zip" size="10"; onchange="return checkForNumber(this.value)"; /></p>

 

<p>Telephone<br />

<input type="text" name="phone" size="25" onchange="return checkForNumber(this.value)"; /></p>

 

<p>Email Address<br />

<input type="text" name="email" size="50" /></p>

<!--This is where the submit and reset buttons are located-->

 
<p><input type="submit" value="Submit Form" />
<p><input type="reset" value="Reset Form" />

</form>

</body>

</html>

I have created a new web page to link the duplicate cookie too, titled doubleinfo.html. This is what I am using to let the user know that their information has already been entered.

My text is telling me that I need to look for a nextform() function, but I didn't have to write one so what would I need to do, if anything, to start the document.cookie = "name" codes?

Any help would be greatly appreciated, thanks in advance.

I am sorry the following code is a bit of a mouthful, but I can't find a better way to display the problem.

The code works as expected in Chrome, but not in IE and FF. In IE the error is "Object doesn't support this action" and in FF "setting a property that has only a getter". In Chrome there is no error in the console.

There are three javascript <script>...</script>s that exist to display a <td> row in a table with a particular graphic depending on the screen width.

The odd thing is that in both IE and FF (and of course Chrome), the first two scripts display perfectly well.

Why does the third <script> produce an error?

It has exactly the same form as the two before it.

I can only guess it has something to do with where it occurs

Googling the FF error, it has something to do with trying to set a read-only property, but then why do the first two <scripts> work? They are no different (at least I can't see a difference.)

Code:

<table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" id="table3768">
 <script>
if (screen.width > 1280) {
document.write("<td valign=\"top\" background=\"..\/..\/img\/lesson2.gif\" width=\"840\" height=\"301\">");
}
else {
document.write("<td valign=\"top\" background=\"..\/..\/img\/lesson.gif\" width=\"369\" height=\"301\">");
}
</script> 
<p>&nbsp;</p>
<div align="left">
</table>
<table border="0" style="border-collapse: collapse" cellpadding="15">
<tr>
<td width="40">&nbsp;</td>
 <script>
if (screen.width > 1280) {
document.write("<td width=\"300\">");
}
else {
document.write("<td width=\"165\">");
}
</script> 
<font face="Trebuchet MS" color="#808000">Today's lesson is about setting 
goals...</font></td>
</tr>
</table>
</div>
</td>
<td rowspan="3">
<table border="0" cellspacing="0" style="border-collapse: collapse" cellpadding="0" id="table3920">
<tr>
<td><img border="0" src="../../img/teltopw.jpg" width="550" height="9"></td>
</tr>
<tr>
<td background="../../img/telbarw.jpg">
<p align="center">
<iframe name="ITV" src="lesson1TV.html" marginwidth="0" marginheight="0" scrolling="no" border="0" frameborder="0" width="480" height="376">
Your browser does not support inline frames or is currently configured 
not to display inline frames.
</iframe></p>
</td>
</tr>
<tr>
<td><img border="0" src="../../img/telbotw.jpg" width="550" height="11"></td>
</tr>
</table>
</td>
<td align="center">
<a rel="nofollow" target="_blank" href="http://www.apple.com/quicktime/download/">
<img border="0" src="../../img/quicktimeani.gif" width="129" height="184"></a></td>
</tr>
<tr>
 <script>
if ((screen.width = 1440) || (screen.width = 1400)) {
document.writeln("<td valign=\"top\" width=\"100%\" background=\"\/images\/101online\/listening\/lesson16\/notebot2.gif\" width=\"450\" height=\"50\">");
}
else if (screen.width <= 1280) {
document.writeln("<td valign=\"top\" width=\"100%\" background=\"\/images\/101online\/listening\/lesson16\/notebot.gif\" width=\"294\" height=\"50\">");;
}
</script> 
</td>
<td valign="bottom">&nbsp;</td>
</tr>
<tr>
<td valign="bottom" width="100%">
<div align="right">
<table border="0" cellpadding="5" style="border-collapse: collapse" id="table3926">
<tr>
<td align="center">
<a onmousedown="soundManager.play('piano','../../media/mp3/piano.mp3'); return true;" href="javascript: goFull('FULLSCREEN/lesson1full.html','info','width=1020,height=760,left=0,top=0,toolbar=no,scrollbars=no,status=no,directories=no,menubar=no,location=no,resizable=no');">
<img src="../../img/poster1ani.gif" border="0" width="95" height="29"></a>
<b><font size="1" face="Arial" color="#000080">&nbsp;ON DISK</font></b></td>
<td align="center"><b><font size="1" face="Arial" color="#000080">OR
</font></b>&nbsp;<a onmousedown="soundManager.play('piano','../../media/mp3/piano.mp3'); return true;" href="javascript: goFull('CDRIVE/lesson1Cfull.html','info','width=1020,height=760,left=0,top=0,toolbar=no,scrollbars=no,status=no,directories=no,menubar=no,location=no,resizable=no');"><img src="../../img/poster7.bmp" border="0" width="53" height="30"></a>
<b><font size="1" face="Arial" color="#000080">&nbsp;DRIVE</font></b></td>
</tr>
</table>
</div>
</td>
<td valign="bottom">
<iframe name="sounds" src="../../pagesounds.html" width="160" height="66" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0">
Your browser does not support inline frames or is currently configured not to display 
inline frames.
</iframe></td>
</tr>
</table>

Any light on this would be most welcome!

Javascript

I have 3 combolist fields ( A, B and C ) each of which has just "No" and "Confirmed" as their only options.

I have one final combolist ( D ) which has just "Yes" and "No" as options. "No" is the default selected item and Index0 in the list.

The user must select "Confirm" all three ( A, B and C ) lists before they should be allowed to select "Yes" in the final list ( D ).

I want to be able to have the system to automatically select and display "No" in list ( D ) if any of the first 3 selections ( A, B or C ) are "No".

I don't have a problem validating if any of the 3 lists ( A, B or C ) are "No" but I cannot get the final combolist to change from "Yes" ( if previously selected ) to "No".

I have tried setting the selected index of (D) to 0 and tried setting the selected value of (D) to "No" but if (D) currently displays "Yes" when any of the ( A, B or C ) are changed to "No" nothing happens to (D).

Am I trying to do something that cannot be done ?

Any help will be gratefully received.

Tony

Ok guys, I am finally not being lazy anymore and going through my images and writing better code. But unfortunately it is proving to be slightly more difficult then what I thought. Basically, I cannot find a way to set a element ID using javascript.

Right now I am preloading my images through JavaScript and setting them like this
Code:

	goodAfternoon = new Image(400,200)
	goodAfternoon.src = "Good Afternoon.gif"

But I cannot find out how to setElementId() to the picture I am setting in JavaScript, I can do it in HTML by
Code:

<img src="Good Afternoon.gif"  id = "pic_afternoon" name="goodAfternoon">

but this code displays the image which I do not want to do with all of my pictures right away.

So how can I preload images and set the Ids of them without displaying them?

Hi Guys ,

This is the urgnt requirement , I want to change the Browsers setting languge through java script ,and according to it , The data wht I enter dhould be change .Thanks In advance

Hello,

I'm using pull downs for date but it always starts up "Dec" "31" "Year". How can I set it to start as "Month" "Date" "Year"?

Thanks.

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

</head>
<body>
<br>
<form name="form1" id="startOfForm">
<table><tbody>
    <tr>
        <td class="question"><label for="birthdate">Select Birthdate</label></td>
        <td>
            <select name="selMonth" id="selMonth" >
            <option value=0 selected>Month</option>    <option selected value="1">Jan</option>
            <option selected value="2">Feb</option> <option selected value="3">Mar</option>
            <option selected value="4">Apr</option> <option selected value="5">May</option>
            <option selected value="6">Jun</option> <option selected value="7">Jul</option>
            <option selected value="8">Aug</option> <option selected value="9">Sept</option>
            <option selected value="10">Oct</option> <option selected value="11">Nov</option>
            <option selected value="12">Dec</option>
            </select>
            <select name="selDate" id="selDate" >
            <option value=0 selected>Date</option> <option selected value="1">1</option>
            <option selected value="2">2</option> <option selected value="3">3</option>
            <option selected value="4">4</option> <option selected value="5">5</option>
            <option selected value="6">6</option> <option selected value="7">7</option>
            <option selected value="8">8</option> <option selected value="9">9</option>
            <option selected value="10">10</option> <option selected value="11">11</option>
            <option selected value="12">12</option> <option selected value="13">13</option>
            <option selected value="14">14</option> <option selected value="15">15</option>
            <option selected value="16">16</option> <option selected value="17">17</option>
            <option selected value="18">18</option> <option selected value="19">19</option>
            <option selected value="20">20</option> <option selected value="21">21</option>
            <option selected value="22">22</option> <option selected value="23">23</option>
            <option selected value="24">24</option> <option selected value="25">25</option>
            <option selected value="26">26</option> <option selected value="27">27</option>
            <option selected value="28">28</option> <option selected value="29">29</option>
            <option selected value="30">30</option> <option selected value="31">31</option>
            </select>
            <select name="selYear" id="selYear" >
            <option value=0 selected>Year</option> <option value="2001">2001</option>
            <option value="2000">2000</option> <option value="1999">1999</option>
            <option value="1998">1998</option> <option value="1997">1997</option>
            <option value="1996">1996</option> <option value="1995">1995</option>
            <option value="1994">1994</option> <option value="1993">1993</option>
            <option value="1992">1992</option> <option value="1991">1991</option>
            <option value="1990">1990</option> <option value="1989">1989</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan=2><input type="submit" value="Submit form"></td>
    </tr>
</tbody></table>
</form>
</body>
</html> 

Alright well Hello,

I currently have a table that shows a background image and I have 1 TD with 100% width and height and in that TD I have a DIV that moves by margin-left and margin-top via JavaScript and the height is approx 20px by 20px, so basically I have a map with a character that moves when keys are pressed.

My problem is I'm having trouble setting limits (where the character cannot go inside the TD). etc if it reachs a X and Y then it would stop, but it's not that easy, I currently have this in a IF function when the keys are pressed:

Code:

var x;
var y;

var exclude = {
x: [50, 50, 50, 50, 50],
y: [50, 60, 70, 80, 90]
};
if (exclude.x.indexOf(x) !== -1 && exclude.y.indexOf(y) !== -1){
 // dismiss
}
else
{
//run main code..
}

But that code doesn' work correctly because I want the numbers in exclude.x to match the oppisite of exclude.y so 50 and 50, 50 and 60 but instead its like this 50 and 50 or 60 or 70 or 80 or 90.

I just want it to be set so it matches the number...

Code:

x: [1, 2, 3, 4, 5],
y: [1, 2, 3, 4, 5]

Hope you can help I've been having trouble for awhile now, thanks.

Hey all,

for some reason, I can't get the margin-top property to change
using
Code:

jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);

also tried
jQ(this.centerPiece).attr('margin-top', this.imgSrcs[ this.srcs[5] ].top);

any help would be great

townsendwebdd.com is the site

Code:

/**Scroller*/

function Scroller(){
	//grab the img elements
	//this.imgs = new Array( '#img0', '#img1', '#img2', '#img3', '#img4', '#centerImg', '#img5', '#img6', '#img7', '#img8', '#img9' );
	this.imgs = new Array( '#img0', '#img1', '#img2', '#img3', '#centerImg', '#img6', '#img7', '#img8', '#img9' );
	
	this.centerPiece = '#centerImg';
	this.centerPieceLink = '#centerA';
	
	
	//set the image locations
	this.imgSrcs = new Array();
	this.imgSrcs.push(new imgSrc('gx/tiltedNMInvestigates.png', 'gx/tiltedNMInvestigatesRight.png', 'gx/nmInvestigates.jpg', 'http://nminvestigates.townsendwebdd.com', 100 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedChess.png', 'gx/tiltedChessRight.png', 'gx/chess.jpg', 'http://townsendwebdd.com/chess', 200 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedFiveInARow.png', 'gx/tiltedFiveInARowRight.png', 'gx/fiveInARow.jpg', 'http://fiveinarow.townsendwebdd.com', 0 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedGaelsong.png', 'gx/tiltedGaelsongRight.png', 'gx/gaelsong.jpg', 'http://gaelsong.townsendwebdd.com', 100 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedGreenBay.png', 'gx/tiltedGreenBayRight.png', 'gx/greenBay.jpg', 'http://townsendwebdd.com/gx/GreenBaySite.jpg', 0 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedMillarSmith.png', 'gx/tiltedMillarSmithRight.png', 'gx/millarSmith.jpg', 'http://townsendwebdd.com/gx/millarSmith.jpg', 100 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedNanoMeds.png', 'gx/tiltedNanoMedsRight.png', 'gx/nanomeds.jpg', 'http://townsendwebdd.com/gx/nuBots2.jpg', 0 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedAlegro.png', 'gx/tiltedAlegroRight.png', 'gx/alegro.jpg', 'http://townsendwebdd.com/gx/alegro2.jpg', 300 ) );
	this.imgSrcs.push(new imgSrc('gx/tiltedApnm.png', 'gx/tiltedApnmRight.png', 'gx/apnm.jpg', 'http://townsendwebdd.com/gx/apnm.jpg', 0 ) );
	//this.imgSrcs.push(new imgSrc('gx/tiltedNanoMeds.png', 'gx/tiltedNanoMedsRight.png', 'gx/nanomeds.jpg', 'http://townsendwebdd.com/gx/nuBots2.jpg') );
	//this.imgSrcs.push(new imgSrc('gx/tiltedNMInvestigates.png', 'gx/tiltedNMInvestigatesRight.png', 'gx/nmInvestigates.jpg', 'http://nminvestigates.townsendwebdd.com') );
	
	//which srcs are currently in use
	this.srcs = new Array();
	for(var i = 0; i < this.imgSrcs.length; i++){ this.srcs.push(i); }
}

/** reset the current images*/
Scroller.prototype.populate = function(){
	//populate imgs
	for(var i = 0; i < 4; i++){
		jQ( this.imgs[i] ).attr('src', this.imgSrcs[ this.srcs[i] ].left );
		jQ( this.imgs[i + 5] ).attr('src', this.imgSrcs[ this.srcs[i + 5] ].right);
	}
	
	//set the centerPiece
	jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[i] ].center);
	jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[i] ].href);
	jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[i] ].top);
}



/** move everything to the Left*/
Scroller.prototype.moveLeft = function(){
	//increment srcs
	this.incrementSrcsUp();
	
	//animate
	for(var i = 0; i < this.imgs.length; i++){
		if(this.imgs[i] != this.centerPiece) 
			animate(this.imgs[i], -30);
	}
	
	//set the centerPiece
	jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[5] ].center);
	jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[5] ].href);
	jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);/** here is the stumper*/
	
	
	//move back
	for(i = 0; i < this.imgs.length; i++){
		if(this.imgs[i] != this.centerPiece)
			move( this.imgs[i], 30);
	}
	
	//repopulate
	this.populate();
}
	 
	
/** move everything to the right*/
Scroller.prototype.moveRight = function(){
	//increment srcs
	this.incrementSrcsDown();
	
	//animate
	for(var i = 0; i < this.imgs.length; i++){
		if(this.imgs[i] != this.centerPiece) 
			animate(this.imgs[i], 30);
	}
	
	//set the centerPiece
	jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[5] ].center);
	jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[5] ].href);
	jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);/** here is the stumper*/
	
	
	//move back
	for(i = 0; i < this.imgs.length; i++){
		if(this.imgs[i] != this.centerPiece)
			move( this.imgs[i], -30);
	}
	
	//repopulate
	this.populate();
}


Scroller.prototype.incrementSrcsUp = function(){
	for(var i = 0; i < this.srcs.length; i++){
		this.srcs[i] += 1;
		if(this.srcs[i] >= this.srcs.length)
			this.srcs[i] = 0;
	}
}

Scroller.prototype.incrementSrcsDown = function(){
	for(var i = 0; i < this.srcs.length; i++){
		this.srcs[i] -= 1;
		if(this.srcs[i] < 0)
			this.srcs[i] = this.imgSrcs.length - 1;
	}
}

Scroller.prototype.preload = function(){
	try{
	for(var i = 0; i < this.imgSrcs.length; i++){
		jQ('#container').append("<img src='" + this.imgSrcs[i].center + "' style='display:none;'/>");
	}
	}catch(err){alert(err.message);}
}






/**the sources of the piece*/
function imgSrc(leftSrc, rightSrc, centerImg, location, topped){
	this.left = leftSrc;
	this.right = rightSrc;
	this.center = centerImg;
	this.href = location;
	this.top = topped;
}





function animate(imgId, offsetX){
	var x = jQ( imgId ).offset().left;
	var y = jQ( imgId ).offset().top;
	jQ( imgId ).offset({left: x + offsetX, top: y});
}

/**
function animate(imgId, offsetX){
  var startLeft;
  
  var timer = setInterval(function() {
  imgId.style.left = ( imgId.style.left + offsetX / 10 ) + "px";
  
  if ( imgId.style.left == startLeft + offsetX ) {
    clearInterval( timer );
  }
}, 1000);
}*/

function move(imgId, offsetX){
	var x = jQ( imgId ).offset().left;
	var y = jQ( imgId ).offset().top;
	jQ( imgId ).offset({left: x + offsetX, top: y});
}

I need to set a divs margin-left value into a var, ive tried a few different ways and i always get undefined, anyone able to help me? Ideally id like it without the px too but thats not essential.