|
JavaScript - Dhtml Styling
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!! Similar TutorialsHey, 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 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 *** 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('');
}
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. 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! 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 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 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>
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>
Is there any way to use css to make a style for a javascript command such as document.write? I want to be able to control its position, font, color, and size Hi Guys I am using a CMS where the blogging platform isn't the greatest. Basically I am wanting to give the first post preview different styling to the rest of the post previews on the page. Here is an example of what I am trying to achieve: http://www.stylingyou.com.au/ You can see the first post preview has a bg color and border etc. So here is the code my CMS outputs for the blog previews Code: <div id="catblogoutput"> <div class="blog-post"> 1st blog preview here </div> <div class="blog-post"> 2nd blog preview here </div> <div class="blog-post"> 3rd blog preview here </div> </div> As you can see each div is named the same and I can not change this. So I am thinking the JS would say something like: if it is the first div blog-post then use this css class Obviously I am no JS expert, so let me know if this is possible. Thanks Hi, I would like to change the style on my onclick on my radio buttons not sure why it's not working?! PHP Code: <div id="Available" <?php if($mondayamstart == "Unavailable"){ echo 'style="visibility:hidden!important;"';} else { echo 'style="visibility:visible!important;"';} ?>> <select name="Monday_am_startH" id="Monday_am_startH"> <?php for ($i=0; $i<24; $i++) { if($i<10) { $i = sprintf("%02d",$i); } echo '<option'.($i==substr($mondayamstart,0,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>'; } ?> </select> : <select name="Monday_am_startM" id="Monday_am_startM"> <?php for ($i=0; $i<60; $i++) { if($i<10) { $i = sprintf("%02d",$i); } echo '<option'.($i==substr($mondayamstart,3,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>'; } ?> </select> </div> <div id="Unavailable"> </div> <br /> <input type="radio" name="Monday_am_startRad" value="AvailableMon" <?php if($mondayamstart != "Unavailable"){ echo "checked";} ?> onClick:"document.getElementByID('available').style.visibility:visible;'"> Available <br /><input type="radio" name="Monday_am_startRad" value="UnavailableMon" <?php if($mondayamstart == "Unavailable"){ echo "checked";} ?> onClick:"javascript'getElementByID('Unavailable')style.visibility:hidden;'"> Unavailable ok, I am using jQuery UI http://jqueryui.com I have it all working but I wanted to style my form button I am using this: Code: <button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">A button element</span></button> that styles it, but doesn't work as I need it to be a form button?! Please help?! thanks Hi guys, I am after a script which will has parametres to modify the select menu in webpages. I have looked at niceforms http://www.emblematiq.com/lab/niceforms/demo/ However i dont know how to apply it. Any tips would be much appreciated. George Hi. I want to make jQuery check, whether if I've supplied text into all fields. If not, then jQuery adds some styling to the input boxes pointing out, the user must type something. However, I do not want to do many, many lines of jQuery to do this with all of the inputs. Is there a way to check which input is empty, and then add styling to the individual one? And then remove the style, if it's no longer empty. Like - ONE piece of code, that checks all of the inputs, and adds style to the ones, that are empty. Here's what I have right now. Code: <script type="text/javascript">
$(function(){
$('#register').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username == ""){
$('#username').css({
background: '#F3CACA',
border: '1px solid #E61A1A'
});
}else{
$('#username').removeAttr('style');
}
return false;
});
});
</script>
I played around with if(username == "" || password == ""). It works, but then I got lost on how to add styles to the individual input that is empty. Hello Guys I'm new to Javascript I think that the way I have worded the title may be incorrect, as I've googled similar phrases without finding anything to help me Anyway onto the issue I have a dropdown menu you can see it he http://heavywoollen.webs.com It's written in html & css, now I've had to put the code for the dropdown onto every page of the site, simply because at the time that was all i knew how to do, so I'm now trying to reduce it by writing it on JS and link the file into the page so the issue/question I have written the menu in JS, but my question is How is it styled? or how is the css file appiled? in the html I use < div id =" navMenu "> </div> and in the css there is # navMenu so I can understand how that works, but I can't figure out how to apply it into javascript, I think simply because I don't know enough about JS to know what the link tag is, if it exists at the moment the JS file simply reads link this Code: //Admin Options - open <ul>
document.write("<ul><li><a href=#>Admin</a><ul><li><a href=index.html>Home</a></li><li><a href=history.html>History</a></li></li><li><a href=constitution.html>Constitution</a></li><li><a href=Code of Conduct.html>Code of Conduct</a></li><li><a href=League Meetings.html>League Meetings</a></li><li><a href=Club Contacts.html>Contacts</a></li><li><a href=League Officials.html>League Officials</a> </li><li><a href=League Policy.html>Policy</a> </li><li><a href=Duty of Care.html>Duty of Care</a> </li><li><a href=Helmets.html>Helmets</a> </li><li><a href=Fielding Regulations.html>Fielding Regs</a> </li><li><a href=Fast Bowling.html>Fast Bowling</a> </li><li><a href=Unfair Bowling.html>Unfair Bowling</a> </li><li><a href=Umpires.html>Umpires</a> </li><li><a href=Laws of Cricket.html>Cricket Law</a> </li><li><a href=CRB.html>CRB Check </a> </li></ul></li>");
//Clubs
document.write("<li><a href=#>Clubs</a><ul><li><a href=clubs-adwalton.html>Adwalton</a> </li><li><a href=clubs-altofts.html>Altofts</a> </li><li><a href=clubs-azaad.html>Azaad</a> </li> <li><a href=clubs-batley.html>Batley</a> </li><li><a href=clubs-birstall.html>Birstall</a> </li><li><a href=clubs-brighouse.html>Brighouse</a> </li><li><a href=clubs-carlton.html>Carlton</a> </li><li><a href=clubs-cleckheaton.html>Cleckheaton</a> </li><li><a href=clubs-driglington.html>Drighlington</a> </li><li><a href=clubs-eastardsley.html>East Ardsley</a> </li><li><a href=clubs-gildersome.html>Gildersome</a> </li><li><a href=clubs-gomersal.html>Gomersal</a> </li><li><a href=clubs-hangingheaton.html>Hanging Heaton</a> </li><li><a href=clubs-hartsheadmoor.html>Hartshead Moor</a> </li><li><a href=clubs-holmevalleygirls.html>Holme Valley Girls</a> </li><li><a href=clubs-hunsletnelson.html>Hunslet Nelson</a> </li><li><a href=clubs-liversedge.html>Liversedge</a> </li><li><a href=clubs-methley.html>Methley</a> </li><li><a href=clubs-mirfield.html>Mirfield</a> </li><li><a href=clubs-mirfieldpc.html>Mirfield PC</a> </li><li><a href=clubs-moorlands.html>Moorlands</a> </li><li><a href=clubs-morley.html>Morley</a> </li><li><a href=clubs-newfarnley.html>New Farnley</a> </li><li><a href=clubs-ossett.html>Ossett</a> </li><li><a href=clubs-rothwell.html>Rothwell</a> </li><li><a href=clubs-scholes.html>Scholes</a> </li><li><a href=clubs-townville.html>Townville</a> </li><li><a href=clubs-wakestmichs.html>Wake St Michaels</a> </li><li><a href=clubs-wakethornes.html>Wakefield Thornes</a> </li><li><a href=clubs-westbretton.html>West Bretton</a> </li><li><a href=clubs-wrenthorpe.html>Wrenthorpe</a> </li></ul></li>");
//League Tables & Fixtures
document.write("<li><a href=>Leagues</a><ul> <li><a href=fixtures.html>Fixtures/Results</a> </li><li><a href=leaguetables.html>Tables</a> </li></ul></li>");
//Representative
document.write("<li><a href=#>Representative</a> <ul> <li><a href=lordtav-u11.html>Lord Taverners U11</a> </li><li><a href=lordtav-u15.html>Lord Taverners U15</a> </li><li><a href=coaching.html>Coaching</a> </li><li><a href=teamwear.html>Team Wear</a> </li></ul></li>");
//Links
document.write("<li><a href=#>Links</a> <ul><li><a href=http://www.ecb.co.uk/>ECB</a> </li><li><a href=http://www.ecb.co.uk/development/ecb-coaches-association/>ECB CA</a> </li><li><a href=http://www.yorkshirecb.com/>YCB</a> </li><li><a href=http://www.yorkshirecricketboard.org.uk/index.php?option=com_content&view=article&id=103:yorkshire-senior-schools-cricket-association&catid=271:yssca&Itemid=49>YSCA</a> </li><li><a href=http://www.yorkshirewca.co.uk/district.html>YWCA</a> </li><li><a href=http://www.homeoffice.gov.uk/agencies-public-bodies/crb/>CRB</a> </li></ul></li>");
//Photo Gallery - closing </ul>
document.write("<li><a href=#>Other</a> <ul><li><a href=#>Photo Galllery</a> </li><li><a href=#>Player Registration</a> </li></ul></li></ul>");
Apologies if that is too much code for a post so there is nothing else on the sheet do I need to use a link tag? How do i get the JS file to relate to the #navMenu of the css file? Thanks Rob Is there a script that automatically applies two different styles to the first two lines of text in a container, without using CSS? Example: ====== This Would be Line One as a Title with its Own Style This would be line two as a byline with a separate style This is the main text of the paragraph... etc etc. ====== Thanks for any help. Steph Hey, I have a page at http://www.webdev70.cocc-webdev.org/contact.html where I have styling on the radio and check boxes. I'm working on another project for class now where I want onclick or onchange functions in the radio buttons. When the radio buttons have the class="styled" on them, the function will not execute. When that's removed, they do. Here is the javascript for the styling: Code: var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.backgroundPosition = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
The code is way over my head so I'm not sure where the problem is, or if it could be fixed. This is what one of my radio buttons looks like: <input type="radio" name="puppy" value="1" class="styled" onchange="puppycheck()">Black and White Puppy If the style tag is removed it works perfectly. There is CSS too, but I don't think the problem is in there. |
|||||||