w3schools.com - Browser Scripting
view rss
Change?
5/9/2011 external link
<html><body><h1>My First Web Page</h1><p id="demo">This is a paragraph.</p><script type="text/javascript">document.getElementById("demo").innerHTML=Date();</script></body></htmThe change in this html document is that: ´This is a paragraph´ is replaced by: ´the date and time´?
Redirect Progress Bar
4/9/2011 external link
HiI have been trying to add a progress bar to a page on my website. I would like it to add progress over a period of time and at 100%, redirect the page. However, I just cant get it to raise the value!Here is my code:CODE<script>function addprogress() {    var pb = document.getElementById("progBar");    setInterval('pb.value+=10;',1000)};window.onload = "addprogress()";setTimeout('window.location = "http://www.meljones.info/schools-nurseries.html"', 10000);</script><b><big>THIS PAGE HAS NOW MOVED. <script type="text/javascript">document.write("YOU ARE ABOUT TO BE REDIRECTED.");</script><noscript></b>*Javascript is disabled - Unable to redirect*<b>.</noscript> NEXT TIME PLEASE VISIT [Link type="section" id="527732"]SCHOOLS AND NURSERIES[/link]. <progress id="progBar" max="100" value=""></progress>Thanks.</b><small><details><summary>Not redirecting?</summary>It may take about 10 seconds to redirect. [Link type="section" id="527732"]Click here to visit the new page.[/link]</details></small>The Page
createElement() and getAttribute()
4/9/2011 external link
Can someone work createElement into this script to demo its use?I think the two can work together, but I don't know how.CODE<html><head><script type="text/javascript">function myFunction(anid){ var cssatr = document.getElementById(anid).getAttribute('style'); // get the value of "style" var htmlanid = document.getElementById(anid).innerHTML; // get html code return ('css style = '+ cssatr+ '<br>html = '+ htmlanid);}</script></head><body><div id="anid" style="float:right;">Some html code</div><script type="text/javascript">document.write(myFunction('anid'))</script></body></html>
jquery animation and ajax
4/9/2011 external link
I'm writing some jquery such that when the user hovers over an image, the image shakes. In the page, I use ajax to load new content when the user clicks the nav bar that replaces the images on the home page. The images are on the front of the index page in the site and the animations work great. However, once the user navigates away from the home page and then back again in which the home page content is reloaded with ajax, the animations stop working. Any idea why the jquery stops working?htmlCODE<table width="100%" border="0"> <tr> <td align="center"><a href="http://www.smartlifeapp.com" class="app" id="sl"><img src="images/SL.png" alt="smartlife" height="166px" /></a><div class="appname">Smart Life!</div> </td> <td align="center"><a href="http://itunes.apple.com/us/app/drinkdeals/id444605503?mt=8" class="app" id="dd"><img src="images/DD.png" alt="drink deals" height="166px" /></a><div class="appname">Drink Deals!</div> </td> </tr></table>xml loaded from ajaxCODE<table width="100%" border="0" valign="top"> <tr> <td align="center"><a href="http://www.smartlifeapp.com" class="app" id="sl"><img src="images/SL.png" alt="smartlife" height="166px" /></a><div class="appname">Smart Life!</div> </td> <td align="center"><a href="http://itunes.apple.com/us/app/drinkdeals/id444605503?mt=8" class="app" id="dd"><img src="images/DD.png" alt="drink deals" height="166px" /></a><div class="appname">Drink Deals!</div> </td> </tr></table>jquery animationCODE<script type="text/javascript"> $(jiggle); function jiggle () { $(".app").hover( function () { $(this).animate(,300).animate(,100).animate(,100).animate(,100).animate(,100).animate(,100).animate(,100).animate(,100); }, function () { $(this).animate(,300).animate(,100); } ) }</script>
simple css and html into javascript
4/9/2011 external link
how do I get the css and the html into the function?CODE<html><head><script type="text/javascript">function myFunction(){return ("Hello world!");}</script></head><body><div style="float:right;"><script type="text/javascript">document.write(myFunction())</script></div></body></html>
How to resize images with the browser window?
4/9/2011 external link
Hope I have posted this in the correct topic...Hi, I'm making a portfolio layout with images in a list (grid view), and I’m working with an fixed-fluid width on my #wrapper (max-width: 1075px; min-width: 960px; ). This works fine as long as I’m showing full width, but when I’m resizing the browser window the img thumbs floats down an leave a gap on the right side (the <li> is set to float:left; ) (as well as it should). But this is not the effect I’m after, I want the img thumbs to resize with the browser window, and I have managed to do that width CSS (example: width: 28.1%; ). But I want a hover effect with text over the images (and that makes a mess out of % ), so now I’m looking for a script that can do the resizing for me because I can't use % on the image if I want that effect; and that I DO!So do anybody knows about a script that can help me with my problem?Specifics:I'm no wizard in .js so it would be fine if it is well documented on how to implement It should be possible to direct to only img with a certain class (don't want all my images to go bananas when resizing )Maybe control image size in css?And of course keep correct image dimensions! I'm not sure if this matters but; this portfolio is going to be implemented in WordPress.I would bee very grateful for all help and tips on the matter, because this problem makes me kinda crazy !Also:I come over this gallery when I was searching after a solution, so here you can see an example on what I want (it also almost have the hover effect I want in mine), resize your browser window and see the effect: http://bestwebgallery.com/ I hope I have explained what I’m after clearly enough, my English (writing) is sadly not the best.Kind regards from a designer who isn’t crazy; yet!
counting commas
3/9/2011 external link
Is there a easiy way to count the number of commas in a comma delimited text string using javascript?If i turned the test string into an array, what would be the easiest way to count elements using javascript?Edit: I found length() in the JavaScript Array Object - Should have node that, but i still could use an answer to my first question.
jQuery Zoom Plugin
3/9/2011 external link
Hello...I am looking for jQuery image zoomer like Darkbox but with magnifying glass on mouseover and some borders when the image is enlarged. The Nivo Zoom got some but they dont have borders too. Thanks in advance...
Validating two fields with same name
2/9/2011 external link
Hi, my form here collects the first name and last name fields, and these fields need to have the same name in order to be properly placed in our database.I have JS validation set up to make sure something is entered for email and company. But when I set something up for the name fields, the validation breaks. Here's what I have in place now:CODE                            function checkrefervalues(){                                message = "";                                if (document.referaclient.company.value.length ==0){                                        message = message+"Please enter your Company Name.\n";                                    }                        if (document.referaclient.Email.value.length == 0) {                            message = message + "Please enter your Email Address.\n";                        }                        else                                                                 if (message.length > 0){                                               alert(message);                                        return false;                                        }                                pageTracker._trackEvent('Accountant Forms', 'PMISubscription');                                                                       return true;                                }                                                                            function checkemail(str){                                var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-])\.([a-z](?:\.[a-z])?)$/i                                if (filter.test(str))                                testresults=true                                else{                                message = message + "Email address seems incorrect (check @ and .'s)\n"                                return false;                                }                                }                            function IsNumeric(sText)                                {                                   var ValidChars = "0123456789";                                   var IsNumber=true;                                   var Char;                                                                                                    for (i = 0; i < sText.length && IsNumber == true; i++)                                       {                                       Char = sText.charAt(i);                                       if (ValidChars.indexOf(Char) == -1)                                          {                                         IsNumber = false;                                         }                                      }                                     return IsNumber;                                   }                                                    var isNN = (navigator.appName.indexOf("Netscape")!=-1);                        function autoTab(input,len, e) {                          var keyCode = (isNN) ? e.which : e.keyCode;                           var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];                          if(input.value.length >= len && !containsElement(filter,keyCode)) {                            input.value = input.value.slice(0, len);                            input.form[(getIndex(input)+1) % input.form.length].focus();                          }                          function containsElement(arr, ele) {                            var found = false, index = 0;                            while(!found && index < arr.length)                            if(arr[index] == ele)                            found = true;                            else                            index++;                            return found;                          }                          function getIndex(input) {                            var index = -1, i = 0, found = false;                            while (i < input.form.length && index == -1)                            if (input.form[i] == input)index = i;                            else i++;                            return index;                          }                          return true;                        }Is there any way to make sure the first and last name fields get filled out?
valueOf()
1/9/2011 external link
What is the valueOf() method use for? can somebody give me an EXAMPLE?
tutorial explaination
1/9/2011 external link
I'm looking at a script at: http://w3schools.com/php/php_ajax_php.aspunder: Example Explained - The HTML Page:regarding:xmlhttp.onreadystatechange=function()I know xmlhttp is a variable and onreadystatechange is storing the function function(), but where is the function function() defined?
combobox
1/9/2011 external link
[color="#0000FF"][/color] I have this code below and i can't fidure it out, how to make change a pictures, only change it the one at javascript, but nothing hapen with combobox. is anybody can help. Thank you<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/xml; Charset=utf-8" /><title>Logos.html</title><script language ="javascript">function changeSrc(myImage,logo){document.getElementById(myImage).src=(this is the picture from location at title logos.html, if i put a picture here it will change onChange script, but it can't pickup from the select?)}</script></head><body><table border="0" cellspacing="3" cellpadding="3"><tr><td>Logos: <select name="logo" onChange="changeSrc('myImage','logo',value)"> <option value="usalogo">usalogo</option> <option value="jura">Jura</option> <option value="lthockey">LT Hockey</option> </select></td><td><img src=("this picture also located at logos.html and it shows right a way when i opent the html page") id="myImage"></td></tr></table></body></html>
For...In Statement
1/9/2011 external link
CODEvar person=;for (x in person){document.write(person[x] + " ");}Here the variable x carries no values as it was not pre-declared, Then how it outputs the result like- John Doe 25Also give me one another example of For...In statement, so that the concept becomes more clear to me
Obj1=new Object()
1/9/2011 external link
What is/are the diference between calling a function with the NEW keyword and without the NEW keyword? CODEa=new Object();b=Object();a.txt='string1';b.txt='string2'; The code above produce the-same result. What is/are the diference?
Onclick audio with Java/Html5
25/8/2011 external link
I'm not sure if this is an html or java or multimedia problem, but I'll go with java.. I'm trying to make an extremely basic page with three images: you click on each, you get a sound (an mp3 is played). This code is working on every version of every browser I've tried (Chrome 11 and 12, Firefox 4 and 5, IE 8 and 9, Safari..), but I can't get it to work on an iPad: nothing is played when the image is "touched". This is supposed to be an auditory matching help for children with learning disabilities, so I want to maintain maximum compatibility with any browser or platform. I know the iPad has many.. let's call them boundaries with multimedia, but I can't find a solution, and this seems to me extremely basic and standard html.Sorry if the code and indentation are poor, I'm not a coder and I've basically learned html, css and java from scratch in a couple of days to make this charity project, and I "code" with your basic Notepad.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>Set 1</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body><script type="text/javascript"> function playTarget() { sound = new Audio("./audio/noise/knock.mp3"); sound.setAttribute("autoplay", "autoplay"); document.getElementsByTagName("body")[0].appendChild(sound); return true; }</script><script type="text/javascript"> function playFalse() { sound = new Audio("./audio/noise/white.mp3"); sound.setAttribute("autoplay", "autoplay"); document.getElementsByTagName("body")[0].appendChild(sound); return true; }</script><div id="wrapper"> <div id="content_top"> <div id="col_top_left"> <div class="side_top_left"><a href=./start.html><img src="./images/blank.png" width="48" height="48" alt="" /></a></div> </div><div class="img_top"><img src="./images/blank.png" width="220" height="220" alt="" /></div><div class="img_top"> <img src="./images/red_round.png" width="220" height="220" alt="" onclick="playTarget()" /> </div><div class="img_top"><img src="./images/blank.png" width="220" height="220" alt="" /></div> <div id="col_top_right"> <div class="side_top_right"><a href=./set_1_h.html><img src="./images/blank.png" width="48" height="48" alt="" /></a></div> </div> </div> <div id="content_bottom" class="cleaner"> <div id="col_bottom_left"> <div class="side_bottom_left"><img src="images/blank.png" width="48" height="48" alt="" /></div></div><div class="img_bottom"><img src="./images/blue_square.png" width="220" height="220" alt="" onclick="playFalse()" /></div><div class="img_bottom"><img src="images/blank.png" width="220" height="220" alt="" /></div><div class="img_bottom"> <img src="./images/blue_square.png" width="220" height="220" alt="" onclick="playTarget()" /> </div> <div id="col_bottom_right"> <div class="side_bottom_right"><img src="./images/blank.png" width="48" height="48" alt="" /></div> </div> </div></div></body></html>Thanks for your help.-- Samuel
Display Array
25/8/2011 external link
I would like to display the elements in my array but it is NOT working. Here's my code:HTML<HTML><HEAD><TITLE>Test Input</TITLE><script type="text/javascript">function addtext() { var openURL=new Array("http://google.com","http://yahoo.com","http://www.msn.com","http://www.bing.com"); document.writeln('<table>'); for (i=0;i<=openURL.length-1;i++){ document.writeln('<tr><td>openURL[i]</td></tr>'); } document.writeln('</table>');}</script></HEAD><body onload="addtext()"></BODY></HTML>Here's the ouput:CODEopenURL[i] openURL[i] openURL[i] openURL[i]It should display: CODEhttp://google.comhttp://yahoo.comhttp://msn.comhttp://bing.comAny comments or suggestions are greatly apprecitated.thanks
Display Array
25/8/2011 external link
I would like to display the elements in my array but it is NOT working. Here's my code:HTML<HTML><HEAD><TITLE>Test Input</TITLE><script type="text/javascript">function addtext() { var openURL=new Array("http://google.com","http://yahoo.com","http://www.msn.com","http://www.bing.com"); document.writeln('<table>'); for (i=0;i<=openURL.length-1;i++){ document.writeln('<tr><td>openURL[i]</td></tr>'); } document.writeln('</table>');}</script></HEAD><body onload="addtext()"></BODY></HTML>Here's the ouput:CODEopenURL[i] openURL[i] openURL[i] openURL[i]It should display: CODEhttp://google.comhttp://yahoo.comhttp://msn.comhttp://bing.comAny comments or suggestions are greatly apprecitated.thanks
Display Array
25/8/2011 external link
I would like to display the elements in my array but it is NOT working. Here's my code:HTML<HTML><HEAD><TITLE>Test Input</TITLE><script type="text/javascript">function addtext() { var openURL=new Array("http://google.com","http://yahoo.com","http://www.msn.com","http://www.bing.com"); document.writeln('<table>'); for (i=0;i<=openURL.length-1;i++){ document.writeln('<tr><td>openURL[i]</td></tr>'); } document.writeln('</table>');}</script></HEAD><body onload="addtext()"></BODY></HTML>Here's the ouput:CODEopenURL[i] openURL[i] openURL[i] openURL[i]It should display: CODEhttp://google.comhttp://yahoo.comhttp://msn.comhttp://bing.comAny comments or suggestions are greatly apprecitated.thanks
Multiple Actions for a Rollover
24/8/2011 external link
Hello:I am a newbie to learning Javascript. I have some problems with a file that was copied from the book "JavaScript Demystified A SELF-TEACHING GUIDE" by Jim Keogh, copyright 2005, page 240 (figure 12-4).The goal of the file is that when it loads in a browser, the 1st image is displayed in the top left (image 7441805.gif),along with the following three titles to the right of the image, as listed below:Java DemystifiedOOP DemystifiedData Structures DemystifiedWhen you place the mouse over "Java Demystified," the 7441805.gif image should still appear (which it does)), and a new window should pop-up and stay on the screen displaying "10% Discount for Java Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. When you place the mouse over "OOP Demystified," the 0072253630.jpg image should appear (which it does), and a new window should pop-up and stay on the screen displaying "20% Discount for OOP Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. When you place the mouse over "Data Structures Demystified," the 7417436.gif image should appear (which it does), and a new window should pop-up and stay on the screen displaying "15% Discount for Data Structures Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want.All of the files are loaded on my laptop, which is using Vista, is 32bit, has the IE9 browser installed, and pop-ups are disabled.When I try to use Mozilla (version 6.0), I am unable to disable the pop-ups, and therefore can not even get any new windows to open.I would appreciate your help.The html file is below:CODE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Open Window</title><meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Language" content="en-us" /><meta name="description" content="XYZ" /><meta name="keywords" content="XYZ" />&lt!-- the absolute pathname of this file is: -->&lt!-- C:\MISCSUP2_10_17_8\MISCSUP2\Javascript_Demystified_Download_Working\ -->&lt!-- Ch_12_Page241.html -->&lt!-- this file was created on Wednesday, 8/24/11: -->&lt!-- this file was updated on Wednesday, 8/24/11: --><script language="Javascript" type="text/javascript"> &lt!-- function OpenNewWindow(book) { if (book== 1) { document.cover.src='7441805.gif' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="400"') MyWindow.document.write('10% Discount for Java Demystified!') } if (book== 2) { document.cover.src='0072253630.jpg' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="500"') MyWindow.document.write('20% Discount for OOP Demystified!') } if (book== 3) { document.cover.src='7417436.gif' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="600"') MyWindow.document.write("15% Discount for Data Structures Demystified!") } } --> </script></head><body> <table width="100%" border="0"> <tbody> <tr valign="top"> <td width="50"> <a> <img height="92" src="7441805.gif" width="70" border="0" name="cover"> </a> </td> <td> <img height="1" src="" width="10"> </td> <td> <a onmouseover="OpenNewWindow(1)" onmouseout="MyWindow.close()"> <b><u>Java Demystified </u></b> </a> <br> <a onmouseover="OpenNewWindow(2)" onmouseout="MyWindow.close()"> <b><u>OOP Demystified</u></b> </a> <br> <a onmouseover="OpenNewWindow(3)" onmouseout="MyWindow.close()"> <b><u>Data Structures Demystified</u></b> </a> </td> </tr> </tbody> </table></body></html>
check boxes (checked & unchecked)
24/8/2011 external link
Hi guysI working with something tricky, its in brief list of check boxes for male and female personsand below this list of check boxes 3 text boxes (Total of checked, Total of male, Total of female) the text boxes should be affected at the same time of check and uncheck, I have accomplish the total part, but the male and female is the problemI have the data in database so I should work with AJAX, but what is the methodology I should working with, I have a solution but I don't like it, that's creating an AJAX callback for every check and uncheck for the check boxes, but I no like it due to of many callbacks and I believe there are a better solutions.I have an Idea like giving a specific class for male and female values for example or something like that.. what do you think?Notice I am working with Jquery,PHP, MYSQL Best regards for all and thanks in advance for any suggestions
problems with FF6
24/8/2011 external link
This js code works in every browser EXCEPT Firefox. I was running FF5 and it didn't work, updated to FF6 and still doesn't work.Firebug returns the error "apps is not defined ..... if (element == apps) {"jsCODEfunction change(element){var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("content").innerHTML=xmlhttp.responseText; } } if (element == apps) { xmlhttp.open("GET","xml/apps.xml",true); xmlhttp.send(); } else if (element == solutions) { xmlhttp.open("GET","xml/solutions.xml",true); xmlhttp.send(); } else if (element == about) { xmlhttp.open("GET","xml/about.xml",true); xmlhttp.send(); } else if (element == team) { xmlhttp.open("GET","xml/team.xml",true); xmlhttp.send(); } else if (element == labs) { xmlhttp.open("GET","xml/labs.xml",true); xmlhttp.send(); } else { xmlhttp.open("GET","xml/contact.xml",true); xmlhttp.send(); }}htmlCODE<table height="45px" width="860px" align="center" border="0" cellspacing="0" cellpadding="0" layout="fixed" z-index="1"> <tr> <td width="60px"></td> <td width="133px" align="center"><a href="#apps" onclick="change(this), set_active(this), navoff(this)" class="nav" id="apps">APPS</a></td> <td width="160" align="center"><a href="#solutions" onclick="change(this), set_active(this), navoff(this)" class="nav" id="solutions">SOLUTIONS</a></td> <td width="125px" align="center"><a href="#about" onclick="change(this), set_active(this), navoff(this)" class="nav" id="about">ABOUT</a></td> <td width="117px" align="center"><a href="#team" onclick="change(this), set_active(this), navoff(this)" class="nav" id="team">TEAM</a></td> <td width="131px" align="center"><a href="#labs" onclick="change(this), set_active(this), navoff(this)" class="nav" id="labs">LABS</a></td> <td width="133px" align="center"><a href="#contact" onclick="change(this), set_active(this), navoff(this)" class="nav" id="contact">CONTACT</a></td> </tr></table>
make duration slide
24/8/2011 external link
Hello everyone,I got a problem when I tried to create javascript image slide, a few days ago I found some website, and here's that website :www.pfdecoration.comI don't know how to make like this, but if using javascript can I made it?and I got from w3school code tag to change image :CODE<html><head><script type="text/javascript">function mouseOver(){document.getElementById("b1").src ="b_pink.gif";}function mouseOut(){document.getElementById("b1").src ="b_blue.gif";}</script></head><body><a href="http://www.w3schools.com" target="_blank"><img border="0" alt="Visit W3Schools!" src="b_blue.gif" id="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></body></html>but it change the image directly not have duration time,I want to know how to create image/photo slide, that have duration.please someone help meThank you very much
help inserting dynamic data into javascript with php following:
24/8/2011 external link
<!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>function changeimage(towhat,url){if (document.images)}function warp()</script><script language="JavaScript1.1">var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=new Image()myimages[i].src=preloadimages.arguments[i]}}</script></head><body><script>preloadimages("Images/primagold.com.vn","Images/plane2.gif","images/pilot-beach-resort-9.jpg","http://www.javascriptkit.com/script/script2/plane4.gif","http://www.javascriptkit.com/script/script2/plane5.gif")</script><a href="java script:warp()"><img src="Images/plane2.gif" name="targetimage" border=0></a><a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a><a href="f15.htm" onMouseover="changeimage(myimages[1],this.href)">Plane 2</a><a href="su27.htm" onMouseover="changeimage(myimages[2],this.href)">Plane 3</a><a href="jet.htm" onMouseover="changeimage(myimages[3],this.href)">Plane 4</a><a href="boeing.htm" onMouseover="changeimage(myimages[4],this.href)">Plane 5</a></body></html>similar results website http://www.premierleague.comask for your help ?thanks
((
23/8/2011 external link
CODEif((A==1)&&(B==2)){return (true)} y is extra brackets surrounding the condiction and the true statement?
return<<<
23/8/2011 external link
Is there a way to create a constructor that will return a value just like a string constructor? E.g:CODE str=new String('value');document.write(str)//prints:value.
Increment++
22/8/2011 external link
CODEfunction plusplus(){var i=0;if(i==0||i>0)} Y is it dat d var inside the func dont INCREMENT?
Hi,
22/8/2011 external link
Hi Gays, I'm using swich max 4 for create flash and I want showing my company products ,anyway...whats the code to active button for open such as html page I designed it, THANKX ALL
Hi,
22/8/2011 external link
Hi Gays, whats the code to active button for open such as html page I designed it, THANKX ALL
why does this function work in every browser except Firefox?
21/8/2011 external link
I wrote a function to place an item 400px above the bottom of the users screen. It works fine in every browser except Firefox and I have no idea why. Firebug doesn't show any errors either.jsCODE<script type="text/javascript"> function chng() { cont = screen.availHeight - 400 + "px"; document.getElementById("stuff").style.top = cont; }</script>htmlCODE<body onload="chng()"> <div id="stuff">this text is supposed to be placed 400px above the bottom of the users screen</div></body>cssCODE#stuff {width:100%;position: absolute;top: 50px;
any TIP keep in same place the same page
21/8/2011 external link
my dreamweaver template bought from "Template Monster" site is jquery,... I have implemented independently (of jQuery) ajax in newsletters enroll, so email come to me upon new newsletters registrations, and web page no move to other page, but the problem is that after submit page auto scrolled to TOP, rather stay in the same place, any TIP keep in same place the same page?
Open a New Window
21/8/2011 external link
when a user click on a link, it would open a new window in HTML it is something like this:CODE<a href="http://google.com" target="_blank">click here</a>How do I do this in Javascript? So a user would click on the link and it would open a new window. Here's my codeCODEdocument.writeln('<tr><td>' + "http://google.com" + '</td></tr>');I know window.open(url) would open a new window, but how do I make it clickable??Any comments or suggestion would be greatly appreciated. thanks
why is getElementById("blah") null?
21/8/2011 external link
Why do I keep getting the error 'document.getElementById("content") is null'htmlCODE<div id="content">old text</div>jsCODEdocument.getElementById("content").innerHTML = "new text";
Controlling HTML5 audio with Javascript
20/8/2011 external link
I'm trying to make something that starts playing a song at a predetermined offset. I've tried Googling numerous uses of Javascript's currentTime, none of which work in Firefox or Chromium. Does anyone know how to use it?Also, there is a second problem that using JavaScript over vanilla HTML5 created - the audio frequently stops within the first 30 seconds. This didn't happen when i used the <audio> tag.CODEfunction StartSong() {    var audioElement = document.createElement('audio');    audioElement.setAttribute('src', '/uploads/music/Song.ogg');    audioElement.load() // What does this do? Seems to be unnecessary.    //audioElement.currentTime=35;    audioElement.play();}
if (confusin)
20/8/2011 external link
Is it wright to do something like this:CODEdate=new Date();h=date.getHours();if(h==1){execute this}if(h==2){execute that} when is the wright place to use else if this stuff is kinda confusing!
Slowing down window.opener.location.reload()
20/8/2011 external link
I was using the following code to close my popup windowCODE<a href="java script:self.close()">Close window</a>and I wanted it to refresh the parent page when Close window was clicked.I found this example, which works but it automatically closes my popup rather than letting me click on Close window.Does anyone know how I can make this code only close and reload my parent page when I click the close link ?CODEwindow.close();if (window.opener && !window.opener.closed) Thanks guys
How to reset variables in animation and why a variable cannot be set to the actual height of an element?
20/8/2011 external link
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>function hCtrl(el){    var h = parseInt(document.getElementById(el).style.height);    if(h<100){timer1=setInterval("addHeight('"+el+"')",10); clearInterval(timer2);}    if(h>0){timer2=setInterval("cutHeight('"+el+"')",10); clearInterval(timer1);}    }function addHeight(el)    document.getElementById(el).style.display = "block";    document.getElementById(el).style.height = h+"px";    document.getElementById("status").innerHTML = "Content height: " + document.getElementById(el).style.height;        }function cutHeight(el)    document.getElementById(el).style.height = h+"px";    document.getElementById("status").innerHTML = "Content height: " + document.getElementById(el).style.height;    }</script><style>.menu {    background-color: #6F6;    width: 200px;    height: 50px;}.content {    display: none;    background-color: yellow;    width: 200px;    height:0px;    min-height: 0px;    max-height: 100px;    overflow: hidden;}</style></head><body><div id="menu1" onclick="hCtrl('content1');" class="menu">Menu 1</div><div id="content1" class="content">Content 1</div><div id="menu2" onclick="hCtrl('content2');" class="menu">Menu 2</div><div id="content2" class="content">Content 2</div><hr /><div id="status" style="width: 200px; background-color: #FC0"></div></body></html>Why I cannot set the variable h like this:CODEvar h = parseInt(document.getElementById(el).style.height);If I set the condition like this, it does not work as well:CODEh = 0;function hCtrl(el){    if(h<parseInt(document.getElementById(el).style.maxHeight)){timer1=setInterval("addHeight('"+el+"')",10); clearInterval(timer2);}    if(h>parseInt(document.getElementById(el).style.minHeight)){timer2=setInterval("cutHeight('"+el+"')",10); clearInterval(timer1);}    }The reason why I want to set variables according to the acutal height of the two contents is becauseif I set h = 0 and set h in the conditions likeCODEh = 0;function hCtrl(el){    if(h<100){timer1=setInterval("addHeight('"+el+"')",10); clearInterval(timer2);}    if(h>0){timer2=setInterval("cutHeight('"+el+"')",10); clearInterval(timer1);}    }The result will beWhile content 1 is toggled to the height of 100,toggle content 2 to the same heightcontent2 will not be toggledWhen you click content2 againit toggles to 100When you toggle up content1 to 0, it does the job.But when you toggle up content2 to 0, because h = 0 already, even the height of content2 is 100, it starts from 0 again and content2 is toggled down from 0 to 100.Is there a fix for that?
<body onload="getNewMessage();" NOT calling my JS?
19/8/2011 external link
here is my code:CODE<head>    <script language="JavaScript" type="text/JavaScript">        var url = "www-rainbowcode-net/index.php/messagebox/list";        function getXmlHttpRequestObject()        {            if (window.XMLHttpRequest)            {                alert("in gethttprequest");                return new XMLHttpRequest();            }             else if(window.ActiveXObject)            {                return new ActiveXObject("Microsoft.XMLHTTP");            }             else             {                //document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.';            }        }         function getNewMessage()        {            var receiveReq = getXmlHttpRequestObject();            alert("state is" + receiveReq.readyState);            if (receiveReq.readyState == 4 || receiveReq.readyState == 0)             {                        alert("state is" + receiveReq.readyState);                //var params = "name" + name + "&" + "comment=" + comment;                receiveReq.open("POST", url, true);                receiveReq.onreadystatechange = processReqChange();                receiveReq.send(null);            }        }        function processReqChange()        {            alert("processed" + receiveReq.responseText);            if (receiveReq.status == 200)             {                alert("processed" + receiveReq.responseText);               document.getElementById("message_area").innerHTML = receiveReq.responseText;            }             else             {                alert("There was a problem retrieving the XML data:\n" +                receiveReq.statusText);            }            setTimeout('getNewMessage();',2000);        }            </script></head>  <body onload="getNewMessage();">   //more code</body>none of the alerts are executing?? i dont understand..all i want is make sure everything executes as it should so that my page/part of my page(div part) can refresh so that the user can constatnly receive and be aware of new message that came inplease help?thanks
browser detection
19/8/2011 external link
I'm trying to write a script that will determine which browser the viewer is using in order to slightly change the CSS accordingly to make up for display differences in each browser.I had thought using the items from here would work. I was specifically hoping to use navigator.appName which I thought would tell me 'Firefox' or 'Safari' and then passing that value into a js function. However in all browsers I get the same values for all paramaters except for when I check through Opera.Why are they all the same?What is a different method to write a browser detection script?
Very, very confusing problem
19/8/2011 external link
I am in the middle of an extremely confusing problem. My script is acting very unnaturally. This is continued work on my Opera extension so keep that in mind as you analyze the code. Things like HTML5 local storage (the "prefs" object is my shorthand clone of the local storage object) and JSON parsing are supported, so it is highly unlikely that the problem is related to that. Here's my problem. The problem lies in the conditional statements near the end of my code. First, I put that "return false" statement at the very end to prevent the form from submitting. The first time I submit the form it works fine. I fill the field from which the "word" variable gets its value with something that will pass the "else if" condition. The first time, "blacklist includes" is logged like it is supposed to be. The second time you submit the form (remember, no page reload) the else{} code is executed. As you can see, I even logged a test with the else if() conditions, and it returned true! How in the world is it just ignoring that else if() condition???Here's the relevant part of my code (and more, probably):CODEfunction Whitelist() {                 this.words = JSON.parse(prefs.whitelist) // parse the comma separated words                                 Whitelist.prototype.remove = function(word) {                    this.words = this.words.deleteItem(word)                    widget.preferences.whitelist = JSON.stringify(this.words)        // assign the whitelist array to the whitelist local storage variable                    this.joined_whitelist = this.words.join(', ')                                 // update "whitelist" array                }                                Whitelist.prototype.add = function(word) {                    word = word.replace(/,/g, '')                                        for (i = 0; i < this.words.length; i++ ) {                        if ( this.words[i].toLowerCase() == word.toLowerCase() ) return // exit the function if the word being added is found in the whitelist                    }                    this.words.push(word)                                                             // add word to the whitelist array                    widget.preferences.whitelist = JSON.stringify(this.words)        // assign the whitelist array to the whitelist local storage variable                    this.joined_whitelist = this.words.join(', ')                                 // update "whitelist" array                }                                Whitelist.prototype.includes = function(word) {                    for (i = 0; i < this.words.length; i++ ) {                        if ( this.words[i].toLowerCase() == word.toLowerCase() ) return true // exit the function if the word being added is found in the whitelist                    }                                        return false                }            }                        /* blacklist object */                        function Blacklist() {                 this.words = JSON.parse(prefs.blacklist) // parse the comma separated words                                 this.remove = function(word) {                    this.words = this.words.deleteItem(word)                    widget.preferences.blacklist = JSON.stringify(this.words)        // assign the whitelist array to the whitelist local storage variable                    this.joined_blacklist = this.words.join(', ')                                 // update "whitelist" array                }                                this.add = function(word) {                    word = word.replace(/,/g, '')                                        for (i = 0; i < this.words.length; i++ ) {                        if ( this.words[i].toLowerCase() == word.toLowerCase() ) return // exit the function if the word being added is found in the whitelist                    }                    this.words.push(word)                                                             // add word to the whitelist array                    widget.preferences.blacklist = JSON.stringify(this.words)        // assign the whitelist array to the whitelist local storage variable                    this.joined_blacklist = this.words.join(', ')                                 // update "whitelist" array                }                                this.includes = function(word) {                    for (i = 0; i < this.words.length; i++ ) {                        if ( this.words[i].toLowerCase() == word.toLowerCase() ) return true // exit the function if the word being added is found in the whitelist                    }                                        return false                }            }search_form = $('#search_form') search_form.onsubmit = function() {                word = this.search.value.replace(/,/g, '') // remove commas from the value                                if (word == '') return false// this is the problematic code:                if ( whiteList.includes(word) ) { // check first if the word is in the whitelist                    console.log('whitelist includes')                } else if (window.dirtyList.test(word) || blackList.includes(word) ) { // check if the submitted word matches the word blacklist                    console.log('blacklist includes')                } else {                    console.log(window.dirtyList.test(word) || blackList.includes(word)) // returns true!!!                                        console.log('blacklist doesn\'t include')                          }                                return false            }
JS accordion
18/8/2011 external link
I'm making an JS accordion and I just miss the final step.That is - say:I click menu 1, content 1 slides down (shows up).After that, I click menu 2, content 2 slides down butcontent 1 of menu 1 just display: none (abruptly disappers) but not slides up.For the slide up effect, I wrote a function called cutHeight().The cutHeight function works perfectly independently but not coherent with the accordion function.Is there anything wrong with my scripts?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>function accordion(openAccordionID){        document.getElementById("content"+openAccordionID).style.display =     (document.getElementById("content"+openAccordionID).style.display == "none")     ? "block" : "none";        var sumAccordion;    if(document.all){        sumAccordion = document.body.getElementsByTagName("div").length/2;                }    else {sumAccordion = document.getElementsByClassName("content").length;}        for(var closeAccordionID=1; closeAccordionID<=sumAccordion; closeAccordionID++){        if(closeAccordionID == openAccordionID)        document.getElementById("content"+closeAccordionID).style.display = "none";        }    addHeight(openAccordionID);    cutHeight(closeAccordionID);        }    var h=0;    var t;    function addHeight(openAccordionID){        clearInterval(t);        document.getElementById("content"+openAccordionID).style.height = h+"px";        h+=1;        t = setInterval("addHeight('"+openAccordionID+"')",10);        if(h==100)            }        var H=100;    var T;    function cutHeight(closeAccordionID){        clearInterval(T);        document.getElementById("content"+closeAccordionID).style.height = H+"px";        H-=1;        T = setInterval("cutHeight('"+closeAccordionID+"')",10);        if(H==0)            }</script><style>.menu {    background-color: #6F6;    width: 200px;    height: 50px;}.content {    display: none;    background-color: yellow;    width: 200px;    height:0px;    overflow: hidden;}</style></head><body><div onclick="accordion(1)" class="menu">Menu 1</div><div id="content1" class="content">Content 1</div><div onclick="accordion(2)" class="menu">Menu 2</div><div id="content2" class="content">Content 2</div><div onclick="accordion(3)" class="menu">Menu 3</div><div id="content3" class="content">Content 3</div></body></html>
How is this made JavaScript?
18/8/2011 external link
HelloIn this Bulgarian site ( http://www.yellow.bg/gossip/n336603/ ) in the text of the article is JavaScript that adds random letters into words and thus protected from plagiarism when you copy and paste into another site. How is this made JavaScript?(I learned about it when using JavaScript turned the option on browser)
nextSibling in Firefox
18/8/2011 external link
CODE<script>window.onload = function(){    if(document.getElementById("menu").nextSibling.nodeType !=1){        document.getElementById("menu").nextSibling = document.getElementById("menu").nextSibling.nextSibling;        }    document.getElementById("menu").onclick = change;    }function change(){    document.getElementById("menu").nextSibling.style.backgroundColor = "#FC0";    }</script>My question is:Why I must use variables (see below) to replace document.getElementById("menu").nextSibling?Can't I do things like above?When I do things like above, FF console reports "document.getElementById("menu").nextSibling.style" is undefined and IE8 cannot work it out (Error page).CODE<script>window.onload = function(){    e = document.getElementById("menu").nextSibling;    if(e.nodeType !=1){        e = e.nextSibling;        }    document.getElementById("menu").onclick = change;    }function change(){    e.style.backgroundColor = "#FC0";    }</script>CODE<div id="menu" style="width: 300px; background-color: yellow">Menu<div>SubMenu</div></div><div style="width: 300px; background-color: #6FF">Content</div>
Uploading progress gif
17/8/2011 external link
Hey all,I am having difficulties figuring out how to create a script that will load and run my 'upload gif' ONLY when a file is being uploaded... I have a script that will run a certain gif when the page is loading, you know like a loading your profile please wait and it kills after all elements of the page have loaded... But what I need assistance on, is making a script that will trigger the GIF in a DIV only during an upload...Any pointers or guides would be great. I am pretty new to javascript, if anyone can think of a way to do this in PHP I am comfortable with that. Thanks.
passing parameters with this
17/8/2011 external link
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>JS: setInterval & clearInterval within a function itself</title><script>function a(){    document.getElementById("menu1").onclick = function()        if(h==300)        }    }h = 22;function addHeight(e)    document.getElementById(e).style.height = h+"px";    }function cutHeight(e)    document.getElementById(e).style.height = h+"px";    }window.onload = function();</script></head><body><div id="menu1" style="width:200px; height:22px; background-color: #0FF; overflow: hidden;">Menu 1<div id="content1">Content of Menu 1Content of Menu 1Content of Menu 1Content of Menu 1Content of Menu 1Content of Menu 1Content of Menu 1</div></div></body></html>Is the use of "this" to refer to the element id wrong?I can tell why but just don't know how to fix it.I have tried the one below which works but I just wonder if I have got wrong with the use of "this"Always puzzled by "this"CODE<script>function a(e){    document.getElementById(e).onclick = function()        if(h==300)        }    }h = 22;function addHeight(e)    document.getElementById(e).style.height = h+"px";    }function cutHeight(e)    document.getElementById(e).style.height = h+"px";    }</script>
JS variable in CSS?
17/8/2011 external link
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>JS: setInterval & clearInterval within a function itself</title></head><body><div id="div3" onclick="addHeight(this.id);" style="width:50px; height:100px; background-color: red;"></div><script>var h;document.getElementById("div3").style.height = h+"px";var timer;function addHeight(e){    clearInterval(timer);    document.getElementById(e).style.height = h+"px";    h+=1;    timer = setInterval("addHeight('"+e+"')",1);    if(h==300);    }    </script></body></html>I want to in the JS script use variable h to represent the inline CSS height of the div in HTML.Is it allowed in JS?Because I don't want to specify a height value in inline CSS and repeat the process in JS by writingCODEh = 100because the height value is the same.
Document
17/8/2011 external link
If i wish to walk through the document node tree, how can this be done? HTML:CODE<body><p>some text</p></body>JS:CODEdocument.firstChild.firstChild.innerHTML="i have changed the p element text!"; why is the above code not working?
className & +=
17/8/2011 external link
I wanna ask why CODEclicker.className+=" "+ccn;instead ofCODEclicker.className = ccn;What does it mean byCODEclicker.className = clicker.className + " " + ccn;Why should it be like this?CODE<script>function toggleNext(el)     {     var next = el.nextSibling;     while(next.nodeType != 1)     next = next.nextSibling;     next.style.display = (next.style.display=="none") ? "block" : "none";    }    function toggleNextById(el) {     var ccn = "clicker";     var clicker = document.getElementById(el);     clicker.className+=" "+ccn;     clicker.onclick = function()      toggleNext(clicker);    }window.onload=function() </script>CODE.clicker CODE<p id="salutation">hi</p><p>there</p>The code is from JS toggle
className & +=
17/8/2011 external link
I wanna ask why CODEclicker.className+=" "+ccn;instead ofCODEclicker.className = ccn;What does it mean byCODEclicker.className = clicker.className + " " + ccn;Why should it be like this?CODE<script>function toggleNext(el)     {     var next = el.nextSibling;     while(next.nodeType != 1)     next = next.nextSibling;     next.style.display = (next.style.display=="none") ? "block" : "none";    }    function toggleNextById(el) {     var ccn = "clicker";     var clicker = document.getElementById(el);     clicker.className+=" "+ccn;     clicker.onclick = function()      toggleNext(clicker);    }window.onload=function() </script>CODE.clicker CODE<p id="salutation">hi</p><p>there</p>
Issues with hiding elements
16/8/2011 external link
CODEfunction HideMenu When run it doesn't hide the element and the divider I am using had the id of Menu. I don't understand what's wrong. TIA.
Cookies question
16/8/2011 external link
I was looking at some cookies from sites I've visited and I've noticed that much of the name=value(content) pairs are what appear to be encrypted or encoded in some way. Is this done intentionally or a way the browser/server handles certain cookies?
Adding onclick event stops phone number loading on mobile
16/8/2011 external link
HeyI have a mobile version of my website and on one page I display a telephone number. When people click this number on their mobile phone device, it loads the number into the "make call" application. Pretty simple thing built into most mobile devices.I thought of adding an onclick event to the number to track this in google analytics - but when ever I try either onclick, or a jquery bind/click, it does track, but the number doesn't load in the call application on mobiles any more.It's like the javascript is overriding the default event - which is obviously no good!I've tried things like return TrackFunction() and tried return false and true but to no availCan anyone suggest something else to try to stop the 2 things from conflicting?Cheers
HTML Content slideshow with music
16/8/2011 external link
Hello friends,Looking for a kind of jquery cycle plugin with additional features1] instead of image i have to use HTML Content2] at the time only 1 HTML page will be shown3] play/pause button, previous, next, fullscreen, audio on/off 4] i have to apply different audio on each page5] At bottom we have slider with [3] buttons when drag slider from start to in between it need to move that page.suppose i'm on 1st page now i dragged & it lands too 15 then display 15 pageExample :- http://www.gucci.com/us/category/f/women_s...y_to_wear#coatsbelow is the nearest example i foundhttp://codecanyon.net/item/jquery-image-ga..._preview/276301.Need to use simple HTML & Javascript (Jquery if possible)Please give your inputs in this.Thanks in advance
Function within a function or combining functions
16/8/2011 external link
I'm trying to develop a page for a non-profit group. I found a nice animated jQuery theme and a jQuery navigation snippet that I like. The basic animated theme is perfect for the theatre group I'm trying to help out but I'd like to tweak it a bit. I have a development site set up for the project at: Dev Site The stage and curtains theme is from BuildInternet. Their code and demo is here: Build Interner Animated Curtains The nav theme is from Soh Tanaka at Nav ThemeI'm trying to combine the animated curtain function with the navigation function so that when an item is selected from the navigation menu, the curtains close, and then re-open to the selected nav item/page. So far, I've struck out ... badly. If you looked at the demo from BuildInternet's curtain them, Ive removed the 'rope' because, while nice, I don't think it is particularly useful in the site schema that I'm trying to deliver. I've applied the rope 'click' function to the page logo, but I'll be removing that and replacing it with strictly content on a canvas of some sort. I'm not as advanced as I'd like to be with jQuery. I'm looking for any help, advice, direction, encouragement etc. that can help me achieve a nice curtain close - curtain open effect when selecting an item from the nav menu. I'm a little worried that the unordered list that populates the nav menus complicates my goal so I'm willing to replace it with another nav structure. Anyway, the following code represents:1. The curtain open/close. (Currently set to open on page load via $(".logo").trigger('click');//Auto open curtains2. The navigation function3. The unordered list that the nav function pulls from CODE<script type="text/javascript">    //Opening sequence: open curtains        $(document).ready(function() {                    $curtainopen = false;                                $(".logo").click(function(){                $(this).blur();//remove focus                if ($curtainopen == false){                     $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});//Bounce Image                    $(".leftcurtain").stop().animate(, 4000 );//Open left curtain                    $(".rightcurtain").stop().animate(,4000 );//Open right curtain            $curtainopen = true;                }else{                    $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});//Bounce Image                     $(".leftcurtain").stop().animate(, 3000 );//Close left curtain                    $(".rightcurtain").stop().animate(, 3000 );//Close right curtain                    $curtainopen = false;                }                return false;            });            $(".logo").trigger('click');//Auto open curtains                    });        </script> Code for the navigation is: CODE<script type="text/javascript">//Navigation TopNav FXN                        $(document).ready(function() {                                    $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag                                    $("#topnav li").each(function() { //For each list item...                        var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag                        $(this).find("span").show().html(linkText); //Add the text in the <span> tag                    });                                     $("#topnav li").hover(function() {    //On hover...                        $(this).find("span").stop().animate({                            marginTop: "-40" //Find the <span> tag and move it up 40 pixels                        }, 250);                    } , function() { //On hover out...                        $(this).find("span").stop().animate({                            marginTop: "0"  //Move the <span> back to its original state (0px)                        }, 250);                    });                                });    </script> The unordered list that the navigation pulls from is: CODE<body><div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div>    <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div>    <a class="logo" href="#"><img src="images/PTP_Logo.png"/></a>    <div>            <ul class="navtextleft" id="topnav">        <li><a href="index.html">Home</a></li>        <li><a href="productions.html">Productions</a></li>        <li><a href="#">Auditions</a></li>        <li><a href="#">Volunteer</a></li>        <li><a href="#">Sponsors</a></li>        <li><a href="#">  Tickets</a></li>        </ul>    </div>        <div>        <ul class="navtextleft" id="bottomnav">        <li><a href="#">Video</a></li>        <li><a href="#"> Past Plays </a></li>        <li><a href="#"> Executive</a></li>        <li><a href="#">    About</a></li>        <li><a href="#">  &nbspThank You</a></li>        <li><a href="#">Contact</a></li>        </ul>    </div>Thanks for any and all help. Note: I will be cleaning up the visuals on the navigation code.
Array Index help
16/8/2011 external link
I'd like to create an idea generator that pulls from different lists. It looked like using an array index would be the best option. I ran the jslint and it said the code was valid, but I just don't get why it's not outputting anything. Any suggestions would greatly be appreciated. CODE<html> <form action="java script:" id="generator" name="generator"> <input type="button" value="click" onClick="generate();"> <br><br> &lt!--<p id="idea" ></p> --> <input id='idea' name="idea"> </form> </html>CODEfunction generate(e) { var keywords = [ "keyword A", "keyword B", "keyword C", "keyword D", "keyword E", "keyword F", "keyword G" ]; var keyword = keywords(math.floor(math.random() * keywords.length)); document.getElementById("idea").onClick = keyword;}document.getElementById("idea").onClick = generate;document.getElementById("generator").onClick = generate;I've also got it sitting at JSFiddle if that helps: http://jsfiddle.net/ntmw/yG8ya/4/
Can someone PLEASE point me in the right direction?
16/8/2011 external link
I have NO idea what I'm doing wrong here. This is only a portion of the whole code, but I have no idea if any of it is working. I figured I'd start at the top...The function is not supposed to have a parameter for it, the loop is supposed to update the historyText text and then write it to a form box (bidList).I just need to know what is wrong and an idea of how to fix it - I don't want the code fixed for me...CODEfunction writeBid(); { var historyText = ""; //variable text string for (bidTime=0;i < bids; bidders++) \n { document.bidForm.bidList.value = historyText(); //write the value of history text to text box bidList document.bidForm.highBid.value = highBid(); //write value of the first item in the bids array to the highBid field document.bidForm.bidList.value = null; //set the value of bidList to empty text string document.bidForm.highBid.value = null; //set the value of bidAmount to empty text string } }
Need help with javascript code generator
15/8/2011 external link
Hi, i am trying to create a script generator where you enter your gamertag and when you hit enter it displays an html code in the box below. I want the html code that is generated to include an href= and an img src with the name you entered at the end of each. (ie.<a href="http://us.playstation.com/playstation/psn/visit/profiles/NAME"><img src="http://fp.profiles.us.playstation.com/playstation/psn/pid/NAME.png" width="230" height="155" border="0" /></a>) What i want to do is when you enter your gamertag in the above box and hit enter, it gets put into the code above where it says NAMEThis is what i have come up with, however when you enter your name, it only enters your name in the first part of the HTML code.<p>This gamercard is directly linked to Playstation.com meaning it is instantly updated with your latest achievements. To get the HTML code for your own PSN ID Card, simply enter your PSN ID in the box below:<script type="text/javascript">function UpdateGcardCode() {var code1 = '<a href="http://us.playstation.com/playstation/psn/visit/profiles/';var code2 = '"><img src="http://fp.profiles.us.playstation.com/playstation/psn/pid/';var code3 = '.png" width="230" height="155" border="0" /></a>';document.getElementById("gcardcode").value=code1+document.getElementById("gtagname").value + code2 + code3;}</script><br /><input type="text" id="gtagname" onChange="UpdateGcardCode()"/><br/>Copy and paste the HTML code from the box below into your Profile or Signature:<br /><textarea id="gcardcode" cols="50" rows="4" onfocus="this.select();">Please enter your PSN ID (nickname) in the box above, and then hit enter to generate your code.</textarea><br />As you can see with this script, the name you enter in the above box only gets placed in code1 of the script. I would like the name you type to be entered into both code1 and code2 when you hit enter to generate the html code. PLEASE HELP!
javascript browser problem(trouble,please ignore this thread!)
15/8/2011 external link
Hello everyone, yesterday I got a trouble when I post my posting, till cause "multiple post"please don't reply this thread or ignore it!Thank you and once again I'm sorry
javascript browser problem
15/8/2011 external link
Hello everyone,I think my question are silly audible, but this very important for me,In all major browser such like firefox ,chrome and etc , we can found "block javascript" or "javascript not allowed" menu,if user turn off javascript, of course the javascript cannot run, and of course everything that using javascript will turn off automatically,so what I must do if my website using javascript so much? is there a javascript replacement that can't be blocked by browser??please help meThank you
Creating A Converter (GIF IMAGE bo BASE64)
15/8/2011 external link
Hi All, I'm a newbie programmer and I want to create a form that accepts an image (<input type = "file" name = "img1"/>) file and pass it on to another file written into base64 format. I'm having problem figuring it out because there are a lot of online encoders but they somehow manage to hide their "codes" or encrypt it. I wrote down a code which converts a string into base64. And in that case, I should convert an image to a string but don't know how. PLEASE HELP ME.This is the code I was talking about: var keyStr = "ABCDEFGHIJKLMNOP" + "QRSTUVWXYZabcdef" + "ghijklmnopqrstuv" + "wxyz0123456789+/" + "="; function encode64(input) { input = escape(input); var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; do { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4); chr1 = chr2 = chr3 = ""; enc1 = enc2 = enc3 = enc4 = ""; } while (i < input.length); return output; } function encode642(input) { input = escape(input); var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; do { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4); chr1 = chr2 = chr3 = ""; enc1 = enc2 = enc3 = enc4 = ""; } while (i < input.length); return output; }
Undefined target in prior versions of IE
14/8/2011 external link
I have the following code.CODE<!DOCTYPE html><html>    <body>        <p id="clickme">Click me!</p>        <div id="new"></div>        <script type="text/javascript">        document.onclick = function(event) {            target = event.target || event.srcElement;                        if (target.id == 'clickme') {                paragraph = document.createElement('p');                content = document.createTextNode('This is a test...');                                paragraph.appendChild(content);                document.getElementById('new').appendChild(paragraph);            }        }        </script>    </body></html>When the paragraph id="clickme" is clicked a child paragraph should be appended to id="new". This works in all browsers except for prior versions of IE than 9. I do not know which prior versions it is since I am using the compability mode in IE9 to test. Using Firebug Lite for IE I receive this error when id="clickme" is clicked:"Unable to get value of the property 'target': object is null or undefined"I don't know how to fix this error and why it occurs. Please help me.
javascript cookie
14/8/2011 external link
I'm trying to implement javascript cookies here..CODE<script type="text/javascript">function setCookie(KNwidget,fbfans,1);if (function getCookie(KNwidget))  else  );  }</script>what's the problem with this code?? can u help me fix this please?
Add option to html select dropdown
14/8/2011 external link
HI GuysHow are you???my problem in brief that I have select (drop down) box and I want to add a new option using Jquery and let this new option the first option,I do the following $('#edit-display-section').prepend('<option selected = "selected" value="0">MYTEXT</option>');this works fine with Firefox and Google Chrome but in IE not working, what happened that the new option added to first of the select box but IE will show you the previous option.So any help for that??Best Wishes
html dom events dont always work
14/8/2011 external link
I am using ie9, firefox 5, and chrome to test a page.the onkeyup event is supported by all 3 browsers but it hardly ever works.I am using it with jquery.autocomplete to pull from my database what the user might be trying to type in.CODE<html><head><script src="lib/js/jquery-latest.js"></script><link rel="stylesheet" href="lib/css/main.css" type="text/css" /><link rel="stylesheet" href="lib/css/jquery.autocomplete.css" type="text/css" /><script type="text/javascript" src="lib/js/jquery.bgiframe.min.js"></script><script type="text/javascript" src="lib/js/jquery.autocomplete.js"></script>  <script type="text/javascript">     function lookup(inputString, field){          if(inputString.length > 0) {               var url2load = 'lib/rpc.php?queryString=null&field='+field;               $.get(url2load, function(data){                    //alert(data);                    var results = data.split('~!~');                    $("#inputString"+field+"").autocomplete(results);               });          }     }</script></head><body>     <div>          Event: <input id="inputStringevent" onkeydown="lookup(this.value'event');" />     </div></body></html>this code in order to load the autocomplete i have to type atleast 1 letter and click on the textbox like 4-5 times before the suggestion(s) show up.is there something wrong with my application of the code that is causing this?
Var name;
13/8/2011 external link
CODEvar name; i have seen varibles without value, but i just dont knw why its like that! I was told about it sometime ago, but i still dont understand it. CODEvar car; document.write(car)//prints: undefined. is it that they want UNDEFINED as the value or what? can somebody be kind enough to help me with this?
Javascript Changing CSS
13/8/2011 external link
HTML Element:CODE<span class="button" id="firstTitleButton" /></span>CSS Applied to it:CODE.button:hover {    background: url(images/arrowButtonHover.png) no-repeat !important;}.button:active {    background: url(images/arrowButtonActive.png) no-repeat !important;}Jacascript:CODE$("span#firstTitleButton").click(function(){    document.getElementById("firstTitleButton").style.backgroundImage = "url(images/arrowButtonActive.png)";    $("p#mandelbrotPanel").slideToggle("slow", function(){        if($("p#mandelbrotPanel").is(":hidden")){            document.getElementById("firstTitleButton").style.backgroundImage = "url(images/arrowButton.png)";        };    });  });What this is doing is when you hover over the span, it changes the background image to one thing, when you click it it changes to another. Then javascript says now that this element has .slideToggle, the background image will have the 'active' look but when it is :hidden it will go back to normal. Problem with just doing that is, even after I close the 'panel' by clicking on it again is the :hover effect stops working.That's when I did some research and someone told someone to try !important so I did. Indeed it works, however, unfortunately it also works when the panel is open and I do not want there to be a :hover effect. This also causes the :active effect to work but I suppose that wont make any difference as long as the :hover doesn't work.Basically what I need to know is how to make the :hover and :active still work once I close the panels but not while they are open.
why is hover disabled?
13/8/2011 external link
if i have this HTML:CODE<a href="java script:AJAXrequest1" onclick="set_active(this), navoff(this)" class="link" id="link1">link1</a><a href="java script:AJAXrequest2" onclick="set_active(this), navoff(this)" class="link" id="link2">link2</a><a href="java script:AJAXrequest3" onclick="set_active(this), navoff(this)" class="link" id="link3">link3</a>this CSS:CODE.link { text-decoration:none; font-family:helvetica; font-size:14pt; color:#ffffff; letter-spacing:2px; -moz-transition: color 0.6s linear; -webkit-transition: color 0.6s linear; text-shadow:1px -1px 0px #000000;}.link:hover { color:#AAAAAA;}and this JS function:CODE<script type="text/javascript">active_item = false;function set_active(element) { if (active_item) active_item.style.color = '#ffffff'; element.style.color = '#707070'; active_item = element;}</script><script type="text/javascript">function navoff(element) { if (active_item != element) { element.style.color="#ffffff"; }}</script>why does the '.link:hover' stop working after a link has been selected?page loads: everything works fine.select link1: everything works fine.select link2: link1 hover no longer worksselect link3: both link1 and link2 hover no longer worksetc...
Time from X
13/8/2011 external link
Was looking through the JS date/time functions and could not find it.How would I display how long it's been in days since a certain time?
changing the URL without a page refresh
12/8/2011 external link
im sure some of you have seen on facebook, that when you go through photos, it changes the URL, but no page refresh is being made. anyone have an idea as to how you do that?
element.onclick="func()"
12/8/2011 external link
Why is it that each time i try to assign onclick attribute to an element through js, it will'nt work? E.g:CODEelement.onclick="func()" why is it that the above code ll not assign the attribute to the element? I have tried it several times, but still cant get it.
Javascript slide effect
12/8/2011 external link
Hi All,I am quite new to javascript so I was wondering if you could help me out. I have a page that you can see here http://www.gp-surveyors.com/index.php that I am building for a client. The element in question is the animation you can see at the top of the page, here is the code for that animation; <script type="text/javascript"> function slideLeft(block){ $(block).animate({ width: "600px", opacity: 1.0 }, 700 ); } </script>This currently works great no errors at all but as you can see once you have hovered over the togglers at the side of the animation once you cant hover over them again, I need to set the zIndex of the element in question within the above function, I have looked at a lot of code and I thought the below would work; <script type="text/javascript"> function slideLeft(block){ document.getElementById(block).style.zIndex ="5"; $(block).animate({ width: "600px", opacity: 1.0 }, 700 ); } </script>Can anybody tell me where I am going wrong?Thanks. Luke
confused?
12/8/2011 external link
AM very confused by this example. Ill make posts beside teh lines i dont get. i left in teh authors comments jsut to be clear those arent mine.function graphicBox(box) { // be unobtrusive if (!document.getElementById) return; - i get this // find the object and its parent obj = document.getElementById(box); - i get this-box is teh checkbox2 object and it is finding its dom id to set to obj parentobj = obj.parentNode; - i dont get this. parentNode would be what?- the form tag? // hide the regular checkbox obj.style.visibility = "hidden"; -i get this- is setting the checkbox from html to invisible.right? // create the image element and set its onclick event img = document.createElement("IMG"); - i dont get the rest as this is when i get totally lost. img.onclick = Toggle; img.src = "unchecked.gif"; // save the checkbox id within the image ID img.id = "img" + box; // display the graphic checkbox parentobj.insertBefore(img,obj);}function Toggle(e) { if (!e) var e=window.event; // find the image ID img = (e.target) ? e.target : e.srcElement; // find the checkbox by removing "img" from the image ID checkid = img.id.substring(3); checkbox = document.getElementById(checkid); // "click" the checkbox checkbox.click(); // display the right image for the clicked or unclicked state if (checkbox.checked) file = "checked.gif"; else file="unchecked.gif"; img.src=file;}//replace the second checkbox with a graphicgraphicBox("check2");<html><head><title>Graphic Checkboxes</title></head><body><h1>Graphic Checkbox Example</h1><form name="form1"><p><input type = "checkbox" name="check1" id="check1">An ordinary checkbox.</p><p><input type = "checkbox" name="check2" id="check2">A graphic checkbox, created with unobtrusive JavaScript.</p></form><script language="JavaScript" type="text/javascript" src="checkbox.js"></script></body></html>
what topics not to study in js
12/8/2011 external link
Am new to javascript and the book i am studying now is 7 years old. There are certain topics i guess that owuld be a waste to study adn learn. LIke grames it seems is a waste. ill write some down which i think are a waste.1. working with style sheets- a waste cause css does all this2.using windows and frames- seems like a wastejsut 2 it seems to me so far that would be a waste to learn. If any others please let me knowthanks
what topics not to study in js
12/8/2011 external link
Am new to javascript and the book i am studying now is 7 years old. There are certain topics i guess that owuld be a waste to study adn learn. LIke grames it seems is a waste. ill write some down which i think are a waste.1. working with style sheets- a waste cause css does all this2.using windows and frames- seems like a wastejsut 2 it seems to me so far that would be a waste to learn. If any others please let me knowthanks
Help!
11/8/2011 external link
i understand some js codes, but each time i look into someone else's code, am always confuse. Any advise for me? Thanks in advance!
e definition and the how and why's of it
11/8/2011 external link
Am trying to find a good explanation of the e. AM guessing it is similar ot that of c sharp. THe forum wont let me do searches for udner 3 letters so am asking if anyone knows where a good explanation of it is. Searched google and got poor results back from it. btw am not looking for the math.e defientiion. Am looking for a definition when it is used liek below. function DisplayKey(e) { // which key was pressed? if (e.keyCode) keycode=e.keyCode; else keycode=e.which; character=String.fromCharCode(keycode); // find the object for the destination paragraph k = document.getElementById("keys"); // add the character to the paragraph k.innerHTML += character; }
what do i do?
11/8/2011 external link
this is code from my book i am studying.i am trying to figure out how it will just ask for ten names and no more then go directly to writing these names.Is probably an easy solution but i just don't see it.// create the arraynames = new Array();i = 0;// loop and prompt for namesdo { j = 0; next = window.prompt("Enter the Next Name", ""); if (next > " ") names[i] = next; j++; i = i + 1; } while (next > " ");document.write("<h2>" + (names.length) + " names entered.</h2>");// display all of the namesnames.sort();document.write("<ol>");for (i in names) { document.write("<li>" + names[i] + "<br>");}document.write("</ol>");
String passing php to html and back
11/8/2011 external link
I am trying to build a function in the server to display on a browser which will allow the user to click on a checkbox and return values to the server. when I try using this code CODE $p = "PickSignal('')"; $s .= "<td><input type='checkbox' onclick='".$p."'></td>"; I get a syntax error in firebug. Using firebug to look at the page I see this CODE<table class="action" cellpadding="5"><tbody><tr><tr><td><input type="checkbox" ')'="" onclick="PickSignal("></td> What am I missing?
method();
11/8/2011 external link
Its it possible to call a function without the brackets?e.g:CODEvar call=method; i have seen script like that, but i dont knw why!
help with prototype
11/8/2011 external link
I have some questions about the code below. Only the js part.String.prototype.heading = addhead; What does this do exactly. Now i ahve an additional property for teh string object addhead. IS this right . IF so then how does this work with the fucntion addhead. I am pretty lost on how the different headings com eup with different tags. Is the addhead function being added to waht i may call heading as teh event handler. SO now any string object has .heading and addhead is the fucntion to execute when heading is called. IS this right?<html><head><title>Test of heading method</title></head><body><script language="JavaScript" type="text/javascript">function addhead (level) { html = "H" + level; text = this.toString(); start = "<" + html + ">"; stop = "</" + html + ">"; return start + text + stop;}String.prototype.heading = addhead;document.write ("This is a heading 1".heading(1));document.write ("This is a heading 2".heading(2));document.write ("This is a heading 3".heading(3));</script></body></html>
html form passes variable to javascript
11/8/2011 external link
I am not very good with javascript. I have read through a few tutorials and I understand some elements of javascript but I admit I am a novice at best. I apologize if what I am trying to accomplish is not clearI am using an html web form to email data. Once the data is entered into the form a submit button opens up the default mail client on the device and the email contains all the pertinent data from the web form. The problem is that I can't format the data before it's loaded into the mail client and so I get things that look like "textfield1=data entered" I'd like that to look more like "textfield1: data entered" I know its a minor change but it's what would make the difference. I'd also like to require data entries into some fields. I'd also like to generate a time stamp int he email when it is generated.What I'd like to do is utilize javascript for this. I've heard that it can be done and I am able to find snippets of data from some of this stuff. I can't use any kind of server side scripting, not that I know any more about that, and javascript just seems to be the best solution.I may be mistaken but it I think I don't understand the method by which you'd call a document. so there should be something like formvariable.document(some javascript goes here I think) and then an on submit button at the end. I may be mistaken. Does this make any sense? Can someone point me to a tutorial with something like this as the content to perhaps provide a snippet of code that I could look at and maybe recycle?I'd appreciate any help you can provide. I'm attaching a sample form that describes what I have on the html front.CODE<html><head><title>Sample Form</title></head><body><form action="MAILTO:aguy@someplace.com, another_guy@somewhereelse.net?subject=Daily weather report" method="post" enctype="text/plain" subject="Daily weather report"><select name="location"> <option value="error">select a store</option> <option value="store1">North Pole</option> <option value="store_2">bahamas</option></select><br /><br />Weather Conditions: <br /><input type="text" name="weather" size="100"/><br /><br />Comments or Notes:<br /><textarea rows="10" cols="30">Add comments or perish!!!!! A lack of comments shows that you were too lazy to make notes about your day</textarea><input type="submit" value="Send"><input type="reset" value="Reset"></form></body></html>
javascript parameters passing
10/8/2011 external link
CODE    function slideCtrl(ctrl){                if(ctrl==2){                autoImage();                ctrl = -2;                dirn = -1;                }                    else if(ctrl==-2){                clearInterval(fadeTimer);                clearTimeout(showTimer);                ctrl = 2;                }        }CODE<a id="autoImage" onclick="slideCtrl(2)" href="#" title="Play / Pause">AUTO</a>Function slideCtrl is the switch control of an auto-play image slideshow. Tested. The autoImage function works well.But I wonder if I can use the anchor link as a button to either switch on or off the slideshow.I set 2 as on, -2 as off.Is there any workaround for the parameter in the inline javascript in the anchor link to work binary?
Alert On First Visit (solved!)
10/8/2011 external link
Hi,I have created an alert which tells people information when the page loads. However, I don't want it to load post-first visit as alerts can get annoying!Here is my code so far (its in the body):CODE<script language="Javascript">setTimeout("alert('Some passcode protected documents may not show on mobile devices such as the iPad. If your document does not load, you should ask for a file attachment instead.')",2500)</script>Here is the page:meljones.info/downloads.htmlI was hoping there was a solution. Is cookies an option? I'm new to JavaScript...Also, I have no access to the HEAD of my page...Dan
clearTimeout & crossfading
10/8/2011 external link
CODE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>JS: Image Slider</title><script type="text/javascript">        var img = [];    img[img.length] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png"};                           img[img.length] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png"};                           img[img.length] = {src: "http://www.techlifeweb.com/facebook_logo.jpg"};                           img[img.length] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg"};                           img[img.length] = {src: "http://scm-l3.technorati.com/10/05/10/12671/twitter-logo-5.jpg"};    img[img.length] = {src: "http://www.easyquestion.net/learninginadigitalworld/wp-content/uploads/2009/06/ms-office-logo.jpg"};        for (var imgs=[], i=0; i<img.length; i++){    imgs[i] = new Image();    imgs[i].src = img[i].src;        }            var curPic = 0;var fadeTimer;var speed = 50;var opacStep = 0.5;var dirn = -1;var curOpac = 10;var ctrl;function autoImage()            fadeTimer = setInterval(setOpacity,speed);                function setOpacity() {                curOpac += opacStep * dirn;                            if (curOpac < 0){                    swapImage();                    curOpac = 0;                    dirn = 1;                    autoImage();                    return;                        }                               if (curOpac > 10){                    curOpac = 10;                    clearInterval(fadeTimer);                    dirn = -1;                    showTimer = setTimeout(autoImage,1000);                    return;                        }                            if (imgSlider.style.opacity=="string"){                    imgSlider.style.opacity = curOpac/10;                        }                else {                    imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';                    imgSlider.style.MozOpacity = curOpac/10;                        }                }                                                function swapImage(){                curPic = (++curPic > img.length-1) ? 0 : curPic;                imgSlider.src = img[curPic].src;                    }                                    }window.onload = function(){    imgSlider = document.getElementById('imgSlides');    imgSlider.src = img[curPic].src;        ctrl = 2;        document.getElementById("autoImage").onclick = function(){                        if(ctrl==2){            autoImage();            ctrl = -2;            }                else if(ctrl==-2){            clearInterval(fadeTimer);            clearTimeout(showTimer);            ctrl = 2;                }                            };        }</script></head><body><img id="imgSlides" src="" style="width: 500px; height: 500px;" alt="" /><br /><a id="autoImage" href="#" title="Play / Pause">AUTO</a></body></html>To enable the image slider to be on or off with a click on the same button (AUTO), I use the variable ctrl to control the switch.It works well when the image is fading in or fading out when I press the AUTO button (that means it is on or off as expected);But the problem exists whenI press AUTO when the image is neither fading in nor out (the image's opacity reach full and setTimeout starts keeping the image on the slider for 1 second) [variable showTimer];on that occassion, it does not stop itself. To fix it, I put clearTimeout in the else if statement.But other problem exists:That is when the image is fading in, I press AUTO to stop it and as soon as I press AUTO to resume it,the image skips the setTimeout and starts fading out.How could I avoid it skipping the setTimeout?I hope I'm expressing it clearly. Please test it in the console and you may see what I mean.
rolling multiple dice
9/8/2011 external link
Im practicing js by writing a function that will first ask the user how many dice they would like to roll and then outputs the values of each dice in an alert box. If the user enters "3" into the prompt, the function will return something like "5, 2, 6".I Have everything working except I can't figure out how to generate a number 1-6 x amount of times without writing excessively long static code.This code outputs one number x amount of times each in a different alert box, but how do i get x amount of dice rolls to show up in one alert box?CODE<script type="text/javascript"> function showdice() { var dicenum = prompt("how many dice would you like to roll?"); var diceint = Math.round(dicenum); var diceroll = Math.ceil(Math.random() * 6); if (diceint >= "7") { alert("we don't have that many dice"); } else if (diceint <= "0") { alert("you need to roll at least one die"); } else for (i = 1; i <= diceint; i++) { alert(diceroll); } }</script>
switch statement
8/8/2011 external link
Hi i'm new at this and i was trying something out but can't understand why its not working. I'm trying to create a prompt where the user enters a number. If the number is "10" then it is correct. If the answer is higher then "10" should say "too high". If answer is lower than "10" should say "too low". below is the code that I have written. var enT= prompt("enter a number");var numB= "10";var boTH=enT == numB;switch(boTH){case 1: document.write("number is too high"); break;case 2: document.write("correct"); break;default: document.write("number is too low");}
JS: image slides
8/8/2011 external link
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>Slayeroffice Image Slider (altered)</title>&lt!--http://slayeroffice.com/code/imageCrossFade/xfade2.html--><script>var imgs = new Array(), current=0;window.onload = function so_init() {    if(!document.getElementById || !document.createElement)    imgs = document.getElementById("imageContainer").getElementsByTagName("img");        for(i=1;i<imgs.length;i++){        imgs[i].xOpacity = 0;        }    imgs[0].style.display = "block";    imgs[0].xOpacity = .99;    setTimeout(so_xfade,1000);}function so_xfade() {    cOpacity = imgs[current].xOpacity;    nIndex = imgs[current+1] ? current+1 : 0;     nOpacity = imgs[nIndex].xOpacity;    cOpacity-=.05;     nOpacity+=.05;    imgs[current].xOpacity = cOpacity;    imgs[nIndex].xOpacity = nOpacity;    imgs[nIndex].style.display = "block";    setOpacity(imgs[current]);     setOpacity(imgs[nIndex]);        if(cOpacity<=0) {        imgs[current].style.display = "none";        current = nIndex;        setTimeout(so_xfade,1000);    }     else }function setOpacity(obj) {        if(obj.xOpacity>.99) {            obj.xOpacity = .99;            return;        }        obj.style.opacity = obj.xOpacity;        obj.style.MozOpacity = obj.xOpacity;        obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";    }</script><style>#imageContainer #imageContainer img {    display:none;    width:500px;    height:309px;    position:absolute;    top:0; left:0;}</style></head><body><div id="imageContainer">        <img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" />        <img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" />        <img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" />        <img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" /></div></body></html>The codes above were taken reference from some template online.I changed the above one in the way that the images are not stored in the html, but in the below one stored in javascript array.But I think I place the document.getElementById("imageContainer").src = imgs[current];in the wrong place.How could I fix it so that the images are loaded in the javascript array to make the slides run properly?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>Slayeroffice Image Slider (altered)</title><script>var imgs = new Array();imgs[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";imgs[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";imgs[2] = "http://www.techlifeweb.com/facebook_logo.jpg";imgs[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";for(var image=[], p=0; p<imgs.length; p++){    image[p] = new Image();    image[p].src = imgs[p];    }var current = 0;window.onload = function so_init() {    if(!document.getElementById || !document.createElement)    for(i=1;i<imgs.length;i++){        imgs[i].xOpacity = 0;        }    imgs[0].xOpacity = .99;    setTimeout(so_xfade,1000);}function so_xfade() {    cOpacity = imgs[current].xOpacity;    nIndex = imgs[current+1] ? current+1 : 0;     nOpacity = imgs[nIndex].xOpacity;    cOpacity-=.05;     nOpacity+=.05;    imgs[current].xOpacity = cOpacity;    imgs[nIndex].xOpacity = nOpacity;    imgs[nIndex].style.display = "block";    setOpacity(imgs[current]);     setOpacity(imgs[nIndex]);        if(cOpacity<=0) {        imgs[current].style.display = "none";        current = nIndex;        setTimeout(so_xfade,1000);    }     else         document.getElementById("imageContainer").src = imgs[current];}function setOpacity(obj) {        if(obj.xOpacity>.99) {            obj.xOpacity = .99;            return;        }        obj.style.opacity = obj.xOpacity;        obj.style.MozOpacity = obj.xOpacity;        obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";    }</script><style>#imageContainer #imageContainer img {    width:500px;    height:309px;    position:absolute;    top:0; left:0;}</style></head><body><img id="imageContainer" src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" /></body></html>
onClick: binary options
8/8/2011 external link
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> var imgs = new Array(), current=0; var t; window.onload = function so_init() {     if(!document.getElementById || !document.createElement){         return;         }      imgs = document.getElementById("imageContainer").getElementsByTagName("img");           for(i=1;i<imgs.length;i++){         imgs[i].xOpacity = 0;         }     imgs[0].style.display = "block";     imgs[0].xOpacity = .99;               document.getElementById("imageContainer").onclick = function(){                  var a = 0;                  if(a==0){so_xfade(); a=1;}         else if(a==1)      }     }      function so_xfade() {     cOpacity = imgs[current].xOpacity;     nIndex = imgs[current+1] ? current+1 : 0;      nOpacity = imgs[nIndex].xOpacity;      cOpacity-=.05;      nOpacity+=.05;      imgs[current].xOpacity = cOpacity;     imgs[nIndex].xOpacity = nOpacity;      imgs[nIndex].style.display = "block";     setOpacity(imgs[current]);      setOpacity(imgs[nIndex]);          if(cOpacity<=0) {         imgs[current].style.display = "none";         current = nIndex;         t = setTimeout(so_xfade,1000);     }      else {         t = setTimeout(so_xfade,100);     } } function setOpacity(obj) {         if(obj.xOpacity>.99) {             obj.xOpacity = .99;             return;         }         obj.style.opacity = obj.xOpacity;         obj.style.MozOpacity = obj.xOpacity;         obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";     } </script> <style> #imageContainer {     height:309px; } #imageContainer img {     display:none;     width:500px;     height:309px;     position:absolute;     top:0; left:0; } </style> </head> <body> <div id="imageContainer">         <img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" />         <img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" />         <img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" />         <img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" /> </div> </body> </html>How can be that when the image is re-clicked, the slide stops and stays on the current picture?I've tried to use variable to control it but it does not work.
Displaying Images In MySQL
8/8/2011 external link
Ladies and Gentlemen my question is..How do you create a slide show of BLOBs that are stores in a mysql database? There is little or no information on this topic it seems. Only ways to store links to images in the file system which im trying to avoid. Any help would be great thanks guys.-SB
Run Javascript function on a form
7/8/2011 external link
Hi everyone, I admit I'm poor on Javascript.I have an asp page, this shows some stats taken out from a database.I wish users to be able to pick up some of them and paste them into a forum for discussion.So I made a form, in which the relevant data appears.Now I wish them to be able to copy those data to the clipboard so it's easy to correctly post them on a phpbb forum (I've inserted there all the tags too).I have the function I need, but cannot understand how to lauch the function.May someone have a look and tell me where's the error?Thanks!P.S. The first code window is what I have on top of the page, together with other javascript functions.The second is the text area at the bottom of the page.CODEfunction copyToClipboard('playervaluesarea') { window.prompt ("Copy to clipboard: Ctrl+C, Enter", playervaluesarea); }CODE<FORM name="playervalues" METHOD="post"> <textarea name="playervaluesarea" rows="1" cols="60">[col]xxxx: |<%=PName&"-View"%>[/col] [col]yyyyy: |<%=Puuuu%>[/col] [col]zzzzz: |<%=Pzzzz%>[/col] </textarea> <input type="button" value="Copy" onClick="CopytoClipboard('playervaluesarea');"> </form>
confused!
5/8/2011 external link
If maybe i want to put a string method (like fontcolor()) in another function, so that it ll change the colour of a string, how can this be done? Why is it that the following dont work?CODEfunction abc(a) document.write("string".abc("red"))
Reading the contents of HTML Object and comparing it
5/8/2011 external link
Hi, for the given structure of HTML below:___________________________________________________________________________________________________________________________________________________<DIV align=center __squish__onclick="true"><BR> <BR> <SPAN id=ctl00_ContentPlaceHolder1_lblSelTP style="FONT-WEIGHT: bold">Please select the timepoints</SPAN> <BR> <BR> <DIV id=ctl00_ContentPlaceHolder1_pnlGrdTP style="OVERFLOW-Y: scroll; WIDTH: 800px; HEIGHT: 300px"> <DIV> <TABLE class=grid id=ctl00_ContentPlaceHolder1_grd style="BORDER-COLLAPSE: collapse" cellSpacing=0 rules=rows border=1 widht="100%"> <TBODY> <TR class=headera style="COLOR: black; HEIGHT: 20px"> <TH scope=col>TP Stage</TH> <TH scope=col>TP Name</TH> <TH scope=col>Days From Enrollment</TH> <TH scope=col>Select</TH></TR> <TR class=row> <TD>Screening/Baseline</TD> <TD>Baseline</TD> <TD>0</TD> <TD><INPUT id=ctl00_ContentPlaceHolder1_grd_ctl02_CheckBoxTP type=checkbox name=ctl00$ContentPlaceHolder1$grd$ctl02$CheckBoxTP> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <BR><INPUT id=ctl00_ContentPlaceHolder1_OkButton style="WIDTH: 60px" type=submit value=OK name=ctl00$ContentPlaceHolder1$OkButton> <INPUT id=ctl00_ContentPlaceHolder1_CancelButton style="WIDTH: 60px" type=submit value=Cancel name=ctl00$ContentPlaceHolder1$CancelButton> </DIV>_______________________________________________________________________________________________________________________________________________________I am interested in reading the following (also made BOLD above) values from the structure: <TD>Baseline</TD> <TD><INPUT id=ctl00_ContentPlaceHolder1_grd_ctl02_CheckBoxTP type=checkbox name=ctl00$ContentPlaceHolder1$grd$ctl02$CheckBoxTP> </TD>If 'Baseline' values match with the input I wish to toggle the state of checkbox in <TD><INPUT id=ctl00_ContentPlaceHolder1_grd_ctl02_CheckBoxTP type=checkbox name=ctl00$ContentPlaceHolder1$grd$ctl02$CheckBoxTP> </TD>
Rain Effect ?
5/8/2011 external link
@echo Hello, world!.. oh, god damn it, i mean - sup ? O.oSo here's the thing… I'm looking for some awesome rain effect. Just like those snow effects, that you can find anywhere. But with the rain effects things are kinda poor. I was able to find only this : RAIN (Make Raining your website) [Java Script]. It look like crap and work only on IE (which is even worse). Can someone help me with this ?Thank you...
Random Link from a RSS Feed ?
5/8/2011 external link
Hi,,How can I use Javascript to redirect a visitor to a RANDOM URL from a given RSS feed link (eg. "http://feeds.feedburner.com/blogger/WZDh" )Regards,,
but same time open the Print window automatically
4/8/2011 external link
how after press [the visitor _ car rentals site] PRINT INVOICE a new window appear with invoice [till here know], but same time open the Print window automatically, to configure what/how Print? I mean without the need to press Print in file menu...well?
Why is this NULL?
4/8/2011 external link
I have a script that's supposed to find the width of the user's screen and then change all images within a certain DIV. The name of the DIV is "photoGrid" but it says that it's null when i use getElementById. My HTML and JS codes are belowCODE<!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>LenseReflex</title><link rel='stylesheet' href='style.css' /><script type='text/javascript'>window.onload = adjustWidths();function adjustWidths(){            var photoGrid = document.getElementById("photoGrid");        var gridPhotos = photoGrid.GetElementsByTagName("img");        for(var i=0;igridPhotos.length;i++){            gridPhotos[i].width = (window.availWidth / 10) - (5 * 2);            gridPhotos[i].height = gridPhotos[i].width;        }        }</script></head><body>        <div id='photoGrid'>            <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>        <a href='#'><img src='images/noimage.png' /></a>           </div>               </body></html>
Douglas Crockford video question
3/8/2011 external link
Hello everyone,I was just watching the Douglas Crockford JavasScript videos on yahoo(http://developer.yahoo.com/yui/theater/), specifically the ones labeled 'Douglas Crockford — The JavaScript Programming Language'. In the first video, near the end, around the 28:23 time mark, he talks about the logical && operator. He says, "If the first operand is truthy then the result is the second operand, else the result is the first operand." He lost me there. Can anyone tell me what He mean't?Is he referring to a basic if else statment like this: CODEif (a == 5 && b == 2) { execute code}else {execute code}If I'm not mistaken, does the above mean that BOTH have to be true in order to get into the 'if' and if both aren't true, then it will go into the 'else'? Is He talking about this?ORIs He talking about:CODEvariable = a==5 && b==2;which I gather would mean: If a is equal to 5 and b is qual to 2, only if BOTH are true, variable will then be set to the second operand, which is 2? Is this what he mean't? If the above were OR ( || ), variable will then be set to ONE that is true, correct?Any input on this would greatly be appreciated! Thank you!
remove whitespace from XML file
3/8/2011 external link
I have an xml file and I want to how can i remove the white-space in the xml file.For example this is my xml file:CODE<?xml version="1.0" encoding="UTF-8"?><CONTACTS><CONTACT><FirstName>SandfordFrankie</FirstName><LastName>Frankie Sandford</LastName><gmail/><yahoo/><URL>http://www.facebook.com/FrankieSandfordApprovedPage</URL><Facebook-ID/></CONTACT><CONTACT><FirstName>Julien </FirstName><LastName>Foder</LastName><gmail/><yahoo/><URL/><Facebook-ID/></CONTACT><CONTACT><FirstName>Stéphénè</FirstName><LastName>Rio</LastName><gmail/><yahoo>rio.sté1234@yahoo.com</yahoo><URL/><Facebook-ID/></CONTACT><CONTACT><FirstName>Aana</FirstName><LastName>Joséph</LastName><gmail></gmail><yahoo>aana.josé@yahoo.com</yahoo><URL></URL><Facebook-ID></Facebook-ID></CONTACT></CONTACTS>If i delete a record and it'll be like this:CODE<?xml version="1.0" encoding="UTF-8"?><CONTACTS><CONTACT><FirstName>Julien </FirstName><LastName>Foder</LastName><gmail/><yahoo/><alcatel-lucent/><URL/><Facebook-ID/></CONTACT><CONTACT><FirstName>Stéphénè</FirstName><LastName>Rio</LastName><gmail/><yahoo>rio.sté1234@yahoo.com</yahoo><URL/><Facebook-ID/></CONTACT><CONTACT><FirstName>Aana</FirstName><LastName>Joséph</LastName><gmail></gmail><yahoo>aana.josé@yahoo.com</yahoo><URL></URL><Facebook-ID></Facebook-ID></CONTACT></CONTACTS>When i delete a record from my xml file, how can i remove the white space from the file?Thanks guys.
Needing URL Testing
2/8/2011 external link
Looking for some JavaScript that can tell if a file or website is available.For example:CODEif (URL exists)  {    document.write(<div> + "Content Box" + </div>)  }else  {    document.write(<div> + "Unavailable" + </div>)  }A real time example would be something like say an embed code from a website and having an alternate setup for when the website was down.
Birt reporting
2/8/2011 external link
Hi All, I use birt as reporting tool. after selcting the the right fileds and create a table on the report page.I can right click on the column and add option to the properties to group by..this must be done using java script.Anybody can help?Like I want an expression to say when the value is the same then group both valuesThanks,
JS: a problem that I cannot tell and cannot solve
2/8/2011 external link
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>window.onload = function() {    pic = document.getElementById("pic");}var pic = document.getElementById("pic");var img = [];    img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",               cap: "",               url: "",               des: ""              };    img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",               cap: "",               url: "",               des: ""              };    img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",               cap: "",               url: "",               des: ""              };    img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",               cap: "",               url: "",               des: ""              };for(var imgs=[], i=0; i<img.length; i++){    imgs[i] = new Image();    imgs[i].src = img[i].src;    }var o = 100;var p = -1;var t;function next(){    pic.style.filter = "alpha(opacity=100)";        if (p<img.length-1)    else         pic.src = img[p].src;// I think the problem that troubles me starts from here:    t = setInterval(fadeOut,10);        }function fadeOut(){    pic.src = img[p].src;    pic.style.filter = "alpha(opacity="+o+")";    pic.style.MozOpacity = o/100;    pic.style.opacity = o/100;    o -= 1;        if(o<=0){        clearInterval(t);// This return may cause the problem but I don't know how to fix it        return o=100;        }            }</script></head><body><img id="pic" src="http://1.bp.blogspot.com/_Mt4qyhflsHY/S8bE1G8JnyI/AAAAAAAAAgQ/Dhtm4ARMuXo/s1600/javascript_call.png" style="width: 500px; height: 500px;" /><br /><a href="#" onclick="next()">Next</a></body></html>What I originally wanted was to press next and a image is loaded (fine)and then the image fades away to 0 (fine again)and when next is pressed, a new image is there (fine)and it is again faded away (fine again)but I foundwhen users press next while the image is fading away (before its opacity becomes 0)The image starts fading in and out non-stopIs there a fix on this problem so that even users do so, a new image is loaded in a proper way?