|
JavaScript - Dhtml App Not Writing Utf8 Characters Correctly
this is my DHTML Flashcard App that i'm working on. And it seems to work alright so far. For some reason when i am writing the data to the local disk, it is not writing the UTF8 character correctly. It's just substituting a Comma in it's place. So this is causing a significant problem for displaying chinese language characters in the data file.
I am using Notepad++ for writing my code, and when i manually write chinese characters into the code, they display correctly, but it seems to not be working when JavaScript does the writing. Any ideas? here's my code: Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script language="javascript">
// Set Global Variables
var Know = 0;
var DontKnow = 0;
var CurrentCard = 0;
var ChineseCard = new Array();
var PinYinCard = new Array();
var EnglishCard = new Array();
var NumberOfCards = 0;
var DataFile = "C:" + String.fromCharCode(92) + "FlashCard.txt";
var Delimeter = ",";
var EndOfRecordTerminationCharacter = ".";
function init()
{
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
document.getElementById("MainMenu").style.visibility = "visible";
}
function ShowPlayer()
{
document.getElementById("FlashCardPlayer").style.visibility = "visible";
document.getElementById("MainMenu").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
LoadFlashCard();
}
function ShowEditor()
{
document.getElementById("FlashCardEditor").style.visibility = "visible";
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("MainMenu").style.visibility = "hidden";
}
function ShowMain()
{
document.getElementById("MainMenu").style.visibility = "visible";
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
}
function btnClickShowPinYin()
{
document.getElementById("PinYin").value = PinYinCard[CurrentCard];
}
function btnClickShowEnglish()
{
document.getElementById("English").value = EnglishCard[CurrentCard];
}
function ClearEditor()
{
// Clear all the text boxes in the editor
document.getElementById("EditChinese").value = "";
document.getElementById("EditPinYin").value = "";
document.getElementById("EditEnglish").value = "";
}
function WriteDataOld()
{
// Conicate the Record data
var WriteData = document.getElementById("EditChinese").value + Delimeter +
document.getElementById("EditPinYin").value + Delimeter +
document.getElementById("EditEnglish").value + EndOfRecordTerminationCharacter + "\n";
// Load the data file's current contents
var OldData = LoadFromDisk(DataFile);
var AppendData = OldData + WriteData + "\n";
// Write the data to the file
SaveToDisk(DataFile, AppendData);
// Clear the TextBoxes to prepare for the next entry
ClearEditor();
}
var Records = new Array();
var Elements = new Array();
function WriteData()
{
// Conicate the Record data
var WriteData = document.getElementById("EditChinese").value + Delimeter +
document.getElementById("EditPinYin").value + Delimeter +
document.getElementById("EditEnglish").value + "\r";
// Load the data file's current contents
var OldData = LoadFromDisk(DataFile);
if (OldData == null)
{
// The file was blank, so don't try to append null content data
SaveToDisk(DataFile, WriteData + "\n");
}
else
{
var AppendData = OldData + WriteData + "\n";
// Write the data to the file
SaveToDisk(DataFile, AppendData);
}
// Clear the TextBoxes to prepare for the next entry
ClearEditor();
}
var Records = new Array();
function LoadFlashCard()
{
// Load the FlashCard Information from the DataFile into the Arrays
LoadData = LoadFromDisk(DataFile);
Records = LoadData.split(",");
// Load the Elements in to the ChineseText, PinYin, and English Arrays
NumberOfCards = 3 / Records.length;
// Load the Chinese Characters "12, 123, 1234, 12345, 123456, 1234567
var Ptr = 0;
for (var x = 0; x < Records.length; x = x + 3)
{
ChineseCard[Ptr] = Elements[x];
Ptr++;
}
Ptr = 0;
// Load the PinYin
for (var x = 1; x < Records.length; x = x + 3)
{
PinYinCard[Ptr] = Elements[x];
Ptr++;
}
Ptr = 0;
// Load the English
for (var x = 2; x < Records.length; x = x + 3)
{
EnglishCard[Ptr] = Elements[x];
Ptr++;
}
}
function btnClickKnow()
{
Know = Know + 1;
if(CurrentCard == NumberOfCards)
{
// Display the score
alert("You scored " + Know + " out of " + NumberOfCards);
CurrentCard = 0;
Know = 0;
DontKnow = 0;
// clear all textboxes and put index(0) chinese character into the chinese character textbox
}
CurrentCard = CurrentCard + 1;
document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
function btnClickDontKnow()
{
DontKnow = DontKnow + 1
if(CurrentCard == NumberOfCards)
{
// Display the score
alert("You scored " + Know + " out of " + NumberOfCards);
CurrentCard = 0;
Know = 0;
DontKnow = 0;
// clear all textboxes and put index(0) chinese character into the chinese character textbox
}
CurrentCard = CurrentCard + 1;
document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
function SaveToDisk(FileName, 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( FileName );
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);
}
</script>
</head>
<body onload="init()">
<!--
*****************************************
Flash Card Player
*****************************************
-->
<div id="FlashCardPlayer" style="position: absolute; left: 0px; top: 0px;" >
<input id="ChineseCharacter" type="textbox" style="position: absolute; left: 75px; top: 5px; width: 100px; height: 100px; font-size: 35px;">
<input id="PinYin" type="textbox" style="position: absolute; left: 5px; top: 110px; width: 225px;" >
<input id="English" type="textbox" style="position: absolute; left: 5px; top: 135px; width: 225px;">
<input type="button" value="Know" style="position: absolute; left: 5px; top: 170px; width: 100px; height: 30px;" onclick="btnClickKnow();">
<input type="button" value="Dont Know" style="position: absolute; left: 125px; top: 170px; width: 100px; height: 30px;" onclick="btnClickDontKnow();">
<input type="button" value="PinYin" style="position: absolute; left: 5px; top: 210px; width: 100px; height: 30px;" onclick="btnClickShowPinYin();">
<input type="button" value="English" style="position: absolute; left: 125px; top: 210px; width: 100px; height: 30px;" onclick="btnClickShowEnglish();">
<a href="" style="position: absolute; left:10px; top: 245px;" onclick="ShowMain();">Home</a>
</div>
<!--
******************************************
Flashcard Editor
******************************************
-->
<div id="FlashCardEditor" style="position: absolute; left: 0px; top: 0px;">
<input id="EditChinese" style="position: absolute; left: 75px; top: 5px; width: 100px; height: 100px; font-size: 35px;" type="textbox">
<input id="EditPinYin" style="position:absolute; left: 5px; top: 110px; width: 225px;" type="textbox">
<input id="EditEnglish" style="position:absolute; left: 5px; top: 135px; width: 225px;" type="textbox">
<input id="EditClearTextButton" value="Clear" style="position:absolute; left: 5px; top: 180px; width: 100px; height: 30px;" onclick="ClearEditor();" type="button">
<input name="EditOKButton" value="OK" style="position: absolute; left: 125px; top: 180px; width: 100px; height: 30px;" onclick="WriteData();" type="button">
<a href="" style="position: absolute; left:10px; top: 225px;" onclick="javascript:Alert("*sigh* i'm getting to it!");">New</a>
<a href="" style="position: absolute; left:10px; top: 245px;" onclick="btnClickShowMain();">Home</a>
<br>
</div>
<!--
******************************************
Define the Layer for the Main menu
******************************************
-->
<div id="MainMenu" style="position: absolute; left: 0px; top: 0px;">
These are the instructions for the Flashcard App. In the future, there should be a score board and a selection of word lists and other such things. However, it's blank for now until i finish this app :)
<input value="Study Flashcards" style="position: absolute; left: 50px; top: 170px; width: 120px; height: 30px;" onclick="javascript:ShowPlayer();" type="button">
<input value="Edit Flashcards" style="position: absolute; left: 50px; top: 210px; width: 120px; height: 30px;" onclick="ShowEditor();" type="button">
</div>
</body>
</html>
Similar Tutorials*** This is FireFox Code - it will not work in IE*** i'm trying to finish up this Chinese Flashcard App (i need to cram for my HSK test). The problem is, whenever i try to load a UTF8 file (has chinese characters in it) i get the following error: "utf8str is null" it is trying to load a file from the C:\ directory. The file is there. If it wasn't there, it wouldn't show up in the directory listing of my app's file browser. since i have the HTML and JS in 4 different files, i uploaded them as a single RAR file to a file sharing website. I'll also post the code he http://www.2shared.com/file/11421487...83b/Final.html any suggestions would be greatly appreciated! main HTML file Code: // Set Global Variables
var ChineseCard = new Array();
var PinYinCard = new Array();
var EnglishCard = new Array();
var Records = new Array();
var Know = 0;
var DontKnow = 0;
var CurrentCard = 0;
var NumberOfCards = 0;
//var DataFile;
var Directory = "C:\\";
var Delimeter = ",";
function ClickShowPinYin()
{
document.getElementById("PinYin").value = PinYinCard[CurrentCard];
}
function ClickShowEnglish()
{
document.getElementById("English").value = EnglishCard[CurrentCard];
}
function ClickKnow()
{
Know = Know + 1;
if(CurrentCard == NumberOfCards)
{
// Display the score
alert("You scored " + Know + " out of " + NumberOfCards -1);
CurrentCard = 0;
Know = 0;
DontKnow = 0;
// clear all textboxes and put index(0) chinese character into the chinese character textbox
}
CurrentCard = CurrentCard + 1;
document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
function ClickDontKnow()
{
DontKnow = DontKnow + 1
if(CurrentCard == NumberOfCards)
{
// Display the score
alert("You scored " + Know + " out of " + NumberOfCards -1);
CurrentCard = 0;
Know = 0;
DontKnow = 0;
// clear all textboxes and put index(0) chinese character into the chinese character textbox
}
CurrentCard = CurrentCard + 1;
document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
function ClearEditor()
{
// Clear all the text boxes in the editor
document.getElementById("EditChinese").value = "";
document.getElementById("EditPinYin").value = "";
document.getElementById("EditEnglish").value = "";
}
function WriteData()
{
// Conicate the Record data
var WriteData = document.getElementById("EditChinese").value + Delimeter +
document.getElementById("EditPinYin").value + Delimeter +
document.getElementById("EditEnglish").value + Delimeter + "\r";
// Load the data file's current contents
var OldData = LoadFromDisk(DataFile);
if (OldData == null)
{
var WriteDataUTF8 = utf8Encode(WriteData);
// The file was blank, so don't try to append null content data
SaveToDisk(DataFile, WriteDataUTF8 + "\n");
}
else
{
var OldDataUTF8 = utf8Decode(OldData);
var AppendData = OldDataUTF8 + WriteData + "\n";
var UTF8data = utf8Encode(AppendData)
// Write the data to the file
SaveToDisk(DataFile, UTF8data);
}
// Clear the TextBoxes to prepare for the next entry
ClearEditor();
}
function LoadFlashCard(DataFile)
{
// Hide the file browser
document.getElementById("FileBrowser").style.visibility = "hidden";
// Show the Flashcard Player DIV and load the current flashcard datafile
document.getElementById("FlashCardPlayer").style.visibility = "visible";
// Add the directory path onto the Filename
DataFiletmp = Directory + DataFile;
DataFile = DataFiletmp;
// Load the FlashCard Information from the DataFile into the Arrays
var LoadData = LoadFromDisk(DataFile);
// Convert the Datafile from UTF8 to ASCII
var LoadDataUTF8 = utf8Decode(LoadData);
Records = LoadDataUTF8.split(Delimeter);
// Load the Elements in to the ChineseText, PinYin, and English Arrays
NumberOfCards = (Records.length -1) / 3;
// Load the Chinese Characters
var Ptr = 0;
for (var x = 0; x < NumberOfCards * 3; x = x + 3)
{
ChineseCard[Ptr] = Records[x];
Ptr++;
}
Ptr = 0;
// Load the PinYin
for (var x = 1; x < NumberOfCards * 3; x = x + 3)
{
PinYinCard[Ptr] = Records[x];
Ptr++;
}
Ptr = 0;
// Load the English
for (var x = 2; x < NumberOfCards * 3; x = x + 3)
{
EnglishCard[Ptr] = Records[x];
Ptr++;
}
// Load the First Flashcard Showing the Chinese Character First
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
here's Menu.js Code: function init()
{
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
document.getElementById("MainMenu").style.visibility = "visible";
}
function ShowPlayer()
{
document.getElementById("MainMenu").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
// Display the File Browse Dialogue to choose a Data File
document.getElementById("FileBrowser").style.visibility = "visible";
document.getElementById("FileBrowserToolbar").style.visibility = "visible";
FileBrowser("FileBrowser", Directory);
}
function ShowEditor()
{
document.getElementById("FlashCardEditor").style.visibility = "visible";
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("MainMenu").style.visibility = "hidden";
}
function ShowMain()
{
document.getElementById("MainMenu").style.visibility = "visible";
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
document.getElementById("FileBrowser").style.visibility = "hidden";
document.getElementById("FileBrowserToolbar").style.visibility = "hidden";
}
function FileBrowser(div, Path)
{
// Get a list of files in the directory
var FileList = new Array();
GetFileList(Directory, FileList)
// Generate the HTML data for the DIV
var HTMLdata;
for(var x = 0; x < FileList.length -1; x++)
{
// Strip the Filename Extension off of the eBook File Name
var LableName = FileList[x];
LableName = LableName.replace(Directory, "");
if ( FileList[x].search('csv') > -1)
{
HTMLdata = HTMLdata + "<input type='button' value='" + LableName + "'" + " onClick=LoadFlashCard('" + FileList[x] + "')><br>";
}
}
// firefox puts 'undefined' into the first string - for no logical reason
// this will remove it
HTMLdata = HTMLdata.replace("undefined", "");
// Write the HTML data to the DIV
document.getElementById(div).innerHTML = HTMLdata
}
function FileManager(div, Path)
{
// Get a list of files in the directory
var FileList = new Array();
GetFileList(Directory, FileList)
// Generate the HTML data for the DIV
var HTMLdata;
for(var x = 0; x < FileList.length -1; x++)
{
// Strip the Filename Extension off of the eBook File Name
var LableName = FileList[x];
LableName = LableName.replace(Directory, "");
var FileClass = "<input type='button' value='" + LableName + "'> ";
var RenameButton = "<img src='delete.png' onClick='RemoteFile('" + FileList[x] + "');'>"
var DeleteButton = "<img src='rename.png' onClick='RenameFile('" + FileList[x] + "');'>"
HTMLdata = HTMLdata + FileClass + RenameButton + DeleteButton + "<br>";
}
// firefox puts 'undefined' into the first string - for no logical reason
// this will remove it
HTMLdata = HTMLdata.replace("undefined", "");
// Write the HTML data to the DIV
document.getElementById(div).innerHTML = HTMLdata
// Hide the Top-Level DIV
document.getElementById("MainMenu").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
// Display the FileBrowser DIV
document.getElementById("FileBrowser").style.visibility = "visible";
document.getElementById("FileBrowserToolbar").style.visibility = "visible";
}
function RenameFile(FileName)
{
// Display the Rename File Dialogue Box
document.getElementById("RenameBox").style.visibility = "visible";
//
// Reload the Filemanager with updated content
FileManager("FileBrowser", Directory);
}
function RemoveFile(FileName)
{
// Delete the file from the file system
DeleteFile(FileName)
alert("File Deleted");
// Reload the Filemanager with updated content
FileManager("FileBrowser", Directory);
}
here's Flashcard.js Code: // Set Global Variables
var ChineseCard = new Array();
var PinYinCard = new Array();
var EnglishCard = new Array();
var Records = new Array();
var Know = 0;
var DontKnow = 0;
var CurrentCard = 0;
var NumberOfCards = 0;
//var DataFile;
var Directory = "C:\\";
var Delimeter = ",";
function ClickShowPinYin()
{
document.getElementById("PinYin").value = PinYinCard[CurrentCard];
}
function ClickShowEnglish()
{
document.getElementById("English").value = EnglishCard[CurrentCard];
}
function ClickKnow()
{
Know = Know + 1;
if(CurrentCard == NumberOfCards)
{
// Display the score
alert("You scored " + Know + " out of " + NumberOfCards -1);
CurrentCard = 0;
Know = 0;
DontKnow = 0;
// clear all textboxes and put index(0) chinese character into the chinese character textbox
}
CurrentCard = CurrentCard + 1;
document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
function ClickDontKnow()
{
DontKnow = DontKnow + 1
if(CurrentCard == NumberOfCards)
{
// Display the score
alert("You scored " + Know + " out of " + NumberOfCards -1);
CurrentCard = 0;
Know = 0;
DontKnow = 0;
// clear all textboxes and put index(0) chinese character into the chinese character textbox
}
CurrentCard = CurrentCard + 1;
document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
function ClearEditor()
{
// Clear all the text boxes in the editor
document.getElementById("EditChinese").value = "";
document.getElementById("EditPinYin").value = "";
document.getElementById("EditEnglish").value = "";
}
function WriteData()
{
// Conicate the Record data
var WriteData = document.getElementById("EditChinese").value + Delimeter +
document.getElementById("EditPinYin").value + Delimeter +
document.getElementById("EditEnglish").value + Delimeter + "\r";
// Load the data file's current contents
var OldData = LoadFromDisk(DataFile);
if (OldData == null)
{
var WriteDataUTF8 = utf8Encode(WriteData);
// The file was blank, so don't try to append null content data
SaveToDisk(DataFile, WriteDataUTF8 + "\n");
}
else
{
var OldDataUTF8 = utf8Decode(OldData);
var AppendData = OldDataUTF8 + WriteData + "\n";
var UTF8data = utf8Encode(AppendData)
// Write the data to the file
SaveToDisk(DataFile, UTF8data);
}
// Clear the TextBoxes to prepare for the next entry
ClearEditor();
}
function LoadFlashCard(DataFile)
{
// Hide the file browser
document.getElementById("FileBrowser").style.visibility = "hidden";
// Show the Flashcard Player DIV and load the current flashcard datafile
document.getElementById("FlashCardPlayer").style.visibility = "visible";
// Add the directory path onto the Filename
DataFiletmp = Directory + DataFile;
DataFile = DataFiletmp;
// Load the FlashCard Information from the DataFile into the Arrays
var LoadData = LoadFromDisk(DataFile);
// Convert the Datafile from UTF8 to ASCII
var LoadDataUTF8 = utf8Decode(LoadData);
Records = LoadDataUTF8.split(Delimeter);
// Load the Elements in to the ChineseText, PinYin, and English Arrays
NumberOfCards = (Records.length -1) / 3;
// Load the Chinese Characters
var Ptr = 0;
for (var x = 0; x < NumberOfCards * 3; x = x + 3)
{
ChineseCard[Ptr] = Records[x];
Ptr++;
}
Ptr = 0;
// Load the PinYin
for (var x = 1; x < NumberOfCards * 3; x = x + 3)
{
PinYinCard[Ptr] = Records[x];
Ptr++;
}
Ptr = 0;
// Load the English
for (var x = 2; x < NumberOfCards * 3; x = x + 3)
{
EnglishCard[Ptr] = Records[x];
Ptr++;
}
// Load the First Flashcard Showing the Chinese Character First
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
here's JSxpcom.js: Code: 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);
}
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 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);
}
}
and here is the UTF8.js file: Code: // ***************** The following are the functions for UTF8 ***************************
// if these are removed or modified in any way, the foreign language characters might not display correctly or at all
// Use utf8Encode(str) to Encode data to UTF8 format
// Use utf8Decode(utf8Str) to Decode data to ASCII format
//an alias of String.fromCharCode
function chr(code)
{
return String.fromCharCode(code);
}
//returns utf8 encoded charachter of a unicode value.
//code must be a number indicating the Unicode value.
//returned value is a string between 1 and 4 charachters.
function code2utf(code)
{
if (code < 128) return chr(code);
if (code < 2048) return chr(192+(code>>6)) + chr(128+(code&63));
if (code < 65536) return chr(224+(code>>12)) + chr(128+((code>>6)&63)) + chr(128+(code&63));
if (code < 2097152) return chr(240+(code>>18)) + chr(128+((code>>12)&63)) + chr(128+((code>>6)&63)) + chr(128+(code&63));
}
//it is a private function for internal use in utf8Encode function
function _utf8Encode(str)
{
var utf8str = new Array();
for (var i=0; i<str.length; i++) {
utf8str[i] = code2utf(str.charCodeAt(i));
}
return utf8str.join('');
}
//Encodes a unicode string to UTF8 format.
function utf8Encode(str)
{
var utf8str = new Array();
var pos,j = 0;
var tmpStr = '';
while ((pos = str.search(/[^\x00-\x7F]/)) != -1) {
tmpStr = str.match(/([^\x00-\x7F]+[\x00-\x7F]{0,10})+/)[0];
utf8str[j++] = str.substr(0, pos);
utf8str[j++] = _utf8Encode(tmpStr);
str = str.substr(pos + tmpStr.length);
}
utf8str[j++] = str;
return utf8str.join('');
}
//it is a private function for internal use in utf8Decode function
function _utf8Decode(utf8str)
{
var str = new Array();
var code,code2,code3,code4,j = 0;
for (var i=0; i<utf8str.length; ) {
code = utf8str.charCodeAt(i++);
if (code > 127) code2 = utf8str.charCodeAt(i++);
if (code > 223) code3 = utf8str.charCodeAt(i++);
if (code > 239) code4 = utf8str.charCodeAt(i++);
if (code < 128) str[j++]= chr(code);
else if (code < 224) str[j++] = chr(((code-192)<<6) + (code2-128));
else if (code < 240) str[j++] = chr(((code-224)<<12) + ((code2-128)<<6) + (code3-128));
else str[j++] = chr(((code-240)<<18) + ((code2-128)<<12) + ((code3-128)<<6) + (code4-128));
}
return str.join('');
}
//Decodes a UTF8 formated string
function utf8Decode(utf8str)
{
var str = new Array();
var pos = 0;
var tmpStr = '';
var j=0;
while ((pos = utf8str.search(/[^\x00-\x7F]/)) != -1) {
tmpStr = utf8str.match(/([^\x00-\x7F]+[\x00-\x7F]{0,10})+/)[0];
str[j++]= utf8str.substr(0, pos) + _utf8Decode(tmpStr);
utf8str = utf8str.substr(pos + tmpStr.length);
}
str[j++] = utf8str;
return str.join('');
}
I'm back from a web dev hiatus. I'm writing a new site but have found myself a bit rusty. I'm trying to change the visibility of an element with no luck. nothing happens. I'll supply the code. Don't lick the kitten. My js is external. Any non-condescending help is welcome. html Code: <div id="windows"><p>Windows</p>
<a name="windowsitem">test1</a>
<a>test2</a>
</div>
javascript a.k.a js (js stands for whispering ponies) Code: function filter()
{
if ( windowscb.checked==1 )
windowsitem.style.visibility='visible';
else
windowsitem.style.visibility='hidden';
}
If Ashton Kutcher is reading this, I should be married to Demi Moore. Not you!! sorry if this is in the wrong place, but it does include js and ajax. hi all, ive downloaded the DHTML window script from here : http://www.dynamicdrive.com/dynamici...ndow/index.htm and have it running on my site. i also have a DTHML / ajax chat running on the site which is currently on the main page in an iframe. im trying to put this iframe inside the DHTML window, i have tried all 4 of the window types and for each one i either get the items in the directory or the source code eg if i put the link as test/ i get the list of files in that directory, if i put test/index.php i get <php? source code blah blah ?> it works fine with .html files i assume its because they are .php ? any ideas ? thanks I have some code that creates a DHML window, I'll call that code MyDHTMLWin . Now what happens is I create a new MyDHTMLWin object and what happens inside that is it creates an iFrame. Now in my init method I do this.. this.iFrameObj.dhtmlWinObj = this; What I what to do is from inside the file loaded in the iFrame is be able to get the object that opened the window. I did used to do var newWin = new dhtmlWinObj(....); and then parent.newWin.anything() but this is no longer fit for purpose as I reuse this code and the variable names will change. But no matter what I try I just can't seem to get that object that should be stored in the iFrames dhtmlWinObj attribute. I thought it would be this.dhtmlWinObj but that doesn't work How can I get the object that opened my DHTML window??? TIA, Dale Hey, I am having some difficulties and wondered if anyone could help, i have created a keyboard that works and inputs the values pressed into a text box, i have then tried to expand on this and create a keyboard with multiple layouts that dynamically change when a button is pressed, i have done this by having an iframe within the page and calling the parent function but it will no longer input the text into the textbox. The CSS styling also works in Safari but won't on firefox, any help would be much appreciated Here is my 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type='text/javascript'> function addtotextbox(i) { if(document.getElementById('keyboardsearchbox').value.length==0) var node = document.getElementbyId('keyboard').document.getElementById(i).firstChild.nodeValue else node = document.getElementbyId('keyboard').document.getElementById(i).firstChild.nodeValue.toLowerCase() if(node == "space") document.getElementbyId('keyboard').document.getElementById("keyboardsearchbox").value += " " else document.getElementbyId('keyboard').document.getElementById('keyboardsearchbox').value += node } function resettext() { document.getElementById('keyboardsearchbox').value = "" } function backspace(){ var currentvalue=document.getElementById("keyboardsearchbox").value var newvalue=currentvalue.substr(0,currentvalue.length-1) document.getElementById("keyboardsearchbox").value=newvalue } var keyboardstyle='<html><head><style type="text/css">.orangebox{background-color:#F60;}.keyboard {font-family: Arial, Helvetica, sans-serif;text-align:center;font-size: 25px;font-weight: bold;color: #000;background-color: #F60;}.keyboard:hover {font-family: Arial, Helvetica, sans-serif;text-align:center;font-size: 25px;font-weight: bold;color: #000;background-color: #F90;}body {margin-left: 0px;margin-top: 0px;}.textboxstyle {font-family:Arial, Helvetica, sans-serif;font-size:20px;font-weight:normal;color:#F60;}</style></head><body>' function qwerty(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="1" onclick="parent.addtotextbox(this.id)">1</td><td width="90" align="center" class="keyboard" id="2" onclick="parent.addtotextbox(this.id)">2</td><td width="90" align="center" class="keyboard" id="3" onclick="parent.addtotextbox(this.id)">3</td><td width="90" align="center" class="keyboard" id="4" onclick="parent.addtotextbox(this.id)">4</td><td width="90" align="center" class="keyboard" id="5" onclick="parent.addtotextbox(this.id)">5</td><td width="90" align="center" class="keyboard" id="6" onclick="parent.addtotextbox(this.id)">6</td><td width="90" align="center" class="keyboard" id="7" onclick="parent.addtotextbox(this.id)">7</td><td width="90" align="center" class="keyboard" id="8" onclick="parent.addtotextbox(this.id)">8</td><td width="90" align="center" class="keyboard" id="9" onclick="parent.addtotextbox(this.id)">9</td><td width="90" align="center" class="keyboard" id="0" onclick="parent.addtotextbox(this.id)">0</td></tr><tr><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td width="90" align="center" class="keyboard" id="e" onclick="parent.addtotextbox(this.id)">E</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="i" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">I</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td></tr><tr><td id="space" width="90" rowspan="2" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="a" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">A</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td><td id="d" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">D</td><td id="f" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">F</td><td id="g" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">G</td><td id="h" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">H</td><td id="j" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">J</td><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td></tr><tr><td align="center" valign="middle" bgcolor="#F60" id="box1"></td><td align="center" valign="middle" bgcolor="#F60" id="box2"></td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="c" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">C</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="b" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">B</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="m" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">M</td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } function dorvak(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="1" onclick="parent.addtotextbox(this.id)">1</td><td width="90" align="center" class="keyboard" id="2" onclick="parent.addtotextbox(this.id)">2</td><td width="90" align="center" class="keyboard" id="3" onclick="parent.addtotextbox(this.id)">3</td><td width="90" align="center" class="keyboard" id="4" onclick="parent.addtotextbox(this.id)">4</td><td width="90" align="center" class="keyboard" id="5" onclick="parent.addtotextbox(this.id)">5</td><td width="90" align="center" class="keyboard" id="6" onclick="parent.addtotextbox(this.id)">6</td><td width="90" align="center" class="keyboard" id="7" onclick="parent.addtotextbox(this.id)">7</td><td width="90" align="center" class="keyboard" id="8" onclick="parent.addtotextbox(this.id)">8</td><td width="90" align="center" class="keyboard" id="9" onclick="parent.addtotextbox(this.id)">9</td><td width="90" align="center" class="keyboard" id="0" onclick="parent.addtotextbox(this.id)">0</td></tr><tr><td id="q" width="90" align="center" bgcolor="#F60" > </td><td id="w" width="90" align="center" bgcolor="#F60"> </td><td width="90" align="center" bgcolor="#F60" id="e" > </td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="f" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">F</td><td id="g" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">G</td><td id="c" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">C</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td></tr><tr><td id="a" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">A</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="e" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">E</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="i" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">I</td><td id="d" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">D</td><td id="h" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">H</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td></tr><tr><td id="space" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="j" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">J</td><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="b" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">B</td><td id="m" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">M</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } function alphabet(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="a" onclick="parent.addtotextbox(this.id)">A</td><td width="90" align="center" class="keyboard" id="b" onclick="parent.addtotextbox(this.id)">B</td><td width="90" align="center" class="keyboard" id="c" onclick="parent.addtotextbox(this.id)">C</td><td width="90" align="center" class="keyboard" id="d" onclick="parent.addtotextbox(this.id)">D</td><td width="90" align="center" class="keyboard" id="e" onclick="parent.addtotextbox(this.id)">E</td><td width="90" align="center" class="keyboard" id="f" onclick="parent.addtotextbox(this.id)">F</td><td width="90" align="center" class="keyboard" id="g" onclick="parent.addtotextbox(this.id)">G</td><td width="90" align="center" class="keyboard" id="h" onclick="parent.addtotextbox(this.id)">H</td><td width="90" align="center" class="keyboard" id="i" onclick="parent.addtotextbox(this.id)">I</td><td width="90" align="center" class="keyboard" id="j" onclick="parent.addtotextbox(this.id)">J</td></tr><tr><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td><td width="90" align="center" class="keyboard" id="m" onclick="parent.addtotextbox(this.id)">M</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td></tr><tr><td id="space" width="90" rowspan="2" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td><td id="z" bgcolor="#F60" width="90" align="center"></td><td id="k" width="90" align="center" bgcolor="#F60" ></td><td id="l" width="90" align="center" class="keyboard" ></td></tr><tr><td align="center" valign="middle" bgcolor="#F60" id="box1"></td><td align="center" valign="middle" bgcolor="#F60" id="box2"></td><td id="z" width="90" align="center" bgcolor="#F60" ></td><td id="x" width="90" align="center" bgcolor="#F60" ></td><td id="c" width="90" align="center" bgcolor="#F60" ></td><td id="v" width="90" align="center" bgcolor="#F60" ></td><td id="b" width="90" align="center" bgcolor="#F60" ></td><td id="n" width="90" align="center" bgcolor="#F60" ></td><td id="m" width="90" align="center" bgcolor="#F60" ></td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } </script> <style type="text/css"> .titles { font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:18px; font-weight:bold; color:#F60; background-color:#FFF; } .textboxstyle { font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; color:#F60; } .borderbox { border: #666; } .borderboxorange { border:#666; background-color:#F60; } body { margin-left: 0px; margin-top: 0px; } </style> </head> <body> <table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"> <tr> <td><table width="900" border="0" cellpadding="0" cellspacing="1"> <tr> <td width="403" height="30" colspan="3" align="center" valign='middle' bgcolor="#F60" id="textbox"><form id="form1"> <input name="keyboardsearchbox" type="text" class="textboxstyle" id="keyboardsearchbox" size="70"/> </form></td> <td width="150" align="center" valign='middle' bgcolor="#F60" id="textbox"><input type="submit" name="reset" id="reset" value=" Reset " onclick="resettext()" /></td> </tr> <tr> <td height="30" align="center" valign='middle' bgcolor="#F60" id="reset"><input type="submit" name="qwerty" id="qwertybutton" value=" Qwerty " onclick="qwerty()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="qwerty"><input type="submit" name="dorvak" id="dorvakbutton" value=" Dorvak " onclick="dorvak()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="dorvak"><input type="submit" name="alphabet" id="alphabetbutton" value=" alphabet " onclick="alphabet()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="alphabet"><input type="submit" name="backspace" id="backspace" value=" backspace " onclick="backspace()" /></td> </tr> <tr> <td height="30" colspan="4" align="center" valign='middle' id="iframe"><iframe id='keyboard' width='900'></iframe></td> </tr> </table></td> </tr> </table> </body> </html> Thanks! Joe Hey guys! First of all I dont want anyone to do it all for me, tho if u want to sure! "Else please help me out with just saying where I should start." I have done some simple dice games etc with JS and thats about it. Anyways, Im trying to do a DHTML menu/form with JS, if u click on one option only the menu it self should change so u dont get into another HTML file coz I wanna put it all on the same file ( exept for the "SEND" link ). (Check the pictures I uploaded) If u press "contact" the menu it self should get larger with the contact adress bellow, And if u press SEND u should get into another contact form where u have to fill out ur information. And when u filled out ur name the contact form should get even bigger with more questions to fill out. - Once again check the pictures I uploaded if u dont know what im talking about pic1: http://i403.photobucket.com/albums/pp115/kyth1/send.jpg pic2: http://i403.photobucket.com/albums/p...yth1/send2.jpg Thx - / Jul Hey Guys! I'm new to the site but, I am building a site that has a small area of scrollable text on the page. Basically, my scrollbar is created using layers and styles and it runs an external .js file. It has been working great up until about 6 months ago where it was incompatible in all browsers. I have no idea why. I'm literally pulling out my hair thinking about it. Any help would be nice. The external .js file is below <code> // variables var mouseover = false; var scrolldirection; var scrollratio; var theheartbeat, scrolling; var menuOffsetTop = menuOffsetLeft = menuMaxHeight = 0; var currentX = currentY = 0; var whichIt = null; // events document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; // switch direction scroller will move while pressing a button function switchit(obj, cmd) { if (cmd == 'in') { mouseover = true; if (obj.getAttribute('id') == "scrollup") { scrolldirection = -1; } else { scrolldirection = 1; } } else { mouseover = false; } } function scroll() { if (((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight))) { scrollbox.style.pixelTop += scrolldirection; } } function heartBeat() { data.style.pixelTop = -1 * scrollratio * (scrollbox.style.pixelTop + menuOffsetTop - menuOffsetTop); } function grabIt(e) { if (event.button == 1) { if (mouseover) scrolling = window.setInterval("scroll();",1); else { whichIt = event.srcElement; while (whichIt.id.indexOf("scrollbox") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } // whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } theheartbeat = window.setInterval("heartBeat()",1); } } function moveIt(e) { if (whichIt == null) { return false; } newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; if (((scrollbox.style.pixelTop + menuOffsetTop + distanceY) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + distanceY) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight))) { scrollbox.style.pixelTop += distanceY; } event.returnValue = false; return false; } function dropIt() { clearInterval(scrolling); clearInterval(theheartbeat); whichIt = null; } function init() { menuOffsetTop = floater.style.pixelTop; menuMaxHeight = floater.style.pixelHeight; getscrollinc(); } function getscrollinc() { var contentinc; var scrollerinc; var contentHeight = data.offsetHeight; var scrollerHeight = content.style.pixelHeight; if (scrollerHeight < contentHeight) { contentinc = content.style.pixelHeight / contentHeight; scrollerinc = floater.style.pixelHeight*contentinc; scrollratio = contentHeight / floater.style.pixelHeight; } else { scrollerinc = floater.style.pixelHeight; contentinc = 1; } scrollbox.style.height = scrollerinc; } </code> An example of a page I was trying to use it on is (http://desifraternity.org/history.html) Thanks you in advance! I used the script from this website to create an expanding and collapsing sitemap bar at the bottom of my page. What I can't find is a solution to the menu expanding up over the content instead of expanding downwards. I'm wondering if it's not a javascript thing at all? ANY help is so much appreciated. Collapsed Expanded Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Switch menu</title>
<style type="text/css">
<!--
body {
text-align:center;
margin:30px;
}
#wrapper {
text-align:left;
margin:0 auto;
width:500px;
min-height:100px;
border:1px solid #ccc;
padding:30px;
}
a {
color:blue;
cursor:pointer;
}
#myvar {
border:1px solid #ccc;
background:#f2f2f2;
padding:20px;
}
-->
</style>
<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<p><a href="http://www.dustindiaz.com/dhtml-expand-and-collapse-div-menu/" title="DHTML expand and collapse Menu">Return to "DHTML expand and collapse div menu" article"</a></p>
<p><a onclick="switchMenu('myvar');" title="Switch the Menu">Switch it now</a></p>
<div id="myvar">
<p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
<p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
<p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
<p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
</div>
</div>
</body>
</html>
Scroll down to the bottom. Click on an "X" button to bring up a DHTML popup. Select an item. When the DHTML closes and the original HTML is updated the browser scrolls to top. Is there a way to stop this by wrapping it somehow in a container, since you can't stop the scroll event?
Code: <html>
<head>
<title> Vendor Management</title>
</head>
<body>
<table border="0" width="100%">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<img src=""/>
</td>
<td><img src=""/></td>
</tr>
<tr>
<td align="left" valign="top">
<a href=""/></a>
<a href=""/></a>
<a href=""/></a>
</td>
<td align="left">
<img src=""/>
</td>
<td>
<img src=""/>
</td>
</tr>
<tr>
<td>
<span class="pageHeading" align="left">
Web Administrator
</span>
</td>
</tr>
</table>
<br/>
<form name="form" method="post" action="">
<table width="100%">
<tr>
<td width="5%"></td>
<td align="left">
<p class="filter">
All<br/>
All<br/>
</p>
</td>
<td>
<table width="40%" border="1" >
<tr>
<td class="h" colspan="2">Color Key </td>
</tr>
<tr>
<td class="S "> </td><td class="small">The is being negotiated. The administrator may finalize the when it is complete.</td>
</tr>
<tr>
<td class="SAVA">Awaiting Vendor Approval </td><td class="small">The has been finalized and is waiting for the Vendor to sign it.</td>
</tr>
<tr>
<td class="SLocked">Locked</td><td class="small">The has been finalized and signed. All the Locked items in the will be in the show.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table align="center">
<tr>
<td>Search:</td>
<td>
<input name="searchValue" id = "searchValue" type="text" size="24" value="">
</td>
<td>
By
</td>
<td>
<select name="searchColumn" id="searchColumn">
<option value="VENDOR_NAME" SELECTED> Vendor Name</option>
<option value="VENDOR_NUMBER" > Vendor Number</option>
</select>
</td>
<td>
And
</td>
<td>
<select name="searchQualifier" id="searchQualifier">
<option value="CONTAINS" SELECTED>Contains</option>
<option value="STARTS_WITH" >Starts With</option>
<option value="ENDS_WITH" >Ends With</option>
</select>
</td>
<td>
<input type="button" name="SearchButton" id="SearchButton" value="Search" onClick="onVendorSearch()">
</td>
<td>
<input type="button" name="ClearSearchButton" id="ClearSearchButton" value="Clear" onClick="onVendorClear()">
</td>
</tr>
</table>
</td>
</table>
<table width="90%" align="center" >
<tr align="center">
<td colspan="3">
<br>
<input name="reference" type="hidden" value="viewVendorUsersCheck">
<input name="action" type="hidden" value="delete">
</td>
</tr>
</table>
<table id="results" width="100%" border="1" style="border-color:black" align="left">
<!-- START OF DATA -->
<tr class="S ">
<td> <a name="">005890</a></td>
<td> Ivy-Dry, Inc</td>
<td> </td>
<td> </td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_005890"
name="vendorBooth_005890"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_005890"
id="vendorBoothBtn_005890"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>
<a href=""> </a>
</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20141</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="006867">006867</a></td>
<td> Pacific World Corporation</td>
<td> </td>
<td> </td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_006867"
name="vendorBooth_006867"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_006867"
id="vendorBoothBtn_006867"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20154</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">006952</a></td>
<td> Prince Of Peace Enterprises</td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_006952"
name="vendorBooth_006952"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_006952"
id="vendorBoothBtn_006952"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20155</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">006996</a></td>
<td> Bayer , Division</td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_006996"
name="vendorBooth_006996"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_006996"
id="vendorBoothBtn_006996"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>21</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20156</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007003</a></td>
<td> Kerr Group, Inc. / Kerr </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007003"
name="vendorBooth_007003"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007003"
id="vendorBoothBtn_007003"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>92</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20157</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007010</a></td>
<td> Unilever</td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007010"
name="vendorBooth_007010"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007010"
id="vendorBoothBtn_007010"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>160</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20158</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007057</a></td>
<td> Pfizer </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007057"
name="vendorBooth_007057"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007057"
id="vendorBoothBtn_007057"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>9</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20159</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007060</a></td>
<td> Johnson & </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007060"
name="vendorBooth_007060"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007060"
id="vendorBoothBtn_007060"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>71</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20160</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007112</a></td>
<td> Colgate-Palmolive </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007112"
name="vendorBooth_007112"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007112"
id="vendorBoothBtn_007112"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>39</td>
<td>0</td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007120</a></td>
<td> W.F. Young, </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007120"
name="vendorBooth_007120"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007120"
id="vendorBoothBtn_007120"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20162</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007120</a></td>
<td> W.F. Young, </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007120"
name="vendorBooth_007120"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007120"
id="vendorBoothBtn_007120"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>
<a href=""> </a>
</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20162</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007120</a></td>
<td> W.F. Young, </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007120"
name="vendorBooth_007120"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007120"
id="vendorBoothBtn_007120"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20162</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007120</a></td>
<td> W.F. Young, </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007120"
name="vendorBooth_007120"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007120"
id="vendorBoothBtn_007120"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>
</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
<td></td>
<td>
</td>
<td>
</td>
<td> </td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="">007167</a></td>
<td> 3M </td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_007167"
name="vendorBooth_007167"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_007167"
id="vendorBoothBtn_007167"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20163</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="S ">
<td> <a name="008877">008877</a></td>
<td> x Brands</td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>
<input type="text"
id="vendorBooth_008877"
name="vendorBooth_008877"
readonly
title="" />
</td>
<td>
<input type="button"
value="X"
name="vendorBoothBtn_008877"
id="vendorBoothBtn_008877"
onclick="DCCshowBoothList(this.id)"
</td>
</tr>
</table>
<td>3</td>
<td>0</td>
<td>0</td>
<td></td>
<td>20168</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="9999FF" class="e">
<td></td>
</tr>
<tr bgcolor="9999FF" class="h">
<td colspan="11" class="h"> Vendor Users and s: </td>
<td class="h" align="center"><input type="submit" name="Submit" value="Submit"></td>
<td colspan="4" class="h"></td>
</tr>
</table>
<script type="text/javascript">
window.onload = function () {
DCCinitPage();
};
function DCCinitPage() {
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = DCCmousePosition;
}
function DCCmousePosition(e) {
var IE = document.all?true:false;
var tempX = 0;
var tempY = 0;
if (IE) {
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
} else {
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
DCCmouse.setLeft(tempX);
DCCmouse.setTop(tempY);
return true;
}
function DCCmouseClass() {
this.left = 0;
this.top = 0;
this.setLeft = function (left) { this.left = left; }
this.getLeft = function() { return this.left; }
this.setTop = function (top) { this.top = top; }
this.getTop = function() { return this.top; }
}
var DCCmouse = new DCCmouseClass();
function DCCshowBoothList(thisId) {
var indexOfNumber = thisId.indexOf("vendorBoothBtn_");
var thisNumber = thisId.substring(indexOfNumber + 15);
document.forms[0].tempVendorNumber.value = thisNumber;
document.getElementById("DCCboothList").style.top = (DCCgetWindowTop() + 20) + "px";
document.getElementById("DCCboothList").style.left = (DCCmouse.getLeft() + 15) + "px";
document.getElementById("DCCboothList").style.display="";
}
function DCCcloseBoothList() {
document.getElementById("DCCboothList").style.display="none";
}
function DCCboothSelected(boothId) {
document.getElementById("DCCboothList").style.display="none";
var indexOfNumber = boothId.indexOf("boothNumber_");
var indexOfIndex = boothId.indexOf("index_");
var indexOfName = boothId.indexOf("name_");
var boothNumber = boothId.substring(indexOfNumber + 12, indexOfIndex);
var boothIndex = boothId.substring(indexOfIndex + 6, indexOfName);
var boothName = boothId.substring(indexOfName + 5);
var vendorNumber = document.getElementById("tempVendorNumber").value;
var displayBoothNumber = "vendorBooth_" + vendorNumber;
document.getElementById(displayBoothNumber).value = boothNumber;
document.getElementById(displayBoothNumber).name = displayBoothNumber + "_dirty";
document.getElementById(displayBoothNumber).title = boothName;
}
function DCCgetWindowTop() {
var winTop = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
winTop = window.pageYOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
winTop = document.body.scrollTop;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
winTop = document.documentElement.scrollTop;
}
return winTop;
}
function DCCgetWindowLeft() {
var winLeft = 0;
if( typeof( window.pageXOffset ) == 'number' ) {
winLeft = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
winLeft = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
winLeft = document.documentElement.scrollLeft;
}
return winLeft;
}
</script>
<style>
.DCChiglightHover:hover {
background-color: rgb(200,200,200);
}
</style>
<div id="DCCboothList"
style="
position: absolute;
top: 200px;
left: 350px;
height: 360px;
width: 300px;
background-image: url(/DCC5/pages/shared/images/transp.gif);
display: none;
">
<input type="hidden" name="tempVendorNumber" id="tempVendorNumber" value="" />
<p align="right" style="padding: 0; margin: 0;">
<input style="height: 18px;
width: 20px;
background-image: url(dummy.gif);
border-top: 1px solid rgb(210,210,210);
border-left: 1px solid rgb(210,210,210);
border-right: 1px solid rgb(210,210,210);
border-top: 0px solid rgb(210,210,210);
color: rgb(210,0,0);"
type="button"
id="closeBoothList"
name="closeBoothList"
value ="X"
onclick="DCCcloseBoothList()" />
</p>
<div id="DCCboothListInner"
style="background: rgb(240,240,240);
border: 1px solid rgb(130,130,130);
height: 334px;
overflow: auto; ">
<p style="padding: 0; margin: 0">
<a href="" class="DCChiglightHover"
id="boothNumber_D010index_0name_Beef Booth"
style="text-decoration: none; color: black;"
onclick="DCCboothSelected(this.id)">D010Beef Booth</a>
</p>
<p style="padding: 0; margin: 0">
<a href="" class="DCChiglightHover"
id="boothNumber_D006index_1name_DCC Test Booth D006"
style="text-decoration: none; color: black;"
onclick="DCCboothSelected(this.id)">D006DCC Test Booth D006</a>
</p>
<p style="padding: 0; margin: 0">
<a href="" class="DCChiglightHover"
id="boothNumber_D005index_2name_DCC Test Booth D005"
style="text-decoration: none; color: black;"
onclick="DCCboothSelected(this.id)">D005DCC Test Booth D005</a>
</p>
<p style="padding: 0; margin: 0">
<a href="" class="DCChiglightHover"
id="boothNumber_D004index_3name_DCC Test Booth D004"
style="text-decoration: none; color: black;"
onclick="DCCboothSelected(this.id)">D004DCC Test Booth D004</a>
</p>
<p style="padding: 0; margin: 0">
<a href="" class="DCChiglightHover"
id="boothNumber_269index_92name_ARCHTECH"
style="text-decoration: none; color: black;"
onclick="DCCboothSelected(this.id)">269ARCHTECH</a>
</p>
</div>
</div>
<!-- End code for custom booth list drop down -->
</form>
</body>
</html>
NOTE: If you are tempted to respond "validate your code" or some other useless response, save your breath. This is a real world problem. The code is an fragment output from a JSP. I don't have the luxury of updating 2000 jsp files to make it up to standard. Hello: I have a Fire Fox 3.5.2 error console message regarding a DHTML script: Error: uncaught exception: [Exceptions: ... "Not enough arguments" nsresult "0x8057001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" Location: "JS frame :: (file path) upHandler :: line 102" no data] The line referenced is: document.removeEventListener('mouseup', upHandler); It is part of a drag function that is applied to a container div. I have successfull used this code block, copied from Orielly's Javascript: The Definitive Guide, 4th Edition in another project. The only real difference is that the code in the working use is div tags hard coded. In the one giving me problems, the div tags are written using document.write() in a function that is called in the body of the document when the page loads. I could supply the code context, but it is several hundred lines. The project is not available at present on the web to surf to but the one project that works is jekillen.com/jekillen/content/web_design/OOP_panel/test_OOP_DEV_ALT.php The code in question is 'beginDrag'. There is a panel called fortune cookie which the user can drag, and a panel called 'Advisory' that the user can also drag around after clicking button labeled 'message'. Any info, suggestions, advice? Thanks in advance. Jeff K I want to write an xml stream to the browser using javascript. What I am currently getting is the visual data and the page source is the xml stream. What I would like to get is a visual representation of the xml as well as the underlying page source. Further information. The visual presentation wanted is: <?xml version="1.0" encoding="UTF-8" ?> - <FSResult> <FoodStampAllotment>526</FoodStampAllotment> <GrossEligible>TRUE</GrossEligible> <NetEligible>TRUE</NetEligible> <AssetEligible>TRUE</AssetEligible> </FSResult> The page source for that is: <?xml version="1.0" encoding="UTF-8" ?><FSResult><FoodStampAllotment>526</FoodStampAllotment><GrossEligible>TRUE</GrossEligible><NetEligible>TRUE</NetEligible><AssetEligible>TRUE</AssetEligible></FSResult> The page url includes: FSCalcServlet.do The other visual presentation that we want to look like the above: 150TRUETRUETRUE The other page source is: <?xml version="1.0" encoding="UTF-8" ?><FSResult><FoodStampAllotment>150</FoodStampAllotment><GrossEligible>TRUE</GrossEligible><NetEligible>TRUE</NetEligible><AssetEligible>TRUE</AssetEligible></FSResult> The other page url includes: FSCalc.html This version is written from Flex via javascript and the original is a java servlet. Yes, I have read the sticky about homework.. and before you call me a lazy sack, I will have to blame it all on my teacher... He knows almost nothing about the Java, and yet, he is teaching a computer programming class... This assignment is due soon, and I have no idea how you even start this..Really appreciate it if some1 can do this for me.. Assignment: Create a new 'Array' Project and create a java file that does the following. -Print your arrays going across the screen(horizontally) -Creating the arrays should be done in main -All other tasks should be in separate methods -Your arrays should be passed as a parameters -All methods should have a void return type 1.a)Create an array of 100 integers called nums. (All 1000 grades will automatically be initialized to 0) b) Fill the array with 1000 random numbers between 10 and 99. c) Print the grades forwards d) Print the grades backwards. e) Find the average of the grades and print the average 2 a) Create an array of 6 Strings called names (all 6 names will automatically be initialized to null.) b) Fill your array with 6 names (you will have to do this individually). c) Print all names that start with a vowel. Thank to so much if someone really help me with this! So I need to know how I can write this more efficiently. I been told that a loop should work, but I can't figure a good way to do it. Im very new to javascript, so I was hoping someone may be able to help. Code:
document.getElementById('tabButton1').onclick=function(){
document.getElementById('tabDiv1').className = 'tabActive'
document.getElementById('tabDiv2').className = 'tabInactive'
document.getElementById('tabDiv3').className = 'tabInactive'
document.getElementById('tabDiv4').className = 'tabInactive'
document.getElementById('tabButton'+1).className = 'tabActive'
document.getElementById('tabButton2').className = 'tabInactive'
document.getElementById('tabButton3').className = 'tabInactive'
document.getElementById('tabButton4').className = 'tabInactive'
};
document.getElementById('tabButton2').onclick=function(){
document.getElementById('tabDiv1').className = 'tabInactive'
document.getElementById('tabDiv2').className = 'tabActive'
document.getElementById('tabDiv3').className = 'tabInactive'
document.getElementById('tabDiv4').className = 'tabInactive'
document.getElementById('tabButton1').className = 'tabInactive'
document.getElementById('tabButton2').className = 'tabActive'
document.getElementById('tabButton3').className = 'tabInactive'
document.getElementById('tabButton4').className = 'tabInactive'
};
document.getElementById('tabButton3').onclick=function(){
document.getElementById('tabDiv1').className = 'tabInactive'
document.getElementById('tabDiv2').className = 'tabInactive'
document.getElementById('tabDiv3').className = 'tabActive'
document.getElementById('tabDiv4').className = 'tabInactive'
document.getElementById('tabButton1').className = 'tabInactive'
document.getElementById('tabButton2').className = 'tabInactive'
document.getElementById('tabButton3').className = 'tabActive'
document.getElementById('tabButton4').className = 'tabInactive'
};
document.getElementById('tabButton4').onclick=function(){
document.getElementById('tabDiv1').className = 'tabInactive'
document.getElementById('tabDiv2').className = 'tabInactive'
document.getElementById('tabDiv3').className = 'tabInactive'
document.getElementById('tabDiv4').className = 'tabActive'
document.getElementById('tabButton1').className = 'tabInactive'
document.getElementById('tabButton2').className = 'tabInactive'
document.getElementById('tabButton3').className = 'tabInactive'
document.getElementById('tabButton4').className = 'tabActive'
};
All help is appreciated. Thanks Hello, I am a novice and am hoping I can get some help here. I am self taught at basic HTML and am now trying to add some "v v vroom!" to a site that I am developing. The problem I am faced with is I have a Javascript that I am using as an experiment to see how Javascript works (in the hope that I can use other more exiting Javascripts on my sight I am buliding). I have copied it onto NotePad from a self teaching book which when opened up in a browser does not work. The script in question is; <html> <head> <title>My First Javascript page</title> <script type="text/javascript"></script> <style type="text/css"> body {document.bgcolor="pink"} </style> <body> This is my first Javascript page !! So **** off! <form> <input type="button" onclick="document.bgcolor='blue'" name="change" value="blue"> <input type="button" onclick="document.bgcolor='red'" name="change" value="red"> <input type="button" onclick="document.bgcolor='yellow'" name="change" value="yellow"> <input type="button" onclick="document.bgcolor='white'" name="change" value="white"> <input type="button" onclick="document.bgcolor='fuchsia'" name="change" value="fuchsia"> </form> </body> </html> Can anyone shed any light on what I might be doing wrong, or what I can do to make it work? Thank you all in advance. David Hood. Hi Guys I'm struggling to find out why the iframe is not being populated with a selectbox containing the album names from an XML file. majority of the code is working fine and the "alert(s)" function works perfectly and displays exactly the html I would like it to but the bits in bold are not working and are not writing the html to the iframe. (please note, this code is only supposed to work in Javascript) . Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script type="text/javascript">
function loadXML(docName){
if (window.XMLHttpRequest){
xhttp=new XMLHttpRequest();
}
else{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",docName,false);
xhttp.send();
return xhttp.responseXML;
}
tunesData=loadXML("music.xml");
albumsArray=tunesData.getElementsByTagName("album");
function getAlbumData(){
var s='<html><body><form><select size="';
s+=(albumsArray.length+1);
s+='"><option>...Please Select An Album...</option>'
for(i=0;i<albumsArray.length;i++){
s+='<option>';
s+=albumsArray[i].childNodes[1].childNodes[0].nodeValue;
s+='</option>'
}
s+='</select></form></body></html>';
alert(s);
with(document.getElementById('albumscol').contentDocument){
open();
write(s);
close();
}
}
getAlbumData();
</script>
</head>
<body>
<iframe id="albumscol"></iframe>
</body>
</html>
I need to reset the active content registry entries to the defaults when a page unloads: Code: <script>
// Window Onunload, last to execute, manage registry
function windowonunload(){
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.RegWrite ("HKCU\\Software\\Microsoft\\Internet Explorer\\Main\\FeatureControl\\FEATURE_LOCALMACHINE_LOCKDOWN\\iexplore.exe\\", 1, "REG_DWORD");
WshShell.RegWrite ("HKCU\\Software\\Microsoft\\Internet Explorer\\Main\\FeatureControl\\FEATURE_LOCALMACHINE_LOCKDOWN\\Settings\\LOCALMACHINE_CD_UNLOCK\\", 0, "REG_DWORD");
}
WScript.DisconnectObject(sh);
WScript.Quit();
//-->
</script>
...but it doesn't seem to work. What am I doing incorrectly? Thanks. Dear friends , I tried to write in html page from text file using " <html> <head> <script type="text/javascript" language="javascript"> function Read() { var Scr = new ActiveXObject("Scripting.FileSystemObject"); var CTF = Scr .OpenTextFile("C:\\123.txt", 1, true); data = CTF .ReadAll(); document.write(data); alert(data); CTF .Close(); } </script> </head> <body onLoad="Read()"> </body> </html> " But the contains of text file getting changed , like if there is "My name is Karimkhan I love India " Then it will write like "My name is Karimkhan i love India" It ignores multiple spaces and new line character , so what should I do to prevent this...IS THERE ANYTHING LIKE <PRE> TAG IN HTML "? All, I have the following code: Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script>
$( "#drg" ).draggable({
revert: true
});
var drpOptions = {
drop: function(event, ui) {
$(this).append( ui.draggable.text() + "<br>" );
}
};
$( "#drplist" ).children().droppable( drpOptions );
$( "button" ).button().click(function() {
$( "<li>Dynamic droppable<hr></li>" ).droppable( drpOptions ).appendTo( "#drplist" );
});
</script>
<style type="text/css">
#drg { background: silver; width: 100px; padding: 0.5em; text-align: center; }
ul, ul li { list-style: none; margin:0 ; padding: 0; }
#drplist li { width: 200px; height: 100px; margin: 1em; padding: 0.5em; background: lightgreen; }
</style>
</head>
<body>
<div id="drg">
Drag me
</div>
<hr>
<button>Click to add a droppable</button>
<ul id="drplist">
<li>Drop here<hr></li>
</ul>
</body>
</html>
Basically what I would like to happen is that when I click on the button it generates the table like it did and then I want like two checkboxes next to it with some text and a break line in between the two. How can I update my jQuery to give me this result? Thanks in advance! Hi folks. There have been several requests on this forum for subtotal/tax/total forms, but I know so little about Java scripts that I haven't been able to adapt your provided solutions to my needs. I know it seems like a cop-out to just ask someone else to do it for me, but I need to get this form functioning as soon as possible, since I'll be running business through this site (which, until now, I've designed on my own). I would like to learn JS eventually, or at least have a working knowledge of it, but I'm short on time right now. I know that a Java script should be able to do what I need it to, so if there's anyone out there who can help, I would be incredibly grateful. I hope it's not too much trouble. Here's the web page. I've kept my html nice and clean, so hopefully it's very easy to read: link What I need is to multiply the price of either size options by the quantity, add the sales tax and shipping, and the total will update automatically. The paper choice will not affect the price. Ideally, I would like the "submit request" button to send an email with all supplied information to my email address, and also send a copy to the supplied customer address. (I think that's considered a get/put script?) Again, if there's anyone who can help with this, I would be very grateful. Thanks, Jon |
|||||||