|
HTML - Problem With Settimeout Function Javascript
I have a problem with the setTimeout(); function
My example: <script language="javascript"> <!-- setTimeout("document.write('<img src=...>')",3000); setTimeout("document.write('<img src=...>')",6000); //--> </script> When I execute it, the first img would be display but the second wouldn't. So I tried with other statements like this example: <script> setTimeout("alert('hello')",2000); setTimeout("alert('hello')",4000); </script> And this worked fine, the two alertboxes where displayed one after the other. Greets, Errorman Similar TutorialsHey guys.. im fairy new to html and javascript. the problem im having is.. i want to use a hyperlink from one page to redirect me to another, but once the second page is loaded i want to call a changeLocation() function that i have written to change the focus of the screen on a map. ive been googleing a lot and have played around with code like a href="blah.com/index.php?id=593#" onclick="changeLocation()" but am yet to have any luck..any help would be much appreciated, jared. In my art page I have a series of thumbnail, when you clcik on them a javascript function is used to show them in fullsize next to all the thumbnails. However sometimes I want to link to my art page with a certain thumbnail expanded. How can I achieve this. This is what i have so far but its not working Code: <a href="art.html" onlcick="expandThumb("expandSrc")">thumb4</a>
Thanks in advance Calypso Hey guys / gals I have been asking around in several forums but they didnt give me correct codes. I am so desperate to get it done. I am using HTML and javascript. Everything is working expect the price list (from table) linked to the dropdown list is not shown up. I inserted the javascript code for displaying image when selected item on the order list (dropdown list), it is working well but the price list linked to this dropdown list was not shown up. Something wrong with Javascript. Can you check up my below code where is incorrect? Your help much appreciated. I urgently need your help. Thanks Look at the red and blue code below: <head> <script type="text/javascript"> window.onload = function() { document.getElementById("dlist1").onchange = function() { var option = this.options[this.selectedIndex]; document.getElementById("price_card").innerHTML = option.getAttribute("data-card") ? option.getAttribute("data-card") : ""; document.getElementById("price_memo").innerHTML = option.getAttribute("data-memo") ? option.getAttribute("data-memo") : ""; document.getElementById("price_tags1").innerHTML = option.getAttribute("data-tags1") ? option.getAttribute("data-tags1") : ""; document.getElementById("price_tags4").innerHTML = option.getAttribute("data-tags4") ? option.getAttribute("data-tags4") : ""; document.getElementById("price_key").innerHTML = option.getAttribute("data-key") ? option.getAttribute("data-key") : ""; document.getElementById("price_fridge").innerHTML = option.getAttribute("data-fridge") ? option.getAttribute("data-fridge") : ""; } } // displaying image when selected item on the order list </script> <script type="text/javascript"> function swapImage1() { var image = document.getElementById("imageToSwap1"); var dropd = document.getElementById("dlist1"); image.src = dropd.value; }; </script> <script type="text/javascript"> function swapImage2() { var image = document.getElementById("imageToSwap2"); var dropd = document.getElementById("dlist2"); image.src = dropd.value; }; </script> </head> <body> <table width="700"> // it is an order list <tr> <td> <p class="Card">ORDER 1:</p> // It is the first dropdown list named order 1 </td> </tr> <tr> <td> <p class="Dropdown"> <select name="ORDER1" size="12" multiple="multiple" id="dlist1" onchange="swapImage1()" > <optgroup label="Sow Seeds of Love"> <option value="None">None</option> <option data-card="32.00" data-memo="62.00" data-tags1="8.50" data-tags4="1.80" data-key="30.00" data-fridge="40.00" value="Images/Order_names/SowSeeds/Faith01_yellow.jpg">Faith</option> <option data-card="35.00" data-memo="65.00" data-tags1="9.50" data-tags4="1.80" data-key="20.00" data-fridge="40.00" value="Images/Order_names/SowSeeds/Grace01_green.jpg">Grace</option> <option data-card="1.00" data-memo="2.00" data-tags1="3.00" data-tags4="4.00" data-key="5.00" data-fridge="6.00" value="Images/Order_names/SowSeeds/Hope01_blue.jpg">Hope</option> <option data-card="6.00" data-memo="5.00" data-tags1="4.00" data-tags4="3.00" data-key="2.00" data-fridge="1.00" value="Images/Order_names/SowSeeds/Peace01_pink.jpg">Peace</option> <option data-card="21.00" data-memo="22.00" data-tags1="23.00" data-tags4="24.00" data-key="25.00" data-fridge="26.00" value="Images/Order_names/SowSeeds/FlowerSeedSachet01_two girls.jpg">Flower Seed</option> </optgroup> </select> </p> </td> <td> //it should display image when selected item from the order list - it is working well <img class= "ImageToSwap" id="imageToSwap1" src="Images/DropdownImages.gif" width="147" height="207" /> </td> </tr> </table> //This price list is not shown up when selected item from the order 1 (first dropdown list) Why not shown up???. <table> <tr> <th>Description</th> <th>Price</th> </tr> <tr> <td><label><input type="radio" name="medium" value="card" /> Card A6 (blank)</label></td> <td id="price_card"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="memo" /> Memo Book A6</label></td> <td id="price_memo"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="tags4" /> Gift Tags (4 designs per packet)</label></td> <td id="price_tags4"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="tags1" /> Gift Tags - Single - Assorted</label></td> <td id="price_tags1"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="key" /> Key Rings Perspex</label></td> <td id="price_key"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="fridge" /> Fridge Art</label></td> <td id="price_fridge"></td> </tr> </table> <table width="700"> // it is the second dropdown list named Order 2 <tr> <td> <p class="Card">ORDER 2:</p> </td> </tr> <tr> <td> <p class="Dropdown"> <select name="ORDER2" size="12" multiple="multiple" id="dlist2" onchange="swapImage2()" > <optgroup label="Sow Seeds of Love"> <option value="None">None</option> <option data-card="32.00" data-memo="62.00" data-tags1="8.50" data-tags4="1.80" data-key="30.00" data-fridge="40.00" value="Images/Order_names/SowSeeds/Faith01_yellow.jpg">Faith</option> <option data-card="35.00" data-memo="65.00" data-tags1="9.50" data-tags4="1.80" data-key="20.00" data-fridge="40.00" value="Images/Order_names/SowSeeds/Grace01_green.jpg">Grace</option> <option data-card="1.00" data-memo="2.00" data-tags1="3.00" data-tags4="4.00" data-key="5.00" data-fridge="6.00" value="Images/Order_names/SowSeeds/Hope01_blue.jpg">Hope</option> <option data-card="6.00" data-memo="5.00" data-tags1="4.00" data-tags4="3.00" data-key="2.00" data-fridge="1.00" value="Images/Order_names/SowSeeds/Peace01_pink.jpg">Peace</option> <option data-card="21.00" data-memo="22.00" data-tags1="23.00" data-tags4="24.00" data-key="25.00" data-fridge="26.00" value="Images/Order_names/SowSeeds/FlowerSeedSachet01_two girls.jpg">Flower Seed</option> </optgroup> </select> </p> </td> <td> // displaying image when select item from the second dropdown - it is working well <img class="ImageToSwap" id="imageToSwap2" src="Images/DropdownImages.gif" width="147" height="207" /> </td> </tr> </table> [color="RoyalBlue"]//This price list is also not shown up when selected item from the order 2 (second dropdown). Why not shown up???/COLOR] <table> <tr> <th>Description</th> <th>Price</th> </tr> <tr> <td><label><input type="radio" name="medium" value="card" /> Card A6 (blank)</label></td> <td id="Td1"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="memo" /> Memo Book A6</label></td> <td id="Td2"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="tags4" /> Gift Tags (4 designs per packet)</label></td> <td id="Td3"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="tags1" /> Gift Tags - Single - Assorted</label></td> <td id="Td4"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="key" /> Key Rings Perspex</label></td> <td id="Td5"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="fridge" /> Fridge Art</label></td> <td id="Td6"></td> </tr> </table> </body> Thank you Natz I am trying to create a frontpage with a main image that is replaced by other images that can be clicked as thumbnails. I have succeeded in doing that, but am now looking to have a headline that links to another page in my site that would change as the images change. Here's my code, please help. <script language="javascript"> function swapPhoto(photoSRC) { document.images.imgPhoto.src = photoSRC; } </script> <table width=550 height=45 style="background-color: #000000" style="color: #ffffff"> <tr><td><center><p><font size=5 style="color: #ffffff">New Articles</p></font></center></tr></td> </table> <table width=550 style="text-align:center" border=3 style="border-color: #000000"> <tr><td border=5 style="border-color:#000000"> <img src="http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg" id="imgPhoto" width="510" height="340" alt="Main Image" /></tr></td> <tr><td border=5 style="border-color:#000000"><a href="javascript:swapPhoto ('http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg')"; return false;"><img src="http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg" width="123" height="82" border=0 /></a></a> <a href="javascript:swapPhoto ('http://cdn.picapp.com/ftp/Images/4/a/f/a/NBA_MAY_10_5253.JPG?adImageId=1825421&imageId=4792284')"; return false;"><img src="http://cdn.picapp.com/ftp/Images/4/a/f/a/NBA_MAY_10_5253.JPG?adImageId=1825421&imageId=4792284" width="123" height="82" border=0 /></a> <a href="javascript:swapPhoto ('http://cdn.picapp.com/ftp/Images/3/e/3/5/NBA_Summer_League_1d14.JPG')"; return false;"><img src="http://cdn.picapp.com/ftp/Images/3/e/3/5/NBA_Summer_League_1d14.JPG" width="123" height="82" border=0 /></a> <a href="javascript:swapPhoto ('http://cdn.picapp.com/ftp/Images/5/b/b/e/Kansas_State_v_d9d1.jpg?adImageId=1819870&imageId=3772329')"; return false;"><img src="http://cdn.picapp.com/ftp/Images/5/b/b/e/Kansas_State_v_d9d1.jpg?adImageId=1819870&imageId=3772329" width="123" height="82" border=0 /></a></tr></td> </table> I have been creating a website with Javascript. When the user rolls over an image button, the button will glow and when the user presses on the button it will change to and image of the button being pressed. This program has been working with at least 6 buttons but the current button i'm working on stops doing what the previous buttons did and I would like to know why. I copied the codes exactly the same as the previous buttons, changed the image picture and provided the correct links to each image but somehow it just stops working. Thank you for your help (: -=Example of the codes=- Button 1: <a href="'test2.htm" onMouseDown="pressButton('chatBtn');return true;" onMouseOver="overButton('chatBtn');return true;" onMouseOut="releaseButton('chatBtn');return true;"><img name=chatBtn src="images/chat.png" border="0" alt="Chat" /></a> Button 2: <a href='test.htm' onMouseDown="pressButton('backBtn');return true;" onMouseUp="overButton('backBtn');return true;" onMouseOut="releaseButton('backBtn');return true;"><img name=backBtn src="images/back.png" border="0" alt="Back" /></a> Javascript code: // Preloading Images if (document.images) { chatBtn_up = new Image(); chatBtn_up.src="images/chat.png"; chatBtn_down= new Image(); chatBtn_down.src="images/chatPress.png"; chatBtn_hover = new Image(); chatBtn_hover.src="images/chatHover.png"; backBtn_up = new Image(); backBtn_up.src="images/back.png"; backBtn_down= new Image(); backBtn_down.src="images/backPress.png"; backBtn_hover = new Image(); backBtn_hover.src="images/backHover.png"; } // Event Handlers for button function pressButton(btName) { if (document.images) eval('document.'+btName+'.src='+btName+'_down.src'); } function releaseButton(btName) { if(document.images) eval('document.'+btName+'.src='+btName+'_up.src'); } function overButton(btName) { if (document.images) eval('document.'+btName+'.src='+btName+'_hover.src'); } Can anyone tell me what is wrong with this timer. It does not work? HTML Code: function Timer(minutes, seconds)
{
var seconds;
var minutes;
var time = document.getElementById("timer");
if (seconds <= 0)
{
seconds = 9;
minutes -= 1;
}
if (minutes <= -1)
{
seconds = 0;
minutes += 1;
}
else
{
seconds -= 1;
time.innerHTML = minutes + ":" + seconds;
setTimeout("Timer(minutes, seconds)" , 1000);
}
}
Code: function send_onclick(frmName)
{
var bolSubmit;
bolSubmit = true;
if (frmName.email.value == "")
{
alert("You must enter an email address");
bolSubmit = false;
}
if (bolSubmit == true)
{
frmName.submit(frmName);
}
}
</script>
</head>
<body>
<form name="frmName" method="post" action="validate.asp">
Enter your name in the text box. If nothing is entered, a warning <br />
message will be displayed. Only when you enter something into the <br />
text box will the page be submitted. <br /><br />
Please enter your name : <input type="text" name="email" size="20" /><br />
<input type="button" name="butSent" value="Do it" onclick="return send_onclick(frmName)">
</form>
</body>
</html>
Hi there, I would like to know the purpose of having var bolSubmit in the code above. Also, why is it that "form name" allows my code to work even though there is a warning stating that it is outdated, but when I change it from "form name" to "form id", it does not complain of the warning anymore, but instead my code does not work. Please advise. On my website, I have a little box that appears on the home page that says "Loading, please wait". After about 4 seconds, the box closes with a javascript time out. But, on slow browsers, my page takes about 4 seconds to load before they see the "Loading" box, so, all the slow browsers see is my loading box for a millisecond, and then the 4 seconds is over. If I just put my Javascript timeout to 6 seconds, then its annoying for the fast browsers (and for me) because they have to wait 6 seconds to see the page. I want to knkow if its possible to have a timeout that only starts when the page is loaded! Hey, For some reason my table portion of this code does not display... Also, my background color or my td color also do not display...HTML code is posted below. Any help would be awesome... Thanks! HTML Code: <html>
<head>
<title>Business Projection Site</title>
<style>
body {bacground-color: #00AAAA}
table {border-collapse: collapse}
td {background-color: rgb(0,230,0)}
</style>
<script>
L=211;
verty=Math.floor(L/20)*1.0;
function forecast(){
a1=parseFloat(document.form1.input1.value);
a2=parseFloat(document.form1.input2.value);
a3=parseFloat(document.form1.input3.value);
a4=parseFloat(document.form1.input4.value);
d1=a2-a1;
d2=a3-a2;
d3=a4-a3;
dmax=Math.max(Math.abs(d1),Math.abs(d2),Math.abs(d3));
dmin=Math.min(Math.abs(d1),Math.abs(d2),Math.abs(d3));
err=dmax-dmin;
avga=(a1+a2+a3+a4)/4.0;
erra=err/avga;
avgd=(d1+d2+d3)/3.0
r1=a2/a1;
r1=a3/a2;
r1=a4/a3;
rmax=Math.max(r1,r2,r3);
rmin=Math.min(r1,r2,r3);
errg=rmax-min;
avgr=(r1+r2+r3)/3.0;
if(errg<erra)stype="A";
else stype="g";
if(stype="A")
{ a5=a4*avgd;
a6=a5*avgd;
a7=a6*avgd;
a8=a7*avgd;
}
else{
a5=a4*avgr;
a6=a5*avgr;
a7=a6*avgr;
a8=a7*avgr;
}
document.form1.out1.value=a5.toFixed(2);
document.form1.out2.value=a6.toFixed(2);
document.form1.out3.value=a7.toFixed(2);
document.form1.out4.value=a8.toFixed(2);
msglin='Your data is more like a linear trend than a % growth. ';
msglin= msglin+'The average change per period is '+avgd;
msgexpgr='Your data is more like % growth than linear trend. ';
avgrgr =100.*(avgr-1.0);
avgrgr=avgrgr.toFixed(2);
msgexpred='Your data is more like % reduction than linear trend. ';
avgrred = 100.*(1.0-avgr);
avgrred=avgrred.toFixed(2);
msgexpred= msgexpred+'The average reduction per preiod is '+avgrred+'%';
if(stype=="A")document.form1.anal.value=msglin;
else if(avgr>1.0) document.form1.anal.value=msgexpgr;
else document.form1.anal.value=msgexpred;
}
function plot() {
var values=new Array (a1,a2,a3,a4,a5,a6,a7,a8);
var yt2=new Array(8);
var xt1=new Array(8);
var minPV=9999;
var maxPV=-9999;
for (i=0; i<8; i++){
if (values[i]<minPV)
minPV=values[i];
if (values[i]>maxPV)
maxPV=values[i];
}
for (i=0; i<8; i++){
yt2[i]=(values[i]-minPV)/(maxPV-minPV)*(L-(2*verty))+verty;
}
for (i=0; i<8; i++){
xt1[i]=Math.round((L-(2*verty))/(8-1)*i+verty);
}
for (i=0; i<4; i++){
line1(xt1[i], yt2[i], xt1[i+1], yt2[i+1], "#FFF7F7");
points (xt1[i], yt2[i], "#000000", 3);
}
for (i=4; i<8; i++){
line1(xt1[i], yt2[i], xt1[i+1], yt2[i+1], "00EEEE");
points (xt1[i], yt2[i], "#000000", 3);
}
function clearplot()
{
for(i=1;i<=L;i++){
for(j=1;j<=L;j++){
a=document.getElementById(j+","+i);
a=style.backgroundColor="#FF7777";
}
}
}
function point(xx1,yy1,color1)
{ yy1=Math.round(yy1);
xx1=Math.round(xx1);
idPoint=(L-yy1+1)+","+xx1;
cell1=document.getElementById(idPoint);
cell1.style.backgroundColor=color1;
}
function points(xx1,yy1,color1,n)
{ n2=Math.floor(n/2);
for(i1=0; i1<n; i1++)
for(j1=0; j1<n; j1++)
point(xx1-n2+i1,yy1-n2+j1,color1);
}
function line1(xx1, yy1, xx2, yy2, color1)
{ m=(yy2-yy1)*1.0/(xx2-xx1);
if (Math.abs(xx2-xx1) >= Math.abs(yy2-yy1))
{
for (j=xx1; j<=xx2; j++){
y=m*(j-xx1)+yy1;
point(j,y,color1);
}
}
else {
ymax=Math.max(yy1,yy2);
ymin=Math.min(yy1,yy2);
for(k=ymin; k<=ymax; k++){
x=(k-yy1)/m+xx1;
point(x,k,color1);
}
}
}
function expGrowth()
{ document.form1.input1.value="10.0";
document.form1.input2.value="20.0";
document.form1.input3.value="40.0";
document.form1.input4.value="80.0";
document.form1.out1.value='';
document.form1.out2.value='';
document.form1.out3.value='';
document.form1.out4.value='';
document.form1.analysis.value="";
}
function expReduction()
{ document.form1.input1.value="200.0";
document.form1.input2.value="100.0";
document.form1.input3.value="50.0";
document.form1.input4.value="25.0";
document.form1.out1.value='';
document.form1.out2.value='';
document.form1.out3.value='';
document.form1.out4.value='';
document.form1.analysis.value="";
}
function linGrowth()
{ document.form1.input1.value="10.0";
document.form1.input2.value="20.0";
document.form1.input3.value="30.0";
document.form1.input4.value="40.0";
document.form1.out1.value='';
document.form1.out2.value='';
document.form1.out3.value='';
document.form1.out4.value='';
document.form1.analysis.value="";
}
function linReduction()
{ document.form1.input1.value="40.0";
document.form1.input2.value="30.0";
document.form1.input3.value="20.0";
document.form1.input4.value="10.0";
document.form1.out1.value='';
document.form1.out2.value='';
document.form1.out3.value='';
document.form1.out4.value='';
document.form1.analysis.value="";
}
</script>
</head>
<body>
<h2>Revenue Projection</h2>
<form name='form1'>
<b>Enter 4 historical data points:</b>
<br/>
<pre>1. Enter at least 2 data points in this
section to forecast and plot your data.
2. Or click on one of the buttons below for
examples of linear or exponential growth,
or shrink or linear reductions growths.</pre>
<p>
<input type= 'textfield' size=15 name='input1' />
<input type= 'textfield' size=15 name='input2' />
<input type= 'textfield' size=15 name='input3' />
<input type= 'textfield' size=15 name='input4' />
<p>
<input type="button" value="Exponential Reduction" onclick="expReduction()"/>
<input type="button" value="Linear Reduction" onclick="linReduction()"/>
<input type="button" value="Linear Growth" onclick="linGrowth()"/>
<input type="button" value="Exponential Growth" onclick="expGrowth()"/>
<p>
<b>Predicted Future Values:</b>
<p>
<input type="text" name="out1" size=15 />
<input type="text" name="out2" size=15 />
<input type="text" name="out3" size=15 />
<input type="text" name="out4" size=15 />
<p><input type="button" value="Forecast" onclick="forecast()">
<p><input type="text" size="115" name="anal" />
</form>
<h4>Normalized Plot:</h4>
<p>
<input type="button" value="Plot Data" onclick="plot()">
<input type="button" value="Clear Plot Data" onclick="clearplot()">
<p>
<table>
<script>
for(i=0; i<L; i++){
document.write("<tr>");
for(j=0; j<L; j++){
document.write("<td id='"+i+","+j+"'>");
}
document.write("</tr>")
}
</script>
</table>
</body>
</html>
Hey everyone, I'm having a problem with a Flash .swf file in my HTML page. If I input the code one way, it works in Firefox and not in IE. If I do it another way, it works in IE and not Firefox. The approach I was thinking of taking was using conditional statements in Javascript, however I'm having problems arranging the code to properly implement it. And believe me, I've reworked this file and I'm getting nothing that works on both at the same time. Suggestions for both methods would be great -- If you'd like me to post the code I could do so. Thank you! Hi. My entire site is 100% XHTML1.1. Except for some new code I added which causes errors in validation. the code is HTML Code: <a href="http://babelfish.altavista.com/babelfish/" onclick="window.open('http://babelfish.altavista.com/babelfish/trurl_pagecontent?lp=en_it&url='+encodeURIComponent(location.href));return false;" title="Translate to Italian"><img title="Italian" src="http://geekimo.com/licons/it.png" alt="Italian" /></a>
I understand maybe CDATA islands can help with this? or making it external? but I have no idea how to do that with it having html code in there too.. I don't know if you can surround it in CDATA tags. There are other lines of code too, exactly the same except have different languages. Any help would be awesome! Hello everyone. Below is the html code for a quiz i want to use for my website. What I want to do is, upon completion of the quiz, have 2 new text-entry forms and 1 "submit" button form appear at the bottom of the page asking the user to input one's name and email address before they can submit the results of their quiz. Both fields would be required.. <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Knowledge Assessment Tool</title> <script src="assessment.js" type="text/javascript"></script> <script src="quiz.js" type="text/javascript"></script> <link rel="stylesheet" href="quiz.css" type="text/css"> </head> <body bgcolor="#FFFFFF"> <p><font color="#2431A2"><u><b>10 Point Quiz</b></u></font></p> <div id="quiz1"></div> <div id="quiz2"></div> ** </body> </html> ** denotes where the text and submit button would show up after the quiz is completed asking the user for name/email address. As you can tell I have no clue how to acheive this. Any help is greatly appreciated. Thank you. hello, please help me! I created my wesbite using Dreamweaver 8, and i am having problem with a "form/submit" option. I've created a form inside a "DIV layer"(inorder to be able to move around). I want the form to be able to ALERT the customer that he/she is missing a "required" field, when they hits SUBMIT BUTTON and be able to go back and "enter it" and then when they hit the SUBMIT BUTTON and all the required field are listed then it will SUBMIT the form and OPEN the POP UP WINDOW. NOW here is the problem both scrips are working but they are conflicting each other, When I go to my site and HIT the SUBMIT BUTTON without entering any fields A POP UP WINDOWS comes up and tells me i am missing the field "WHICH is what i want" but then instead of letting me go back and enter the field, it automaticly submits the form and a NEW WINDOWS comes up with the "forms submission result" and I then recived an email.. Now what can I do to correct this? How can i make it work properly? is there another simple script? i thought maybe the problem is on the ONSUBMIT action? If i have to re-write everything again i am willing to do so! I just don't understand, why does it submit the form if there are "required" fields missing? why doesn't it let me go back and type in the field and then do the rest? Please HELP here is the page where my form is located at : http://www.towone.com/formstest56.html and here is the script: </style> </head> < form action ="http://towone.com/cgi-sys/FormMail.cgi" method="POST" onsubmit="return (checkrequired(this)|createTarget(this.target));" target="formtarget"> <input type="hidden" name="recipient" value="danay@towone.com" /> <input type="hidden" name="subject" value="FORM REQUEST" /> <script> function checkrequired(which){ var pass=true if (document.images){ for (i=0;i<which.length;i++){ var tempobj=which.elements[i] if (tempobj.name.substring(0,8)=="required"){ if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().cha rAt(0)=="s"&&tempobj.selectedIndex==-1)){ pass=false break } } } } if (!pass){ alert("One or more of the required elements are not completed. Please complete them, then submit again!") return false } else return true } </script> <script type="text/javascript"> function createTarget(t){ window.open("", t, "width=600,height=550"); return true; } </script> <body> -------------AND THEN FOR THE FORM IN WHICH IS INSIDE A DIV LAYER------ ------------------------THIS IS THE SCRIPT:------------------------------- <div id="Layer8"> <form action="" method="post" name="form1" class="style3" id="form1"> <strong>Request form to be sent to you via?</strong> </p> </strong> <label>NAME: <input type="text" name ="requiredNAME" /> </label> <p> <label>EMAIL: <input type="text" name ="requiredEMAIL" id="email_add"/> </label> </p> <p> <label>FORM: <select name="Form"> <option selected="selected">Select FORM</option> <option>Pickup Order Form</option> <option>Credit Card Form</option> <option>Quote Request</option> <option>IRS W-9</option> <option>Company Package</option> <option>Truck Insurance</option> </select> </label> </p> <p> <label>SEND VIA: <select name="Recieve_Via"> <option>Email</option> <option>Fax</option> </select> </label> </p> <p> <label>FAX: <input type="text" size="3" maxlength="3" name="area" /> - <input type="text" size="3" maxlength="3" name="prefix" /> - <input type="text" size="4" maxlength="4" name="extension" /> </label> </p> <p align="center"> <input type="submit" name="Submit" onSubmit="return checkrequired (this)" "value="Submit" /> <input type="reset" name="Reset" value="Reset" /> </p> </form> </div> So I've been trying to set up a search box to blank out its default text when clicked, and reappear when it goes away (if empty). The script works fine--I know that much. However, when using it inside a table inside a form, it seems to fail every single time. Even "this.value=' ' " falls flat on its face. I'm relatively new to HTML, so please bear with me. Below is the script, a text box it does work in, and then the box I'm trying to make it work in. Quote: <script type="text/javascript"> function clickIn(field){ if (field.value==field.defaultValue){ field.value=''; } } function clickOut(field){ if (field.value==''){ field.value=field.defaultValue; } } </script> <form> <input type="text" name="text" id="test" value="test" onfocus="clickIn(this)" onblur="clickOut(this)"/> </form> <form> <tr> <td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> <!--Search Box Dimensions--> <input type="text" title="Search Terms" name="lookfor" id="search" value="Search the Catalog" onfocus: "clickIn(this)" onblur="clickOut(this)" style="width:300px; border:0px solid; height:50px; padding:0px 3px; position:relative;"/> </td> <td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> <!--The search button--> <input type="image" value="Go" src="Search Button.jpg" style="border-style: none; width: 50px; height: 50px;"/> </td> </tr> </table> </form> I have this: Code: <script language="Javascript1.2">
document.write('<a href=onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_email','','images/nav_email-over.gif',1)" "javascript:void(0)" onclick=window.open("/recommend/recommend.php?loc='+window.location.href+'","","height=280,width=230,top=150,left=300,toolbar=no,menubar=no,location=no,status=no,resizable=0")><img src="images/nav_email.gif" alt="email page" name="nav_email" width="29" height="24" class="imgborder1"></a>');
</script>
but the image wont show up. I have an image that has a mouseover/out rollover effect. I also have it pop up a new window with a "recommend this page to a friend" script. I can't figure out why the image wont show up, it's like it's invisible. I would like to have an image that takes 2 url like the following image... is it possible? if so, can someone please tell me how this could be done? Thank you very much.. NOTE: I tried doing this... <map name= 'url1' > <area shape= 'poly' coords= ' 0 , 0 , 50 , 0 , 0 , 50 ' href= 'url1.html' > </map> <a href= 'url2.html' > <img src= 'img.jpg' width= 50 height= 50 usemap= '#url1' > </a> but this only get 'url1' woring... Hi all, Currently i'm setting up a website for my company, and the website require a function whereby need to do a monthly donation using credit card. This is the part where u don't know what to do. Do I need any software or juz pure coding will do ah? Any kind soul willing to help me out? Thanks hi friends, I have problem with tag <div>,i don't know how to use this tag. can u tell me how to use this tag and give me some examples. thanks before Regards Hendra Hey. I'm not much of a coder really, but I got a slight idea of how it works. I got this script from a friend of mine, as a solution for opening two targets at once by clicking on just one link on the page. I'm using tables and a couple of iframes, with both their two different name-tags in it. My problem is that whatever the target seems to be, it allways opens in two blank windows. My impression so far, is that the script in the head might seem to do a little bit too much regarding the hrefs itselves. Seems like it overruns the targets specified in those two lines. So, if anyone understands the contents of the script (which I don't) I'd be very pleased for any possible solution on this one. I've "pasted" some of the code (the part that matters) he <html> <head> <script type="text/javascript"> function openOtherLinks(id1, id2) { var link1 = document.getElementById(id1); var link2 = document.getElementById(id2); if(!link1.href || !link2.href) return; window.open(link2.href); document.location.replace(link1.href); } </script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <a href="java script: openOtherLinks('tannoy1', 'tannoy2')">Tannoy</a> <a id="tannoy1" href="tannoy_overview.html" target="main"></a> <a id="tannoy2" href="tannoy_left.html" target="left"></a> <table> <tr> <td><iframe src="blank.html" width="152" height="455" align="center" frameborder="0" name="left" scrolling="auto"></iframe> </td> </tr> <tr> <td><iframe src="news.html" width="677" height="478" align="center" frameborder="0" name="main" scrolling="auto"></iframe> </td> </tr> </table> </body> </html> ... This wasn't exactly pasted directly from the file, so the table positions and sizes aren't real. The things that matters I believe, is the iframe tags and the href and the script in the header. And believe me, I've trid different things regarding positioning, tried to move the lines before and after each other etc. Even tried to put the IDed hrefs in after the </body>, and so on. Both before and after the iframe-tags as well. Won't make any difference. I am building a prototype for a retailer, with show-hide layers and swap and restore images. I have 3 DIVs with different images in each (first is for color swatches, second is for size range and third one is for size). When I mouseover and mouseout I have it set up to show and hide layers. When I click an image it will swap to show what is not available for it (size, color or size range). I have 3 states for the images (active, onclick and out of stock). Right now when I click say in a color (it shows that is selected and it is showing what is not available for that color) then when I click on size range the color I clicked before it will restore to the not selected option. And then when I click on the size the size range image will restore to it's original state. What I need to do is set it up in a way that when I click a color then a size range and then a size all 3 images will show the onclick state and will show what is not available for that particular image. You can go to http://www.oldnavy.com/browse/produc...scid=598256012 and see how when you click in each section (color, waist and legth) will restore, but if you click a color then a waist and then a length everything will be selected. I know this is done in javascript and probably is calling a database, and what I have is with images and in another process but hopefully I can get it done. Hopefully someone can help me with this, here is part of the head code: HTML Code: function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
Here is part of the body code: HTML Code: <div class="spaceafter"><b>select color:</b>
<div id="apDiv2">black</div>
<div id="colorcardiganblack">black</div>
<div id="colorcardigangray">medium heather gray</div>
<br />
<a href="#Here"><img src="images/swatch_cardiganblackON.gif" name="cardblackon" class="swatches" id="cardblackon" onclick="MM_swapImage('blackcardigan','','images/B2_cardiganblack.jpg','cardblack','','images/swatch_cardiganblackON.gif','plus','','images/X6_sizerangePlus_DA.gif','1x','','images/X6_size_1x_DA.jpg','2x','','images/X6_size_2x_DA.jpg','3x','','images/X6_size_3x_DA.jpg',1);MM_setTextOfLayer('apDiv2','','black')" onmouseover="MM_showHideLayers('layplusDA','','show','lay1xDA','','show','lay2xDA','','show','lay3xDA','','show','SOLblkcardigan','','show')" onmouseout="MM_showHideLayers('layplusDA','','hide','lay1xDA','','hide','lay2xDA','','hide','lay3xDA','','hide','SOLblkcardigan','','hide')"/></a></a><a href="#Here"><img src="images/swatch_cardigangrey.gif" name="cardgrey" class="swatches" id="cardgrey" onclick="MM_swapImage('blackcardigan','','images/B2_cardigangray.jpg','cardblackon','','images/swatch_cardiganblack.jpg','cardgrey','','images/swatch_cardigangreyON.gif','lg','','images/X6_size_large_DA.jpg','2x','','images/X6_size_2x_DA.jpg',1);MM_setTextOfLayer('apDiv2','','medium heather gray')" onmouseover="MM_showHideLayers('lay2xDA','','show','laylgDA','','show','layB2cardgray','','show','cardblack','','show','SOLgrycardigan','','show')" onmouseout="MM_showHideLayers('lay2xDA','','hide','laylgDA','','hide','layB2cardgray','','hide','SOLgrycardigan','','hide')"/></a></div>
<div class="spaceafter"><b>select size range:</b>
<div id="apDiv3">none</div>
<div id="apDiv3m">misses</div>
<div id="apDiv3pt">petites</div>
<div id="apDiv3pl">plus</div>
<br />
<a href="#Here"><img src="images/X6_sizerangeMisses_EAgif.gif" name="misses" border="0" usemap="#missesMap" class="options" id="misses" onclick="MM_swapImage('misses','','images/X6_sizerangeMisses_ON.gif','1x','','images/X6_size_1x_DA.jpg','2x','','images/X6_size_2x_DA.jpg','3x','','images/X6_size_3x_DA.jpg',1);MM_setTextOfLayer('apDiv3','','misses');MM_setTextOfLayer('apDiv5','','<font size="2" color="#666666"><b>original $50.00; <font color="#FF0000">now $34.99</font></b></font>')" onmouseover="MM_showHideLayers('lay1xDA','','show','lay2xDA','','show','lay3xDA','','show','apDiv3','','hide','apDiv3m','','show','apDiv3pt','','hide','apDiv3pl','','hide')" onmouseout="MM_showHideLayers('lay1xDA','','hide','lay2xDA','','hide','lay3xDA','','hide','apDiv3','','show','apDiv3m','','hide','apDiv3pt','','hide','apDiv3pl','','hide')" /></a><a href="#Here"><img src="images/X6_sizerangePetites_EA.gif" name="petites" class="options" id="petites" onclick="MM_swapImage('petites','','images/X6_sizerangePetites_ON.gif','xl','','images/X6_size_xlarge_DA.jpg','1x','','images/X6_size_1x_DA.jpg','2x','','images/X6_size_2x_DA.jpg','3x','','images/X6_size_3x_DA.jpg',1);MM_setTextOfLayer('apDiv5','','<font size="2" color="#666666"><b>original $50.00; <font color="#FF0000">now $34.99</font></b></font>');MM_setTextOfLayer('apDiv3','','petites')" onmouseover="MM_showHideLayers('lay1xDA','','show','lay2xDA','','show','lay3xDA','','show','layxlgDA','','show','apDiv3','','hide','apDiv3m','','hide','apDiv3pt','','show','apDiv3pl','','hide')" onmouseout="MM_showHideLayers('lay1xDA','','hide','lay2xDA','','hide','lay3xDA','','hide','layxlgDA','','hide','apDiv3','','show','apDiv3m','','hide','apDiv3pt','','hide','apDiv3pl','','hide')"/></a>
<a href="#Here"><img src="images/X6_sizerangePlus_EA.gif" name="plus" class="options" id="plus" onclick="MM_swapImage('blackcardigan','','images/B2_cardigangray.jpg','cardblack','','images/swatch_cardiganblack_DA.gif','plus','','images/X6_sizerangePlus_ON.gif','sm','','images/X6_size_small_DA.gif','m','','images/X6_size_medium_DA.jpg','lg','','images/X6_size_large_DA.jpg','2x','','images/X6_size_2x_DA.jpg',1);MM_setTextOfLayer('apDiv5','','<font size="2" color="#666666"><b>original $54.00; <font color="#FF0000">now $39.99</font></b></font>');MM_setTextOfLayer('apDiv3','','plus')" onmouseover="MM_showHideLayers('lay2xDA','','show','laylgDA','','show','laycardblackDA','','show','laysmDA','','show','laymDA','','show','apDiv3','','hide','apDiv3m','','hide','apDiv3pt','','hide','apDiv3pl','','show')" onmouseout="MM_showHideLayers('lay2xDA','','hide','laylgDA','','hide','laycardblackDA','','hide','laysmDA','','hide','laymDA','','hide','apDiv3','','show','apDiv3m','','hide','apDiv3pt','','hide','apDiv3pl','','hide')"/></a></div>
Am I asking too much? Is there anyone out there can help me with this? I only know basic javascript, this is way out of my league! Thank you MC |
|||||||