JavaScript - Manipulating Css Using Javascript And The Base Html Statement
Hello,
I came across a very odd browser behavior when trying to modify a css class using javascript and at the same time having a base html statement in my html file. Without the base html statement, all browsers work fine and I can change the css class definition using javascript easily. With a base html statement, only FireFox still works while Internet Explorer and Google Chrome dont work anymore. If there is a cross-domain issue, while one browser does work and the others dont? An example of what I'm talking about, with the base statement: http://freebsdcluster.org/~casaschi/...mple-base.html Without the base statement: http://freebsdcluster.org/~casaschi/...le-nobase.html Any idea how to tweak the code in the case with the base html statement in order for the javascript to work with all browser (modifying the class definition) ??? Keep in mind, I dont want a suggestion of another way to change the color, this is only an example. I want to be able to manipulare css classes with javascript when a base html statement is in my html code. This is essentially the code: Code: <!-- --> <base href='http://www.google.com'> <style id='myStyle' type='text/css'> .myStyle { color: red; } </style> <script type="text/javascript"> var lastColor = 'red'; function toggleColor() { lastColor = lastColor == 'red' ? 'green' : 'red'; myObject = document.getElementById('myStyle'); if (myObject.sheet) { myObject.sheet.cssRules[0].style.color = lastColor; } // Mozilla style if (myObject.styleSheet) { myObject.styleSheet.rules[0].style.color = lastColor; } // IE style } </script> <a href="javascript: toggleColor();"><span class=myStyle>click here to toggle color</span></a> Thanks in advance... Similar TutorialsI'm using <base href> to set my HTML path for links, and chdir() to set PHP's base path. (Entering site at www.mysite.com/account then resetting my paths back to root for simplicity). Both of these are working fine, however I've found Javascript ignores <base href> so it's working directory is still a subfolder of root. OK - so I could add '../' to all Javascript links (which is what I was trying to get away from!) but I've read that it's only IE that ignores <base href> and other browsers accept it. This will mean my links break unless I either stop using <base href> entirely and go back to using '../' in ALL links, or I can find a way to set Javascript's base link pointer... This is driving me crazy! Any ideas of how to do it? Hello, Here is my situation. I have a java array generated from a JSP on the server side, and saved in the session. This array consists of objects (of say class X). How can I load this array into a javascript array so I can search for a this array based on attributes of the object? Thanks OK first of all I will post some screenshots of the 'website' I have created so far and explain what is working and what is not working. Then I will post my code and ask for help. Below is the main screen before any action happens. The three boxes are DIV elements. The writing and dropdown menu in the first box is generated by Javascript code. Whenever a user selects an option from the dropdown menu. Information about the movie and a picture of the cover are displayed. The movie title, picture filename and movie description are all stored in three separate arrays. Now for the problem. I have created a fourth array "customerList" and left it empty. Whenever a customer clicks the reserve button it calls a function "myReserve()". This function takes the selection from the dropdown menu, then uses the push function to add the selection to the blank array. I then use the code "arrayLength = customerList.length" to get the length of the customer list. A for loop is used to cycle through the array and display the contents of the array. The problem is it only displays one selection. When reserve is clicked again the newest selection is displayed. Why will it not push the next item into the array? Javascript code, just skip through the 3 arrays at the top... the problem function is at the bottom. Code: var movieTitles = new Array(8) movieTitles[0] = "The Prestige [2006]" movieTitles[1] = "The Lives of Others [2007]" movieTitles[2] = "The Bourne Ultimatum [2007]" movieTitles[3] = "Spider-Man 3 [2007]" movieTitles[4] = "Casino Royale [2006]" movieTitles[5] = "The Illusionist [2006]" movieTitles[6] = "Sunshine [2007]" movieTitles[7] = "Zodiac [2007]" movieTitles[8] = "Quantum of Solace [2008]" var movieCovers = new Array(8) movieCovers[0] = "prestige.jpg" movieCovers[1] = "lives_of_others.jpg" movieCovers[2] = "bourne3.jpg" movieCovers[3] = "spiderman3.jpg" movieCovers[4] = "casinoroyal.jpg" movieCovers[5] = "illusionist.jpg" movieCovers[6] = "sunshine.jpg" movieCovers[7] = "zodiac.jpg" movieCovers[8] = "quantum_of_solace.jpg" var movieDescriptions = new Array(8) movieDescriptions[0] = "Two Victorian-era magicians develop a rivalry that builds into an escalating battle of tricks." movieDescriptions[1] = "Five years before its downfall, the former East-German government ensured its claim to power with a ruthless system of control and surveillance." movieDescriptions[2] = "Legendary assassin Jason Bourne uncovers mysteries of his past, which puts him in the cross-hairs of a superkiller." movieDescriptions[3] = "When Peter Parker's suit suddenly turns black it brings out the dark, vengeful side of his personality." movieDescriptions[4] = "The story examines James Bond's first mission after getting his licence to kill." movieDescriptions[5] = "Eisenheim is a stage magician who amazes the audiences of turn-of-the-century Vienna, drawing the attention of Crown Prince Leopold." movieDescriptions[6] = "Fifty years from now, the sun is dying, and mankind is dying with it. Our last hope: a spaceship carrying a device which will breathe new life into the star." movieDescriptions[7] = "A serial killer terrifies the San Francisco Bay Area and taunts police with his ciphers and letters." movieDescriptions[8] = "Seeking revenge for the death of his love, secret agent James Bond sets out to stop an environmentalist from taking control of a country's water supply." var customerList = new Array() function getMovieTitle() { var str = "<p>Available movies are contained in the list below.<br />Select a movie title to read more details.<br />If you want to add the movie to your list click the reserve option.<br /></p>" str = str + "<form action='P4_1.html' method='post'><select onChange = 'displayMovie()' name='title' id = 'droplist'><option>Choose a movie</option>" mylength = movieTitles.length //loop for each movie title in the movieTitles array for (var i=0; i<mylength; i++) { str = str + "<option>" + movieTitles[i] + "</option>" } str = str+"</select></form>" //place content into dropdown menu document.getElementById("dropdown").innerHTML = str } function displayMovie() { var i i = document.getElementById('droplist').selectedIndex - 1 var m = movieTitles[i] m = m + "<p><br><img src='"+movieCovers[i]+"'></p>" m = m + movieDescriptions[i] m = m + "<p> <a href='Javascript:myReserve()'><span id = 'res'> Reserve </span></a></p>" document.getElementById("Movie_Info").innerHTML = m } function myReserve() { var i i = document.getElementById('droplist').selectedIndex - 1 customerList.push(movieTitles[i]) arrayLength = customerList.length for (var j=0; j<arrayLength; j++) { str = customerList[j] } document.getElementById("Movie_List").innerHTML = str } HTML code, incase you want to create my files yourself to troubleshoot for me but all the problems occur in the myReserve function just above. Everything else works fine. Code: <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> <head> <title>P4_1</title> <script src="P4.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" media="screen" href="P4.css" /> <!--[if gte mso 9]><xml> <mso:CustomDocumentProperties> <mso:ContentType msdt:dt="string">Document</mso:ContentType> </mso:CustomDocumentProperties> </xml><![endif]--> </head> <body onload="javascript:getMovieTitle()"> <img src="logo.jpg"> <div id="dropdown" class="box1"> </div> <div id="Movie_Info" class="box2"> <p>Movie info will go here</p> </div> <div id="Movie_List" class="box3"> <p>Your movie list will go here</p> </div> </body> </html> Is the hiding/showing of text fields done differently than for buttons? I ask because I have the following text field: Code: <input type="text" name="case_id_c" class="sqsEnabled" tabindex="0" id="case_id_c" size="" value="" > And if I call the following javascript, this field disappears: Code: document.getElementById('case_id_c').style.display = 'none'; However, I have the following button: Code: <input type="button" name="btn_clr_case_id_c" tabindex="0" title="Clear [Alt+C]" accessKey="C" class="button" onclick="this.form.case_id_c.value = ''; value="Clear"> And if I run the following code, nothing happens: Code: document.getElementsByName("btn_clr_case_id_c").style.display = 'none'; Not sure what's going on. Any thoughts??? Hey helpful folks! I am completely new to Javascript & I have a basic flash gallery that I embedded into my site (HTML & CSS). When viewed in Firefox everything is fine (840px by 427px), but when viewed in IE the gallery changes size & needs to be (887px by 440px) to be viewed correctly. So, I put an Javascript If Then Else statement. Now it targets and changes in the IE browser (width='887' height='440') , but it also changes the Firefox one to 887x440 when it should stay the original 840x427. Please Help!! Thanks! <div id="gallery"> <SCRIPT language="JavaScript"> <!-- var browserName=navigator.appName; if (browserName=="Microsoft Internet <http://www.pageresource.com/jscript/jbrowse.htm#> Explorer") { document.write("<embed src='PhotoSlider.swf' quality='high' pluginspage='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width='840' height='427' ></embed>"); } else { document.write("<embed src='PhotoSlider.swf' quality='high' pluginspage='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width='887' height='440' ></embed>"); } //--> </SCRIPT> </div> I am looking to validate a drop down list box (Motor_Frame), so when "Num" is selected from it, a value must be entered into the Motor_Frame_num text box. I am trying to use the following code but its not working: <script type="text/javascript"> function validate_form (){ Motor_Frame = document.getElementById('Motor_Frame'); if(Motor_Frame.value.toString() != "Num") else if (Motor_Frame_num.value!="" ) { alert("Please fill in Motor Frame Number with the correct value, a value between 1 and 500") document.forms[0].Motor_Frame_num.focus(); return false; } return true; } </script> I'm very new to javascript in general, but here's what I'm looking to do: I have a navigation link ("galleries") that 'onclick' displays a sub-menu of other links (the specific galleries). This is on the home page of my site. When a user first views the home page, the sub-menu does not display, until they click "galleries". On other pages of my site, the "galleries" link is one of the options in my navigation. That link takes users back to the home page which is what I want it to do. But what I'm looking for to happen is if the user is directed back to the home page from within another page on my site, I'd like the link on the homepage to automatically display the sublinks under the "gallery" link. This is so that users don't have to click "galleries" twice in order to see the submenu. For example: If a user is on the 'about me' page, in the navigation there is a 'galleries' link. If they click it, it takes them to the home page. They would then have to click on 'galleries' again on the home page in order to display the sub-menu of individual galleries. I want them to show up immediately, but only when directed back to the home page from within my site. I think I do that with an 'if' statement, but I'm not sure of the syntax. I know that's a bit wordy and a little round about but I hope you can understand what I mean. Feel free to ask any questions if I can clarify something for you. I wish to do the AND statement in an IF I would try it but have already frozen myself out trying other things with the server that i do not want to cause anymore problems with them. i.e. Code: if (string1 = "word" AND string2 = "word2") { // do something } Hi, here is my code: Code: <script> $(window).load(function(){ var totalWidth = 0; $("#gallery img").each(function(){ totalWidth += $(this).outerWidth()+20; }); //alert(totalWidth); a = totalWidth+830; $('#content').css({'width' : a+'px'}); }); $('.back a').attr('href','#X'); $('.back a').click(function(){ var halfA = a/'3'; //alert(halfA); $('html, body').animate({scrollLeft: 0}, halfA); }); </script> on the line that reads: a = totalWidth+830; Is it possible to say something like: IF #content 'contains images' THEN a = totalWidth+430; ELSE a = totalWidth+830; OR the other way around: IF #content 'contains <p>' THEN a = totalWidth+830; ELSE a = totalWidth+430; Hey helpful folks! I am completely new to Javascript & I have a basic flash gallery that I embedded into my site (HTML & CSS). When viewed in Firefox everything is fine (840px by 427px), but when viewed in IE the gallery changes size & needs to be (887px by 440px) to be viewed correctly. So, I put an Javascript If Then Else statement. Now it targets and changes in the IE browser (width='887' height='440') , but it also changes the Firefox one to 887x440 when it should stay the original 840x427. Please Help!! Thanks! Code: <div id="gallery"> <SCRIPT language="JavaScript"> <!-- var browserName=navigator.appName; if (browserName=="Microsoft Internet <http://www.pageresource.com/jscript/jbrowse.htm#> Explorer") { document.write("<embed src='PhotoSlider.swf' quality='high' pluginspage='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width='840' height='427' ></embed>"); } else { document.write("<embed src='PhotoSlider.swf' quality='high' pluginspage='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width='887' height='440' ></embed>"); } //--> </SCRIPT> </div> Hi, I am making a link to the current url and adding ?XXXX to the end of the URL. I have done this like so: Code: <UrlAction Url="javascript:q=(document.location.href);void(open((q)+'?XXXX,'_self','resizable,location,menubar,toolbar,scrollbars,status'))"/> This works perfectly. However I need to add an If statement in this code which does the following: If (there is a ? already in the current url) add &XXXX instead. Can anyone help me add this in? Thanks Hi, I have the below code (in a smarty .tpl file), but would like to automate it with data from MySQL DB and PHP So for example if I was to add another gift_id radio box etc.. in MySQL it would add on to the end extending the if statement to make sure a radio box has been picked. if ((form.gift_id[0].checked == false) && (form.gift_id[1].checked == false) && (form.gift_id[2].checked == false)) { ErrorCount++; But the problem is I am not sure how to do this, any ideas? Thanks. ps. sorry if I posted this in the wrong forum, wasn't sure where to put it favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! Hi I am working on a base converting calculator. Same as this calculator on this link. http://www.asknumbers.com/BaseNumberConversion.aspx. I am only working on bases from 2- 10 inclusive. Here is the coding I did but the problem is i cant get the output once the user inputs the "To base". Can some one help. <!-- Base Changing.html <!-- ======================================================= --> <head> <title>Base changing </title> <script type="text/javascript"> function BaseConv() // // { var Xnumber=document.getElementById("dnumberArea").value; var XBase=document.getElementById("dbaseArea").value; //var XBase=parseInt(XBase); var BBase=document.getElementById("bbaseArea").value; //BBase=parseInt(BBase); var exp=Math.log(Xnumber)/Math.log(XBase); //Xnumber=Math.pow(XBase,exp); //log var D=1+ Math.floor(exp); var str=""; count=0; while(count<D){ digit = Xnumber%XBase; Xnumber = Math.floor(Xnumber/XBase); str= digit + str; count++; } document.getElementById("bnumberArea").value=str; } </script> </head> <body> <div style="text-align: center"> <h2>base changing</h2> <hr/> <br><br> Input number <input type="text" id="dnumberArea" size="" Onchange="BaseConv();"/> From base <input type="text" id="dbaseArea" size="" Onchange="BaseConv();"/> <br/><br/> Output number <input type="text" id="bnumberArea" size="" Onchange="BaseConv()"/> To base <input type="text" id="bbaseArea" size="" ;"/> </div> </body> </html> Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks Hello everyone, I am using javascript and I have a radio button that the user selects and I have a function to see which button was selected, but i'm trying to use the return of that if statement in another statement. Basically another part of the function is dependent on what the user selects in the radio button. Here is what I have so far (I have some things in there that might not work because i'm trying to figure out what works): Code: <script type="text/javascript"> function getSelectedRadio() { len = document.dates.dep.length // returns the array number of the selected radio button or -1 if no button is selected if (document.dates.dep[0]) { // if the button group is an array (one button is not an array) for (var i=0; i<len; i++) { if (document.dates.dep[i].checked) { return i } } } else { if (document.dates.dep.checked) { return 0; } // if the one button is checked, return zero } // if we get to this point, no radio button is selected return -1; } function Calculate() { var i = getSelectedRadio(); if (i == -1) { alert("Please select if Marine entered Delayed Entry Program"); } else { if (document.dates.dep[i]) { return document.dates.dep[i].value; } else { return document.dates.dep.value; } } if (document.dates.yearDEAF.value < 1985 && document.dates.monthDEAF.value < 01 && document.dates.dayDEAF.value < 01 && first return from above ) { document.dates.yearDEP.value = (document.dates.yearDEAF.value); document.dates.monthDEP.value = (document.dates.monthDEAF.value); document.dates.dayDEP.value = (document.dates.dayDEAF.value); document.dates.yearPEBD.value = (document.dates.yearDEAF.value); document.dates.monthPEBD.value = (document.dates.monthDEAF.value); document.dates.dayPEBD.value = (document.dates.dayDEAF.value); } else if (document.dates.yearDEAF.value < 1985 && document.dates.monthDEAF.value < 01 && document.dates.dayDEAF.value < 01 && second return from above ) { document.dates.yearPEBD.value = (document.dates.yearAFADBD.value); document.dates.monthPEBD.value = (document.dates.monthAFADBD.value); document.dates.dayPEBD.value = (document.dates.dayAFADBD.value); document.dates.yearDEP.value = "N/A"; document.dates.monthDEP.value = "N/A"; document.dates.dayDEP.value = "N/A"; } } </script> I color coded in red the returns i'm trying to reference and where they need to be. Is this possible, and if so how can I do it? I haven't been able to find anything on the internet so far. Any help is greatly appreciated! I am making an webpage where you get two random photos and you click using the arrow keys which one you like best and that one stays and goes on the versus the next random photo. I got it so far when you start the page it sets two random pictures but i dont know how to do key inputs on html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Which Is better?</title> <h1 align = center>Which is better?</h1> <script language="JavaScript"> var theImages = new Array() var thePictures = new Array() thePictures[1] = 'untitled-1.jpg' thePictures[2] = 'untitled-2.jpg' thePictures[3] = 'untitled-3.jpg' thePictures[4] = 'untitled-4.jpg' thePictures[5] = 'untitled-5.jpg' thePictures[6] = 'untitled-6.jpg' thePictures[7] = 'untitled-7.jpg' thePictures[8] = 'untitled-8.jpg' thePictures[9] = 'untitled-9.jpg' thePictures[10] = 'untitled-10.jpg' thePictures[11] = 'untitled-11.jpg' thePictures[12] = 'untitled-12.jpg' thePictures[13] = 'untitled-13.jpg' thePictures[14] = 'untitled-14.jpg' thePictures[15] = 'untitled-15.jpg' thePictures[16] = 'untitled-16.jpg' thePictures[17] = 'untitled-17.jpg' thePictures[18] = 'untitled-18.jpg' thePictures[19] = 'untitled-19.jpg' thePictures[20] = 'untitled-20.jpg' thePictures[21] = 'untitled-21.jpg' thePictures[22] = 'untitled-22.jpg' thePictures[23] = 'untitled-23.jpg' thePictures[24] = 'untitled-24.jpg' thePictures[25] = 'untitled-25.jpg' thePictures[26] = 'untitled-26.jpg' thePictures[27] = 'untitled-27.jpg' thePictures[28] = 'untitled-28.jpg' thePictures[29] = 'untitled-29.jpg' thePictures[30] = 'untitled-30.jpg' thePictures[31] = 'untitled-31.jpg' thePictures[32] = 'untitled-32.jpg' thePictures[33] = 'untitled-33.jpg' thePictures[34] = 'untitled-34.jpg' thePictures[35] = 'untitled-35.jpg' thePictures[36] = 'untitled-36.jpg' thePictures[37] = 'untitled-37.jpg' thePictures[38] = 'untitled-38.jpg' thePictures[39] = 'untitled-39.jpg' thePictures[40] = 'untitled-40.jpg' thePictures[41] = 'untitled-41.jpg' thePictures[42] = 'untitled-42.jpg' thePictures[43] = 'untitled-43.jpg' thePictures[44] = 'untitled-44.jpg' thePictures[45] = 'untitled-45.jpg' thePictures[46] = 'untitled-46.jpg' thePictures[47] = 'untitled-47.jpg' thePictures[48] = 'untitled-48.jpg' thePictures[49] = 'untitled-49.jpg' thePictures[50] = 'untitled-50.jpg' thePictures[51] = 'untitled-51.jpg' thePictures[52] = 'untitled-52.jpg' thePictures[53] = 'untitled-53.jpg' thePictures[54] = 'untitled-54.jpg' thePictures[55] = 'untitled-55.jpg' thePictures[56] = 'untitled-56.jpg' thePictures[57] = 'untitled-57.jpg' thePictures[58] = 'untitled-58.jpg' thePictures[59] = 'untitled-59.jpg' thePictures[60] = 'untitled-60.jpg' thePictures[61] = 'untitled-61.jpg' thePictures[62] = 'untitled-62.jpg' thePictures[63] = 'untitled-63.jpg' thePictures[64] = 'untitled-64.jpg' thePictures[65] = 'untitled-65.jpg' thePictures[66] = 'untitled-66.jpg' thePictures[67] = 'untitled-67jpg' thePictures[68] = 'untitled-68.jpg' thePictures[69] = 'untitled-69.jpg' thePictures[70] = 'untitled-70.jpg' thePictures[71] = 'untitled-71.jpg' thePictures[72] = 'untitled-72.jpg' thePictures[73] = 'untitled-73.jpg' thePictures[74] = 'untitled-74.jpg' thePictures[75] = 'untitled-1.jpg' thePictures[76] = 'untitled-2.jpg' thePictures[77] = 'untitled-77.jpg' thePictures[78] = 'untitled-78.jpg' thePictures[79] = 'untitled-79.jpg' thePictures[80] = 'untitled-80.jpg' thePictures[81] = 'untitled-81.jpg' thePictures[82] = 'untitled-82.jpg' thePictures[83] = 'untitled-83.jpg' thePictures[84] = 'untitled-84.jpg' thePictures[85] = 'untitled-85.jpg' thePictures[86] = 'untitled-86.jpg' thePictures[87] = 'untitled-87.jpg' thePictures[88] = 'untitled-88.jpg' thePictures[89] = 'untitled-89.jpg' thePictures[90] = 'untitled-90.jpg' thePictures[91] = 'untitled-91.jpg' thePictures[92] = 'untitled-92.jpg' thePictures[93] = 'untitled-93.jpg' thePictures[94] = 'untitled-94.jpg' thePictures[95] = 'untitled-95.jpg' thePictures[96] = 'untitled-96.jpg' thePictures[97] = 'untitled-97.jpg' thePictures[98] = 'untitled-98.jpg' thePictures[99] = 'untitled-99.jpg' thePictures[100] = 'untitled-100.jpg' thePictures[101] = 'untitled-101.jpg' thePictures[102] = 'untitled-102.jpg' thePictures[103] = 'untitled-103.jpg' thePictures[104] = 'untitled-104.jpg' thePictures[105] = 'untitled-105.jpg' thePictures[106] = 'untitled-106.jpg' thePictures[107] = 'untitled-107.jpg' thePictures[108] = 'untitled-108.jpg' thePictures[109] = 'untitled-109.jpg' thePictures[110] = 'untitled-110.jpg' thePictures[111] = 'untitled-111.jpg' thePictures[112] = 'untitled-112.jpg' thePictures[113] = 'untitled-113.jpg' thePictures[114] = 'untitled-114.jpg' thePictures[115] = 'untitled-115.jpg' thePictures[116] = 'untitled-116.jpg' thePictures[117] = 'untitled-117.jpg' thePictures[118] = 'untitled-118.jpg' thePictures[119] = 'untitled-119.jpg' thePictures[120] = 'untitled-120.jpg' thePictures[121] = 'untitled-121.jpg' thePictures[122] = 'untitled-122.jpg' thePictures[123] = 'untitled-123.jpg' thePictures[124] = 'untitled-124.jpg' thePictures[125] = 'untitled-125.jpg' thePictures[126] = 'untitled-126.jpg' thePictures[127] = 'untitled-127.jpg' thePictures[128] = 'untitled-128.jpg' thePictures[129] = 'untitled-129.jpg' thePictures[130] = 'untitled-130.jpg' thePictures[131] = 'untitled-131.jpg' thePictures[132] = 'untitled-132.jpg' thePictures[133] = 'untitled-133.jpg' thePictures[134] = 'untitled-134.jpg' thePictures[135] = 'untitled-135.jpg' thePictures[136] = 'untitled-136.jpg' thePictures[137] = 'untitled-137.jpg' thePictures[138] = 'untitled-138.jpg' thePictures[139] = 'untitled-139.jpg' thePictures[140] = 'untitled-140.jpg' thePictures[141] = 'untitled-141.jpg' thePictures[142] = 'untitled-142.jpg' thePictures[143] = 'untitled-143.jpg' thePictures[144] = 'untitled-144.jpg' thePictures[145] = 'untitled-145.jpg' thePictures[146] = 'untitled-146.jpg' thePictures[147] = 'untitled-147.jpg' thePictures[148] = 'untitled-148.jpg' thePictures[149] = 'untitled-149.jpg' thePictures[150] = 'untitled-150.jpg' theImages[1] = 'untitled-1.jpg' theImages[2] = 'untitled-2.jpg' theImages[3] = 'untitled-3.jpg' theImages[4] = 'untitled-4.jpg' theImages[5] = 'untitled-5.jpg' theImages[6] = 'untitled-6.jpg' theImages[7] = 'untitled-7.jpg' theImages[8] = 'untitled-8.jpg' theImages[9] = 'untitled-9.jpg' theImages[10] = 'untitled-10.jpg' theImages[11] = 'untitled-11.jpg' theImages[12] = 'untitled-12.jpg' theImages[13] = 'untitled-13.jpg' theImages[14] = 'untitled-14.jpg' theImages[15] = 'untitled-15.jpg' theImages[16] = 'untitled-16.jpg' theImages[17] = 'untitled-17.jpg' theImages[18] = 'untitled-18.jpg' theImages[19] = 'untitled-19.jpg' theImages[20] = 'untitled-20.jpg' theImages[21] = 'untitled-21.jpg' theImages[22] = 'untitled-22.jpg' theImages[23] = 'untitled-23.jpg' theImages[24] = 'untitled-24.jpg' theImages[25] = 'untitled-25.jpg' theImages[26] = 'untitled-26.jpg' theImages[27] = 'untitled-27.jpg' theImages[28] = 'untitled-28.jpg' theImages[29] = 'untitled-29.jpg' theImages[30] = 'untitled-30.jpg' theImages[31] = 'untitled-31.jpg' theImages[32] = 'untitled-32.jpg' theImages[33] = 'untitled-33.jpg' theImages[34] = 'untitled-34.jpg' theImages[35] = 'untitled-35.jpg' theImages[36] = 'untitled-36.jpg' theImages[37] = 'untitled-37.jpg' theImages[38] = 'untitled-38.jpg' theImages[39] = 'untitled-39.jpg' theImages[40] = 'untitled-40.jpg' theImages[41] = 'untitled-41.jpg' theImages[42] = 'untitled-42.jpg' theImages[43] = 'untitled-43.jpg' theImages[44] = 'untitled-44.jpg' theImages[45] = 'untitled-45.jpg' theImages[46] = 'untitled-46.jpg' theImages[47] = 'untitled-47.jpg' theImages[48] = 'untitled-48.jpg' theImages[49] = 'untitled-49.jpg' theImages[50] = 'untitled-50.jpg' theImages[51] = 'untitled-51.jpg' theImages[52] = 'untitled-52.jpg' theImages[53] = 'untitled-53.jpg' theImages[54] = 'untitled-54.jpg' theImages[55] = 'untitled-55.jpg' theImages[56] = 'untitled-56.jpg' theImages[57] = 'untitled-57.jpg' theImages[58] = 'untitled-58.jpg' theImages[59] = 'untitled-59.jpg' theImages[60] = 'untitled-60.jpg' theImages[61] = 'untitled-61.jpg' theImages[62] = 'untitled-62.jpg' theImages[63] = 'untitled-63.jpg' theImages[64] = 'untitled-64.jpg' theImages[65] = 'untitled-65.jpg' theImages[66] = 'untitled-66.jpg' theImages[67] = 'untitled-67.jpg' theImages[68] = 'untitled-68.jpg' theImages[69] = 'untitled-69.jpg' theImages[70] = 'untitled-70.jpg' theImages[71] = 'untitled-71.jpg' theImages[72] = 'untitled-72.jpg' theImages[73] = 'untitled-73.jpg' theImages[74] = 'untitled-74.jpg' theImages[75] = 'untitled-75.jpg' theImages[76] = 'untitled-76.jpg' theImages[77] = 'untitled-77.jpg' theImages[78] = 'untitled-78.jpg' theImages[79] = 'untitled-79.jpg' theImages[80] = 'untitled-80.jpg' theImages[81] = 'untitled-81.jpg' theImages[82] = 'untitled-82.jpg' theImages[83] = 'untitled-83.jpg' theImages[84] = 'untitled-84.jpg' theImages[85] = 'untitled-85.jpg' theImages[86] = 'untitled-86.jpg' theImages[87] = 'untitled-87.jpg' theImages[88] = 'untitled-88.jpg' theImages[89] = 'untitled-89.jpg' theImages[90] = 'untitled-90.jpg' theImages[91] = 'untitled-91.jpg' theImages[92] = 'untitled-92.jpg' theImages[93] = 'untitled-93.jpg' theImages[94] = 'untitled-94.jpg' theImages[95] = 'untitled-95.jpg' theImages[96] = 'untitled-96.jpg' theImages[97] = 'untitled-97.jpg' theImages[98] = 'untitled-98.jpg' theImages[99] = 'untitled-99.jpg' theImages[100] = 'untitled-100.jpg' theImages[101] = 'untitled-101.jpg' theImages[102] = 'untitled-102.jpg' theImages[103] = 'untitled-103.jpg' theImages[104] = 'untitled-104.jpg' theImages[105] = 'untitled-105.jpg' theImages[106] = 'untitled-106.jpg' theImages[107] = 'untitled-107.jpg' theImages[108] = 'untitled-108.jpg' theImages[109] = 'untitled-109.jpg' theImages[110] = 'untitled-110.jpg' theImages[111] = 'untitled-111.jpg' theImages[112] = 'untitled-112.jpg' theImages[113] = 'untitled-113.jpg' theImages[114] = 'untitled-114.jpg' theImages[115] = 'untitled-115.jpg' theImages[116] = 'untitled-116.jpg' theImages[117] = 'untitled-117.jpg' theImages[118] = 'untitled-118.jpg' theImages[119] = 'untitled-119.jpg' theImages[120] = 'untitled-120.jpg' theImages[121] = 'untitled-121.jpg' theImages[122] = 'untitled-122.jpg' theImages[123] = 'untitled-123.jpg' theImages[124] = 'untitled-124.jpg' theImages[125] = 'untitled-125.jpg' theImages[126] = 'untitled-126.jpg' theImages[127] = 'untitled-127.jpg' theImages[128] = 'untitled-128.jpg' theImages[129] = 'untitled-129.jpg' theImages[130] = 'untitled-130.jpg' theImages[131] = 'untitled-131.jpg' theImages[132] = 'untitled-132.jpg' theImages[133] = 'untitled-133.jpg' theImages[134] = 'untitled-134.jpg' theImages[135] = 'untitled-135.jpg' theImages[136] = 'untitled-136.jpg' theImages[137] = 'untitled-137.jpg' theImages[138] = 'untitled-138.jpg' theImages[139] = 'untitled-139.jpg' theImages[140] = 'untitled-140.jpg' theImages[141] = 'untitled-141.jpg' theImages[142] = 'untitled-142.jpg' theImages[143] = 'untitled-143.jpg' theImages[144] = 'untitled-144.jpg' theImages[145] = 'untitled-145.jpg' theImages[146] = 'untitled-146.jpg' theImages[147] = 'untitled-147.jpg' theImages[148] = 'untitled-148.jpg' theImages[149] = 'untitled-149.jpg' theImages[150] = 'untitled-150.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } var j = 0 var p = thePictures.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = thePictures[i] } var whichPicture = Math.round(Math.random()*(p-1)); function showPicture(){ document.write('<img src="'+thePictures[whichPicture]+'"align = right >'); } // End --> </script> </head> <body> <script language="JavaScript"> showImage(); </script> <script language="JavaScript"> showPicture(); </script> <h4 align = center> Click Left or Right arrow key to select which one is better. </h4> </body> </html> Two things: I'm making a website for my online portfolio for Uni... 1. I want to make a prev|next (preferably with the numbers after too if possible) to flick through my work so I don't have to scroll around the page. 2. I want to create a slide down menu that stays open when an option is selected. Hope I've explained it well! Thanks in advance |