|
JavaScript - Unexpected Page Shift In Firefox
to see the unexpected page shift in action go to http://lawlocaust.net/gamerverse/ while hovering over the banner u can use the arrow keys to navigate the UI and the page will shift in firefox
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>GamerVerse</title>
<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>gamerverse.css" />
<?php include('children.php'); ?>
<script type="text/javascript" src="gamerverse.js">
</script>
</head>
<?php include('top.php'); ?>
top.php Code: <body onload="javascript: initialize()">
<div id="bgimgwrap">
<img id="bgimg" src="<?php echo $domain; ?>mainbg.jpg" alt="" />
</div>
<div id="cursor"> </div>
<div class="header" id="header" onmouseover="activatekeys()" onmouseout="deactivatekeys()">
<div class="menu">
<ul>
<li><a href="#" onclick="javascript: jumpto(0)">Home</a></li>
<li><a href="#" onclick="javascript: jumpto(1)">Users</a></li>
<li><a href="#" onclick="javascript: jumpto(2)">Games</a></li>
<li><a href="#" onclick="javascript: jumpto(3)">New Stuff</a></li>
<li><a href="#" onclick="javascript: jumpto(4)">Forum</a></li>
<li><a href="#" onclick="javascript: jumpto(5)">Guilds</a></li>
<li><a href="#" onclick="javascript: jumpto(6)">Store</a></li>
</ul>
<div style="float: right; width: 100px;">
X: <span id="myx"> </span>
Y: <span id="myy"> </span>
</div>
</div>
<div class="childarea">
<div id="child0"><a href="#" onclick="">child0</a><a href="#" onclick="">child1</a></div>
<div id="child1"><a href="#" onclick="">child1</a><a href="#" onclick="">child1</a></div>
<div id="child2"><a href="#" onclick="">child2</a><a href="#" onclick="">child1</a></div>
<div id="child3"><a href="#" onclick="">child3</a><a href="#" onclick="">child1</a></div>
<div id="child4"><a href="#" onclick="">child4</a><a href="#" onclick="">child1</a></div>
<div id="child5"><a href="#" onclick="">child5</a><a href="#" onclick="">child1</a></div>
<div id="child6"><a href="#" onclick="">child6</a><a href="#" onclick="">child1</a></div>
</div>
<img src="<?php echo $domain; ?>banner.png" alt="" />
</div>
<div class="page" id="page">
<table cellspacing="0px"; cellpadding="0px" id="main">
<tr>
<td><div><?php include('home.php'); ?></div></td><td><div><?php include('users.php'); ?></div></td><td><div><?php include('games.php'); ?></div></td><td><div><?php include('new.php'); ?></div></td><td><div><?php include('forum.php'); ?></div></td><td><div><?php include('guilds.php'); ?></div></td><td><div><?php include('store.php'); ?></div></td>
</tr>
</table>
</div>
<div id="child"><div id="kid0"><?php echo $homekid; ?></div><div id="kid1"><?php echo $userskid; ?></div><div id="kid2"><?php echo $gameskid; ?></div><div id="kid3"><?php echo $newkid; ?></div><div id="kid4"><?php echo $forumkid; ?></div><div id="kid5"><?php echo $guildskid; ?></div><div id="kid6"><?php echo $storekid; ?></div></div>
CSS Code: body {
background: black;
color: white;
width: 100%;
height: 100%;
overflow: hidden;
}
* {
padding: 0px;
margin: 0px;
}
#bgimgwrap {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.header {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 2;
text-align: center;
}
.menu {
width: 100%;
text-align: center;
margin: auto;
padding: 0px 0px 4px 0px;
}
.menu li {
display: inline;
margin-left: 0px;
float: left;
}
.menu a {
display: block;
width: 100px;
height: 20px;
line-height: 20px;
color: white;
text-decoration: none;
margin-left: 0px;
border-bottom: 1px solid white;
border-right: 1px solid white;
}
.menu a:hover {
color: black;
}
.page {
position: absolute;
left: 0;
}
#cursor {
display: block;
position: absolute;
top: 0;
width: 100px;
height: 20px;
background: red;
opacity:0.4;
filter:alpha(opacity=40);
z-index: 11;
}
td {
overflow: hidden;
background: #6faae4 url(right.png) repeat-y 100% 0%;
padding: 0px 25px 0px 25px;
}
td:before {
display: block;
content: url(topleft.png);
background: url(topright.png) no-repeat 100% 0%;
height: 25px;
margin: 0px -25px 0px -25px;
}
td:after {
display: block;
content: url(bottomleft.png);
background: url(bottomright.png) no-repeat 100% 0%;
height: 25px;
margin: 0px -25px 0px -25px;
}
td div:first-child {
background: #3d74aa;
border: 4px outset #c6c6c6;
overflow: hidden;
}
#child {
position: absolute;
left: 0px;
width: 100%;
}
#kid0 {
display: none;
}
#kid1 {
display: none;
}
#kid2 {
display: none;
}
#kid3 {
display: none;
}
#kid4 {
display: none;
}
#kid5 {
display: none;
}
#kid6 {
display: none;
}
.childarea {
width: 100%;
height: 20px;
margin-top: 17px;
}
.childarea div {
display: none;
}
.childarea a {
display: inline-block;
width: 100px;
height: 20px;
line-height: 20px;
color: white;
text-decoration: none;
margin-left: 0px;
border-bottom: 1px solid white;
border-right: 1px solid white;
}
.childarea a:hover {
color: black;
}
#child0 {
position: absolute;
left: 0px;
}
#child1 {
position: absolute;
left: 101px;
}
#child2 {
position: absolute;
left: 202px;
}
#child3 {
position: absolute;
left: 303px;
}
#child4 {
position: absolute;
left: 404px;
}
#child5 {
position: absolute;
left: 505px;
}
#child6 {
position: absolute;
left: 606px;
}
javascript Code: //sets the global variables
function initialize()
{
//alert(navigator.appName+' '+navigator.appCodeName+' '+navigator.appVersion);
window.bgimg = document.getElementById('bgimg');
window.bgimgwrap = document.getElementById('bgimgwrap');
window.header = document.getElementById('header');
window.page = document.getElementById('page');
window.main = document.getElementById('main');
window.child = document.getElementById('child');
window.cursor = document.getElementById('cursor');
window.childqty = new Array();
window.childqty[0] = 2 - 1;
window.childqty[1] = 2 - 1;
window.childqty[2] = 2 - 1;
window.childqty[3] = 2 - 1;
window.childqty[4] = 2 - 1;
window.childqty[5] = 2 - 1;
window.childqty[6] = 2 - 1;
get_dims();
}
//adjusts various elements to make the site fluid
function get_dims()
{
winH = getH();
winW = getW();
bgimg.width = header.offsetWidth;
bgimg.height = header.offsetHeight;
bgimgwrap.width = header.offsetWidth;
bgimgwrap.height = header.offsetHeight;
var h = header.offsetHeight;
page.style.top = h+"px";
main.style.width = (winW*7)+"px";
child.style.top = winH+"px";
child.height = (winH-h)+"px";
var td = document.getElementsByTagName('td');
for(i = 0; i < td.length; i++)
{
td[i].width = winW+"px";
td[i].style.height = (winH-h)+"px";
td[i].firstChild.style.height = ((winH-h)-58)+"px";
td[i].firstChild.style.width = ((winW - (td[i].firstChild.offsetLeft*2))-8)+"px";
}
}
//gets the height of the window
function getH()
{
var winH = 0;
if (navigator.appName.indexOf("Microsoft")!=-1)
{
winH = document.documentElement.clientHeight;
}
else
{
winH = window.innerHeight;
}
return winH;
}
//gets the width of the window
function getW()
{
var winW = 0;
if (navigator.appName.indexOf("Microsoft")!=-1)
{
winW = document.documentElement.clientWidth;
}
else
{
winW = window.innerWidth;
}
return winW;
}
//the keydown action script
function move(c)
{
c = c || window.Event;
var k = c.which;
if(!k)
{
var k = c.charCode;
}
if(!k)
{
var k = c.keyCode;
}
var winW = getW();
var winH = getH();
var h = header.offsetHeight;
winH = winH - h;
switch(k)
{
case 37:
var thing = pos_check();
if(thing == "parent")
{
if(page.offsetLeft != 0)
{
slide('right', 0);
cursormove('right', 0);
}
}
else
{
slidekid('right', 0);
}
break;
case 38:
var thing = pos_check();
if(thing == "child"){ ditchkids(); }
break;
case 39:
var thing = pos_check();
if(thing == "parent")
{
if(page.offsetLeft != -(winW*6))
{
slide('left', 0);
cursormove('left', 0);
}
}
else
{
slidekid('left', 0);
}
break;
case 40:
var thing = pos_check();
if(thing == "parent"){ getkids(); }
break;
case 116:
window.location.reload();
break;
default:
break;
}
}
//move the page left or right
function slide(dir, i)
{
var w = getW();
if(i < w)
{
switch(dir)
{
case 'left':
page.style.left = (page.offsetLeft - 8)+"px";
break;
case 'right':
page.style.left = (page.offsetLeft + 8)+"px";
break;
}
i++;
i++;
i++;
i++;
i++;
i++;
i++;
i++;
var t = setTimeout("slide('"+dir+"', '"+i+"')", 0);
}
if(page.offsetLeft > 0){ page.style.left = 0+"px"; }
if(page.offsetLeft < -(w*6)){ page.style.left = -(w*6)+"px"; }
}
//moves the cursor left or right
function cursormove(dir, i)
{
switch(dir)
{
case 'left':
cursor.style.left = (cursor.offsetLeft + 1)+"px";
break;
case 'right':
cursor.style.left = (cursor.offsetLeft - 1)+"px";
break;
}
if(i < 100)
{
i++;
setTimeout("cursormove('"+dir+"', '"+i+"')", 20);
}
if(cursor.offsetLeft < 0){ cursor.style.left = 0+"px"; }
if(cursor.offsetLeft > 606){ cursor.style.left = 606+"px"; }
}
//checks to see which set of elements ur looking at
function pos_check()
{
var h = header.offsetHeight;
if(page.offsetTop == h)
{
return "parent";
}
else
{
return "child";
}
}
//displays the child elements
function getkids()
{
var c = cursor.offsetLeft;
c = c/101;
winW = getW();
p = childqty[c];
document.getElementById(c+'child').style.width = (winW*(p+1))+"px";
document.getElementById('child'+c).style.display = "block";
document.getElementById('kid'+c).style.display = "block";
child.style.left = 0+"px";
raisekid('up', 0);
}
function raisekid(d, i)
{
switch(d)
{
case "up":
page.style.top = (page.offsetTop - 2)+"px";
child.style.top = (child.offsetTop - 2)+"px";
break;
case "down":
page.style.top = (page.offsetTop + 2)+"px";
child.style.top = (child.offsetTop + 2)+"px";
if(i >= page.offsetHeight)
{
hidekids();
}
break;
}
if(i < page.offsetHeight)
{
i++;
i++;
setTimeout("raisekid('"+d+"', '"+i+"')", 0);
}
if(page.offsetTop > header.offsetHeight){ page.style.top = header.offsetHeight+"px"; }
}
function ditchkids()
{
raisekid('down', 0);
}
function hidekids()
{
var c = cursor.offsetLeft;
c = c/101;
document.getElementById('child'+c).style.display = "none";
document.getElementById('kid'+c).style.display = "none";
}
//moves the shild pages left or right
function slidekid(dir, i)
{
var w = getW();
if(i < w)
{
switch(dir)
{
case 'left':
child.style.left = (child.offsetLeft - 8)+"px";
break;
case 'right':
child.style.left = (child.offsetLeft + 8)+"px";
break;
}
i++;
i++;
i++;
i++;
i++;
i++;
i++;
i++;
var t = setTimeout("slidekid('"+dir+"', '"+i+"')", 0);
}
var c = cursor.offsetLeft;
c = c/101;
p = childqty[c];
if(child.offsetLeft > 0){ child.style.left = 0+"px"; }
if(child.offsetLeft < -(w*p)){ child.style.left = -(w*p)+"px"; }
}
//turns on the UI when hovering over the banner
function activatekeys()
{
document.addEventListener('keydown', move, true);
}
//turns off the UI when u stop hovering
function deactivatekeys()
{
document.removeEventListener('keydown', move, true);
}
Similar TutorialsI've got a div named "iframe_container". Inside it are an iframe used to display floor maps and another div named "compass_rose". I have a function that moves compass_rose around the map based on an office number. Now iframe_container is scrollable, it's only big enough to display about 2/3 of the map at any one time. I designed it that way to properly fit in the sharepoint site it's going in. To help some of our less tech savvy users it would be nice if iframe_container would automatically shift its view to keep the compass_rose visible at all times. Can that be done? Thanks. <div id="iframe_container" style="width:1000px; height:635px; position: relative; overflow:hidden"> <div id="compass_rose" style="top: 10px; left: 10px; position: absolute; z-index: 2; visibility:hidden;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div> <iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer" scrolling="no"></iframe> </div> Hi all, I am having a problem with the following code: js Code: function encrypt() {
var char, encryptedoutput = "", rawinput, shiftamt;
rawinput = document.getElementById("inputinfo").value;
shiftamt = document.getElementById("shiftamt").value;
for (i = 0; i < rawinput.length; i++) {
char = rawinput.charCodeAt(i);
if (char >= 65 && char <= 90) encryptedoutput += String.fromCharCode((char - 65 + shiftamt) % 26 + 65);
else if (char >= 97 && char <= 122) encryptedoutput += String.fromCharCode((char - 97 + shiftamt) % 26 + 97);
else encryptedoutput += rawinput.charAt(i);
}
document.getElementById("outputinfo").value = encryptedoutput;
}
function decrypt() {
var encryptedchar, decryptedoutput = "", cipherinput, shiftamt;
cipherinput = document.getElementById("inputinfo").value;
shiftamt = document.getElementById("shiftamt").value;
shiftamt = (26 - shiftamt) % 26;
for (z = 0; z < cipherinput.length; z++) {
encryptedchar = cipherinput.charCodeAt(z);
if (encryptedchar >= 65 && encryptedchar <= 90) decryptedoutput += String.fromCharCode((encryptedchar - 65 - shiftamt) % 26 + 65);
else if (char >= 97 && encryptedchar <= 122) decryptedoutput += String.fromCharCode((encryptedchar - 97 - shiftamt) % 26 + 97);
else decryptedoutput += cipherinput.charAt(z);
}
document.getElementById("outputinfo").value = decryptedoutput;
}
function formReset() {
document.getElementById("cryptoform").reset();
}
html Code: <script type="text/javascript" src="/crypto/caesar.js"></script>
<form name="cryptoform" id="cryptoform">
<div id="inputside">
Input:<br /><br />
<textarea rows="30" cols="50" name="inputinfo" id="inputinfo"></textarea><br /><br />
Shift amount for encryption or decryption:
<select name="shiftamt" id="shiftamt" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option selected="selected" value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
<br /><br />
<input type="button" value="Apply Shift" onClick="encrypt()" />
<input type="button" value="Reverse Shift" onClick="decrypt()" /><br /><br />
</div>
<div id="outputside">
Output:<br /><br />
<textarea rows="30" cols="50" name="outputinfo" id="outputinfo" readonly="readonly"></textarea><br /><br /><br /><br /><br /><br />
</div>
<div id="buttonarea">
<input type="button" value="Clear Fields" onClick="formReset(); return false;" />
</div>
</form>
I intend for the code to implement a simple caesar shift by the selected value. For example, with a shift of 1, a = b, b = c, c = d, etc. The problem I am having is that the letter A converts as it should but the other letters do not. For instance, applying a shift of 1, B is converted to L instead of C, C is converted to V instead of D. With a shift of 13, ABC produces NJF. Again, A is correct but the others are wrong, but by a different degree this time. Also, my reverse shift (decrypt) function does not work. If I remove the .value codes from the encrypt function then the decrypt function works. I am guessing there is a problem manipulating the same form components with different functions. It seems that the charCodeAt() values are being produced correctly, checking them by outputing them. If anyone has any ideas let me know. I have been working on projects like this just for fun in an attempt to improve upon my js knowledge/ability. I am at my wits end! I've added DD belated PNG to nearly every site I've ever made with little or no problems, suddenly it's being super-extra mean to me. It will only load PNGs correctly if you clear your cache when refreshing the page (shift + refresh). Check it out at the link below (obfuscated so google doesn't index the site): http://ow.ly/758Dp Here's the script: PHP Code: <!--[if IE 6]> <script src="/~onsite/js/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.shadow, #header_wrapper, header, header a, .slideshow h1, .pager_wrapper, #upcoming_wrapper, li.menuTools a, li.menuRSS a, .eDetailShareE, .saveToCal a, #services_wrapper, #services li'); </script> <![endif]--> What am I doing wrong here? Thanks so much for any help! NOTE: Just so everyone's aware, this is an IE6 only script that is supposed to fix PNG transparencies, so you'll need to look at it in IE6 to see the problems. Hi Experts, I'm new to this forum and need your help regarding javascript. I am creating a roster for my team with a web interface. Ex: A picture is attached for your reference The time is in IST (+5:30) I have created a drp down list which has PST, EST,CST time. I need to write a code so that whenever I select any of these times (PST,EST,CST, MST, IST) , it should automatically update the table. Please help. Regards, Indy I developed this under Safari on my mac. I have only been scripting for about 1.5 days so I am not the best with debugging. What would cause this? Code: <html>
<head>
<script ="Javascript>
// Setting vars
var winW = screen.width
var winH = screen.height;
var winLW = (winW / 2) - 240
// Resizing and moving window
self.resizeTo(480,640);
self.moveTo(winLW,0);
// Form reset function
function reset() {
document.shiftReport.reset();
}
// Create report function
function calculate() {
// Name Vars
var name = document.shiftReport.nameBox.value;
var mname = document.shiftReport.ModNameBox.value;
// Server Bar Vars
var j = document.shiftReport.JurSel.value;
var t = document.shiftReport.TriSel.value;
var c = document.shiftReport.CreSel.value;
var p = document.shiftReport.PreSel.value;
// Form Text Vars
var gnotes = document.shiftReport.GeneralNotes.value;
var PWMS = document.shiftReport.PWMS.value;
var SGB = document.shiftReport.SGB.value;
var WPMW = document.shiftReport.WPMW.value;
var CTaO = document.shiftReport.CTaO.value;
// Time Vars
var shifTime = document.shiftReport.TimSel.value;
var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var this_month_name_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var this_date_timestamp=new Date()
var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()
var this_year = this_date_timestamp.getYear()
if (this_year < 1000)
this_year+= 1900;
if (this_year==101)
this_year=2001;
var this_date_string = this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date + ", " + this_year //concat long date string
if (shifTime=="Other")
{
var shifTime=prompt("Please enter shift time:","11:00AM - 1:00PM");
}
// Creating Report
var theReport = "<b>Name:</b> " + name + "<br><b>Mod Name:</b> " + mname + "<br><b>Date:</b> " + this_date_string + "<br><b>Time:</b> " + shifTime + "<br><br><b>General Comments:</b><br>** Jurassic " + j + " bars<br>** Triassic " + t + " bars<br>** Cretaceous " + c + " bars<br>** Prehistoric " + p + " bars<br><br>" + gnotes + "<br><br><b>Players Warnings/Mutes/Suspensions:</b><br>" + PWMS + "<br><br><b>Site Glitches/Bugs:</b><br>" + SGB + "<br><br><b>What Players/Mods Want:</b><br>" + WPMW + "<br><br><b>Current Trends and Observations:</b><br>" + CTaO
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=480, height=640, left=400, top=0";
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>Simple Shift Report</title>');
docprint.document.write('</head><body>');
docprint.document.write(theReport);
docprint.document.write('</body></html>');
docprint.document.close();
docprint.focus();
}
</script>
<title>Simple Shift Report Generator</title>
<style type="text/css"></style>
</head>
<body style="background-color:#e5e5e5; color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<table bgcolor="003366"style="text-align: center; width: 100%;" border="0"
cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td><td bgcolor="#1a4f85"><font color="#FFFFFF">Simple Shift Report Generator</font></td>
<td width="30%"></td>
<td width="20%" style="text-align: right;"><font color="#8099b3" size="1">aaron smithers</font></td>
</tr>
</tbody>
<br>
<form name="shiftReport">
<table bgcolor="#DCDCDC" bordercolor="#FFFFFF" style="text-align: right; width: 100%;" border="15"
cellpadding="2" cellspacing="1">
<tr>
<td bgcolor="#e5e5e5"width="25%">Name:</td>
<td bgcolor="d9e7f8" width="75%"><input name="nameBox" size="58" value="" type="text"></td>
</tr>
<td bgcolor="#efefef"width="25%">Mod Name:</td>
<td bgcolor="#ffffcc"width="75%"><input name="ModNameBox" size="58" value="" type="text"></td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Shift:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="TimSel"style="width:100%">
<option>Select Time - PST</option>
<option>4:30AM - 5:30AM</option>
<option>5:30AM - 7:00AM</option>
<option>7:00AM - 8:30AM</option>
<option>8:30AM - 10:00AM</option>
<option>10:00AM - 11:30AM</option>
<option>11:30AM - 1:00PM</option>
<option>1:00PM - 2:30PM</option>
<option>2:30PM - 4:00PM</option>
<option>4:00PM - 5:30PM</option>
<option>5:30PM - 7:00PM</option>
<option>7:00PM - 8:00PM</option>
<option>7:00PM - 8:30PM</option>
<option>8:30PM - 9:30PM</option>
<option>Other</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Jurassic:</td>
<td bgcolor="#ffffcc"width="75%">
<select name="JurSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Triassic:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="TriSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Cretaceous:</td>
<td bgcolor="#ffffcc"width="75%">
<select name="CreSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Prehistoric:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="PreSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">General:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="GeneralNotes" cols="42" rows="7" value=""></textarea></td
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Warning:</td>
<td bgcolor="#d9e7f8"width="100%"><textarea name="PWMS" cols="42" rows="5" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Glitch:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="SGB" cols="42" rows="5" value=""></textarea></td
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Want:</td>
<td bgcolor="#d9e7f8"width="100%"><textarea name="WPMW" cols="42" rows="5" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Trends:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="CTaO" cols="42" rows="5" value=""></textarea></td
</tr>
</tbody>
</table>
<table style="text-align: left; width:100%;" border="15"bordercolor="#e5e5e5"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td width="75%"bgcolor="#FFFFFF">|</td>
<td width="25%"><Input Type = Button NAME = b1 width="48%" VALUE = "Create Report" onClick = calculate()><br>
<input type="button" value=" Clear " onClick= reset()></td>
</tr>
</tbody>
</table>
</body>
</html>
I am passing parameters from one page (actually from a frame within a frameset) to another using Javascript. Typically the code is as follows, taking values from a Form. Code: parent.titleFrame.location="frm_right_demo_title.html?MyDateEvent.value='"+ytt+ "'&MyParam_spec.value='"+parent.mainFrame.document.forms.myForm.MyParam_spec.value+"'"; This has worked fine in all browsers including IE, Chrome and Firefox version 2.0.0.2. However, I have now found that it doesn't work with Firefox version 3.6.12. This is because when retrieving the parameters in the new loaded page, the character ' (quote) has been converted to %27 (percent twenty seven). I can write code to replace %27 with the quote character. However, this is lengthy and time-consuming (as I need to have cyclic code as the javascript replace command seems to work only on the first occurrence within a string). Can someone please help me to understand why this is happening and how to overcome it? Hi There, Below is some very basic html/javascript that asks for a user to enter a number in an input text box and then a button is pressed it writes out a line that number of times. It works, but when run in firefox the pages always seems to continue to load... that is, the cursor is continuously that when a page is loading (an arrow with a little circle) and the status bar in the bottom right hand corner seems to be always be at zero. It seems to be something in the for loop as when this is take out it works. Seems to work in IE however? Any ideas? Is this a FireFox thing or am I not terminating the loop properly? Code: <html>
<head>
<script type="text/javascript" language="javascript">
<!--
function writeloop(){
var noTimes = document.theForm.theAmount.value;
for(x=0;x<=noTimes;x++){
document.write("A line!"+"<br />");
}
}
function cleantext(){
document.theForm.theAmount.value="";
}
//-->
</script>
<title>Write Loop</title>
</head>
<body>
<form name="theForm" action="#">
<input type=button value="Press me" onclick="writeloop();" />
<br /><br />
Enter the amount of times: 
<input type=text name="theAmount" value="blah" onfocus="cleantext()"/>
</form>
</body>
Many thanks! HI,what is wrong here? I am trying to write code to print a message 5 seconds after document has loaded. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
var i;
function printMsg(){
document.write("delayed string");
//tried adding to this line: clearTimeout(i);
}
function timedfunc(){
i=setTimeout(printMsg,5000);
}
</script>
</head>
<body onload="timedfunc()">
</body>
</html>
The message appears ok but the page loading bar in the browser + hourglass wont go away (in firefox). Hi all, this is the code I'm using in order to display the contents of an xml file into a page. It's working fine with IE but with Firefox. I have searched over intrenet and have applied all suggestions I've found about this issue. Unfortunately it's still not working. Can you please help me??? Code: function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("news.xml");
}
function createTable()
{
var x = xmlDoc.getElementsByTagName('event');
var newEl = document.createElement('table');
newEl.style.width = '100%';
newEl.setAttribute('cellPadding',0);
newEl.setAttribute('cellspacing',0);
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
for (i=0;i<x.length;i++)
{
var row = document.createElement('TR');
if (x[i].childNodes[0].nodeType != 1) continue;
var container = document.createElement('<TD style="padding-left:3px; font-weight:bold;">');
var theData = document.createTextNode(x[i].childNodes[0].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
tmp.appendChild(row);
row = document.createElement('TR');
if (x[i].childNodes[1].nodeType != 1) continue;
var container = document.createElement('<TD class="box_2">');
var theData = document.createTextNode(x[i].childNodes[1].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
tmp.appendChild(row);
}
document.getElementById('writeroot').appendChild(newEl);
}
My problem is the following. I have an editable <div>: <div class='edit' id='divContent' name='divContent' ContentEditable>some text</div> If I press 'enter' two lines are skipped. I know that if I press 'shift+enter' only one line will be skipped. If I check the unformatted code of the contenteditable div, 'enter' gives me <p> and 'shift+enter' gives me <br>, which makes sense because <p> is formatted differently than <br>. So I want to change 'enter' into 'shift+enter' I have already found something to capture and kill 'return' function killReturn() { key = event.keyCode; if (key == 13) return false; } But now for some means to replace the killed 'enter' with 'shift+enter'? Thanks a lot in advance for any advise! Hi there, i have a dynamic form that is populated via a sql query (WHERE $AVAILABLE_PRODUCT > 0) hence the javascript that is called onchange has dynamic field names. i used numbers. the for loop works fine: Code: var numberOfFields = document.order_form.elements.length;
for (var i=1; i<numberOfFields-3; i=i+4)
{
if (document.order_form.elements[i].value > document.order_form[i+3].value)
{
alert(document.order_form.elements[i].value + ' > ' + document.order_form[i+3].value);
}
....
}
Alert Box shows: 3 > 17 or similar (where 17 is the number of items on stock, and three the number of items ordered.) all other calculations with that form work fine. any idea? Hello, I do not have a lot of experience with Java and my HTML skills have not been put to use in a few years. The problem that I am having is trying to call a .js from an IIS footer file. The script is Code: <!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://216.128.27.18/" : "http://216.128.27.18/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 25);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://216.128.27.18/piwik.php?idsite=25" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
When added directly to the <body></body> of the html it works but i want to append it to all pages with a footer. I created an piwik.js with that above code then made an html file with Code: <script src="piwikfooter.js" type="text/javascript"></script> It does try to call the script but I get an error when loading the site piwikfooter.js:2Uncaught SyntaxError: Unexpected token< Any help would be very much appreciated. Hey all, I have a rather complicated program so I'm going to try and make it a little simpler - the problem is with the following function: Code: this.onInsertSuccess = function (paramsArray) {
var result = Array();
result[0] = {};
result[0][this.params.idfield] = paramsArray.id;
result[0][this.params.titlefield] = "NEW ITEM";
result[0][this.params.displayfield] = 1;
console.log(this.displayArray.length);
for (x = 0; x < this.displayArray.length; x++) {
this.displayArray[x][this.params.displayfield] = x + 2;
result[result.length] = this.displayArray[x];
newParams = {idfield:this.params.idfield, id:this.displayArray[x][this.params.idfield], table:this.params.table, displayfield:this.params.displayfield, order:(x+2)};
this.load.updateItem(newParams);
}
this.displayArray = Array();
for (x = 0; x < result.length; x++) {
this.displayArray[x] = result[x];
}
this.display();
}
Here's a simplified version: Code: onInsertSuccess = function (id) {
var result = Array();
result[0] = {};
result[0][this.params.idfield] = id;
result[0][this.params.titlefield] = "NEW ITEM";
result[0][this.params.displayfield] = 1;
for (x = 0; x < this.displayArray.length; x++) {
this.displayArray[x].displayorder = x + 2;
result[result.length] = this.displayArray[x];
}
this.displayArray = result;
// this just updates the display and has no effect on displayArray
this.display();
}
What's happening is that the first time this is called, displayArray appears to update correctly and a "NEW ITEM" appears at the top of my list. The next time the function is called, displayArray consists of only two results - each "NEW ITEM" - this continues to be the case when the function is called again. the initial displayArray is this: Code: this.displayArray = [{'clid': "1", 'name': "Yorkshire Digital Awards", 'displayorder': "1"}, {'clid': "2", 'name': "Screen Yorkshire", 'displayorder': "2"}, {'clid': "3", 'name': "SureStart Selby District", 'displayorder': "3"}, {'clid': "4", 'name': "Mencap", 'displayorder': "4"}, {'clid': "5", 'name': "York St. Johns", 'displayorder': "5"}, {'clid': "6", 'name': "Mobstar Media", 'displayorder': "6"}, {'clid': "7", 'name': "Wheatfields Hospice", 'displayorder': "7"}, {'clid': "8", 'name': "The National Railway Museum", 'displayorder': "8"}];
I've left the original function in because I fully appreciate that it may be another function that's causing this problem! I thought also it could be to do with accidentally assigning references rather than values (hence the adaption of the result assignment at the end of the function in the full code). Any ideas? Many thanks Edd Ok, so I wanted to use the following object to copy the contents of the Report array at index [file][entry]. Code: Selected = {
fileIndex : file,
entryIndex : entry,
Entry : Report[file][entry]
}
This was done so that the user may perform modifications to the entry without updating the entry until I have run validation on the input. Then I used Code: if(valid) Report[Selected.fileIndex][Selected.entryIndex] = Selected.Entry to finish up. I noticed that the Report array was getting the new input even when I didn't validate. I used the following to view all the contents of the Report Array in real time Code: window.setInterval('SHOW_ARRAY();',200);
Report=[];
function SHOW_ARRAY(){
HTML('ReportDebug','') //Reset "ReportDebug" HTML element
for(var t in Report){
for(var y in Report[t]){
for(var u in Report[t][y]){
HTML('ReportDebug','<span style="position:relative ; border:2px solid black">'+Report[t][y][u]+'</span>',1) // last argument signifies to append HTML element
}
}
HTML('ReportDebug','<br />',1)
}
}
And what I discovered was that whenever I stored values in Selected.Entry the Report array would update with those values! This is my first attempt to create an object in this fashion, so my only guess is that Selected.Entry is not independent from Report[file][entry], but instead some kind of pointer... Where have I gone wrong, and how can I accomplish my goal? Let me know if my code samples were too brief. Hello i'm using TinyceEditor in my website and i'm using AjaxFileManager to upload images. It works very good in my localhost, but in the remote server while uploading image an error appears (" Syntaxerror: unexpected token < ") and uploading stop. please i need the answer quickly I am trying to compare dates to see if they are equal, one date is passed to my function from a calendar. alert(mydate); returns "Tue Dec 22 10:00:00 EST 2009" My date that I need to compare is written dynamically out of a database and it is formatted as a string: 2009-12-22 One might think that (Date(2009-12-22) == mydate) would be true, except the time is also included ... thus it is false, but if I try to use something like this: Code: var dd = new Date(2009-12-22); if(dd.toDateString == mydate.toDateString) ...dostuff ... the dates don't equal ... and I subsequently find out that dd.toDateString actually returns "Fri Jan 22 2010" when I explicitly passed 2009-12-22 to the function. I'd simply like to compare the dates to determine if they are equal so I can pass a return value back to the calendar. The code that works, effectively returning false on all Tuesdays after today is: Code: function disallowDate(d) {
var today = new Date();
if (d.getDay() == 2 && (d > today)) return false;
return true;
}
Now I need to determine if any date selected previously is available, so I have to read them out of the database and write them dynamically to the script. Right now I have something like this, but obviously it doesn't work. Code: function disallowDate(d) {
var today = new Date();
if (d == Date(2009-12-29)) return true; //this lines is written dynamically
if (d == Date(2009-12-22)) return true; //this lines is written dynamically
if (d.getDay() == 2 && (d >= today)) return false;
return true;
}
thanks! Hey, this error ONLY occurs in IE. "Unexpected call to method or property access." I pinpointed it to this line: o.appendChild(e); The full function is: Code: function aO(d, t, src, p, id ){
alert('aO has begun.');
var o, e, i;
if (!ie){ o = cE('object');o.data = src; }
else { o = cE('embed');o.src = src; }
o.id = id;
if (!ie){ p.push( ['movie', src] ); }
if ( typeof(id) === 'String' ){o.id = id;}
o.type = t;
o.style.width = '210px';
for(i = 0; i < p.length; i++){
e = cE('param');
e.name = p[i][0];
e.value = p[i][1];
o.appendChild(e);
}
d.appendChild(o);
alert('aO has finished.');
}
What it does is write a flash object to the page. The FULL code is: Code: <!-- Chat Options -->
<noscript>
It appears that you do not have JavaScript enabled. Please enable it, otherwise you cannot view the chatbox.
</noscript>
<div id="chatWrap">
<ul id="ccon" style="display:none;">
<li><a href="javascript:void(0);" onclick="switchChat();">Switch to <span id="cnext">Chat Title</span></a></li>
<li><a href="javascript:void(0);" onclick="resizeChat();"><span id="csize">Expand</span> Chat</a></li>
<li><a href="javascript:void(0);" onclick="toggleChat();"><span id="chatToggle">Close</span> Chat</a></li>
</ul>
</div>
<div id="cbox" style="display:block;"></div>
<!-- Chat Script -->
<script type="text/javascript"><!-- // --><![CDATA[
var chats = [];
chats[0] = ['Main Chat', 'Uber-Anime-Chat', 1236404792847];
chats[1] = ['Roleplay Chat','Uber-Anime-Roleplay', 1236403501064];
var chat = {
'opt': 'a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=333333&i=29&j=CCCCCC&k=666666&l=333333&m=000000&n=CCCCCC&s=1&t=0',
'ref': 'www.uber-anime.com',
'cur': 0,
'delay': 1.5,
'params': [['wmode','transparent'] , ['allowscriptaccess','always'] , ['allownetworking','internal']]
}
var chatState = 0;
var chatStates = [];
chatStates[0] = ['Expand', '300px'];
chatStates[1] = ['Shrink', '500px'];
function cE(e){return document.createElement(e);}
function cT(s){return document.createTextNode(s);}
var ie = false;
function aO(d, t, src, p, id ){
var o, e, i, embed;
if (!ie){ o = cE('object');o.data = src; }
else { o = cE('embed');o.src = src; }
o.id = id;
if (!ie){ p.push( ['movie', src] ); }
if ( typeof(id) === 'String' ){o.id = id;}
o.type = t;
o.style.width = '210px';
for(i = 0; i < p.length; i++){
e = cE('param');
e.name = p[i][0];
e.value = p[i][1];
o.appendChild(e);
if(ie) {
embed = cE('embed');
embed.setAttribute(p[i][0], p[i][1]);
}
}
if(ie) o.appendChild(embed);
d.appendChild(o);
}
function switchChat() {
if (document.getElementById('cbox').hasChildNodes())
while (document.getElementById('cbox').childNodes.length >= 1)
document.getElementById('cbox').removeChild(document.getElementById('cbox').firstChild);
var x = chat.cur;
chat.cur = (x + 1) % chats.length;
var c = chats[x];
var src = 'http://st.chatango.com/flash/group.swf?ref=' + chat.ref + '&gn=' + c[1] + '.chatango.com&cid=' + c[2] + '&' + chat.opt;
document.getElementById('cbox').innerHTML = '';
aO( document.getElementById('cbox'), 'application/x-shockwave-flash', src, chat.params, 'chat' );
document.getElementById('ccon').style.display = 'block'; // qfix
document.getElementById('cnext').innerHTML = chats[chat.cur][0];
document.getElementById('chat').style.height = chatStates[chatState][1];
document.getElementById('csize').innerHTML = chatStates[chatState][0];
}
function resizeChat(){
if(chatState == 0)
chatState = 1;
else
chatState = 0;
document.getElementById('chat').style.height = chatStates[chatState][1];
document.getElementById('csize').innerHTML = chatStates[chatState][0];
}
function toggleChat() {
if(document.getElementById('cbox').style.display == 'block') {
display = 'none';
chatStateTxt = 'Open';
} else {
display = 'block';
chatStateTxt = 'Close';
}
document.getElementById('chatToggle').innerHTML = chatStateTxt;
document.getElementById('cbox').style.display = display;
}
function chatInit(){
if (navigator.userAgent.indexOf('MSIE') !== -1){ie = true;}
if ( chat.delay <= 0 ){
switchChat();
} else {
i = cE('img');
i.src = 'ajax-loader.gif';
document.getElementById('cbox').appendChild(i);
document.getElementById('cbox').appendChild(cT(' Loading Chat... If this message stays up, your browser may not be supported.'));
var clk = setTimeout( function(){ switchChat(); }, chat.delay * 1000 );
}
delete chatInit;
}
chatInit();
//]]>
</script>
Can anyone tell me how to fix this? This is ridiculously irritating, and it's important that I can fix it ASAP. Hey guys, I've been learning Javascript for a few days using code academy. I've come across this issue, and I'm not sure what exactly I'm doing wrong. Any help would be great. // Check if the user is ready to play! confirm("I am ready to play!"); var age = prompt("What's your age?"); if (age < 13) { console.log("I take no responsiblity, but you are allowed to play") } else { console.log("Have fun!") } console.log("You are at a Justin Bieber concert, and you hear this lyric 'Lace my shoes off, start racing.'") console.log("Suddenly, Bieber stops and says, 'Who wants to race me?'") var userAnswer = prompt("Do you want to race Bieber on stage?"); if userAnswer === "yes" { console.log("You and Bieber start racing. It's neck and neck! You win by a shoelace!"); } else { console.log("Oh no! Bieber shakes his head and sings 'I set a pace, so I can race without pacing.'"); } Hi, I'm a newbie to the forum and jquery and have been trying to use it for a slick form wizard i found here. http://thecodemine.org/ It's almost complete but IE keeps giving me an error I've tried everything to fix with no luck. I'm using jquery-1.4.2.min.js and the error it's giving me is Unexpected call to method or property access. line 103 character 460 The code it highlights is: Code: {this.nodeType===1&&this.appendChild(a)})},
at the end of this line. Complete line is: Code: wrapInner:function(a){if(c.isFunction(a))return this.each(function(b){c(this).wrapInner(a.call(this,b))});return this.each(function(){var b=c(this),d=b.contents();d.length?d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})},
Any help would be greatly appreciated. Thanks! FYI: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Tue, 15 Nov 2011 16:45:53 UTC Message: Unexpected call to method or property access. Line: 103 Char: 460 Code: 0 URI: http://custsatdev/contact/jqueryform...y-1.4.2.min.js I wrote a script that should delete all table rows at once. For loop deletes all rows except row 1 and row 3. Further clicking on the delete button, deletes row 1 and then 3. While loop ,on the first click on the delete button, also leaves rows 1 and 3 not deleted. Further clicking on the delete button, does not delete these rows. I was sure that both version of the script should delete all rows in the table at once. Could someone look at the script and tell me what is wrong? Thank you very much Code: <html>
<head>
<title>Deleting All Table Entries</title>
</head>
<script type="text/javascript">
/* WHILE LOOP
var i=0;
function deleteAll() {
document.getElementById("deleteButton").onclick=function() {
var table=document.getElementById("myTable");
while(i<table.rows.length) {
table.deleteRow(i);
i++;
}
}
}
*/
/*FOR LOOP*/
function deleteAll() {
document.getElementById("deleteButton").onclick=function() {
var table=document.getElementById("myTable");
for(var i=0; i<table.rows.length; i++) {
table.deleteRow(i);
}
}
}
window.onload=deleteAll;
</script>
<body>
<table id="myTable">
<tr>
<td>Row 0</td>
</tr>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
</table>
<button id="deleteButton"> Delete All Rows in the Table </button>
</body>
</html>
|
|||||||