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.
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;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've been trying to find an error in my HTML, jquery, or even CSS which is preventing my jQuery from even loading, to no avail. Any help is appreciated
Code
$(document).ready(function() {
'use strict';
$("#IndexContent").hide();
$("#BidListMainMenu").mouseenter(function() {
$(this).slideToggle();
});
$("Table").mouseleave(function() {
$(this).slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script src="code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jQuery.js"></script>
<title>Main Menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="IndexBackgroundImage"></div>
<body id="Index">
<div id="IndexLogoDiv">
<img src="images/logo.gif" alt="Logo" />
</div>
<center>
<div id="IndexContent">
<h1>Intranet</h1>
<table>
<tbody>
<tr>
<td class="mainButton">
<img alt="Bid List" src="images/IndexBidList.png" />
</td>
</tr>
<div id="BidListMainMenu">
<td>
<table>
<tbody>
<tr>
<td colspan="1">
<a href="BidList/CurrentBid.php">
<img alt="Bid List alteration" src="images/BidList.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="Bidlist/NewProject.php">
<img alt="Add New Project" src="images/AddNewProject.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/EditProject.php">
<img alt="Edit Project" src="images/EditProject.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/Priorities.php">
<img alt="Priorities" src="images/SetPriorities.png" />
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/Maintenence.php">
<img alt="Edit Project" src="images/Maintenence.png" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</div>
<tr>
<td>
<img alt="Bid List alteration" src="images/IndexMaintenence.png" />
</td>
</tr>
<tr>
<td>
<a href="">
<img alt="Wordpress Page" src="images/IndexWordpress.png" />
</td>
</tr>
</tbody>
</table>
</div>
<div id="IndexFooterDiv">
<img src="images/address.gif" alt="Address" />
</div>
</center>
</body>
</html>
There is no evidence of the jQuery even starting, which is unusual, because it is linked, and I imported the library. I can post the css if it is helpful. I put the first $("#IndexContent").hide() test case there to check if it loaded. However nothing worked. Any help is appreciated, thank you.
<script src="code.jquery.com/jquery-1.11.3.min.js"></script>
should be:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You have a wrong src attribute for cdn source:
src="code.jquery.com/jquery-1.11.3.min.js"
which should be:
src="//code.jquery.com/jquery-1.11.3.min.js" // will look https || http
and you have a typo for the :
$(Document).ready // you can see the uppercase D in the document
first, I would change the html <script src = >to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
After, you typed
$(Document).ready(function () {});
Change that Document to document
I have to render a column of a table in jsp. Now, this jsp page is being used in one other page also. That particular column should come up only in other page, not in my page. So for this i am using one context variable, which i am getting somehow and saving it in my javascript value.
how to do this ?
<html>
<head>
<script>
function getPageId(){
var someValue = fetching it some how using url.
var pageId=someValue;
}
</script>
<script language="JavaScript">getPageId();</script>
</head>
<body>
<table id="pageContent" width="100%" valign="top">
<tr>
<td id="firstColumn">
<div class="className">
<jsp:include page="/pages/common/blank.jsp" />
</div>
</td>
<td id="secondColumn" width="100%" style="padding-left:16px">
</td>
</tr>
</table>
</body>
</html>
Column td with id="firstCoulmn" has to get conditionally rendered based on value of pageId variable
Please help
If var someValue can be determined by the url parameter, then you have to do the logic in the server side itself.
<body>
<table id="pageContent" width="100%" valign="top">
<tr>
<%
String someValue = request.getParameter("someValue");
// Your logic goes here
if("test".equals(someValue)) { %>
<td id="firstColumn">
<div class="className">
<jsp:include page="/pages/common/blank.jsp" />
</div>
</td>
<% } %>
<td id="secondColumn" width="100%" style="padding-left:16px">
</td>
</tr>
</table>
</body>
Here's my full, latest code that doesn't work. Here's the main window 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body background="core_rec/web_res/cf2.jpg">
<center>
<table width="720" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="180"><img src="core_rec/logos/metaltop.png" /></td>
<td colspan="3"><img src="core_rec/web_res/title.png" align="bottom"/></td>
</tr>
<tr>
<td width="180"><img src="core_rec/logos/metalbottom.png" /></td>
<td width="70"><center><font id="menutext">Menu</font></center></td>
<td width="100"><center><font id="menutext">Info</font></center></td>
<td width="200"><center><font id="menutext">Products/Services</font></center></td>
<td width="170"><center><font id="menutext">Contact</font></center></td>
</tr>
</table>
<br /><br />
<table height="80%" width="720">
<tr>
<td width="140"><iframe src="iframes/menus/main.html" width="140" id="sidebar"></iframe></td>
<td width="540"><iframe src="iframes/bodies/main/main.html" width="540" name="bodyframe" id="bodyframe"></iframe></td>
</tr>
</table>
</center>
</html>
Here's the menus/main.html. It contains the button.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iFrame Main</title>
<link rel="stylesheet" type="text/css" href="../../css/main.css" />
</script>
</head>
<body bgcolor="#000000">
<center>
<font id="sidebartext">
Main<br /><br />
Other Feeds<br /><br />
<button onclick="parent.document.getElementById('bodyframe').src='../bodies/main/othersites.html'">Other Sites</button><br /><br />
</font>
</center>
</body>
</html>
Whenever I push the button on the menu frame, the body frame doesn't change.
Make sure to run this on a simple server and test. Many browsers have restrictions when it comes to iframes.
Many files don't work properly if using file:// protocol, which will be used if you directly open the html file (i.e.: Not through a server).
You misspelled getElementById: last letter d should not be uppercase.
Instead of window.document.getElementById you could write document.getElementById, because window is the global object in browser javascript (at least, global per window/(i)frame)
http://jsfiddle.net/kNrVL/
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.