alright... i have a separate html file with some java in the header and it works for movement.
now... im trying to impliment movement on a different project by editing the same code... and now, it is saying that the doIt() function isnt defined.
heres the html file...
Code:
<html>
<head>
<title>American Beer Selector</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="constructor.js" type="text/javascript" ></script>
<script src="data.js" type="text/javascript" ></script>
<script src="cookies.js" type="text/javascript" ></script>
<style type="text/css">
body {
background-image:url('bg.jpg');
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.selectionBox {
background-color: #ec5e00;
color: #000000;
width: 300px;
height: 100px;
border: 1px #666666 solid;
vertical-align: top;
}
</style>
</head>
<body>
<div id="abs0" class="selectionBox" style="background-image:url('bgs/0.jpg');z-index:10;position:absolute;top:100px;left:100px">
<h2 style="margin-top:0px;margin-left:5px;">Select a Brewery:</h2>
<select style="margin-left:25px;" onchange="runThis****(this.value)">
<option>-- Brewery Choices --</option>
<option value="ab">Anheuser Busch</option>
<option value="cb">Coors Brewing Company</option>
<option value="mb">Miller Brewing Company</option>
</select>
</div>
</body>
</html>
heres the javascript file - constructor.
js (the one that isnt working currently)
Code:
/** file that holds all of the main functions for operation **/
function runThis****(x) {
//calls set cookie function
setMyCookie(x);
//raise the count, then drop it into a variable for easy use
raiseCount();
var currentBox = GetCookie('abs_count');
//checks which cookies are set... fills category var appropriately
if(GetCookie('abs_brewery') != null){
if(GetCookie('abs_price') != null){
if(GetCookie('abs_brand') != null){
var category = GetCookie('abs_brewery') + GetCookie('abs_price') + GetCookie('abs_brand');
}
else{
var category = GetCookie('abs_brewery') + GetCookie('abs_price');
}
}
else {
var category = 'prices';
}
}
//try to create new div and do all that fun and funky fresh stuff
try {
//create the new div, sets its class, its background, position, and the correct z-index
var newDiv = document.createElement('div');
newDiv.setAttribute('class','selectionBox');
/*
alert("currentBox: " + currentBox);
alert("left: " + parseInt(document.getElementById('abs' + eval(parseInt(currentBox) - 1)).style.left));
alert("top: " + parseInt(document.getElementById('abs' + eval(parseInt(currentBox) - 1)).style.top));
*/
newDiv.setAttribute('style',"background-image: url('bgs/" + eval(currentBox) + ".jpg');position:absolute;left:" +
parseInt(document.getElementById('abs' + eval(parseInt(currentBox) - 1)).style.left) + 'px;top:' +
parseInt(document.getElementById('abs' + eval(parseInt(currentBox) - 1)).style.top) + 'px;z-index:'
+ eval(10-parseInt(currentBox)) + ';');
newDiv.setAttribute('id','abs' + eval(currentBox));
var id = 'abs' + eval(currentBox);
//create h2 header
var newHeader = document.createElement('h2');
newHeader.setAttribute('style','margin-top:0px;margin-left:5px;');
//create new text element
var newText = document.createTextNode(divvys[parseInt(currentBox)]);
//puts text into the h2 tag
newHeader.appendChild(newText);
//puts h2 in new div
newDiv.appendChild(newHeader);
//creates new selection box
var newSelect = document.createElement('select');
//newSelect.setAttribute('style','position:relative;left:25px;top:45px;');
newSelect.setAttribute('onchange','runThis****(this.value)');
newSelect.setAttribute('style','margin-left:25px;');
//creates the first, selected option
var option1 = document.createElement('option');
var text1 = document.createTextNode(selectionTitles[parseInt(currentBox)]);
option1.appendChild(text1);
newSelect.appendChild(option1);
//selects correct data array from category var defined earlier and pushes everything into options
for(i=0;i<eval(category).length;i++){
var option = document.createElement('option');
var text = document.createTextNode(eval(category)[i]);
option.appendChild(text);
newSelect.appendChild(option);
}
//appends select box to new div
newDiv.appendChild(newSelect);
//appends new div to page
document.body.appendChild(newDiv);
//sets up everything to move the box... sets variables and such
var distance=2;
var currentBox = 'abs' + GetCookie('abs_count');
var end = parseInt(document.getElementById(currentBox).style.top) + 126;
var intervalID=setInterval("doIt(distance,currentBox)", 6);
//function that 'does it'
function doIt(d, cb){
var pos = parseInt(document.getElementById(currentBox).style.top);
if(parseInt(pos) < parseInt(end)){
document.getElementById(currentBox).style.top=parseInt(document.getElementById(currentBox).style.top)+distance+"px";
}
else{
//do nothing, its already in the right position
}
}
}
catch(e){
alert("The following error occurred: " + e);
}
}
function raiseCount() {
if(GetCookie('abs_count') == null){
//if the count cookie doesnt exist, set it to 1
SetCookie('abs_count', '1');
}
else if(GetCookie('abs_count') < 3){
var currCount = GetCookie('abs_count');
var count = parseInt(currCount) + 1;
SetCookie('abs_count',count);
}
}
//function that uses the count cookie to set the proper cookie
//needed with each instance of calling constructor
function setMyCookie(x){
if(GetCookie('abs_count') == null){
SetCookie('abs_brewery',x);
}
else if(GetCookie('abs_count') == '1'){
SetCookie('abs_price',x);
}
else if(GetCookie('abs_count') == '2'){
SetCookie('abs_brand',x);
}
else if(GetCookie('abs_count') == '3'){
SetCookie('abs_finalSelection',x);
}
}
... and here is the html file with the infile java that DOES work
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<script type="text/javascript" language="javascript">
<!--
//distance to move
var dx=2;
var win_width;
var n6, ie;
//detect browser
if(document.all){
ie=true;
} else if(document.getElementById){
n6=true;
}
//Get dimensions of the window
function dimensions() {
if(n6){
win_width=window.innerWidth;
} else if(ie) {
win_width=document.body.clientWidth;
}
}
var intervalID=setInterval("doIt()", 10);
function doIt(){
var pos=parseInt(document.getElementById('move').style.left);
if((pos<win_width && dx>0) || (pos>0 && dx<0)){
document.getElementById('move').style.left=parseInt(document.getElementById('move').style.left)+dx+"px";
} else {
dx=dx*-1;
}
}
//-->
</script>
</head>
<body onload="dimensions();" onresize="dimensions();">
<div id="move" style="font-size:72px; position:absolute; left:10px; top:10px;">
Move Me!
</div>
<div style="position:absolute; left:10px; top:200px;">
<button onclick="intervalID = setInterval('doIt()', 10);">Start!</button>
<button onclick="clearInterval(intervalID)">Stop!</button>
</div>
</body>
</html>
any help is appreciated guys... ive been tryin to fix this for hours and just cant see where im going wrong. thanks in advance!
Help with Javascript function call
