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.
Related
I'd developed a dating site in php which is having mobile version also. I'd designed an html email template and stored it in one folder with php variables which I'll replace while sending emails. What I want to do here is when any email which is sent from my site opens in mobile, it should not have an option to zoom the email. In my email template I'd below code.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
The email template if I am viewing in browser in mobile, it doesn't have an option to zoom, but if I am viewing the email in gmail app and I am able to zoom the emails.
Please let me know how to stop zoom functionality in Gmail. Thanks in advance.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
</head>
<body style="-webkit-text-size-adjust:none;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#000000; height:52px;">
<tr>
<td align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600px" style="height:100%;">
<tr><td align="left" valign="middle" style="padding-left:20px;"><img src="SITENAME/images/logo.png" /></td></tr>
</table>
</center>
</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<center>
<table style="height:100%;" width="600px" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding-left:20px; padding-bottom:20px" valign="bottom" align="left">
<div style="color: #444444; font-family: Open Sans; font-size: 15px; line-height: 150%;text-align: left;">
{{EMAILCONTENT}}
</div>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Put this code on your DIV with emailcontent, where you declare font-family, font-size, etc..
.no-zoom {
touch-action: manipulation;
}
I have a page in my PhoneGap webapp (file:///mypath/), that opens a webpage (http://www.example.com/) in my server. In this webpage I need to return after I do all my stuff in my webapp.
This is my webpage source:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type="text/css" href="css/stile.css">
<meta name="viewport" content="width=320, initial-scale=0.7, user-scalable=no">
<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 style="background-color:#e20a7e; overflow:none;">
<img src="IMG/CIAMBELLA_03.png" class="icons5" style="display:block; margin: 0 auto;">
<br>
<br>
<div align="center" style="color:#FFF;">
<table align="center" width="100%">
<tr>
<font style="font-size:5em;">OOPS!</font><br>
</tr>
<tr>
<font style="font-size:2.5em;">Sembra che tu non sia connesso</font><br>
</tr>
<tr>
<font style="font-size:1.5em;">A breve sarai reindirizzato</font>
</tr>
<br>
<tr>
<font style="font-size:1em;">Se non vuoi aspettare clicca
QUI</font>
</tr>
</table>
</div>
<?
header( "refresh:5;url=$location" ); ?>
</body>
</html>
This is my localpage:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script type="text/javascript">
var ourLocation = document.URL;
</script>
</head>
<body>
<script>
var goto = "<a href='http://www.bestparty.altervista.org/MIRKO/pag2.php?location=" + ourLocation + "'>dicjdb</a>";
document.write(goto);
</script>
</body>
</html>
EDIT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type="text/css" href="css/stile.css">
<meta name="viewport" content="width=320, initial-scale=0.7, user-scalable=no">
<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 style="background-color:#e20a7e; overflow:none;">
<div id="navigation" style="overflow:none;">
<table width="100%">
<tr valign="bottom">
<td valign="middle" width="25%" align="center">
</td>
<td valign="bottom" width="50%" align="center">
<img src="IMG/LOGO-WHITE.png" class="logonbar" alt="DONUT"/>
</td>
<td width="25%" align="center" valign="middle">
</td>
</tr>
</table>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<img src="IMG/CIAMBELLA_03.png" class="icons5" style="display:block; margin: 0 auto;">
<br>
<br>
<div align="center" style="color:#FFF;">
<table align="center" width="100%">
<tr>
<font style="font-size:5em;">OOPS!</font><br>
</tr>
<tr>
<font style="font-size:2.5em;">Sembra che tu non sia connesso</font><br>
</tr>
<tr>
<font style="font-size:1.5em;">A breve sarai reindirizzato</font>
</tr>
<br>
<tr>
<font style="font-size:1em;">Se non vuoi aspettare clicca
QUI</font>
</tr>
</table>
</div>
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
<script>
variable = getUrlVars()["location"];
alert(variable);
//window.location.href = variable;
</script>
</body>
</html>
I added the js script to return at the local page on my app but it doesn't work, it stays on my php page on my server, same result by clicking the a href that contains the php
I agree with Shaun Loftin.
Anyway, you can embed a local webpage using a simple IFRAME.
<iframe src="http://localhost/local_webpage.php"></iframe>
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.
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.