JavaScript - Can Get Script To Work Except For In Ie Combatibility Mode
Hi everyone, I am a first time poster but have been reading your forum for some time. I think I am following all the rules but be gentle if I missed something!
I recently inherited a website at work and have been tasked with sprucing it up. We have a photo directory page for all employees. The page takes a directory of jpegs and creates one long page with all the names and pictures of all the employees. The problem is the page only works in IE compatibility mode. It does not work in IE (non-compatibility), Firefox, or Chrome. When the page is not in IE compatibility mode, all that loads is the top of the page that says "CONFIDENTIAL" but none of the pictures load. There is a "progress bar" that has been coded in (it doesn't really accurately reflect the progress of all the pictures loading... again I didn't make this but am now stuck with it) which doesn't work unless in compatibility mode either. I am sure there must be something simple in the code that has since been deprecated or something like that, but I have been looking at it for days and can't seem to figure out what it is. The page was made a long time ago by someone who doesn't work here anymore, but I can't just get rid of it because according to our click tracks, it is one of the most viewed pages on the site. Code: <SCRIPT LANGUAGE="JavaScript"> var duration=10 // Specify duration of progress bar in seconds var _progressWidth = 50; // Display width of progress bar. var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||" var _progressEnd = 5; var _progressAt = 0; // Create and display the progress dialog. // end: The number of steps to completion function ProgressCreate(end) { // Initialize state variables _progressEnd = end; _progressAt = 0; // Move layer to center of window to show if (document.all) { // Internet Explorer progress.className = 'show'; progress.style.left = (document.body.clientWidth/4) - (progress.offsetWidth/4); progress.style.top = document.body.scrollTop+(document.body.clientHeight/8) - (progress.offsetHeight/8); } ProgressUpdate(); // Initialize bar } // Hide the progress layer function ProgressDestroy() { // Move off screen to hide if (document.all) { // Internet Explorer progress.className = 'hide'; } else if (document.layers) { // Netscape document.progress.visibility = false; } else if (document.getElementById) { // Netscape 6+ document.getElementById("progress").className = 'hide'; } } // Increment the progress dialog one step function ProgressStepIt() { _progressAt++; if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd; ProgressUpdate(); } // Update the progress dialog with the current state function ProgressUpdate() { var n = (_progressWidth / _progressEnd) * _progressAt; if (document.all) { // Internet Explorer var bar = dialog.bar; } else if (document.layers) { // Netscape var bar = document.layers["progress"].document.forms["dialog"].bar; n = n * 0.55; // characters are larger } else if (document.getElementById){ var bar=document.getElementById("bar") } var temp = _progressBar.substring(0, n); bar.value = temp; } // Demonstrate a use of the progress dialog. function ProgressBar() { ProgressCreate(10); window.setTimeout("Click()", 100); } function Click() { if(_progressAt >= _progressEnd) { ProgressDestroy(); return; } ProgressStepIt(); window.setTimeout("Click()", (duration-1)*1000/10); } function CallJS(jsStr) { //v2.0 return eval(jsStr) } </script> <SCRIPT LANGUAGE="JavaScript"> // Create layer for progress dialog document.write("<span id=\"progress\" class=\"hide\">"); document.write("<FORM name=dialog id=dialog>"); document.write("<TABLE border=1 bgcolor=\"RED\">"); document.write("<TR><TD ALIGN=\"center\">"); document.write("Loading Page ... Please Wait ...<BR>"); document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\""); if(document.all||document.getElementById) // Microsoft, NS6 document.write(" bar.style=\"color:navy;\">"); else // Netscape document.write(">"); document.write("</TD></TR>"); document.write("</TABLE>"); document.write("</FORM>"); document.write("</span>"); ProgressDestroy(); // Hides </script> There is more to the page but I have tried to narrow it down to the parts I feel are relevant. Any help would be greatly appreciated. Ben Reply With Quote 01-23-2015, 09:38 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts That is a really antiquated script - basically written for Internet Explorer 4 and Netscape 4. If you want it to work properly with modern browsers then the code needs a significant rewrite. You should start by getting rid of all of the document.all document.layers and document.write references Similar TutorialsHi I hope someone can help me or direct me to the right place.... Here is the situation. I am a graphic guy and do some web design but am not really good with javascript. I am using the enlargeit.js program for the photo viewer on www.blackwoodsconcrete.com in the galleries. It has worked wonderfully up till now. I recieved new pictures from the owner to post on his page and they will not open when i view them live. I use dreamweaver cs5 and when i look in preview mode, they work great. They are standard jpg images. see http://www.blackwoodsconcrete.com/example_error.html for an example. The top pic does not work and the rest do... I have resized them, changed file formats, opened them in photoshop and edited them, and basically anything else you could think of, i tried. Even if i open one of the working photos in photoshop and place the new one over it and save it as something completely different it still does not work! everything else does. Does anyone have any clue what to do? Thanks in advance! TK Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) { steps = 1000; elem = document.getElementById(obj); function fadeIn() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ i +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration); } } function fadeOut() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration); } } /* One for Fade in and anything will be fade out*/ if(toggle == 1) { fadeIn(); } else { fadeOut(); } } Thanks, Jon W I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani Okay I'm trying to make a script where if I click on a link a div pops up. And if I click on another link another div pop ups up and the old div is closed. The script calls the function from the link in the html and sends an ID. I am confused as to why this doesn't work. Code: function controls(vtiles){/*ID of requested div*/ vtiles.style.ClassName='switchOn'; //change it's classname to something that's displayed var cap=document.getElementsByTagName('div');// get every div element for(i=0;i<cap.length;i++) // make some kina loop with the number of divs { var store=cap[i].ClassName; if(store=='switchOn' && cap.[i].id); { /*look for div's that are on (switchOn) and check to see if they have and ID*/ var check = cap.[i].id //store their IDs if(check!=vtiles){//check to see if the id is the one stored in Vtiles store=='switchP'//change the classname to switchP(off) } } } } Code: <div class="content"><a class="Atiles" href="#" onclick="controls(document.getElementById('Ankara'))">Ankara</a></div> <div id="Ankara" class="switchP"> Code: .switchP{ position:absolute; display:none; z-index:-1; left: 20px; top:40px; } .switchOn{ position:absolute; display:block; z-index:100; left: 20px; top:40px; width:200px; height:200px; } hey I'm a bit confused, I really am looking for some javascript tutorials so I don't have to keep asking for help. Please help. This works fine in IE but will not work in FireFox: <iframe name="ad" id="rotator" src="about:blank" scrolling="no" framespacing="0" frameborder="0" marginwidth="0" marginheight="0" border="0" style="width:450px; height:300px"></iframe> <script language="JavaScript" type="text/javascript"><!-- // Pages to rotate var pages=new Array('http://www.newquaynet.com/rotating_pages/page1.htm', 'http://www.newquaynet.com/rotating_pages/page2.htm', 'http://www.newquaynet.com/rotating_pages/page3.htm'); // Rotation interval, in miliseconds (1000 = 1 second) var rint=15000; var currentpage=-1; function rotator(){ currentpage++; if(currentpage >= pages.length){ currentpage=0; } document.all.rotate.src=pages[currentpage]; setTimeout('rotator()', rint); } rotator(); //--></script> I am a very novice web coder and can't get this to work... I've tried everything and am getting no where but frustrated! Thanks in advance!! Code: <html> <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function calculateSavings() { var lastBill = eval(document.theForm.elements[0].value); var frequencyRating = eval(document.theForm.elements[1].value); var savingsRate = .05; var annualSavings = 0; /* if (frequencyRating == 'every day) { savingsRate = .01; } else if (frequencyRating == 'weekly) { savingsRate = .05; } else if (frequencyRating == 'monthly') { savingsRate = .15; } else if (frequencyRating == 'yearly') { savingsRate = .2; } */ annualSavings = lastBill * savingsRate; document.write(annualSavings); } // End --> </SCRIPT> </head> <body> <form name="savingsCalcForm"> How much was your last bill? <br><INPUT TYPE="text"> <br> <br> How often are you using your tractor? <br><input type="radio" name="group1" value="every day"> every day<br> <input type="radio" name="group1" value="weekly "> weekly<br> <input type="radio" name="group1" value="monthly"> monthly<br> <input type="radio" name="group1" value="yearly"> yearly<br> <br> <br> <INPUT TYPE="button" VALUE="calculate savings" onClick="calculateSavings();"> </form> </body> </html> I have a validate script for my form. It is jquery. On the form I have added $#contact_form .validate(); but I think that maybe this is not going to work, should it be: jquery/javascript/jquery.validate.pack.js as this is the link for it. I know little js Code: <script src="../javascript/jquery.validate.pack.js" type="text/javascript"></script> <link href="../styles/mainstyle.css" rel="stylesheet" type="text/css" /> <link href="../styles/navigation.css" rel="stylesheet" type="text/css" /> <link href="../styles/layout.css" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Cabin|Ubuntu" rel="stylesheet" type="text/css" /> <link href="../styles/form.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function(){ $("#contactform").validate(); }); </script> I have 3 HTML form inputs fields that is dynamically generated by a "add more" button, with naming for the fields name as fieldName, fieldName1, fieldName2, fieldName3, and so on. Now, I'm trying to retrieve the value from this fields with JavaScript, using the script below. var bookingForm = document.forms['formName']; var qty = bookingForm.fieldName +'i'.value; with the 'i' been a generated numeric number by a for loop when I use alert(qty), it returns NaN, when I'm expecting the value for fieldName1, fieldName2, and so on. But when I use; var qty = bookingForm.fieldName.value I can get the value in that field but get NaN when I try to concatenate 1,2,3, with the fieldName. Any help will be very much appreciated. Hello! I have the following code that I just can't seem to get to work. Here are the issue that aren't working: 1. The items that are stored in the users account aren't showing up as selected when you enter the page. (They work in IE, not Chrome) 2. When you click the items, nothing happens. (It used to work and would add the item to the top image) If you need any more info, or more of the code, let me know. I removed most of the PHP to simplify it for revising, and I didn't include it's CSS. Code: <div id="avatar_form" width="95" height="141"> </div> <div id="avatar_stack"> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Extras]" type="radio" value="blank" <? if($prof[base]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[Skin Tone]" type="radio" value="body1" <? if($prof[skin]==body1) echo('checked="checked"');?> <? if($prof[skin]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[Face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hand Item]" type="radio" value="blank" <? if($prof[handitem]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/shirt6.gif" alt="" /><input name="avatar[Shirt]" type="radio" value="shirt6" <? if($prof[shirt]==shirt6) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[Pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked' checked");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Accessories]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked' checked");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Costume]" type="radio" value="blank" <? if($prof[costume]==blank) echo("checked='checked' checked");?> /> </p> </div> <BR><BR><BR> <script type="text/javascript"> var avatar_layers = new Array('Extras', 'Skin Tone', 'Hair', 'Face', 'Hand Item', 'Shirt', 'Hat', 'Pants', 'Shoes', 'Accessories', 'Costume') var layer_colours = new Array('#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff') var inactive_tab_background_colour = '#fff' var inactive_tab_bottom_border_colour = '#fff' var stack_height = 1 var on_top = 0 var key = null onload = layout function layout() { if(!document.getElementById('avatar_section')) return document.onkeydown = keyhit tabs() hide_radio_buttons(document.getElementById('avatar_stack')) StackImageHolders('avatar_stack'); P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top] P.style.backgroundColor = layer_colours[on_top] P.style.zIndex = stack_height++ LIs = document.getElementById('avatar_section').getElementsByTagName('li') for(i=0; i<LIs.length; i++) { LIs[i].style.backgroundColor = inactive_tab_background_colour LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour } LIs[on_top].style.backgroundColor = layer_colours[on_top] LIs[on_top].style.borderBottomColor = layer_colours[on_top] LIs[on_top].focus() IMGs = document.getElementById('avatar_stack').getElementsByTagName('img') for(i=0; i<IMGs.length; i++) { IMGs[i].className = 'black_border' IMGs[i].style.cursor = 'pointer' IMGs[i].onclick=function(){ChangeGarment(this)} } avatar_preview_and_hotkey_text() update_avatar(document.getElementById('avatar_stack').firstChild) /* I added the following two lines because Internet Explorer wasn't updating the display properly after loading */ document.getElementsByTagName('body')[0].style.width='95'; document.getElementsByTagName('body')[0].style.width='95'; } function keyhit(e) { thisKey = e ? e.which : window.event.keyCode alt_key_down = e ? e.altKey : window.event.altKey ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey shift_key_down = e ? e.shiftKey : window.event.shiftKey switch (thisKey) { case 37: key = 'LEFT' break case 39: key = 'RIGHT' break default: key = null } if(key && alt_key_down && ctrl_key_down) { IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img') for(i=0; i<IMGs.length; i++) { if(IMGs[i].className == 'red_border') { if((key == 'LEFT') && (i > 0)) { i-- ChangeGarment(IMGs[i]) return } if((key == 'RIGHT') && (i < (IMGs.length - 1))) { i++ ChangeGarment(IMGs[i]) return } } } } else if(key && alt_key_down && shift_key_down) { LIs = document.getElementById('avatar_section').getElementsByTagName('li') if((key == 'LEFT') && (on_top > 0)) { on_top-- bring_to_the_top(LIs[on_top]) return } if((key == 'RIGHT') && (on_top < (LIs.length - 1))) { on_top++ bring_to_the_top(LIs[on_top]) return } } } function tabs() { list = document.createElement('ul') for(i=0; i<avatar_layers.length; i++) { list_item = document.createElement('li') list_item.appendChild(document.createTextNode(avatar_layers[i])) list_item.onmouseover=function(){this.className='mouse'} list_item.onmouseout=function(){this.className=''} list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values list_item.onclick=function(){ bring_to_the_top(this) } list_item.onfocus=function(){ bring_to_the_top(this) } list.appendChild(list_item) } document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack')) } function hide_radio_buttons(caller) { INPUTs = caller.getElementsByTagName('input') for(i=0; i<INPUTs.length; i++) { if(INPUTs[i].type == 'radio') { INPUTs[i].style.display = 'none'; } } } function StackImageHolders(caller) { Ps = document.getElementById(caller).getElementsByTagName('p') for(i=0; i<Ps.length; i++) { Ps[i].className = 'stack' } } function avatar_preview_and_hotkey_text() { for(i=0; i<avatar_layers.length; i++) { preview = document.createElement('img') preview.id = avatar_layers[i] preview.className = 'preview' preview.width = '95px' preview.height = '141px' preview.alt = 'avatar preview image' document.getElementById('avatar_stack').appendChild(preview) } hotkey_text = document.createElement(' ') hotkey_text.className = 'hotkeys' hotkey_text.appendChild(document.createTextNode('')) document.getElementById('avatar_stack').appendChild(hotkey_text) } function update_avatar(caller) { INPUTs = caller.parentNode.getElementsByTagName('input') for(i=0; i<INPUTs.length; i++) { if(INPUTs[i].type == 'radio') { if(INPUTs[i].checked) { document.getElementById(INPUTs[i].name.match(/^.*[(.*)]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif' INPUTs[i].previousSibling.className = 'red_border' } else { INPUTs[i].previousSibling.className = 'black_border' } } } } function ChangeGarment(caller) { inputs = caller.parentNode.getElementsByTagName('input') for(i=0;i<inputs.length;i++) { inputs[i].checked=false } caller.nextSibling.checked=true update_avatar(caller) } function bring_to_the_top(caller) { tabs = document.getElementById('avatar_section').getElementsByTagName('li') for(i=0; i<tabs.length; i++) { tabs[i].style.backgroundColor = inactive_tab_background_colour tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour } on_top = caller.tab_number caller.style.backgroundColor = layer_colours[caller.tab_number] caller.style.borderBottomColor = layer_colours[caller.tab_number] put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number] put_on_top.style.zIndex = stack_height++ put_on_top.style.backgroundColor = layer_colours[caller.tab_number] } </script> hello... script doesn't work.. it does work in IE but not in another browser like mozilla,opera & safari? what should I do?.. Code: //Current HTML of page var html=""; //View of the page, Normal (Design), HTML, Preview var currentview=0; //Hold window objects for the color, table and properties dialogs var table_dialog, color_dialog, properties_dialog; //Current color action, ForeColor, or BackColor, //used for communication between PageCreate window and Color dialog window var pp; //Is used to disable use of design tools in HTML or Preview mode var enabletoolbar=false; //Variable counter used to index the search in the document var n=0; function InitEditor(){ //Init editor in design mode, maineditor.document.designMode=docmode; //Write a blank page WriteDefaultPage(); //Disable context menu maineditor.document.oncontextmenu=new Function("return false;"); //Set focus to the editor maineditor.focus(); } function EditorView(view){ //Changes editor view to Normal, HTML, and Preview if(currentview==1){ //If the last view was HTML then get the HTML edited by user in HTML mode html=maineditor.document.body.innerText; } //If the last mode was Normal then get the whole HTML content of the page else html=maineditor.document.all.tags("HTML")[0].outerHTML; if(view==0){ //Normal Mode EnableToolbar(true); maineditor.location="about:blank"; maineditor.document.designMode=docmode; maineditor.document.open("text/html"); maineditor.document.write(html); maineditor.document.close(); maineditor.document.oncontextmenu=new Function("return false;"); maineditor.focus(); } if(view==1){ //HTML Mode EnableToolbar(false); maineditor.location="about:blank"; maineditor.document.designMode=docmode; WriteDefaultPage(); HTMLView(); maineditor.document.oncontextmenu=new Function("return false;"); } if(view==2){ //Preview Mode EnableToolbar(false); maineditor.location="about:blank"; //Disable page editing maineditor.document.designMode="Inherit"; //Write the HTML of the page maineditor.document.open("text/html"); maineditor.document.write(html); maineditor.document.close(); //Enable context menu maineditor.document.oncontextmenu=new Function("return true;"); } //Set current view currentview=view; } function EnableToolbar(enable){ //Enable or disable toolbar enabletoolbar=enable; } function OpenFile(){ if(window.confirm("Do you want to save changes in the current document?")){ //Show Save As Dialog maineditor.document.execCommand("SaveAs"); } fileopen_dialog.style.visibility="visible"; } function OpenSelectedFile(){ //Check if the file is an HTML page if(document.fileselect.thefile.value.indexOf(".htm")==-1){ window.alert("The selected file is not an HTML page, please select a valid HTML file"); return; } //Hide the open file dialog fileopen_dialog.style.visibility="hidden"; //Create the FSO object var fso=new ActiveXObject("Scripting.FileSystemObject"); //Open the selected file var f=fso.OpenTextFile(document.fileselect.thefile.value); //Get the content of the file var thehtml=f.ReadAll(); //Close the file f.close(); //Write a blank page maineditor.window.location="about:blank"; //Write the HTML content maineditor.document.open("text/html"); maineditor.document.write(thehtml); maineditor.document.close(); //Set focus to editor maineditor.focus(); } function WriteDefaultPage(){ //Writes a blank HTML page in the editor var pagehtml="<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; " + "charset=windows-1252\">\n<meta name=\"GENERATOR\" content=\"PageCreate\">\n" + "<title>New Page</title>\n</head>\n<body>\n</body>\n</html>"; maineditor.document.open("text/html"); maineditor.document.write(pagehtml); maineditor.document.close(); } function NewPage(){ if(window.confirm("Do you want to save changes in the current document?")){ //Show Save As Dialog maineditor.document.execCommand("SaveAs"); } //Write a blank page maineditor.window.location="about:blank"; WriteDefaultPage(); //Set focus to editor maineditor.focus(); } function HTMLView(){ //Switch to HTML view maineditor.document.body.innerHTML=""; maineditor.document.body.innerText=html; } function TableOn(table, on){ //Highlights the table on which the mouse is over if(on) table.style.backgroundColor="#95AFFF"; else table.style.backgroundColor="#82DF82"; } function ToolbarOn(toolon){ //Highlights on or off the current toolbar //Get the toolbar button on which the mouse is over var tool=event.srcElement; //Change background color if(toolon){ tool.style.backgroundColor="#B4A0FE"; tool.style.borderColor="#000000"; } else{ tool.style.backgroundColor="#D1D1D1"; tool.style.borderColor="#D1D1D1"; } } function FindInPage(showdialog){ //Shows the Find and Replace Dialog var display="visible"; if(showdialog==false) display="hidden"; find_dialog.style.visibility=display; if(showdialog!=false) document.find.findwhat.focus(); } function FindIt(str, replacestr, newstr){ //This functions searchs for a string in the document //and if specified then replaces it with a new string if(str==""){ //If no string to search entered alert("Enter a string to search"); document.find.findwhat.focus(); return; } //Creates a range in the document txt = maineditor.document.body.createTextRange(); //Loop to find the string in the document for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } if(found) { //If founded select it and scroll into view txt.moveStart("character", -1); txt.findText(str); //If replace is specified then replace the match with the new string if(replacestr) txt.text=newstr; txt.select(); txt.scrollIntoView(); n++; } else { if (n > 0) { window.alert("There are no more matches"); n=0; } // Not found anywhere, give message. else window.alert("\"" + str + "\" was not founded in document"); } } function InsertHTML(newhtml){ //Inserts HTML in the selection of the document maineditor.focus(); var selpoint=maineditor.document.selection.createRange(); selpoint.pasteHTML(newhtml); } function GetSelectedText(){ //Get the selection of the document maineditor.focus(); var selpoint=maineditor.document.selection.createRange(); var seltext=selpoint.text; return seltext; } function InsertNewImage(){ if(enabletoolbar==false) return; maineditor.focus(); //Open Insert Image Dialog maineditor.document.execCommand("insertimage", true, null); } function InsertForm(){ //Creates a new form var formmethod=window.prompt("Choose form method: GET | POST", "POST"); var formaction=window.prompt("Choose form action:", "http://"); InsertHTML("<div style=\"background-Color:#C0C0C0\"><form method=\"" + formmethod + "\" action=\"" + formaction + "\">\n<p> </p></form></div>"); } function InsertFormControl(control){ maineditor.focus(); //Inserts a form control maineditor.document.execCommand(control, true, null); } function CreateNewLink(){ //Inserts a link in the selected text if(enabletoolbar==false) return; var linktext=GetSelectedText(); if(linktext=="") return; var url=window.prompt("Enter a URL for the new link:", "http://"); if(url!=null){ InsertHTML("<a href=\"" + url + "\">" + linktext + "</a>"); } maineditor.focus(); } function InsertTable(){ //Open Table Dialog table_dialog=window.open("table.htm", "newtable", "top=100,left=100,height=300,width=400,scrollbars=no"); } function CreateTable(tr, tc, ta, tb, tp, ts, tw, tt){ //Creates a new table var tablewidth=""; if(tw!=""){ tablewidth=" width=\"" + tw + tt + "\""; } var thtml="<table border=\"" + tb + "\" cellpadding=\"" + tp + "\" cellspacing=\"" + ts + "\"" + tablewidth + ">"; tr=parseInt(tr); tc=parseInt(tc); for(r=0;r<tr;r++){ thtml+="<tr>"; for(c=0;c<tc;c++){ thtml+="<td></td>"; } thtml+="</tr>"; } thtml+="</table>"; InsertHTML(thtml); table_dialog.close(); } function EditPage(){ properties_dialog=window.open("properties.htm", "editpage", "top=100,left=100,height=275,width=387,scrollbars=no"); } function EditPageProperties(pt, pfc, pbgc, pbgi, usewatermark, pbgs){ maineditor.document.title=pt; maineditor.document.body.text=pfc; maineditor.document.body.bgColor=pbgc; maineditor.document.body.background=pbgi; if(usewatermark) maineditor.document.body.bgProperties="fixed"; else maineditor.document.body.bgProperties=""; if(pbgs!=""){ var pagehtml=maineditor.document.all.tags("HTML")[0].outerHTML; var bodytag= pagehtml.toLowerCase().indexOf("<body"); if(bodytag==-1) return; var beforebodytag= pagehtml.substring(0, bodytag); var afterbodytag= pagehtml.substring(bodytag, pagehtml.length); var pagehtml=beforebodytag + "<bgsound src=\"" + pbgs + "\">" + afterbodytag; maineditor.document.open("text/html"); maineditor.document.write(pagehtml); maineditor.document.close(); } properties_dialog.close(); maineditor.focus(); } function ChangeForeColor(){ //Show the Color dialog to edit Fore Color of text selected if(GetSelectedText()!=""){ pp="EditForeColor"; color_dialog=window.open("color.htm", "colorpicker", "top=100,left=100,height=270,width=500,scrollbars=no"); } } function EditForeColor(thecolor){ maineditor.focus(); //Change fore color of text selected maineditor.document.execCommand("forecolor", false, thecolor); //Close Color Dialog color_dialog.close(); } function ChangeBackColor(){ //Show the Color dialog to edit Back Color of text selected if(GetSelectedText()!=""){ pp="EditBackColor"; color_dialog=window.open("color.htm?p=EditBackColor", "colorpicker", "top=100,left=100,height=270,width=500,scrollbars=no"); } } function EditBackColor(thecolor){ maineditor.focus(); //Change back color of text selected maineditor.document.execCommand("backcolor", false, thecolor); //Close Color Dialog color_dialog.close(); } function ChangeFont(font){ //Changes the font of the selected text maineditor.focus(); maineditor.document.execCommand("fontname", false, font); } function ChangeFontSize(size){ //Changes the font size of the selected text maineditor.focus(); maineditor.document.execCommand("fontsize", false, size); } function DesignTools(tool){ //Activates design tool if(enabletoolbar==false){ window.alert("You must switch into normal view to do this"); return; } maineditor.focus(); maineditor.document.execCommand(tool, true, null); } Problem solved, thanks for looking.
Hi I am a complete novice with Javascript. I posted a question on another site as I want to show a series of 9 images in a random order - ie all 9 images but changing their order every time the page loaded. Someone responded with the following script: onload= function(){ var n, pic, A= [1, 2, 3, 4, 5, 6, 7, 8, 9];// replace integers with urls var pa= document.getElementById('image_set'); // reference the container element pa=mr('evalBlock') while(A.length){ pic=document.createElement('img'); n= Math.floor(Math.random()*A.length); pic.src= A.splice(n, 1); pa.appendChild(pic); } } However - I don't know how to put it into my pages to get it to work and they have not replied to my further query. I think I have to put something in the () after function, also, do the URLs have to be absolute and do they need enclosing in ' or ". Also what code do I then have to put on the page to call the image? Would anyone here be able to help? Many thanks Carol Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite ) Code: $('nav li a').click(function() { $(this).parent().addClass('on').siblings().removeClass('on'); }); nav li is as follows Code: <nav> <li class="highlt"> <a href="index.php" class="home"><span>Home</span></a> </li> The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work I'm trying to resolve a UPS zone from a zip code, here is my code: Code: <script type="text/javascript"> var zipcode=44657;<!-- Should be zone 5 --> var zip=zipcode.substring(0,3); alert(zip); <!-- Zone chart made from Jacksonville FL zip 32216 on 8-5-2010 --> var azone = new Array (4-5, 5, 6-7, 45, 9, 45, 10-13, 5, 14, 6, 15-18, 5, 19, 6, 20-29, 5, 30-33, 6, 34, 5, 35-51, 6, 52-53, 5, 54, 6, 55, 5, 56-59, 6, 60-89, 5, 100-128, 5, 129, 6, 130-223, 5, 224-225, 4, 226, 5, 227-253, 4, 254, 5, 255-259, 4, 260-261, 5, 262, 4, 263-265, 5, 266, 4, 267, 5, 268-289, 4, 290-296, 3, 297, 4, 298, 3, 299, 2, 300-306, 3, 307, 4, 308-312, 3, 313-316, 2, 317-319, 3, 320-323, 2, 324, 3, 325, 4, 326-329, 2, 330-332, 4, 333-337, 3, 338, 2, 339, 3, 341, 3, 342, 3, 344, 2, 346, 3, 347, 2, 349, 3, 350-359, 4, 360-361, 3, 362, 4, 363-364, 3, 365-367, 4, 368, 3, 369-397, 4, 398, 3, 399, 3, 400-409, 4, 410, 5, 411-418, 4, 420, 5, 421-427, 4, 430-470, 5, 471, 4, 472-475, 5, 476-477, 4, 478-496, 5, 497-505, 6, 506-507, 5, 508-516, 6, 520, 5, 521, 6, 522-539, 5, 540-566, 6, 567, 7, 570-575, 6, 576-577, 7, 580-581, 6, 582, 593, 7, 594-599, 8, 600-668, 5, 669-672, 6, 673, 5, 674-692, 6, 693, 7, 700-704, 4, 705-706, 5, 707-709, 4, 710-722, 5, 723, 4, 724-735, 5, 736, 6, 737, 5, 738-739, 6, 740-768, 5, 769, 6, 770-784, 5, 785, 6, 786-787, 5, 788, 6, 789, 5, 790-797, 6, 798-806, 7, 807, 6, 808-820, 7, 821, 8, 822-831, 7, 832-844, 8, 845-846, 7, 847, 8, 850-853, 7, 854, 8, 855-863, 7, 864, 8, 865-875, 7, 877, 6, 878-880, 7, 881-882, 6, 883, 7, 884, 6, 885, 7, 889-961, 8, 970-986, 8, 988-994, 8); for (y=0;azone[y]=zip;y=y+2){ document.write (azone[y+1]) } </script> Can someone see my error? I'm a bit rusty at my javascript. I am building a wordpress theme that utilizes a theme options panel. The theme has a area where someone can enter in their email address, and when they do a Thank You message displays. One of the sections in the theme options panel allows the users to modify that message. Right now the message is formated like this: "Thank you for your interest!<br />As soon as as we are ready we will send you an email with all the details." and the page source shows this: Code: $('#right').html("<div id='submitted'></div>"); $('#submitted').html("Thank you for your interest!<br />As soon as as we are ready we will send you an email with all the details.") .hide() .fadeIn(1000, function() { }); (i bolded the thank you message) now the form functions properly the way it should and the thank you message appears accordingly when someone submits their email. However, if the person modifies the message via the theme options panel and uses "Enter" for a return or line break the code looks like this: Code: $('#right').html("<div id='submitted'></div>"); $('#submitted').html("Thank you for your interest! As soon as as we are ready we will send you an email with all the details.") .hide() .fadeIn(1000, function() { }); and this causes the form not to function properly. The thank you message will not show up. Is there a way to fix the java code so a person can use "Enter" if they choose to? Ive narrowed it down to this one section of the javascript. If you need the entire script I can post it. Any help is greatly appreciated. Thank you for your time. I am trying to make the following fill the value box when the page loads as opposed to pressing the button. I cant seem to do it. Any ideas?? PHP Code: <script> var keylist="abcdefghijklmnopqrstuvwxyz123456789" var temp='' function generatepass(plength){ temp='' for (i=0;i<plength;i++) temp+=keylist.charAt(Math.floor(Math.random()*keylist.length)) return temp } function populateform(enterlength){ document.pgenerate.output.value=generatepass(enterlength) } </script> <form name="pgenerate"> <input type="text" size=18 name="output"> <input type="button" value="Generate Password" onClick="populateform(this.form.thelength.value)"><br /> <b>Password Length:</b> <input type="text" name="thelength" size=3 value="7"> </form> Hi Im alot stuck at the moment so if anyone can help resolve the issues i'm having I would be very grateful! if you go to http://love2-create.com and click on the orange "view profile" link about halfway down the left hand column, a tab opens showing a profile with a small picture gallery at the bottom, this gallery works fine in firefox and google chrome, however in safari it works sometimes but not always and in IE it usually works on the first time the page is loaded but then when the page is refreshed and the profile link is clicked I get an Error: 'document.getElementById(...)' is null or not an object on line 60, the lines in question look like this: Code: buildcontentdivs:function(setting){ var alldivs=document.getElementById(setting.id).getElementsByTagName("div") for (var i=0; i<alldivs.length; i++){ if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv" setting.contentdivs.push(alldivs[i]) alldivs[i].style.display="none" //collapse all content DIVs to begin with } } }, Does anyone know why this may be, and how it can possibly work sometimes but not always?? its totally got me baffled so if anyone can help I would very very much appreciate it, please let me know if you need any other details about the site etc from me. Regards, Keir I'm a real novice and out of my depth with this, i hope someone can help. I have a small script that searches a single page for a keyword, it works fine with IE, but will not work with Firefox. Below is the code thats checks which browser is running and the action to take. Code: var NS4 = (document.layers); var IE4 = (document.all); var win = window; var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; if (NS4) { if (!win.find(str)) while(win.find(str, false, true)) n++; else n++; if (n == 0) alert("Not found."); } if (IE4) { txt = win.document.body.createTextRange(); for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } Can anyone help me out with this problem. Many thanks Jasper |