JavaScript - Wtf? Firefox 3.6.8 Problem

This is an example piece of code which I wish to add to an onkeydown event:

Code:

function keyListen(param1,param2,e) {
        
        // keycode for ie
        
        if(window.event) {
                e = window.event;
                var keycode = e.keyCode;
        }
        
        // keycode for firefox, safari and opera
        
        else {
                var keycode = e.which;
        }
        
        // if right arrow key was pressed execute a function
        
        if(keycode == '39') {
                someFunction(param1,param2);
        }
}

Then somewhere else in my code I dynamically add the function to an onkeydown event like so:

Code:

document.onkeydown = function() { keyListen(param1,param2,event) };

This works great in Internet Explorer, Opera, Safari and Google Chrome but not Firefox. Firefox keeps reporting that event is not defined, is there a way around this problem?

I have also tried this:

Code:

document.onkeydown = function() { keyListen(param1,param2) };

I excluded the event, but still the same outcome, works well in all browsers apart from Firefox. Please help me, thankyou.

Solved

Hi,

This code uses the getElementById to change the background of certain <tr>'s.

In a nutshell there are two buttons, the code checks which one has been clicked, then checks the background colour of a relevant <tr> and depending what it finds changes the colours of the cells.

Works fine in Chrome and Firefox but not in IE and I'm now sorely vexed by it.

Can anyone shed light on the solution please?

Code:

<script language="javascript" type="text/javascript">
        function changeBackgroundColor(objDivID)
        {
            var backColor = new String();

		if ( objDivID == "lifesciences" ) 
		
		{
            backColor = document.getElementById('claire').style.backgroundColor;
		}
		
		if ( objDivID == "healthcare" ) 
		
		{
			backColor = document.getElementById('adrienne').style.backgroundColor;
		}

		if(backColor.toLowerCase()=='#ffffff' || backColor.toLowerCase()=='rgb(255, 255, 255)')
            // IE works with hex code of color e.g.: #eeeeee
            // Firefox works with rgb color code e.g.: rgb(238, 238, 238)
            // Thats why both types are used in If-condition below
            
			{
			
			if ( objDivID == "lifesciences" )
					
        	{

                document.getElementById('david').style.backgroundColor = '#c0c0c0';
				document.getElementById('claire').style.backgroundColor = '#c0c0c0';
				document.getElementById('adrienne').style.backgroundColor = '#ffffff';
				document.getElementById('karen').style.backgroundColor = '#c0c0c0';
				document.getElementById('alice').style.backgroundColor = '#c0c0c0';
				document.getElementById('kelly').style.backgroundColor = '#ffffff';
				document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
				document.getElementById('carolyn').style.backgroundColor = '#c0c0c0';
				document.getElementById('paul').style.backgroundColor = '#c0c0c0';
				document.getElementById('kayleigh').style.backgroundColor = '#c0c0c0';
				document.getElementById('tim').style.backgroundColor = '#c0c0c0';
				document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
				document.getElementById('lee').style.backgroundColor = '#c0c0c0';
				document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
				
			}
			
			else
			
			{

                document.getElementById('david').style.backgroundColor = '#c0c0c0';
				document.getElementById('claire').style.backgroundColor = '#ffffff';
				document.getElementById('adrienne').style.backgroundColor = '#c0c0c0';
				document.getElementById('karen').style.backgroundColor = '#c0c0c0';
				document.getElementById('alice').style.backgroundColor = '#c0c0c0';
				document.getElementById('kelly').style.backgroundColor = '#c0c0c0';
				document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
				document.getElementById('carolyn').style.backgroundColor = '#ffffff';
				document.getElementById('paul').style.backgroundColor = '#ffffff';
				document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
				document.getElementById('tim').style.backgroundColor = '#c0c0c0';
				document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
				document.getElementById('lee').style.backgroundColor = '#c0c0c0';
				document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
			}
			
            }
            else
			
			{

                document.getElementById('david').style.backgroundColor = '#ffffff';
				document.getElementById('claire').style.backgroundColor = '#ffffff';
				document.getElementById('adrienne').style.backgroundColor = '#ffffff';
				document.getElementById('karen').style.backgroundColor = '#ffffff';
				document.getElementById('alice').style.backgroundColor = '#ffffff';
				document.getElementById('kelly').style.backgroundColor = '#ffffff';
				document.getElementById('sarah').style.backgroundColor = '#ffffff';
				document.getElementById('carolyn').style.backgroundColor = '#ffffff';
				document.getElementById('paul').style.backgroundColor = '#ffffff';
				document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
				document.getElementById('tim').style.backgroundColor = '#ffffff';
				document.getElementById('chantal').style.backgroundColor = '#ffffff';
				document.getElementById('lee').style.backgroundColor = '#ffffff';
				document.getElementById('lisa').style.backgroundColor = '#ffffff';
				
			}
			
		}
            

    </script>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#imgSlides {
    display: none;
    width: 500px;
    height: 500px;
	}
</style>
<script type="text/javascript">
		
var img = [];
	img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };

for (var imgs=[], i=0; i<img.length; i++){
	imgs[i] = new Image();
	imgs[i].src = img[i].src;
		}
		
			
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;


function fade(){
	if(fadeTimer){clearInterval(fadeTimer);}
	fadeTimer = setInterval(setOpacity,speed);
		}

function setOpacity() {
	curOpac += opacStep * dirn;

	if (curOpac < 0){
		swapImage();
		curOpac = 0;
		
		document.getElementById("autoPic").onclick = function(){
			dirn = (dirn==1) ? 0 : 1 ;
			}
		
		dirn = 1;
		fade();
		return;
			}
   
	if (curOpac > 10){
		curOpac = 10;
		clearInterval(fadeTimer);
		
		document.getElementById("autoPic").onclick = function(){
			dirn = (dirn==-1) ? 0 : -1 ;
			}
		
		dirn = -1;
		setTimeout(fade,1000);
		return;
			}


	if (imgSlider.style.opacity=="string"){
		imgSlider.style.opacity = curOpac/10;
			}
	else {
		imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
		imgSlider.style.MozOpacity = curOpac/10;
			}
		
		}


function swapImage(){
	curPic = (++curPic > img.length-1) ? 0 : curPic;
	imgSlider.src = img[curPic].src;
		}


 function prevImage(){
	
	document.getElementById("prevImage").onclick = function fade(){
		if(fadeTimer){clearInterval(fadeTimer);}
		fadeTimer = setInterval(setOpacity,speed);
			}

	function setOpacity() {
		curOpac += opacStep * dirn;
	
		if (curOpac < 0){
			swapImage();
			curOpac = 0;
			dirn = 1;
			fade();
			return;
				}
   
		if (curOpac > 10){
			curOpac = 10;
			clearInterval(fadeTimer);
			dirn = -1;
			document.getElementById("prevImage").onclick = function(){setTimeout(fade,1000);}
			return;
				}
	
	
		if (imgSlider.style.opacity=="string"){
			imgSlider.style.opacity = curOpac/10;
				}
		else {
			imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
			imgSlider.style.MozOpacity = curOpac/10;
				}
			
			}


function swapImage(){
	curPic = (--curPic < 0)? img.length-1 : curPic;
	imgSlider.src = img[curPic].src;
		}

	
	}

 

window.onload = function(){
	imgSlider = document.getElementById('imgSlides');
	imgSlider.src = img[curPic].src;
	imgSlider.style.display = 'inline';
	document.getElementById("autoPic").onclick = fade;
	 prevImage(); 

		}

</script>
</head>
<body>

<img id="imgSlides" src="" alt="" />
<br />
 <a id="prevImage" href="#">PREV</a> 
<a id="autoPic" href="#" title="Play / Pause">AUTO</a>

</body>
</html>

I've taken reference of this code from this forum and altered it a bit to achieve the effect that an image will be changed once the prev button is pressed.

Image by image fading works well in IE8 (press the button once, the image is changed once; when pressed again, it changes again; step by step)

But in Firefox 4, it just auto fades into another image. I tried to debug it in the Firefox console but due to my lack of knowledge in JS, I could not find the root of the problem.

Can anyone explain a bit why it works in IE but not 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);
}

Hi, I have the script below working fine in IE but not FF, can any one help me??

The script creates new fields with calendar in a form, if new information is added to a field and then a new field is created the information is lost in FF

Live demo: http://hotelendenia.com/sandbox/

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Calendar Text Input</title>
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>

  <script type="text/javascript">
  function extend(m, e){
    var e = e || this;
    for (var x in m) e[x] = m[x];
    return e;
};
 
function create(type, opt, parent){
    var el = document.createElement(type);
 
    if (opt.style){
        extend(opt.style,el.style);
    }
 
    delete opt.style;
 
    extend(opt,el);
 
    if (parent){
        parent.appendChild(el);
    }
 
    return el;
}
 
fields = 0;
function add_input(){
document.getElementById('input_container').innerHTML += ""+ fields +"<input id=\"cal"+ fields +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ fields +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
fields += 1;
}

  </script>

</head>
<body>

<div>
<form>
<div id="input_container">
</div>
<br /><input type="submit" value="submit">
</form>
<a href="#" onclick="add_input()">add input</a>
</div>
			
</body>
</html>

FireFox is throwing a DOM security error. And i don't really know why. i've used toDataURL() before, and it's never done this.
Hopefully i can get this little app fixed, so that i can use it on my TabletPC for taking notes in class.

The line of code that is throwing this error is:

Code:

var Note = document.getElementById("SketchPage").toDataURL();

here's the full error from the Error Console:

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///C:/SketchBook-Dev/SketchBook.js Line: 236"]



here is the JS file:

Code:

var PenSize = "3";
var PenShape = "Circle";
var PenColor = "Black";
var LoadFile = "";
var UIstatus = "visible";
var CurrentNote = 0;
var BGcolor = "#C7C1A3";
var DataPath = "\Data\\";
var ImageExtension = ".img";
var FileList = [];
var SystemPath;
var UIstatus = "visible";
var Server = "localhost";
var NxtNote = new Image();

document.onkeyup = ToggleUI;

function Init()
{
 // Get the System Path
 GetSystemPath("SketchBook.html");
 
 // Load All Filenames of the DataPath directory into an array
 GetFileList(SystemPath + DataPath, FileList);
 
 //Load the first Note onto the canvas
   // if there are no notes in the directory, don't try to load anything
   if(FileList.length > 0)
      {
	   var Source = LoadFromDisk(FileList[CurrentNote]);
	   NxtNote.src = Source;
	   
	   // Load the image data onto the canvas
       var canvas = document.getElementById('SketchPage').getContext('2d');
       canvas.drawImage(NxtNote , 0, 0);
	  }
}

function HideOptions()
{
 document.getElementById("Options").style.visibility = "hidden";
}

function ToggleUI(e)
{
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
 var KeyValue = 18;
 
 // Use a key to hide the toolbars so that most of the screen is used for the UI
 if(KeyID == KeyValue)
   {
    if(UIstatus == "visible")
	  {
	   UIstatus = "hidden";
	   document.getElementById("UI").style.visibility = "hidden";
	   return;
	  }
	if(UIstatus == "hidden")
	  {
	   UIstatus = "visible";
	   document.getElementById("UI").style.visibility = "visible";
	  }
   }
 
}

function ShowOptions()
{
 document.getElementById("Options").style.visibility = "visible";
}

function UpdatePenSize()
{
 PenSize = document.getElementById('GetPenSize').value;
}

function UpdatePenShape()
{
 PenShape = document.getElementById('GetPenShape').value;
}

function UpdatePenColor()
{
 PenColor = document.getElementById('GetPenColor').value;
}
	  
function Draw(element, event) 
{
  document.addEventListener("mousemove", PenHandler, true);
  document.addEventListener("mouseup", upHandler, true);

  event.stopPropagation();
  event.preventDefault();
	
  function PenHandler(event) 
  {
  
    var x = event.clientX;
	var y = event.clientY;
    
    // mouse event goes here
	var canvas = document.getElementById("SketchPage");
    var ctx = canvas.getContext("2d");

	if (PenShape ="Circle")
	   {
	    // This draws a circle
        ctx.fillStyle = PenColor;
        ctx.beginPath();
        ctx.arc(x, y, PenSize, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
	   }
	 
    event.stopPropagation();
  }

  function upHandler(event) 
  {
    document.removeEventListener("mouseup", upHandler, true);     
    document.removeEventListener("mousemove", PenHandler, true);
    event.stopPropagation();
  }

}

function SaveNote()
{
 // Get the current file name
 var FileName = SystemPath + DataPath + CurrentNote + ImageExtension;

 // Convert the Canvas Data into a Base64 encoded PNG image
 var Note = document.getElementById("SketchPage").toDataURL();
 
 // Write the PNG file to the disk
 SaveToDisk(FileName, Note);
}

function NextNote(Direction)
{
 if(Direction == "up")
    {
	 // Display the previoius note
	 CurrentNote--;
	    // Make sure you don't incrimnet to a non-existant note
		if(CurrentNote <= 0)
		  {
		   CurrentNote = FileList.length;
		  }
		  
	  var Source = LoadFromDisk(FileList[CurrentNote]);
	  NxtNote.src = Source;
	 
	 // Load the image data onto the canvas
	 
	 // Clear the Pre-existing Canvas Data First
	  ClearSketch();
	  
	 var canvas = document.getElementById('SketchPage').getContext('2d');
     canvas.drawImage(NxtNote, 0, 0);
	 return;
	}
	
 if(Direction == "down")
    {
	 //Display the Next note
	 CurrentNote++;
	 	// Make sure you don't incrimnet to a non-existant note
		if(CurrentNote > FileList.length)
		  {
		   CurrentNote = 0;
		  }
	 var Source = LoadFromDisk(FileList[CurrentNote]);
	 NxtNote.src = Source;
	 
	 // Load the image data onto the canvas
	 
	 // Clear the Pre-existing Canvas Data First
	 ClearSketch();
	 var canvas = document.getElementById('SketchPage').getContext('2d');

     canvas.drawImage(NxtNote, 0, 0);
	 return;
	}
}

function DeleteNote()
{
 // Delete The current note
 DeleteFile(SystemPath + DataPath + FileList[CurrentNote]);
 
 // Reload the Directory List
    // Clear the FileList Array
	FileList = [];

  GetFileList(SystemPath + DataPath, FileList);

 // Load The Previous Note
 
 	 // Display the previoius note
	 CurrentNote--;
	    // Make sure you don't incrimnet to a non-existant note
		if(CurrentNote <= 0)
		  {
		   CurrentNote = FileList.length;
		  }
		  
	 var Source = LoadFromDisk(FileList[CurrentNote]);
	 NxtNote.src = Source;
	 	 
	 // Load the image data onto the canvas
	 var canvas = document.getElementById("SketchPage");
     var context = canvas.getContext("2d");
     canvas.drawImage(NxtNote, 0, 0);
	 return;
 
}

function AddNote()
{
 // Add a note to the notebook and at the end of the File List
 // **** Later this function should be modified to be an INSERT function rather than just an add
 // Just incase the user needs to go back an edit and add more things to their notebook
 
 CurrentNote++;
 
 // Add the new Note File name to the end of the FileList Array
 FileList.push(CurrentNote + ImageExtension);
 
 // Clear the Canvas
 ClearSketch();
 // Write a blank image file to the Data directory so that we have the actual file there
 
 var FileName = SystemPath + DataPath + CurrentNote + ImageExtension;
 var Note = document.getElementById("SketchPage").toDataURL();
}

function ClearSketch()
{
 // Clear the contents of the Canvas
 
 //Draw a rectangle that covers the canvas
 var canvas = document.getElementById("SketchPage");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = BGcolor;
 ctx.fillRect (0, 0, canvas.width, canvas.height);
}

function Crypt(method)
{
 // This function will Encrypt or Decrypt All the NoteData
 if(method == "encrypt")
   {
    
    return;
   }
 
 if(method == "decrypt")
   {
    
    return;
   }
}

function Archive(method)
{
 // This function will Restore or Backup all NoteData to a network resource
 if(method == "restore")
   {
    
    return;
   }
 
 if(method == "backup")
   {
    
    return;
   }
}
// ******************** These are the XPCOM Functions ************************

function GetSystemPath(ApplicationName)
{
 // This function should Detect the system directory of the app
 // and return that string as the  SystemPath variable
 // You must supply the filename of the HTML file that it is being called from
 // I suppose later i could add the code to detect the HTML's actual file name
 // It's on the ToDo List...
 
 var GetSysPath = self.location;
 GetSysPath = GetSysPath + "";
 Get = GetSysPath.replace("file:///" , "");
 Get = Get.replace(/\//g , "\\");
 Get = Get.replace(ApplicationName, "");
 SystemPath = Get;
 return SystemPath;
}

function DeleteFile(FileName)
{
 // Delete a local file
 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
 var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
 if (aFile instanceof Components.interfaces.nsILocalFile)
    {
     aFile.initWithPath(FileName);
     aFile.remove(false);
    }
}

function GetFileList(Directory, FileList)
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var _nsILocalFile = Components.classes["@mozilla.org/file/local;1"]
      .createInstance(Components.interfaces.nsILocalFile);
// initialize path to work with
_nsILocalFile.initWithPath(Directory);
 
// get file interface implemenation
// this means that an XPCOM Class can implement multiple interface
var lv_oFile = _nsILocalFile.QueryInterface(Components.interfaces.nsIFile);
var lv_oEntries = lv_oFile.directoryEntries;
 
while(lv_oEntries.hasMoreElements())
{
   var lv_cFile = lv_oEntries.getNext()
     .QueryInterface(Components.interfaces.nsIFile).path;
   FileList.push(lv_cFile);
}
}

function SaveToDisk(filepath, content) {
	try {
		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	} catch (e) {
		alert("Permission to save file was denied.");
	}
	var file = Components.classes["@mozilla.org/file/local;1"]
		.createInstance(Components.interfaces.nsILocalFile);
	file.initWithPath( filepath );
	if ( file.exists() == false ) {
		file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
	}
	var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
		.createInstance( Components.interfaces.nsIFileOutputStream );

	outputStream.init( file, 0x04 | 0x08 | 0x20, 420, 0 );
	var output = content;
	var result = outputStream.write( output, output.length );
	outputStream.close();
}

function LoadFromDisk(filePath)
{
 if(window.Components)
   try
   {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
    file.initWithPath(filePath);
    if (!file.exists())
    return(null);
    var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
    inputStream.init(file, 0x01, 00004, null);
    var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
    sInputStream.init(inputStream);
    return(sInputStream.read(sInputStream.available()));
   }
   catch(e)
   {
    //alert("Exception while attempting to load\n\n" + e);
    return(false);
   }
return(null);
}

and the HTML UI code:

Code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sketch Book v1.0</title>

<script src="SketchBook.js" type="text/javascript"></script>
<script src="JSxpcom.js" language="text/javascript"></script>




</head>
<body onLoad="Init();">
<div id="SketchPageView">
<canvas id="SketchPage" width="480" height="640" style="background: #C7C1A3; position: absolute; top: 0px; left: 0px;" onmousedown="Draw(this, event);"></canvas>
</div>

<div id="Options" style="position: absolute; visibility: hidden; top: 100px; left: 50px;">

<table cellwidth="100" border="0" cellpadding="0" cellspacing="0" height="50">
<tbody><tr><td><img src="./Image/TL-black.PNG" height="19" width="19"></td><td bgcolor="#bce0f8"><center><b>Options</b></center><img src="./Image/delete.png" style="position:absolute; top: 2px; left: 150px; height: 18; width: 18;" onClick="HideOptions();"></td><td><img src="./Image/TR-black.PNG" height="19" width="19"></td></tr>
<tr><td bgcolor="#bce0f8"></td>

<td bgcolor="#bce0f8">

<div style="border: 1px solid black;">
<table>
<tbody><tr>
<td><center>Pen Size</center></td><td><center>Color</center></td>
</tr>
<tr>
<td>
<select id="GetPenSize" onchange="UpdatePenSize();">
  <option value="1">1 px</option>
  <option value="2">2 px</option>
  <option value="3">3 px</option>
  <option value="4">4 px</option>
  <option value="5">5 px</option>
</select>
</td>
<td>
<select id="GetPenColor" onchange="UpdatePenColor();">
  <option value="Black">Black</option>
  <option value="White">White</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green">Green</option>
  <option value="Brown">Brown</option>
</select>
</td>
</tr>
<tr>
<td><input value="Restore" onclick="RestoreData();" type="button"></td><td><input value="Backup" onclick="BackupData();" type="button"></td>
</tr>
<tr>
<td><input value="Encrypt" onclick="EncryptData();" type="button"></td><td><input value="DeCrypt" onclick="DecryptData();" type="button"></td>
</tr>
</tbody></table>
</div>
</td>
<td bgcolor="#bce0f8"></td></tr>
<tr><td><img src="./Image/BL-black.PNG" height="19" width="19"></td> <td bgcolor="#bce0f8"></td><td align="right"><img src="./Image/BR-black.PNG" height="19" width="19"></td></tr>
</tbody></table>
</div>
<table id="UI" style="position: absolute; top: 0px; left: 412px; visibility: visible;" border="0" cellpadding="0" cellspacing="0" width="40">
<tbody><tr><td><img src="./Image/TL-black.PNG" height="19" width="19"></td><td bgcolor="#bce0f8"></td><td><img src="./Image/TR-black.PNG" height="19" width="19"></td></tr>
<tr><td bgcolor="#bce0f8"></td>
<td bgcolor="#bce0f8" height="600">
<img src="./Image/up.png" style="width: 30px; height: 30px;" alt="up" onclick="NextNote('up');"><br><br><br><br>
<img src="./Image/plus.png" style="width: 30px; height: 30px;" alt="add" onclick="AddNote();"><br><br><br><br>
<img src="./Image/save.png" style="width: 30px; height: 30px;" alt="save" onclick="SaveNote();"><br><br><br><br>
<img src="./Image/clear.png" style="width: 30px; height: 30px;" alt="clear" onclick="ClearSketch();"><br><br><br><br>
<img src="./Image/delete.png" style="width: 30px; height: 30px;" alt="delete" onclick="DeleteNote();"><br><br><br><br>
<img src="./Image/gear.png" style="width: 30px; height: 30px;" alt="options" onclick="ShowOptions();"><br><br>
<img src="./Image/down.png" style="width: 30px; height: 30px;" alt="down" onclick="NextNote('down');">
</td>
<td bgcolor="#bce0f8"></td>       </tr>
<tr><td><img src="./Image/BL-black.PNG" height="19" width="19"></td> <td bgcolor="#bce0f8"></td>   <td align="right"><img src="./Image/BR-black.PNG" height="19" width="19"></td></tr>
</tbody></table>
</body></html>

Hi All,

I have a web application which has two DIV, one is main and one is child.

I am having problem in printing multiple pages. There is a lot of data in

the child DIV and i am using JavaScript functions to control the print

functionality. When i print using window.print(), only the data on the

main page currently being showed is printed. I further researched and

checked out the Style.Overflow property.

Now i am using divMain.style.overflow = "visible"

After this the complete print comes. But in Firefox, the scroll bar

disappears and only single page is left with no scroll bar .

Now if after print i give divMain.style.overflow = "Auto" OR

divMain.style.overflow = "Scroll", still the scroll bar doesn't come and if

it comes then its inactive. I am unable to see the complete data on the

page after the print is taken.

The problem is not coming in I.E and the full data with scroll bar is

recovered in I.E.

Please help me how to get the normal page with full data and scroll bar

after printing in Firefox.

Hi

i have this code that with Firefox work but with IE no;

function showPhoto (trElemnt){
if(isKeySent) return;

var photoID = "";
var photoIDCell = trElemnt.cells[1];
alert("photoID 1 ->" + photoIDCell.textContent);


with IE " photoIDCell.textContent" is udefined.

can some help to undertstand ?

thanks in advance

so im using firfoxes firebug and its giving me this java script error

missing ; before statement
document.getElementById("aia").innerHTML = "<p onclick="" >Sword</p>";

i tried just puting this ; behind the beginning but i just cant figure it out.

Why will scripts run in IE and not in firefox. I cant find any simple Javascript code that will create a username/password login that will work in both browsers.

Hi All I have a content slider, but it only seems to work in FF and not any of the other browsers. I am using Wordpress but its not a plugin

This is what I have:
page.php
Code:

<?php if (is_front_page()) { 
	include ("homepage-slider.php");
} ?>

homepage-slider.php
Code:

<!--  Inner content DIVs should always carry "contentdiv" CSS class  -->
<!--  Pagination DIV should always carry "paginate-SLIDERID" CSS class  -->
<div id="slider1" class="sliderwrapper">
 <div class="contentdiv">
  <div class="home-div1">
   <div class="home-div-logo"></div>
  </div>
 </div>
 <div class="contentdiv">
  <div class="home-div2">
   <span></span>
  </div>
 </div>
 <div class="contentdiv">
  <div class="home-div3">
   <span></span>
  </div>
 </div>
</div>
<div id="paginate-slider1" class="pagination" style="display:none;">
</div>

<script type="text/javascript">
featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 4000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})
</script>

There are 2 other external files :
contentslider.js
contentslider.css

Click Here to see site.

If someone could help I would really appreciate it, been bugging me big time.
Cheers,
Jay

Hi all,

I'm faced to a problem :

I'm programming a styles generator for the Stylish add-on.
What i want is the same thing that when i click on the button "Install with Stylish" : A Window appear to ask user if he wants to install the script with Stylish.

I saved the website page on my desktop and opened it. Obviously it did not worked, nothing happens when i click. I also changed the path for javascript file in the html and so on.. There is a XMLhttprequest() function wich opens the url of the style ending by ".css". But i replaced the url by my file path ( by a locally file) and i replaced the statut (200 by 0, because i'm working on a local file).

But whatever i do, nothing happens when i click.

There is also a function called firecustomevent() who creates the event, but my knowledges are limited at this point. I read document on mozilla website on how to call an event but i can't get it to work.

So if anybody knows how to display a windows asking the user if he wants to install the style, i will be grateful. Thanks and sorry for my bad english


The url containing the javascript is a simple style url like this one : http://userstyles.org/styles/17120 where you can see the "install with stylish" button. I also attached the concerned javascript in a txt file.

Hi buddys,
I'm trying to create a rolling area on my webpage, which will rolling forever on the top corner of my webpage to show the up coming event, the following is my code, however it works in IE7 or lower, in IE 8, it only rolling one turn, in firefox, it's not moving at all!!! Can anyone help and see what shall I do with it??

Many thanks,
Cat

<DIV id=rolllink011
style="OVERFLOW: hidden; WIDTH: 189px; HEIGHT: 100px">
<CENTER>
<DIV id=rolllink1011 style="WIDTH: 189px; HEIGHT: 120px">
<table width="100%" border="0" id="table011">
<tr>
<td height ="100px" width="98%" id="TdBox011">
<p><strong>Events</strong></p>
<p align="left">First Event ............Date</p>
<p align="left">Second Event ........Date</p>
<p align="left">Third Event ...........Date</p></td>
</tr>
</table>
</DIV>
</CENTER>
<CENTER>
<DIV id=rolllink2011></DIV></CENTER></DIV>


<script language="Javascript">
function Marquee011(){
if(rolllink2011.offsetTop-rolllink011.scrollTop<=0)
rolllink011.scrollTop-=rolllink1011.offsetHeight;
else{
rolllink011.scrollTop++;
}
}
function Start011(){
var rollspeed011=40;
var rolllink1=TdBox011.offsetHeight;
var temp=rolllink1;
while(temp<rolllink011.offsetHeight)
{
document.getElementById("table011").insertRow(1);
document.getElementById("table011").rows[1].insertCell(0).innerHTML=TdBox011.innerHTML;
temp+=rolllink1;
}
rolllink2011.innerHTML=rolllink1011.innerHTML;
var MyMar011=setInterval(Marquee011,rollspeed011);
rolllink011.onmouseover=function() {clearInterval(MyMar011);}
rolllink011.onmouseout=function() {MyMar011=setInterval(Marquee011,rollspeed011);}
}
setTimeout("Start011();",1000);
</script>

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS: childNodes</title>

<script type="text/javascript">
window.onload = function(){
var li = document.getElementsByTagName("ul")[0].childNodes;
var i;
var list;
for (i=0; i<li.length; i++)
{
list = li[i];
if(list.nodeType == 1){
list.style.color = "red";
}
}
}
</script>
</head>

<body>

<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>

</body>
</html>


Is there any way (except giving ID) that we can let firefox read nodeType as element type?
Because I want
li[2] (List 3) to be exceptionally green with other being red
I know in IE it's simpler, just li[2].style.color = "green";
But Firefox treats everything as a node.

Many thanks for any help!