I was writing a html code and I wanted to close all the code it into a single div. When I placed it into a single div, it gave me an error that my markup is invalid (showing that the closing div tag is invalid.) Now I am amazed how can it be invalid. Please help me out. Thanks
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<iframe width="350" height="350" src="http://www.youtube.com/embed/P3weDRMemD8" frameborder="0" allowfullscreen></iframe>
<form style="border:3px;text align.center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit= "window.open('http://feedburner.google.com/fb/a/mailverify?uri=financeyoga/UPqT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" style="width:140px;padding:10px;" name="email"/>
<input type="hidden" value="financeyoga/UPqT" name="uri"/>
<input type="hidden" name="loc" value="en_US"/><br>
<input style="padding:10px;" type="submit" value="Submit Email Address" />
<img style="position:relative;top:325px; left:10px;" src="http://financeyoga.com/wp-content/uploads/2012/05/follow.png" width="143" height="64" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="5,18,33,44" href="www.twitter.com" target="_blank" alt="twitter">
<area shape="rect" coords="57,16,87,46" href="www.facebook.com" target="_blank" alt="facebook">
<area shape="rect" coords="107,16,137,46" href="plus.google.com" target="_blank" alt="google plus">
</map>
</div>
</body>
</html>
You haven't closed your form tag.
It seems like it is missing </form> tag.
Related
Top.html
<!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>
<title>Top Page</title>
</head>
<body bgcolor="yellow">
<table border="0" width="100%">
<tr>
<td align="center" bgcolor="white">
<img src="./Img/Logo.jpg" alt="logo" />
</td>
<td align="center" bgcolor="white">
<h1 style="color: blue">Web Client Development</h1>
</td>
<td bgcolor="white" style="width: 500px; text-align: center">
<p>
<!-- <a href="./Forms/Pages/inputform.html" target="Content_Frame"
>User <br />
Logon</a
> -->
<a href="./Forms/Pages/userLogonForm.html" target=""
>User <br />
Logon</a
>
</p>
</td>
</tr>
</table>
</body>
</html>
In that 'user logon' area I want to open a UserLogon.html which goes like
UserLogon.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Logon Form</title>
<script type="text/javascript">
function submitCredentials() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert("Username: " + username + "\nPassword: " + password);
}
function resetCredentials() {
document.getElementById("userLogonForm").reset();
}
</script>
</head>
<body>
<form action="" id="userLogonForm">
<label for="username">Username : </label>
<input
type="text"
id="username"
name="username"
placeholder="Enter Username"
/>
<br /><br />
<label for="password">Password : </label>
<input
type="password"
id="password"
name="password"
placeholder="Enter Password"
/><br /><br />
<button type="button" onclick="submitCredentials()">Submit</button>
<button
type="button"
onclick="resetCredentials()"
style="margin-left: 100px"
>
Reset
</button>
</form>
</body>
</html>
My Top.html has three sections of <td> , One has a logo image, second one has a normal heading, the third is where I want to display my form which asks for username and password (UserLogon.html)
The problem is when I click on User Logon area it expands my UserLogon.html page for the entire area (I guess all three <td>), whereas I want to display that UserLogon.html form in my third <td> tag only. How do I keep the size fixed to that particular <td> only
Note: For the whole website I am using framesets
I am working on my portfolio right now and therefore I want to include several slideshows which are controlled via keyboard. I am working with this code right now and the slideshow works fine. My problem is now that both slideshows are selected at the same time and not only the one which is visible on screen.
How do I activate / deactivate the slideshow which the user sees?
<!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></title>
<style type="text/css">
#SS {
position:relative;
margin-left: auto;
margin-right: auto;
top:100px;
width:600px;
height:600px;
}
#SS2 {
position:relative;
margin-left: auto;
margin-right: auto;
top:100px;
width:600px;
height:600px;
}
</style></head>
<body>
<input type="button" name="" value="Back" onmouseup="Slideshow.next('SS',-1);" />
<input type="button" name="" value="Next" onmouseup="Slideshow.next('SS',1);" />
<div id="SS" >
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_01.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_04.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_05.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_06.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_07.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_08.jpg" class="thumb" />
</div>
<input type="button" name="" value="Back" onmouseup="Slideshow.next('SS2',-1);" />
<input type="button" name="" value="Next" onmouseup="Slideshow.next('SS2',1);" />
<div id="SS2" >
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_01.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_04.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_05.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_06.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_07.jpg" class="thumb" />
<br />
<img width="600" height="600" src="http://www.ignant.de/wp-content/uploads/2014/04/Witchoria_Landscapes_08.jpg" class="thumb" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
var Slideshow={
init:function(id){
var obj=document.getElementById(id),imgs=obj.getElementsByTagName('IMG'),z0=0,clone;
Slideshow[id]={};
Slideshow[id].obj=obj;
Slideshow[id].ary=[];
Slideshow[id].cnt=0;
for (;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.left=(z0>0?-3000:(obj.offsetWidth-imgs[z0].width)/2)+'px';
imgs[z0].style.top=(obj.offsetHeight-imgs[z0].height)/2+'px';
clone=document.createElement('IMG');
clone.src=imgs[z0].src;
clone.style.position='absolute';
clone.style.zIndex='101';
clone.style.left='-3000px';
document.body.appendChild(clone);
Slideshow[id].ary[z0]=[imgs[z0],clone];
// Slideshow.addevt(imgs[z0],'mouseover','pop',id,z0);
Slideshow.addevt(clone,'mouseout','hide');
}
Slideshow.addevt(document,'keyup','keycode',id);
Slideshow.lst=clone;
},
next:function(id,ud){
Slideshow.hide();
var oop=Slideshow[id],obj=oop.obj,cnt=oop.cnt+ud,lgth=oop.ary.length-1,img;
oop.ary[oop.cnt][0].style.left='-3000px';
cnt=cnt<0?lgth:cnt==lgth?0:cnt;
img=oop.ary[cnt][0];
img.style.left=(obj.offsetWidth-img.width)/2+'px';
img.style.top=(obj.offsetHeight-img.height)/2+'px';
oop.cnt=cnt;
},
keycode:function(id,nu,e){
Slideshow.hide();
var kk;
if (e.which){
kk=e.which;
}
else {
kk=e.keyCode;
}
if (kk==37||kk==39){
Slideshow.next(id,kk==37?-1:1);
}
},
pop:function(id,nu){
Slideshow.hide();
var oop=Slideshow[id],pos=Slideshow.pos(oop.obj),clone=oop.ary[nu][1];
clone.style.left=(oop.obj.offsetWidth-clone.width)/2+pos[0]+'px';
clone.style.top=(oop.obj.offsetHeight-clone.height)/2+pos[1]+'px';
Slideshow.lst=clone;
},
hide:function(){
Slideshow.lst.style.left='-3000px';
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,id,p){
if (o.addEventListener) o.addEventListener(t,function(e){ return Slideshow[f](id,p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return Slideshow[f](id,p,e); });
}
}
Slideshow.init('SS')
Slideshow.init('SS2')
/*]]>*/
</script></body>
</html>
I want to have a textbox in my HTML page, and also an iframe. When the user types in a URL in the textbox and clicks Submit, the iframe navigates to that page. Is it possible?
Its very simple using jquery single line 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" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="application/javascript">
function navigate() {
$('#iframe1').attr('src', $('#ifrmsite').val());
return false;
}
</script></head>
<body>
Enter website url below:<br/>
<form onSubmit="return navigate();" method="get" action="">
<input type="text" value="http://www.w3schools.com/" name="ifrmSite" id="ifrmsite"/>
<input type="submit" value="Submit">
</form>
<br /><br />
<iframe name="iframe1" id="iframe1" src="" width="600" height="700" scrolling="auto">
</iframe>
</body>
</html>
If you don't want to use jquery:
<script type="application/javascript">
function submitStuff(){
document.getElementById('iFrame').src = 'http://' + document.theForm.url.value;
return false ;
}
</script>
<form name="theForm" method="post" onsubmit="return submitStuff();">
<input name="url" value="">
<input type="submit" name="submitButton" value="Submit">
</form>
<iframe id="iFrame" src="http://www.default.com"></iframe>
Can any one tell me whats wrong with the following code..
managerhomepage.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<frameset row="20%,80%">
<frame src="managerhomepage.jsp">
<frame src="signup.html">
</frameset>
</body>
</html>
managerhomepage.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ManagerHomePage</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<% String[] name={"Raviteja","Pramod","Aadinarayana","Anusha","Ramireddy","Surendhra","Rajesh","Aruna"};%>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<h1>MANAGER'S HOME PAGE</h1>
Select a SalesPerson from here <select name="salespersons">
<option></option>
<% for(int i=0;i<name.length;i++){
%><option><%=name[i]%></option><%
}%>
</select>
<input type="button" value="OK"/>
</center>
</body>
</html>
signup.html
<html>
<head>
<title>SIGNUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<div>
<h1>SIGNUP FORM</h1>
<form action="managerhomepage.html">
<table>
<tr><td>FIRST NAME</td><td><input type="text" name="fname" size="50"/></td></tr>
<tr><td>LAST NAME</td><td><input type="text" name="sname" size="50"/></td></tr>
<tr><td>DESIRED LOGIN NAME</td><td><input type="text" name="login" size="50"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" name="pwd" size="50"/></td></tr>
<tr><td>RE-TYPE PASSWORD</td><td><input type="password" name="repwd" size="50"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gender" value="Male"/>Male<input type="radio" name="gender" value="FeMale"/>Female</td></tr>
<tr><td>DATE OF BIRTH</td><td><form name="tstest">
<input type="text" readonly size="47" name="timestamp" value="">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</form></td></tr>
<tr><td>MAIL ID</td><td><input type="text" name="mail1" size="30">#<input type="text" name="mail2" size="11"></td></tr>
<tr><td>EMPLOYEE ID</td><td><input type="text" name="eid" size="50"></td></tr>
<tr><td>TYPE OF USER</td><td><input type="radio" name="manager"/>Manager<input type="radio" name="seniormanager"/>SeniorManager</td></td></tr>
<tr><td>ADDRESS</td><td><textarea rows="9" cols="40"></textarea></td></tr>
<tr><td>MOBILE NUMBER</td><td><input type="text" size="50" name="mobile"></td></tr>
<tr><td></td><td><input type="SUBMIT" name="submit" value="SUBMIT"> <input type="button" name="cancel" value="CANCEL"/></td></tr>
</table>
</div>
</form>
</br><div>Designed by:STUDY CENTER</div>
</div>
</center>
</body>
frameset is used instead of body, not inside it.
The attribute is rows, not row.
Validating would have told you this.
A frameset is used to establish a BODY, and should not be used inside of one.
Plus: You don't have a BASE target="" in your framed pages head(s).
And DIVS can be used to establish what you are trying to acheive, but referencing them can become complex quickly.
Also, naming your frames makes them much easier to deal with, and I see you've left their name references out of their declarations. There was alot of frameset debate when it was standardized, and if you are a professional author, I would suggest reading some of that information so you can see the advantages and disadvantages of framesets.
Now, with that being said, I would offer this suggestion:
IFRAME might work for you in this case, but because of the resourses and load times, esp. with building data tables, I would suggest another approach.
Hi got a simple frame problem. I have 2 frames a top and a bottom frame. A html file opens in the top frame(final.html) and a php file in the bottom frame(final.php)
When i enter data it the top frame it should post to the bottom frame but it doesnt. It just loads final.php in the top frame with the search results.
The frame html code follows:
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET rows="50, 100">
<FRAME src="final.html">
<Frame src="final.php">
</FRAMESET>
<NOFRAMES>
<P>This frameset document contains:
</NOFRAMES>
</FRAMESET>
</HTML>
Final.html coding:
<html>
<head>
<title>Search</title>
</head>
<body>
<h1>Database search</h1>
<form action="final.php" method="post">
Choose Search Type:<br />
<select name="searchtype">
<option value="pdb_code">PDB Code</option>
<option value="smile_string">Smile String</option>
</select>
<br />
Select Operator Type:<br />
<select name="operator">
<option value="LIKE">Contains</option>
<option value="=">=</option>
</select>
<br />
Enter Search Term:<br />
<input name="searchterm" type=""text" size="40"/>
<br />
<input type="submit" name="submit" value="Search"/>
</form>
</body>
</html>
You need to give the frame a name and then target it in your form.
To illustrate David's answer, use this code for your frameset :
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET rows="50, 100">
<FRAME src="final.html" name="top">
<Frame src="final.php" name="bottom">
</FRAMESET>
<NOFRAMES>
<P>This frameset document contains:
</NOFRAMES>
</FRAMESET>
</HTML>
And this code for final.html:
<html>
<head>
<title>Search</title>
</head>
<body>
<h1>Database search</h1>
<form action="final.php" method="post" target="bottom">
Choose Search Type:<br />
<select name="searchtype">
<option value="pdb_code">PDB Code</option>
<option value="smile_string">Smile String</option>
</select>
<br />
Select Operator Type:<br />
<select name="operator">
<option value="LIKE">Contains</option>
<option value="=">=</option>
</select>
<br />
Enter Search Term:<br />
<input name="searchterm" type=""text" size="40"/>
<br />
<input type="submit" name="submit" value="Search"/>
</form>
</body>
</html>