I know frames has been outdated, but has i have to do my homework through frames only.
Can anyone please check what's wrong in this code?
Main Web page :-
<!DOCTYPE html>
<html>
<head>
<title>FFCS- Student Login</title>
<frameset rows="25%,70%,5%">
<frame name="banner" src="sh.html"/>
<frameset cols="21%,79%">
<frame src="f1.html"/>
<frame src="f2.html"/>
</frameset>
<frame src="pr.html"/>
</frameset>
<script>
var nAme=prompt("Enter your name: ");
var regno=prompt("Enter your Register No: ");
window.frames["frame_name"].document.getElementById("naa").innerHTML = nAme;
window.frames["frame_name"].document.getElementById("regno").innerHTML = regno;
</script>
</head>
<html>
sh.html [frame name=banner] :-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{margin: 0}
</style>
<head>
<body>
<table id="id1" background="banner_bg3.jpg" width="100%" height="15%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="25%"><img src="vit_logo6.jpg" alt="logo"></td>
<td align=center>
<font size=5 color=#FFFFFF face="Comic Sans MS">
<b>V-TOP</b><br>Student Login</td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 border=0 width="100%" height="2%" bgcolor=#000000 align="center">
<td align=left width="41%">
<font face=verdana color=#FFFFFF size=2>
Welcome <b id="naa" style="color:white;">Adhik N A</b> - <b id="regno" style="color:white;">15BIT0169</b> - SITE
</font>
</td>
<td align=center width="23%">
<font color='#FFFFFF'><b>Logout</b></font></a>
</td>
<td align=right width="36%">
<font face=verdana color=#FFFFFF size=2><p id="demo"></p>
<script>document.getElementById("demo").innerHTML=Date();</script></font>
</td>
</table>
<table width="100%">
<tr>
<td rowspan="
<iframe src="f2.html"></iframe>
</body>
</html>
Am i accessing the frame's documents in the right way ?
If I'm guessing correctly (you don't say what goes wrong exactly)
You can't access an element in a frame from the parent document.
Solution: move the JavaScript routine into the frame.
i'm doing a webapplication for android and iOS
i'm resizing every object in my html file by Javascript
but there's a problem, the first table it's perfect
but when i copy it down the image of the second table doesn't resize, can you help me please?
this is the site
http://bestparty.altervista.org/IOS/IOS/eventi.php
this is .JS file
$(document).ready(function() {
$("body").css("height", ((($(window).height() * 100) / 100)));
$("#evntfoto").css("height", ((($(window).height() * 20) / 100)));
$("#evntfoto").css("width", ((($(window).width() * 40) / 100)));
document.ontouchstart = function(e) {
e.preventDefault();
};
});
and this is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="True" name="HandheldFriendly">
<meta content="on" http-equiv="cleartype">
<link href="css/stile.css" rel="stylesheet" type="text/css">
<meta content="width=320, initial-scale=0.7, user-scalable=no" name=
"viewport">
<script src="JS/jquery-1.11.1.js.js"></script><!--PER EVENTI-->
<script src="JS/func.js"></script><!--PER EVENTI-->
<title>BParty</title>
</head>
<body>
<div id="navigation">
<table width="100%">
<tr valign="middle">
<td align="center" valign="middle" width="25%"><</td>
<td align="center" valign="middle" width="50%">BPARTY</td>
<td align="center" width="25%">></td>
</tr>
</table>
</div>
<div id="evntprg">
EVENTI IN PROGRAMMA
</div>
<div id="container" style="overflow:scroll;">
<div style=
"width:90%; display:block; margin:0 auto; padding-top:10px; margin-top:10px; padding-left:10px; background-color:#FFF; padding-bottom:10px;">
<table width="100%">
<tr valign="middle">
<td align="center" id="evntfoto" style=
"background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
valign="middle"></td>
<td align="left" id="evnttxt" valign="top">
<b>Fnky carnival</b><br>
Sabato 21 Febbraio<br>
Nikita<br></td>
</tr>
</table>
<table width="100%">
<tr valign="middle">
<td align="center" id="evntfoto" style=
"background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
valign="middle"></td>
<td align="left" id="evnttxt" valign="top">
<b>Fnky carnival</b><br>
Sabato 21 Febbraio<br>
Nikita<br></td>
</tr>
</table>
</div>
</div>
</body>
</html>
You are using ID's. ID's in HTML are unique there only can be one.
Change id="eventfoto" to class="eventfoto" in your HTML. Then in jQuery change your selectors to be $(".evntfoto"). Some knowledge about HTML ID'S. The reason why you would use classes is because you can use more than one on the HTML page.
Change below td width as 80%.
Static Html code :
<td valign="middle" align="center" id="evntfoto" style="height: 119px; width: 80%; background-image: url(http://bestparty.altervista.org/IOS/IOS/IMG/fnky.jpg); background-size: cover; background-position: 50% 50%;">
</td>
Dynamic code using jquery :
$("#evntfoto").css("width","80%");
i have jsp page it have username and password.if we fill up username and password and click on submit button then the browser asks Remember password then click on that it stores username and password.i donot want to store username and password in browser.i have use the autocomplete=off in jsp .
<form name="indexFrm" id="indexFrm" autocomplete="off" method="post">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Login</title>
<script src="http://code.jquery.com/jquery-1.11.min.js"></script>
<script type="text/javascript">
function login(btnName)
{
if(window.document.indexFrm.userIdTxt.value=="")
{
alert("Enter User Id");
window.document.indexFrm.userIdTxt.focus();
return false;
}
if(window.document.indexFrm.pwdTxt.value=="")
{
alert("Enter Password");
window.document.indexFrm.pwdTxt.focus();
return false;
}else{
window.document.indexFrm.action = "../epay/abcd.jsp";
document.indexFrm.method='post';
window.document.indexFrm.submit();
}
}
</script>
</head>
<body topmargin="0" leftmargin="0" background="../images/background.gif" onLoad = 'window.document.indexFrm.userIdTxt.focus();'>
<div id="wrapper">
<form name="indexFrm" id="indexFrm" autocomplete="off" method="post">
<table width="971" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="15" style="padding-right:4">
<div align="right">
<table border="1" width="10%" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr>
<td width="50%" height="22" bgcolor="#3F9DE5">
<p align="center">Home </td>
</tr>
</table>
</div> </td>
</tr>
<tr>
<td width="100%" height="15"></td>
</tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table border="1" width="60%" bordercolor="#7CC8FA" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="newtexts">
<tr>
<td width="100%" bgcolor="#ABDCFC" colspan="2" height="20">
<p align="center" class="newhead">LOGIN</td>
</tr>
<tr>
<td width="100%" bgcolor="#D6EEFE" colspan="2" height="21"> </td>
</tr>
<tr>
<td width="42%" bgcolor="#D6EEFE" align="right">User
Id </td>
<td width="58%" bgcolor="#D6EEFE"><input type="text" name="userIdTxt" size="20" autocomplete="off"></td>
</tr>
<tr>
<td width="42%" bgcolor="#D6EEFE" align="right">Password
</td>
<td width="58%" bgcolor="#D6EEFE"><input type=password name="pwdTxt" id="pwdTxt" size="20" autocomplete="off"></td>
</tr>
<td width="100%" colspan="2"><input name="stdSubBtn" type="button" class="newtexts" style="font-family: MS Sans Serif; font-size: 8pt; font-weight: bold" onClick = 'login(this.name);' ></td>
</table>
<input type="hidden" name="frmName" value="indexFrm">
</form>
</div>
</body>
</html>
Autocomplete works on HTML5.0, I think you are using below to that, just change your doctype tag to
<!DOCTYPE html>
Then try.
There is no real reason that this code shouldn't work, as far as I can tell. I have a HTML file and an external .js file. Here is the statement that I am using inside of the html to load the .js file:
<script type="text/javascript" src="family.js"></script>
The name of the file is correct, and it is in the same directory. I'll post the full code of the html page below, just in case something is off with something else.
Is there anything that I am missing? The .js file should make a sliding menu, however it is simply not loading. I have an alert inserted in the .js file that should alert me when it's working, although it doesn't show up.
<!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">
<!-- DW6 -->
<head>
<title>The Jones Family</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="family.css" type="text/css" />
<script type="text/javascript" src="family.js"></script>
<script language="JavaScript" type="text/javascript">
var d=new Date();
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
alert ("Inside script is working");
</script>
</head>
<body >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="head">
<td width="382" colspan="3" rowspan="2"><img src="camera.jpg" alt="camera" border="0" /></td>
<td width="378" height="50" colspan="3" id="logo" valign="bottom" align="center" nowrap="nowrap">The Jones Family Website</td>
<td width="100%"> </td>
</tr>
<tr class="head">
<td height="51" colspan="3" id="tagline" valign="top" align="center">Photo Gallery</td>
<td width="100%"> </td>
</tr>
<tr>
<td colspan="7" class="separator" ><div class="myHr"><hr /></div></td>
</tr>
<tr class="separator">
<td colspan="7" id="dateformat" height="20"> <script language="JavaScript" type="text/javascript">
document.write(TODAY); </script> </td>
</tr>
<tr>
<td colspan="7" class="separator" ><div class="myHr"><hr /></div></td>
</tr>
<tr>
<td width="200" height="450" valign="top" class="nav" >
<table class="nav" border="0" cellspacing="0" cellpadding="0" width="40" id="navigation">
<tr>
<td > <br />
<br /></td>
</tr>
<tr>
<td ><div class="navG" id="gallery1" style="position: absolute; top: 180px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Disney<br />
SeaWorld<br />
Bush Garden<br />
Universal Studios<br />
</td>
<td><img src="gallery1.jpg" alt="gallery 1" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery2" style="position: absolute; top: 285px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Sweet 16<br />
Summer Camp<br />
Holiday<br />
Ski Trip<br />
</td>
<td><img src="gallery2.jpg" alt="gallery 2" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery3" style="position: absolute; top: 390px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Mom's Birthday (2011)<br />
Dad's Birthday (2011)<br />
Bobby's Birthday<br />
Jenny's<br />
</td>
<td><img src="gallery3.jpg" alt="gallery 3" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery4" style="position: absolute; top: 495px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Skatepark<br />
Wildlife<br />
Beach<br />
Hawaii<br />
</td>
<td><img src="gallery4.jpg" alt="gallery 4" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
</table>
<br />
<br />
<br />
<br /> </td>
<td width="50"></td>
<td width="305" colspan="2" valign="top"><br />
<br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="305">
<tr>
<td class="pageName">Family Photos</td>
</tr>
<tr>
<td class="bodyText"><p>From here you can see family Photos taken by our various amateur photographers!</p>
<p>We hope you enjoy the photos as much as we do!</p>
<p align="center"><img src="sayCheese.jpg" alt="Say Cheese" /></p></td>
</tr>
</table>
<br />
<br /> </td>
<td width="50"></td>
<td width="190" valign="top"><br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="190" id="leftcol">
<tr>
<td width="10"></td>
<td width="170" class="smallText"><br />
<p><span class="subHeader">Photog #1</span><br />
Mary Sue - Mother, she prefers her Canon camera. She still uses film, but has the photos put onto digital cd when developed. </p>
<p><span class="subHeader">Photog #2</span><br />
Bobby - Hip son, he prefers his HP kid digital camera. Not that old, but still takes interesting pictures.</p>
<p><span class="subHeader">Photog #3</span><br />
Jenny - Cool Teen, she has a Sony digital video camera. She takes movies and still photos. Just don't expect her to smile too much.</p>
<br />
<br /> </td>
<td width="10"> </td>
</tr>
</table> </td>
<td width="100%"> </td>
</tr>
<tr>
<td width="165"> </td>
<td width="50"> </td>
<td width="167"> </td>
<td width="138"> </td>
<td width="50"> </td>
<td width="190"> </td>
<td width="100%"> </td>
</tr>
</table>
</body>
</html>
the problem is not the MIME type, but it's in the JS script (if it's the one at 'http://orca.st.usm.edu/~tbonnet2/440/p5/family.js')
A closing parentheses is missing, look into closeMenu():
function closeMenu() {
/* get the current menu id */
var ID = this.id + "List"
/* determine active menu */
activeMenu = document.getElementById(ID);
if (activeMenu) { // <------ THIS CONDITIONAL BLOCK ISN'T CLOSED!
activeMenu.style.display = "none";
activeMenu = null;
/* run the moveItemLeft function by setting a time interval */
timeID = setInterval("moveItemLeft()", 1);
}
I had a problem with the same description as the author of the question.
But, in my case, the js file was not being re-read from the disk.
Initially, my js file was empty as I began testing the HTML structure.
Later when I added code to the js file, the browser window, which had been open, did not re-read the js file, even after "refreshing" the browser.
The js file was there, it was in the same directory, but the content of the file was memory cached in the browser. I saw a message to this effect somewhere in the Google debugger, but I am unable to find that message again. The message stated the HTML file was disk cached and the js file was memory cached.
The HTML file was refreshed when I clicked the browser's refresh button, but the js file was not getting refreshed and was still showing empty in the "sources" tab from the initial running of the page before js content was added.
To fix, I closed the browser window, opened a new browser window, and everything started working correctly. The new window re-read the js script from disk.
Check with, for example, Firefox's console if there are errors regarding the loading of that js file (and post them).
Maybe, the file is loaded but it contains errors that don't let you see the alert
Note that your server returns a different MIME-type than specified in your HTML source:
<script type="text/javascript" src="family.js"></script>
$ HEAD http://orca.st.usm.edu/~tbonnet2/440/p5/family.js
200 OK
Connection: close
Date: Thu, 23 Feb 2012 02:22:59 GMT
Accept-Ranges: bytes
ETag: "1320142-9f5-4b9979ec8c280"
Server: Apache/2.2.3 (Red Hat)
Content-Length: 2549
Content-Type: application/x-javascript # <-- see here
Last-Modified: Thu, 23 Feb 2012 01:32:42 GMT
Client-Date: Thu, 23 Feb 2012 02:22:59 GMT
Client-Peer: 131.95.35.200:80
Client-Response-Num: 1
If you dont have any errors like the answer above and are using a web host....
1. login to control panel and check if file actually exist there.
I ran into the same problem, i was using ftp(winSCP) to upload my files when i made changes and even changed file names i ran into the same problem but when i went to the control panel(file manager) all the changes i was making through the winSCP were not being reflected then i uploaded everything through the control panel it all started working fine.
Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.
Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<!-- /* below javascript function is to handle the "Enter" key form submission */ -->
<script language="javascript">
</script>
<script type="text/javascript">
function change1(){
document.getElementById('id1').style.display='block'
document.getElementById('id2').style.display='none'
document.getElementById('id3').style.display='block'
document.getElementById('id4').style.display='none'
document.getElementById('body1').style.display='block'
document.getElementById('body2').style.display='none'
document.home_page.reg_id.focus();
}
function change2(){
document.getElementById('id1').style.display='none'
document.getElementById('id2').style.display='block'
document.getElementById('id3').style.display='none'
document.getElementById('id4').style.display='block'
document.getElementById('body1').style.display='none'
document.getElementById('body2').style.display='block'
document.home_page.uname.focus();
}
</script>
<!-- end of "enter" key handling functions. -->
</head>
<form method="POST" action="home_page.php" name="home_page">
<table width="320" height="200" border="1">
<tr style="width:315px;" align="center">
<td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>
<td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>
<td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>
<td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>
</tr>
<tr>
<td colspan="2" id="body1">
<table width="318" height="44" border="0">
<tr>
<td width="318" height="40" align="center">
<span class="loginstyle3">Registration Status</span>
</td>
</tr>
</table></td>
<td colspan="2" id="body2" style="display:none;">
<table width="318" height="45" border="0">
<tr>
<td width="107" height="41" align="center" background="images/glossy1grey.gif">
<span class="loginstyle3">Login Entry </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- below block of code is to set login page after login attempt and failed -->
<script type="text/javascript">change2()</script>
</form>
</body>
</html>
I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".
Try using "display: table-cell" instead of "block".
edit — I've tried this and it's definitely what the problem is.
Your problem in FF
document.home_page.uname is undefined
Line 27
The problems you have are
your TD is inheriting the height=200 from the TABLE
your TD has display: block which forces it onto a new line
Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!
The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" >
instead.
IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.