HTML - Submit Button Doesn't Work When Using Frames ( Co.cc)
Hi!
I have created a simple site that I uploaded on freespacia.com and then used co.cc to give it a shorter name. I have a form on my site, on the first page. When I load the site directly from freespacia the submit button works, but when I access the site on .co.cc, the submit button does not work. What could be the problem? Similar TutorialsIs there code that can detect when your page is being embedded and kill the frame? Could someone help me with this? When I click on "Log in" after entering Password (12345) it change only "Main Page 1" to "Main Page 2" , I want to change "Column 1" to "Column 2" at the same time too. What should I do? The following are just sample to take a look. Thanks so much. frames.htm HTML Code: <html> <head> <title>Frames</title> </head> <frameset rows="21%,*"> <frame src="top.htm" name="top.htm"> <frameset cols="10%,*"> <frame src="menu1.htm" name="menuarea"> <frame src="logininter.htm" name="pages"> </frameset> </frameset> </html> top.htm HTML Code: <html> <head> <title>Top Frame</title> </head> <body> <h1 align="center">Top Frame</h1> </body> </html> menu1.htm HTML Code: <html> <head> <title>Menu</title> <body> <h1>Column 1</h1> <table> <tr> <td> <a href="menu2.htm" onClick='parent.pages.location.href="logininter.htm"' target="menuarea">Log in</a></td> </tr> <tr> <td><a href="" >Guest</a></td> </tr> </table> </body> </head> </html> menu2.htm HTML Code: <html> <head> <title>Menu</title> <body> <h1>Column 2</h1> <table> <tr> <td><a href="">Message</a></td> </tr> <tr> <td><a href="" >Timetable</a></td> </tr> <tr> <td><a href="" >Appointment</a></td> </tr> <tr> <td><a href="" >Log out</a></td> </tr> </table> </body> </head> </html> logininter.htm HTML Code: <html> <head> <title>Main Page</title> <script type="text/javascript"> function validatePwd(theform){ if(theform.username.value==""){ alert("Please enter user ID") theform.username.focus() return false } else if(theform.passwd.value==""){ alert("Please enter a password") theform.passwd.focus() return false } else if(theform.passwd.value !=12345){ alert("Password incorrect") theform.passwd.focus() theform.passwd.select() return false } return true } </script> </head> <body> <h1>Main Page 1</h1> <form onsubmit="return validatePwd(this);" id="loginform" action="homepage.htm"> <fieldset> <legend>Log in</legend> <p>Please enter your User ID and Password to access</p> <label for="username">User ID:<input type="text" name="username" id="username" tabindex="1"></label> <label for="passwd">Password:<input type="password" name="passwd" id="passwd" tabindex="2"></label> <label for="submit"> <input type="submit" class="submit" value="Log in"/></label> <label for="reset"> <input type="reset" class="reset" value="Reset" /></label> </fieldset> </form> </body> </html> hompage.htm HTML Code: <html> <head> <title>Home Page</title> </head> <body> <h1>Main Page 2</h1> <div> <p>* Option 1</p> <p>* To Option 2</p> <p>* To Option 3</p> </div> </body> </html> I'm having a really weird problem with a standard submit button I'm trying to create. When I preview the site (GoLive CS3) the button doesn't always 'click' or 'depress' down. I can't figure out what is causing this. Anyone here ever seen this happen? I am creating a website that has a search button with an image. I would like to know if there is some simple code that I can include that would display the same basic image with a different color when the user mouses over the button. Here is the code: <FORM name="searchform" onSubmit="return validateSearch();" METHOD="POST" ACTION="search_results_lt.asp"> <INPUT TYPE="text" NAME="Search" VALUE="" SIZE="20" > <INPUT TYPE=IMAGE SRC="images/search_button.gif" Name="SearchButton" Value="Submit"> </FORM> **** Thanks for your help, Robin Oye, I am trying to complete this teeny photo album I've been working on ... and I just about completed .. when I tested the Site in various browsers (mozilla, Explorer 8, Safari, Google Chrome) ... i noticed one of the frames is not showing in Google Chrome. How odd? here is the site: xxx There are three teeny shaded squares in a frame that is designated a height of 70 pixels and a width of i believe 100% ... it is visible on Mozilla, Explorer, Safari ... any ideas? is my source code screwy? Thanks! Hi all, I have a page which contains two frames, on the left frame i have hyperlinks which when clicked show pages corrseponding to those links in right frame.(basically its a navigational frame). But i have the following problem. of all the links i want to change one link to a button. that is when i click the button a apge corresponding to that must be displayed in right frame. But its not displaying in the right frame rather its dispalying in the left frame itself. <button type="submit" ONCLICK="window.location.href='mypage.html'" target="showframe">ClickMe</button> I am building this intranet for our employees at work. I am not a programmer, nor anykind of web professional, and I'm building this as an amateur. I have very basic knowledge of HTML and a bit of CSS, and that's pretty much it. Once the thing is ready to be released, it will have to be updated on a regular basis, and by people whose background and function have nothing to do with scripting (in fact, I cannot take care of it myself all the time since I'm leaving for Europe soon). Therefore, I resigned to using MS Word 2007 as the html editor, since it's the only software anyone can usen here to update the files without having to learn how to code (I haven't found any freeware that didn't require prior html knowledge and the company will not pay for a software liscence of any kind). I know MS word is basically the worst thing one can use to build a website, but I couldn't find any better for this scenario. Now I'm encountering a bit of a problem with the website, specifically with frames. The website (which is a frameset) is divided in two sections: a menu on the left (frame_menu), which is static should remain there all the time, and a frame to the right (frame_main) displaying the pages contents. Now, when a user clicks on a link in frame_menu, the content (page A) displays in frame_main, which is what I want. Then if someone clicks on a link in the page A in frame_main that links to another page (page B), it will open gain in frame_main, replacing the page A that was there. So far, this is the behavior I want, and the frame properties were set for this. The problem comes when the back button is used. If you are on page B, and then click the back button, you will come back to page A, in frame_main (so far still good), but any subsequent link the user will click after using the back button, whether it's a link in frame_menu or frame_main, will open in a new window, even though the default for opening links of the frame is set to frame_main as the target! This renders the frameset completely useless, and the whole frameset has to be closed and reloaded to function properly again. I know frames are deprecated. The only alternative I have found was to use CSS to simulate frames. However, from what I have read (and tell me if I am mistaken), it only simulates the fact that you have a "fixed" menu on every page, but the menu is NOT a separate html file, and has to be part of every page on the website. This makes the updating of the menu very tedious, as it has to be changed on every page of the website, were an item to be added to it. This is why I used frames to begin with: no need to update every page to add something to your menu, just update the menu.html file and voila. So I would like to know if you have any workaround for this problem. Any suggestion is appreciated. This was all tested with IE8. It's the only browser provided to the employees, I cannot use another one. This is part of the code (generated by MS Word of course) that contains the frametset <frameset framespacing=0 frameborder=0 border=0 cols="215,1*"> <frame name="frame_menu" src="file:///\\sv050\GROUPS\AGT\AGT-CDS\AGT-CDS-CR\helper\html\menu.htm" scrolling=no> <frame name="frame_main" src="file:///\\sv050\GROUPS\AGT\AGT-CDS\AGT-CDS-CR\helper\html\home.htm"> <noframes> <body lang=EN-US style='tab-interval:36.0pt'> <div class=WordSection1> <p class=MsoNormal style='margin-bottom:10.0pt;line-height:115%'><span style='font-size:11.0pt;line-height:115%'>This page uses frames, but your browser doesn't support them.<o:p></o:p></span></p> </div> </body> </noframes> </frameset> If the entire script of the frameset.html is needed, tell me and I'll post it. Thanks in advance, Guill Hi, I need help I tried to check the code of my website it works perfectly well in google chrome and firefox but not in Internet explorer. i tried your suggestions but still it doesn't work. After the "marital status" and "sex" are selected, I want to assign a default value to the "Title" field. I think I am calling the function DefaultTitle incorrectly because I am not even seeing the initial alert box. Any suggestions? function DefaultTitle(strng,x) { alert("Checking Title."); var Sex=documet.PatientEntry.personal_sex.value; var MaritalStatus=strng; if (Sex=="Female" && MaritalStatus=="Married") {document.PatientEntry.personal_Title.value="Mrs."; HighlightWhite(x); Return; } if (Sex=="Male") {docment.PatientEntry.personal_Title.value="Mr."; HighlightWhite(x); Return; } if (Sex=="Female" && MaritalStatus=="Single") {document.PatientEntry.personal_Title.value="Miss"; HighlightWhite(x); Return; } if (Sex=="Female") {document.PatientEntry.personal_Title.value="Ms."; HighlightWhite(x); Return; } } Sex: <SELECT name="personal_sex" id="personal_sex" tabindex=7> <OPTION>Male</OPTION> <OPTION>Female</OPTION> </SELECT> Marital status: <SELECT name="personal_MaritalStatus" id="personal_MaritalStatus" onmouseout="DefaultTitle(this.value,this.id)" tabindex=8> <OPTION>Married</OPTION> <OPTION>Single</OPTION> <OPTION>Separated</OPTION> <OPTION>Divorced</OPTION> <OPTION>Widow(er)</OPTION> </SELECT> Title: <SELECT name=personal_Title tabindex=9> <OPTION>Mr.</OPTION> <OPTION>Mrs.</OPTION> <OPTION>Ms.</OPTION> <OPTION>Miss</OPTION> <OPTION>Dr.</OPTION> </SELECT><BR> I'm completely baffled. I have a contact form on this website: http://www.waldronforest.com/ that works just fine when I test it in FireFox, but when I try to use it in internet explorer I can't even click on the fields. Anyone have any idea why? Thanks! EDIT: I fixed it all! I just had unnecessary table indications. duuuhhhh. Hopefully my fix will help someone else with the same problem, though? Hi everyone! I am new here, so please bear with me! I found a few posts about this, but none seemed to fix my problem. First off, my website is he http://www.ashleywilliamsflute.com My problem is that the banner on top is set to be at 65% width. This works great in firefox and safari, but the image won't resize in IE. So, I tried using a css tag, too, and that didn't work. Here's the code I have: Code: <!DOCTYPE html> <html> <head> <title>Ashley Williams: Flutist</title> <body bgcolor="#000000"> <style type="text/css"> A:link {background: #000000; font-weight: bold; text-decoration: none; color: #c4eaef; letter-spacing: 3px;} A:visited {background: #000000; font-weight: bold; text-decoration: none; color: #c4eaef; letter-spacing: 3px;} A:active {background: #c4eaef; font-weight: bold; text-decoration: none; color: #000000; letter-spacing: 3px;} A:hover {background: #c4eaef; font-weight: bold; text-decoration: none; color: #000000; letter-spacing: 3px;} h2 {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: #c4eaef; } p {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: #f1ebf1; size: 11pt; letter-spacing: 2px; line-height: 20pt; strong: 15pt; text-align: justify; margin-left: 25%; margin-right: 25%; text-indent: 30px; } #banner { float:center; width:65%; } </style> </head> <body> <div align="center" width=65%> <table border="0" width=65%> <tr> <img id="banner" src="topbanner.jpg" width=65%> </tr> </div> <tr> <h2> <div align=center width=65% style="background-color: "#000000"> | <a href="index.html"> HOME </a> | <a href="resume.html"> RESUME </a> | <a href="teaching.html"> TEACHING </a> | <a href="replist.html"> REPERTOIRE LIST </a> | <a href="programs.html"> PROGRAMS </a> | <a href="art.html"> ART </a> | <a href="contact.html"> CONTACT </a> | <a href="links.html"> LINKS </a> | </div> </h2> </tr> <P> IE also doesn't use my text settings, like the margins I chose. I'm not sure how to fix this. I used to make websites a lot, but haven't in a few years, not since CSS was just starting to be popular, and I feel quite lost! I hope someone will be able to help me-you all seem very knowledgeable and helpful so I will cross my fingers. Thanks a lot, everyone! -Ashley Okay, I received some pictures from a fashion designer to use for her Web site. I first tested the code by using a different image that I found on Google and it worked. However, when I used her image it was broken. The next option I tried was I used my photobucket account and make an HTML reference to the image. Even when I upload it to photobucket it gives me an error. So...I don't know if it's still my problem or possibly she gave me the wrong product. The images were .jpg. Here's the image code I tried: <img src="/pictures/ct1.jpg"/> If it's not the code, then what can I do to make sure she gives me pictures that work? Okay I have tested the following code in all browsers and IE is the only one that it doesn't work for for .html pages. It does work for .asp pages though. I do not want to use iframes. Any suggestions? <object type="text/html" height="100%" width="100%" data="http://www.websitename.com"> </object> I made two style sheets for my project. First one is style.css, and the scond one is ie6.css which is intentionally left blank. This latter (ie6.css) is, ofcourse, made specialy for IE6 and in HTML head section I put
Code: <!--[if lt IE 7.0]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> I can't realise what's wrong, since when I preview site in IE6 it acts like conditional statement is not there. It should display page with no style, but still the page is displayed with style.css styling. You can check it out on: http://www.byethost.com/ for page is very simple. Thank's in advance! Hey all, I just heard from a visitor of my page http://www.randypauschsubtitles.de that the page doesn't work in IE and does only display the top frame with the title of the page. As a Firefox user, this problem is new to me. Unfortunately, I created the page with Dreamweaver/Frontpage and don't know much about HTML etc. What can I change to make my page work in IE too? Thanks for your help! I have this code in my website: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>PinkuHaruKoneko</title> </head> <body text="#ffffff"> <font face="arial"> <style> <!-- A{height:1px;behavior:url(linkhilight.htc);filter:progid:dximagetransform.microsoft.gradientwipe duration=1)} A:link { text-decoration: none; color:#ffffff;} A:visited { text-decoration: none; color:#ffffff; } A:hover { text-decoration:line-through; cursor: crosshair; color:#ffffff;} body { scrollbar-arrow-color: #CEE0F6; scrollbar-darkshadow-color: #090E3C; scrollbar-track-color:#090E3C; scrollbar-face-color: #275674; scrollbar-shadow-color:#CEE0F6; scrollbar-highlight-color:#CEE0F6; scrollbar-3dlight-color: #090E3C; text-align:justify} h1 { border: 1px solid #000000; background-color:#0000ff; font-size:14px; text-align:center; } --> </style> With that code, text align justify -elements doesn't work and h1 doesn't work at IE. If I take away that thing before <html>, it works but in IE bg isn't transparent anymore. Is there anything what I can replace that doctype-thing and get that code work in Mozilla and IE? Hi Guys, I hope someone can help me out with this. I have a salespage at: http://www.conqueryourpart3.com I want to add a countdown timer to the top of this salespage. I have designed it and it works fine he http://www.conqueryourpart3.com/countdown1.htm I have copied the code from the countdown timer page and inserted it at the top of my salespage. However, the countdown timer doesn't work, it's no longer in the middle of the page and the text lower down the page now goes too close to the margins! See he http://www.conqueryourpart3.com/combined.htm Can anyone help me with this as I can't figure out what I've done wrong. Thanks, Simon I am using firefox version 3.0. I want to update it but i facing one problem after updating. I want to use some google toolbar but updated version doesn't sport it. Some one help me in this problem. Hi all, Before I pour cold water onto Mozilla's FireFox to melt it's flames and kill it, I've a question : Quote: <!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" xml:lang="en" lang="en"> <head> <title>Tables 14</title> </head> <body> <table border="1" width="80%"> <colgroup span="3" align="right" /> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </table> </body> </html> As you can see, there's 3 columns and I'm using <colgroup span..../> to mass-align the cells to the right. However, when I preview it in FireFox, there's no effect. In Internet Explorer, the cells are right-aligned(which is correct). I also tried doing the CSS equivalent, but FireFox still fails. When I tried changing some other settings, like : <colgroup span="3" style="background-color:red;" />, FireFox renders the code correctly. Seems that FireFox doesn't like to right-align text in columns, eh? Thanks! Xeon. Hi guyz, I have created my first site for a school project. The site has been validated, does work properly on IE but it doen't work well in FF. Please have a look and try to find out the errors. Thanks, the html code is: HTML Code: <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="en" lang="en"> <head><link rel= "stylesheet" type="text/css" href="external.css" /> <title>Business Environment Study Support</title> </head> <body> <div id="header"> <h1><img src="logo3.jpg" alt="" /></h1> </div> <div id="mainmain"> <div id="navcontainer"> <ul id="navlist"> <li><a href="lessonone.html">lesson one</a></li> <li><a href="#">Topic name I</a></li> <li><a href="#">Topic name II</a></li> <li><a href="#">Topic name II</a></li> <li><a href="#">Topic name IV</a></li> <li><a href="#">Topic name IV</a></li> </ul> </div> <!--main navigation menu elements--> <div id="bannerbox"> <p><a href="http://www.independent.co.uk/" target="_blank"><img src="independent.jpg" alt="The Independent Magazine"/></a></p> <p><a href="http://http://www.bton.ac.uk/" target="_blank"><img src="brighton-logo.jpg" alt="University of Brighton"/></a></p> <p><a href="http://www.theguardian.co.uk/" target="_blank"><img src="guardian-logo.jpg" alt="The Guardian"/></a></p> <p><a href="https://studentcentral.brighton.ac.uk/" target="_blank"><img src="studentlogo.jpg" alt="Blackboard"/></a></p> </div> <!-- right side banners--> <div id="mainbody"> <h3>Lore Ipsum</h3> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p><p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <br /> <p><a href="index.html" target="_top">-top-</a></p> </div> <!-- main body elements--> </div> <div id="footr"> <div id="footer"> <ul id="navilist"> <li><a href="mailto:o.szotyori@brighton.ac.uk?cc=dn36@brighton.ac.uk">contact Us</a></li> <li><a href="#">about the project</a></li> <li>made by: Dumiso and Oliver</li> <li>December, 2009</li> </ul> </div> <div id="w3valid"> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p> <!-- shows current validation of the homepage--> </div> </div> <!-- the footer is separated from the main body so it can be manipulated separety--> </body> </html> and the CSS code is: Code: body {background-color: #CCCCCC;} /* this sets up the background of the page */ h3 { font-family: verdana; color: #FF6600; } p { font-family: verdana; color: #000000; font-size: 12px;} /* these set up the font families of the header and paragraph behavors */ a {text-decoration:none; font-family: verdana;} a:link {color: #FF6600} a:visited {color: #993300} a:hover {color: #FF6600; font-weight: bold;} a img {border: 0;} /* these set up the font families of the links behavors */ #header{ width: 800px; height: 200px; text-align: center; margin: auto; padding-bottom: 5px; } #mainmain{ background-color: #ffffff; text-align: center; width: 1024px; margin: auto; border-bottom: 2px solid #FF6600; } #navcontainer ul { text-align: center; margin: auto; background-color: #FF6600; color: White; float: left; width: 1024px; font-size: 11px; } #navcontainer ul li { display: inline; } #navcontainer ul li a { padding: 0.2em 1.5em; background-color: #FF6600; color: #CCCCCC; font-weight: bold; text-decoration: none; float: left; border-right: 1px solid #fff; } #navcontainer ul li a:hover { background-color: #993300; color: #CCCCCC; font-weight: bold; } #bannerbox{ float: right; margin-top: 60px; min-height: 700px; min-width: 180px; text-align: center; } #mainbody{ float: left; padding: 20px; width: 804px; min-height: 700px; margin-top: 20px; background-color: white; } #footer{ position: relative; float: left; height: 20px; overflow: hidden; width: 500px; } #navilist{ list-style-type: none; margin: 0; padding: 0; } #navilist li{ border-left: 1px solid #000; float: left; line-height: 1.1em; margin: 0 .5em 0 -.5em; padding: 0 .5em 0 .5em; font-size: small; color: #FF6600; } #w3valid{ float: right; position: relative; width: 88px; height: 31px; } #footr{ text-align:center; width: 1024px; margin: auto; padding-top:10px; } |