|
JavaScript - Picture Display Problem In Iframe
Code:
window.onload = function()
{
var vIframeUrl;
vIframeUrl= document.getElementById("ifrBDiagram").src;
if (vIframeUrl == "#" && document.getElementById("txtBnr").value == "")
{
document.getElementById("ifrBDiagram").src = "C://eBondingDiagram//Infineon.jpg";
}
getIframeSize();
}
function getIframeSize()
{
//Get window width and height
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {//alert("in 2");
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {//alert("in 3");
winW = window.innerWidth;
winH = window.innerHeight;
}
document.getElementById("ifrBDiagram").width = (winW * 0.95);
document.getElementById("ifrBDiagram").height = (winH * 0.88);
}
Code: <table width="100%" height="100%" bgcolor="#CAD4E3" align="center" valign="center" style="border: 5px solid;"> <tr> <td><b>Bnr No:</b></td> <td><input type="text" id="txtBnr" name="txtBnr" /></td> <td> </td> <td> </td> </tr> <tr> <td><b>Lot No:</b></td> <td><input type="text" id="txtLot" name="txtLot" /></td> <td><INPUT id="btnCopy" TYPE="button" VALUE="Bonding Diagram" ONCLICK="fncCopy()"> <INPUT id="btnUpdate" TYPE="button" VALUE="End Lot" ONCLICK="reloadPage()"></td> <td> </td> </tr> <tr> <td><b>Failure Catalogues:</b></td> <td><select id="myList"> <option></option> <option>DSO</option> <option>Pre-Assembly</option> <option>PO EOL</option> <option>TDSON/TSDSON</option> <option>S308/WISON</option> </select> </td> <td><INPUT id="btnCata" TYPE="button" VALUE="Failure Catalogue" ONCLICK="fcnFailureCatalogue()"></td> <td> </td> </tr> <tr> <td colspan="4"> <iframe name="ifrBDiagram" id="ifrBDiagram" src=# style="border-width:4px; border-style:solid; border-color:blue;"> <span id="sMsg"></span> </iframe> </td> </tr> </table> When I first run the html , the interface just goes like this. After I press F5 to refresh the window, it displays this. The image just wont fit the iframe exactly. Can anyone please help to spot the bug ? I tried to use different resolution picture but still, the problem just doesn't solve. Is it really because of the image resolution ? Or something else gone wrong in my html ? Thanks Similar TutorialsHi Everyone, I have created 8 thumbnails of their larger full sized pictures. Next I created a "picdiv" with CSS attributes within a center division. The thumbnails sit just above the "picdiv". I need code to open the full pictures in the "picdiv" when I click on the thumbnail. I've tried an on-click function but can't get this working either. Can anyone help please? Anita Watch the answer to this problem be simple... but when I tried searching for similar problems, I can't find anything that helps. On a website of mine, I have a picture that acts as the navigation. When the user hovers over it, it changes pictures to show one section lighting up and the text to show where that one links to under it. Later, I changed it to show, when the mouse isn't hovering over the picture, the pictures automatically scrolling on a timer to show all the options. While this works most of the time, I recently discovered the reason behind a 'glitch' my friend noticed... but I'm unsure of how to fix it. The problem is, when the mouse is already on the picture as the page loads, it starts the timer even though the mouse is there. This causes it to keep trying to switch the picture on its own even when hovering over the picture. And when the mouse is off the picture, it changes it twice at an odd interval. In other words, it's starting the timer up twice and only cuts one of them off when you hover over the image. Here's a link to the site so you can see for yourself: http://nebula-andra.com/ (And if links aren't allowed, just let me know and I'll remove it--it's simply easier to see) Here's the code I have for the image timer... In the header, in a Javascript tag: Code: var currPic = 0;
var totPics = 12;
var keepTime;
var picName;
function setupPicChange(){
keepTime=setTimeout("changePic()", 2000);
}
function changePic(){
currPic++;
if(currPic > totPics) currPic = 1;
document.getElementById("logos").src="../images/logo/NA Logo - " + currPic + ".png";
setupPicChange();
}
function stopTimer(){
clearTimeout(keepTime);
}
function startTimer(){
keepTime=setTimeout("changePic()", 2000);
}
In the body: Code: <body onload="setupPicChange();"> <div id="logo_setup"> <p align="center" onmouseover="stopTimer();" onmouseout="startTimer();"><img src="../images/logo/NA_Logo.png" id="logos" name="logos" border=0 usemap="#logo"> I want the timer to start without the user having to do anything and complete stop when the user hovers over the picture. If there's anything else you need to see to help with this problem, please let me know. And thank you for taking the time to read this; I look forward to any suggestions you can give me. Note: This is being tested in Chrome, but the problem has appeared in both Firefox and IE as well. Hello Everyone, I am having trouble with a script that displays the url of an iframe. On this page, I have a single iframe and want to display the url of the iframe in a div. It works upon initial loading, but the url does not change when a link within the iframe is clicked and a new iframe page loads within the frame. My users need the ability to determine and directly link/view the iframe url. Here is the script Code: <iframe id="mainFrame" name="mainFrame" class="inner-center" frameborder="0" scrolling="auto" width="100%" height="400"
src="whats_new.htm"></iframe>
<p>
<div class="footer"><script type="text/javascript" language="JavaScript">
<!--document.write('<input type="text" style="width:100%; " ');-->
document.write( document.getElementById('mainFrame').src);
</script>
</div>
I am a js novice and trying to figure out what to research and implement. Can you reload the content in the div? do I want to look at cross-frame scripting? Any help would be greatly appreciated. Best regards, Eiger I have an iFrame that is loaded when a user types a url into a text box. Is it possible to display the meta-description of the page that is diplayed in the iFrame in the main (parent) page ? Here is the Iframe code I am using in the body: Code: <iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no"> </iframe> and here is the script in the header: Code: <script>
function goTo() {
var input = get("box").value,
frame = get("frame");
if(input.match(/\bhttp(.)*/)) {
frame.src = input;
} else {
input = "http://" + input;
frame.src = input;
}
}
function get(id) {
return document.getElementById(id);
}
</script>
Hi, i will try to be as brief as possible. I have a page A with form: Code: <form id="search" action="find.html" method="get"> ... (some select options) ... <input type="submit" class="submit" value="search"> this form look up some holiday destination which appears on this page with url: (example) Code: www.domain.com/find.html?destination=italy&price=500 Now, I dont want to display result on this page, but on page B, in iframe. I found a way how to redirect output as a link to properly show in iframe on page B. Page A contains: Code: <a href="pageb.html?http://www.domain.com/find.html?destination=italy&price=500">show on page B</a><br> Page B contains: Code: <script type="text/javascript">
<!--
function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
window.frames["iframe"].location=url
}
}
onload=loadIframe
//-->
</script>
<iframe src="" name="iframe" id="iframe"</iframe>
In this case page B will properly load requested link in iframe. Problem is it is just a static link... I want to display search result from the form. Thanks a lot for your help... Hi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ What I would like to do is have a page with a dropdown menu, and depending on which option the user chooses from the dropdown, reload the page and display a particular iframe below the dropdown, based on the users choice. Also, a default iframe would load (the one connected to the default choice in the select box). Hopefully that makes sense. I was trying to make this work with PHP (without having the user having to click a submit button) but I couldn't find a way to make it happen.
Hi, I am building a chat/messenger application using PHP and Javascript. I currently have two iframes, one has the chat, the other the users in the database and their status, which is set to default 'offline' and updated to 'online' when logging in.There is also an option to change colour of both iframes like so: [CODE]function change_background_pink() { document.frames.chatContents.document.body.style.backgroundColor="pink"; [CODE] and then this code to call the function: [CODE]<BUTTON onclick=change_background_pink()>Pink</BUTTON>[CODE] The problem is, that when the frames refresh, the background of the users frame goes back to the default white colour (the text does change to show newly logged users), yet the chat one stays the newly selected colour as intended (again the text changes as required). Here is the code of the iframe as it stands now: [CODE] <?php include("connect.php"); $query=mysql_query("SELECT * FROM users;"); echo "<table style='font-family:arial;font-size:14px;'>"; // echo "<th align=left>Username:" . "<th align=left>Status:"; //while loop for rows while($rows=mysql_fetch_array($query)){ echo "<tr>"; //show member deatils echo "<td>" . $rows['username'] . "</td>" . "<td>" . $rows['status'] . "</td>"; echo "</tr>"; } ?> <script type="text/javascript"><!-- setTimeout("refreshiframe()", 10000); //poll server in one second function refreshiframe(){ document.location.reload(); } //--> </script> [CODE] What I am asking is if anybody knows how i can just refresh the actual text part of the frame from the database rather than the entire frame? Many, many thanks in advance for any advice i may recieve and sorry if it sounds confusing i cannot think of a simpler way of explaining it. Been tinkering with X7Chat, a php/javascript chat app, and have run into a problem putting it in an iframe. Works fine in a full or popup window, but one of the functions hangs when the app is run in an iframe or frameset. I know iframes can be picky about relative/absolute urls, but this one has me stumped. Too much code to post, but here's the error: Line: 140 Char: 3 Error: 'opener.window.parent.frames.profile.document' is null or not an object Code: 0 URL: http://www.xxxxxxxx.org/x7chat/index...General%20Chat Not sure, but I believe the problem involves this function: Code: $script = " <script language=\"javascript\" type=\"text/javascript\">\n opener.window.clearTheWay(); opener.window.parent.frames['profile'].document.location='./index.php?act=frame&frame=profile&room=$_GET[room]&user=$_GET[user]&tto=1';\n </script>\n "; The X7Chat website appears to be abandoned - support forum is offline, and emails are returned. Any bright ideas would be appreciated. Hello, i'm trying to post news on my site. so i was able to reached this http://www.shmtestforums.uphero.com/...ller/test.html but i couldn't get, exactly what i want. i really want is when load the page it should shows only 3 rows then after few seconds(say 2 seconds), the 1st row should disappear and bellow 3 rows should come up (eg. when google_1 row is disappear, google_2 & google_3 & google_4 rows should come up) this rotation should be continuous i tried this many. but no positive result. so please.... please....help me to solve this. this is the problematic java script, Code: <script type="text/javascript">
var scrollspeed=cache=1
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
thank you . I have a paragraph of text which is embedded in an IFrame. when i search particular string in that paragraph, if the string is found then the string will be highlighted and the full paragraph is loaded in IFrame. but, if the searched text is at the bottom, then scroll bar in an iframe is not automatically moved to the hidden highlighted text position. any body help me to move the scroll bar automatically to the hidden text position in the IFrame? please run the code, type any text from the paragraph of text and click serach button. see the output. [if the searched text is at the bottom, move the scroll bar to see it in the iframe] code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script language="javascript" type="text/javascript"> var html = "Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text."; var iframe; var id; var doc; var index; var highlightStartTag = "<span style='color:#EE7A03'>"; var highlightEndTag = "</span>"; var wrong_word = "speltext"; var afterHighlightText; var newText; var start = 0; function highlight() { iframe = document.getElementById('frame1'); doc = iframe.document; if (iframe.contentDocument) doc = iframe.contentDocument; else if (iframe.contentWindow) doc = iframe.contentWindow.document; } function highlight1() { newText = html; var tid = document.getElementById('TextBox1'); var text = tid.value; index = newText.indexOf(text); if (index >= start) { var length = 0; length = index + wrong_word.length; var before_delim = newText.charAt(index - 1); var after_delim = newText.charAt(length); var beforeHighlightText = newText.substring(0, index - 1); afterHighlightText = newText.substring(length + 1, newText.length); newText = beforeHighlightText + before_delim + highlightStartTag + newText.substr(index, text.length) + highlightEndTag + after_delim + afterHighlightText; doc.write(newText); } else { alert("Reached End"); } return false; } </script> </head> <body onload="highlight()" > <form id="form1" runat="server"> <div> <div> <b>Sample Text:</b> <br /> Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text. </div> <br /> <b>Type the Text to Search from the above passage, for EG:"powerful"</b> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <br /> <b>Move Scroll button to see hidden highlighted text</b> <iframe id="frame1"></iframe> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Search" OnClientClick="return(highlight1());" /> </div> </form> </body> </html> Thanks, Lakshmi Hi all let me start off by saying: "AAAAAAHHHHHHHAAAAAAA" Feel better now! I have an iFrame which loads individual pages from my site, I am using javaScript to tell the iFrame to resize to the size of the page that is being loaded, the problem is when I click on the link the iFrame does not resize but if I click on the link again it does resize! The fuction is called but only the second time round. Also the none of the script works in FireFox! HELP PLZ! My Code: Code: <SCRIPT LANGUAGE=javascript>
<!--
function reSize()
{
try{
var oBody = ifrm.document.body;
var oFrame = document.all("ifrm");
oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
}
//An error is raised if the IFrame domain != its container's domain
catch(e)
{
window.status = 'Error: ' + e.number + '; ' + e.description;
}
}
//-->
</SCRIPT>
<body onload="reSize()" onresize="reSize()">
<li>
<a href="home.html" rel="nofollow" target="info" onclick="reSize();">
<img src="css/images/home.gif" width="40" height="40" alt="" class="nav_menu_image" />
<span class="nav_title">Home</span>
<br/>
</a>
</li>
<iframe onresize=reSize() id=ifrm src="home.html" name="info" frameborder="0"
padding="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500px"
allowTransparency="true" noresize>
</iframe>
Ok, I have a problem with iframe code my function looks like this: Code: createPlayer: function (cfg) {
var div = document.getElementById(cfg.block2);
var hold = document.createElement('div');
hold.className = 'ytPlayer';
var iframe = document.createElement('iframe');
iframe.setAttribute('id', cfg.block + 'Player');
iframe.setAttribute('width', '70%');
iframe.setAttribute('height', cfg.height);
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('src', 'http://www.youtube.com/embed/' + ytPlayerParams.videoId + '?enablejsapi=1&autoplay=' + ytPlayerParams.autoplay + '&modestbranding=1');//controlbar set
iframe.setAttribute('allowfullscreen', '');
hold.appendChild(iframe);
div.insertBefore(hold, div.firstChild);
//return iframe;
},
and i was trying to add something that will call a function when the video in iframe will end.. i tryed setting evets for onStateChange but didnt work (probably did something wrong).. i tryed alot of things but it just didnt work when i paused the vid or when vid ended.. can anyone somehow help me?? Thanks in advance. I'm using a simple PHP login script (this one: http://www.zubrag.com/scripts/password-protect.php) in tandem with Fancybox (he http://fancybox.net/). The Fancybox pop-ups on my pages use iframes, to hold written content and links. When I log in once, I can access all the regular HTML pages inside the login script without having to log in again. But when I click Fancybox's pop-up links, the pop-up is logged OUT. How can I make all the iframe pop-ups stay logged in when the user is logged in? Thanks for any help, much appreciated. Can anyone tell me what I am doing wrong? I am a javascript student and I am building a calculator. The display on the calculator will not show the numbers when the button is selected. I am inserting my javaScript and html: <html> <head> <title> Calculator</title> </head> <script type = "text/javascript" src="calculator.js"></script> <body> <center>Calculator<br> To use this calculator, CLICK a number, then an ACTION, then another number, then the EQUALS button. <br> Press "C" when ready to start over. <br> The "N" button makes your previous number a negative.<br></center> <form name="calculator"> <table border = "1" align ="center"> <tr> <td ><input type = "text" size = 26 name = "display" id = ""/></td> </tr> <tr ><br /> <!-- first row of calculator --> <td> <input type = "button" value = " 7 " id = "" onclick="newstring('7')"> <input type = "button" value = " 8 " id = "" onclick="newstring('8')"/> <input type = "button" value = " 9 " id = "" onclick="newstring('9')"> <input type = "button" value = " / " id = "" onclick="newstring('/')"> </td> </tr> <tr ><br /> <!-- second row of calculator --> <td> <input type = "button" value = " 4 " id = "" onclick="newstring('4')"> <input type = "button" value = " 5 " id = "" onclick="newstring('5')"> <input type = "button" value = " 6 " id = "" onclick="newstring('6')"> <input type = "button" value = " * " id = "" onclick="newstring('*')"> </td> </tr> <tr ><br /> <!-- third row of calculator --> <td> <input type = "button" value = " 1 " id = "" onclick="newstring('1')"> <input type = "button" value = " 2 " id = "" onclick="newstring('2')"> <input type = "button" value = " 3 " id = "" onclick="newstring('3')"> <input type = "button" value = " - " id = "" onclick="newstring('-')"> </td> </tr> <tr ><br /> <!-- forth row of calculator --> <td> <input type = "button" value = " 0 " id = "" onclick="newstring('0')"> <input type = "button" value = " N " id = "" onclick="newstring('N')"> <input type = "button" value = " = " id = "" onclick="newstring('=')"> <input type = "button" value = " + " id = "" onclick="newstring('+')"> </td> </tr> <tr ><br /> <!-- fifth row of calculator --> <td> <input type = "button" value = "   " id = ""> <input type = "button" value = "   " id = ""> <input type = "button" value = "   " id = ""> <input type = "button" value = " C " id = "" onclick="clear()"> </td> </tr> </table> </body> </form> </html> ############################################### javascript: memory = "0"; current = "0"; operation =0; function newstring(digit) { if (eval(current) == 0) { current = digit; } else { current = current + digit; } document.calculator.display.value=current; } I'm not sure whether this is a javascript or CSS related problem so sorry if I've posted this in the wrong place. I'm modifying a slideshow plugin to fit my website and have changed some of the dimensions of the slides. Now the next slide is coming in from the wrong position on the right hand side. I'm not sure how to fix this, can someone please help? http://ah.mjtippet.com/ I have a table with red and green cells...what I want to do is collapse rows with ALL green cells and show every other... My code right now runs into a problem when there are both red and green cells in a row...It shifts the red cells to the left... Code: <html>
<head>
<style type="text/css">
.green{ background:green;display:none;}
.red{ background:red;}
</style>
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<table id='theTable' border=2>
<tr>
<th>col0</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
</tr>
<tr>
<td><a href="#" id="showgreen">Uncollapse</a></td>
<td class="green">1</td>
<td class="green">9</td>
<td class="green">20</td>
<td class="red">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr id="toggleMe">
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="green">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
</table>
<a href="#" id="showred">Toggle Errors</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$("#showgreen").click(function(){
$('.green').toggle();
});
$("#showred").click(function(){
$('.red').toggle();
});
</script>
<p><button onclick="toggleVisibility()">toggle</button></p>
</body>
</html>
How can i preserve the cell position as well? |
|||||||