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.
Related
the only problem i have now is i cant save my save my text in text field:
i have tried with java script, i dont know if this can work.
if you have an idea what i can do, it will be nice.
but i think that i have fixed the problem with the file error:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<td valign="top" bgcolor="#eoe1e2" align="center">
<table id="table-text" align="center" border="0" width="100%" height="700px">
<tr height="10px">
<td align="center"></td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<!-- BEGIN MAIN SECTION -->
<!---- BEGIN MAIN BODY OF PAGE ---->
<table align="center" border="0" width="80%">
<tr><td align=center> </td></tr>
<tr>
<td align="center" valign="center">
<form name='plugstatus' action='file:///C:/Users/mib/Desktop/sss.HTML' method='POST' id='plug_form'>
<table border=2 cellpadding=2 cellspacing=2>
<tr>
<td colspan='8' align='center'><b>PLUG CONTROL</b></td>
</tr>
<tr>
<td colspan='8' align='center'><b>Unit LOCAL</b></td>
</tr>
<tr bgcolor='#cfcfcf'>
<td valign='top'>PLUG</td>
<td valign='top'>NAME</td>
<td valign='top'>DEFAULT</td>
<td valign='top'>BOOT/SEQ.<br />DELAY</td>
<td valign='top'>STATUS</td>
<td valign='top'>PRIORITY</td>
<td valign='top'>ACTION</td>
</tr>
<tr>
<td bgcolor='#cfcfcf'>A1</td>
<td align='left' bgcolor='#cfcfcf'>
<input type="text" name="txtfield" id="txtfield" value=""
placeholder="input your text" onchange="storeitem(this.value)" />
</td>
<td bgcolor='#cfcfcf' align='center'>OFF</td>
<td bgcolor='#cfcfcf' align='center'>0.5 Secs</td>
<td bgcolor='#cfcfcf' align='center'>OFF</td>
<td bgcolor='#cfcfcf' align='center'>
1
</td>
<td bgcolor='#cfcfcf' align='center'>
<select name="u1plug1"><option value='0'>On</option><option value='2'>Off</select>
</td>
</tr>
<tr>
¨
<td bgcolor='#efefef'>A2</td>
<td align='left' bgcolor='#efefef'>BDK-ASR1002_RACK04</td>
<td bgcolor='#efefef' align='center'>OFF</td>
<td bgcolor='#efefef' align='center'>0.5 Secs</td>
<td bgcolor='#efefef' align='center'>OFF</td>
<td bgcolor='#efefef' align='center'>2</td>
<td bgcolor='#efefef' align='center'><select name="u1plug2"><option value='0'>On</option><option value='2'>Off</option></td>
</tr>
<tr>
</table>
<script language="javascript">
function storeitem(val) {
localStorage.setItem('txtfield', val)
}
function loaditem() {
var txtfield = document.getElementById('txtfield');
txtfield.value = localStorage.getItem('txtfield');
}
window.onload = loaditem;
</script>
<h1> </h1>
</body>
</html>
If you load your HTML from a local disk and only provide /cgi-bin/gethtml as the action, the browser will try to find this path on your local disk to load it.
This path will almost certainly be invalid (unless you are using a unix based OS and actually created the path /cgi-bin/), so you'll get the error message.
To make this work you need to either add the complete URL as action:
http://server.whatever/cgi-bin/gethtml
or load your HTML via HTTP from the server, so the relative path works.
Edit:
The directory /cgi-bin/ on a webserver has a special meaning, it contains scripts that are executed by the webserver, usually perl or similar scripting languages but they can also be binary programs.
These scripts/programs need to be executed by a webserver, they can't be used with file://... URIs. The same goes for evaluating form data.
I'm displaying a list of questions alongwith their answers and correct answer. For this purpose I'm making use of HTML . Now there is one hyperlink present in each question titled "Hide-Show Answers". When user clicks on this hyperlink the 'Options' heading, options for that questions and a correct answer should get hide if it's showing. If these things are hidden, then upon clicking on the hyperlink these things should get shown. Initially when page loads everything should be displayed as like now. Also one more thing is when page loads initially everything would be shown to the user and the text of hyperlink should be "Hide Anwsers" and when user clicks on this link the content should get hidden and title should change to "Show Answers". Following is my HTML of a questions table:
<table cellpadding="0" cellspacing="0" border="0" width="98%" style="padding:0 10px 0 10px;" align="center">
<tbody>
<tr>
<td>
<div class="sub_name" id="" >
<div style="height:800px; overflow:scroll; width:100%;">
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top">
<b>Question 1.Add To Favourite Question</b><br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<br /><b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>The dimensions of universal gravitational constant are</p></body></html>
<br/><b>QUE15957</b><br/>
Hide-Show Answers
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .
M-2L2T-2
</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .
M-1L3T-2
</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .
ML-1T-2
</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .
ML2T-2
</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 2
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top">
<b>Question 2.Add To Favourite Question</b><br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<br /><b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>If angular momentum quantum number can take value of <i>n</i> also (in addition to other possible values) then total number of electrons in first orbit would have been :</p></body></html>
<br/><b>QUE37672</b><br/>
Hide-Show Answers
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .
2
</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .
6
</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .
8
</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .
10
</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 3
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top">
<b>Question 3.Add To Favourite Question</b><br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<br /><b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>For figure 24, the correct relation is -<br><img height="110" src="http://www.entranceprime.com/upload_media/questions/original/1328941281_38.JPG" width="172"></p></body></html>
<br/><b>QUE38552</b><br/>
Hide-Show Answers
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .
<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=9329a28849bd94b3bcc49e3a4b69a595.png" class="Wirisformula" align="middle">
</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .
<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=c8c15583e8f5742625e6d80c71f3a691.png" class="Wirisformula" align="middle">
</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .
<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=af6f96bda5c2f575fc42e4751c5772fe.png" class="Wirisformula" align="middle">
</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .
All of the above
</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 4
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
And the jQuery code I tried is as follows:
$(document).ready(function() {
$(".show-ans").click(function(e){
e.preventDefault();
if($(this).parents("tbody").children("tr:last").is(":visible"))
{
$(this).parents("tbody").children("tr:not(:first)").hide();
$(this).html("Show Answer");
}
else
{
$(this).parents("tbody").children("tr:not(:first)").show();
$(this).html("Hide Answer");
}
});
});
Now my issue is when I click on a hyperlink of a specific question then only it's Options and correct options should hide. Other questions' content should be displayed as it is but this is not happening. when I click on a hyperlink of a specific question everything gets hide and including the hyperink I clicked. How should I correct this issue?
change the code like this way
$(".show-ans").click(function(e){
e.preventDefault();
if($(this).parent().parent().parent().children("tr:last").is(":visible"))
{
$(this).parent().parent().parent().children("tr:not(:first)").hide();
$(this).html("Show Answer");
}
else
{
$(this).parent().parent().parent().children("tr:not(:first)").show();
$(this).html("Hide Answer");
}
});
Demo
sample main page for example index.html content :
<iframe src="a.html" width="400" height="300" frameborder="1" id="frame"></iframe>
a.html content :
<html><body><form >
<div id="container"><div id="main"><div class="red_bl"><div class="red_br">
<div class="red_tl"><div class="red_tr"><div id="content">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody id="subContent1">
<tr>another tags</tr>
<tr>
<td colspan="2" class="cell2" valign="top">
sample text
</td>
<td id="td_address" class="cell3">sample code</td>
</tr>
</tbody>
</table>
</div></div></div></div></div></div></div>
</form></body></html>
i want change :
<td id="td_address" class="cell3">sample code</td>
to for example :
<td id="td_address" class="cell3">another text</td>
by jQuery In index.html .
This is because your document.ready doesn't wait for the iframe to load.
Therefore, the code that you run is executed before #td_address is added to DOM.
For various solutions to this problem (depending on what are you able to change), look at answers to this question.
With JQuery:
$('#frame').contents().find('td#td_address').html('another text');
I need to add keyboard access for a cell-height-fixed HTML table. That is, if a scroll bar appears in the cell (example given), the keyboard needs to be able to scroll that cell using arrow keys. How can I achieve that? I need to support Internet Explorer 6, 7, and beyond.
Thanks a lot for the help in advance.
Table example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Simplified</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" BGCOLOR="#E8E8E8">
<tr align="center">
<td valign="top">
<strong>List</strong>
</td>
</tr>
<tr align="center">
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="2" id="reasonList">
<tr>
<th scope="row" width="15%">
<span class="workArea">
<nobr>Entry Number</nobr>
</span>
</th>
<td width="20%" align="center">
<span class="workArea">
<nobr>ALL</nobr>
</span>
</td>
<td width="10%" align="center">
<span class="workArea">
<nobr>A</nobr>
</span>
</td>
<td width="10%">
<span class="workArea">
<nobr>B</nobr>
</span>
</td>
<td width="35%" align="left">
<div style="overflow:auto; width: 330px; height: 110px;">
<span class="workArea">
Returned Customer<br>
Refund Requested<br>
Change of Address<br>
Denied Delivery<br>
Expedited processing<br>
Data Entry Errors<br>
Not Ready for Delivery<br>
Other Notices<br>
Billing Error<br>
Shipping Error<br>
Rejected Delivery<br>
</span>
</div>
</td>
<td width="15%">
<span class="workArea">
<nobr>07/15/2012</nobr>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should be able to give the cell focus by adding tabindex="-1" to the cell in question.
I would like to wrap a span tag around text (shown below) which exists already in my table.
Text to wrap in span tag:
Build Muscle and Train Harder<br> Boost Energy without the
Calories<br> Promote Nitric Oxide Production
My HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>Build Muscle and Train Harder<br> Boost Energy without the Calories<br> Promote Nitric Oxide Production<br><br>
<table cellspacing="0" cellpadding="0" border="0" id="tttt">
<tbody>
<tr>
<td><b><font class="pricecolor colors_productprice"><span class="PageText_L483n"><h3><b style="font-size:13px"><span class="saleprice"><font class="text colors_text"><b><span class="PageText_L335n">Sale Price</span>: </b></font></span> <b class="prodPrOr">$34.05 </b></b></h3></span></font></b><br><a class="pricecolor colors_productprice" href="/ShoppingCart.asp?ProductCode=amino%2Dchewables"><b><span class="PageText_L655n"><img class="AddRight" src="/v/vspfiles/assets/images/addtocartsmall.gif"></span></b></a>
</td>
</tr>
</tbody>
</table>
<br><br>
<a onclick="window.open('/help_FreeShipping.asp', 'FreeShipping', 'scrollbars,status,resizable,width=300,height=300');" href="javascript:void(0);">
<img border="0" alt="" src="/v/vspfiles/templates/2007New/images/Icon_FreeShipping.gif" class="vCSS_img_icon_free_shipping"></a>
</td>
<td valign="top" align="right" id="v65-productdetail-action-wrapper" class="v65-productdetail-options">
<div id="contact">
<img src="/v/vspfiles/assets/images/osw0001_talk_button.jpg">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<ul></ul>
</td>
</tr>
</tbody>
</table>
You should add a class or id to the td you're trying to select to make it a lot simpler. E.g. if you made it:
<td class="myText">Build ... </td>
Now that you can easily select it (though if you can't add the class for some reason there are ways around that - it's just the simplest way to do it), imho.
$('.myText').html().replace($('.myText').html().match(/^.*/), '<span class="myClass">'+$('.myText').html().match(/^.*/)+'</span>');