|
JavaScript - Show/hide Table With A Click
Hi
i want to hide a table when user click on a link this is my code looks like PHP Code: <div id="sh"> <table width="800" border="0"> <tr> <td></td> <td></td> <td></td> </tr> </table> </div> <div align="center"><a href="JavaScript:window.print();"><img src="images/print.png" alt="Print this page"/></a></div> is it possible to hide above table at same time print this link clicked? any help would be great sorry for language errors Regards. Similar TutorialsI am having problem with editing string on mouse click. I have a string of text like this: Code: id1=&id2=&id3=&id4=& And now I need to show/hide part of string by clicking on a links. I would like to hide/show each id's (i.e. id1=& It is simple to hide whole text but how about part of it ? Hey there! I found a great code to do this, but I would like to have the row defult set to hide via the Javascript. This is because I have many rows and I do not want to set them all to display:none and it would be easier and less bother to just set it in one place which is the JS code. Thank you! ................. Code: <html>
<head>
<script>
function toggle(thisname) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(thisname)){
if ( tr[i].style.display=='none' ){
tr[i].style.display = '';
}
else {
tr[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<span onClick="toggle('nameit');">toggle</span><br /><br />
<table border="1">
<tr nameit=fred >
<td >Always Visible</td>
</tr>
<tr nameit=fred id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>s visible</td>
</tr>
</table>
</script>
</body>
</html>
Hi All, I am trying to get a page to display a certain row in a table if a checkbox has been ticked. The code is as follows: Code: <tr> <td class="cal_l"><label for="upcoming">Events Xtra:</label></td> <td class="cal_r"><input class="text" type="Checkbox" name="upcoming" id="upcoming" value="checked"> <em>(tick to include in Events Xtra section)</em></td> </tr> <tr> <td class="cal_l"><label for="event_description">Xtra Description:</label></td> <td class="cal_r"><textarea name="event_description" cols="60" rows="5" id="event_description"></textarea></td> </tr> The top row is the one that I want to use as the trigger, and the bottom row will be hidden from view unless the checkbox has been ticked (or clicked?). I have tried all sorts of JS / Div controllers etc. but cannot get it to work across table rows. Neil Hi, I need a button that not only resets what is typed in the textarea but also hides all shown tables... Here's how my current set up is... ---------text area------ with a reset button table1 title (when clicked, shows a table under it) table2 title (when clicked, shows a table under it) table3 title (when clicked, shows a table under it) the tables under the main tables have buttons that when clicked on inserts texts in the textarea. Any help would be much much appreciated! Hi I have a multipage form. I can put data entered in hidden form elements from previous pages. I want to show or hide table rows depending on this data value. For example, I collect a list of names in first form, but if some names are blank I dont want to show the table row associated with that name to collect more data. I have seen loads of code to toggle rows but cant find any which shows me how to toggle on a variable. Thanks in advance. I have a php page that essentially builds a pay report in the form of a table. The php side builds the page properly, though it took some time to get the table rows onmouseover and onmouseout functions to work for row highlighting. Now the issue is the table row's onclick function. Here is what the outputed html looks like. Code: <head>
<script type="text/javascript" language="javascript">
function HideShowDiv(divID)
{
if (document.getElementById(divID).style.display == "none")
{
document.getElementById(divID).style.display = "block");
document.writeln("show "+divID);
}
else
{
document.getElementById(divID).style.display = "none";
document.writeln("hide "+divID);
}
}
</script>
<STYLE>
<!--
tr { background-color: transparent}
.normal { background-color: transparent }
.highlight { background-color: #dcfac9 }
//-->
</style></head>
<body>
<!-- Start the main body DIV tag -->
<div id="PageBodyFrame" align="center">
<table width="80%">
<tr><td colspan="4">Georgetown Youth Baseball Association</td></tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD1');">
<td align="left">James Beach</td>
<td align="center">1 Game(s)</td>
<td align="right">$22.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&u=1">Cut Check</a></td>
</tr>
<!-- First hidden div embedded in the next row of main table -->
<tr><td colspan="4">
<div id="HD1" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td></tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Marin vs LBF</td>
<td align="right">\$22.50</td>
</tr></table></div></td></tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD3');">
<td align="left">John Carpenter</td>
<td align="center">0 Game(s)</td>
<td align="right">$1.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&a=3">Cut Check</a></td>
</tr>
<!-- Second Hidden div embedded in table row -->
<tr><td colspan="4">
<div id="HD3" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td>
</tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Assigner Fee</td>
<td align="right">\$1.50</td>
</tr></table></div></td></tr>
<tr>
<td colspan="2" align="right">Some Association of Baseball</td>
<td align="right">\$24</td>
<td align="center"></td>
</tr>
</table>
</div> <!-- Closes the main body div container -->
In my javascript function, the writeln() calls are for testing to see if the even is even firing. but nothing gets written to the page. Any thoughts on this would be greatly appreciated. Basically I want the row with the users name to be clickable which will show the details in the hidden div associated with the user. Hi I want to get javascript to show or hide a row in a table depending on whether a value is held by a variable collected in a mulitple part formmail. If only 1 adult fills in their name on the earlier form there is no need to show the row which asks him to agree to membership on a later form page. This is what Ive got so far Code: <form name="frm3" method="post" action="bookingscript.php">
<input type="hidden" name="adult2fn" value="$adult2name" />
<script Language="JavaScript">
var name1 = document.frm3.adult2fn.value;
if(name1 =="")
{alert("hello");document.getElementById("hidden_row").style.display = 'none';}
else
{alert("no way");document.getElementById("hidden_row").style.display = '';};
</script>
<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidden_row">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</form>
If $adult2name is blank then name1 is blank and the row does not show, else $adult2name contains a name, name1 is not blank and the row shows. I have tried displaying the hidden form field (by changing it to text), and adding my own content, also putting in my own values instead if $adult2name and the Alerts appear as appropriate, but the whole table disappears whilst the alert is on and reappears when the alert is OKed for either condition of the if. Same in Firefox and IE7 & 8 Could someone please tell me the error of my ways. Many thanks Richard Hi to All, I have a table that contains many rows, some in italian with code <td nome='riga_i'> and some in english with code <td name='row_e'>. I have created two buttons with different background flags: italy and uk, so when one pushes the button with flag uk, the html page will be reloaded with only english rows, and when one pushes the button with flag it, the same page is reloaded containing only italian rows. All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this. Here the code: <html> <head> <script type="text/javascript"> function toggle(name) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(name)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } // function toggle(nome) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(nome)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } </script> </head> <body onload="toggle('name');"> <table> <tr nome="riga_i"> <td>REQUISITI RELATVI AL SERVIZIO</td> <td> </td> <td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr> <tr name="row_e"> <td> </td> <td>REQUIREMENTS RELATED TO THE SERVICE</td> <td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr> .... .... and so on.... ..... </table></html> To better the code I have tried in this way but without success ... <html> <head> <script type="text/javascript"> function toggle(this) { if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } } </script> </head> Thanks in advance !!! hello! I currently have 2 UL's that get slide down when you click a button (used for navigation). I currently have it set up so that when you click the "ul#selectService" they slide down, and when you click it a second time it will slide back up and disappear. However, they only way to get the UL's to disappear is to click the "ul#selectService" a second time, so I'm trying to get it set up so that when you click on anything that isn't the UL's it will cause it to slide back up again. i currently have been working on a starting idea to show what I'm basically trying to do so that you can get a rough estimate of my goal: This is my HTML that i'm using: Code: <ul id="selectService">
<li></li>
<li></li>
<li></li>
</ul>
<ul id="secondHalf">
<li></li>
<li></li>
<li></li>
</ul>
Code: var $box = $('#selectService');
$("*:not(#serviceSelect)").click(function(){
if (!$box.has(this).length) { // if the click was not within $box
$('#selectService').hide();
$('#secondHalf).hide();
}
});
Right now nothing is happening when i click out of the UL any thoughts? Hi Im trying to make a dropdown menu like IGN has on his site with the following javascript code. The only problem however is I can't seem to hide the menu when a user clicks outside the menu. This is a bit frustrated because when a user wants to hide the menu again the need to reclick the menu header. Is there anyway I could solve this problem? Also a explanation about the code would be helpfull im not used to work with javascript. Also this is the code I have so far which works to onclick hide and show the menu. javascript: PHP Code: function toggle(id) { var el = document.getElementById(id); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } HTML: PHP Code: <a href="#top" onclick="toggle('view_user-options');";>Panel</a> <div id="view_user-options" style="display:none;"> <div class="nav_option"><a href="">my test</a></div> </div> Also if anyone knows how to do it plz combine it with my code so it works. I always get in trouble with javascript when combining two codes in one. Note: plz don't give me solution with tons of code I just want a verry simple solution. Hey. I've got some code that shows a div if a link is clicked. How can I add to the code so when it's clicked again, it hides it. Here's my code (the .linkon class needs to be removed again after as well): Code: <style type="text/css">
.linkoff-div .linkon {
color:orange;
font-size:15px;
font-weight: bold;
}
.linkoff-div {
text-align: left;
line-height: 20px;
border-bottom: 2px solid #344050;
margin-top: 15px;
}
.linkoff-div a {
color:white;
font-size: 15px;
}
#faq1 {
background-color: #596778;
width: 540px;
padding: 5px;
}
</style>
<script type="text/javascript">
function hideall(){
document.getElementById("faq1").style.display="none";
document.getElementById("faq2").style.display="none";
document.getElementById("faq3").style.display="none";
document.getElementById("faq4").style.display="none";
document.getElementById("link1").className="linkoff";
document.getElementById("link2").className="linkoff";
document.getElementById("link3").className="linkoff";
document.getElementById("link4").className="linkoff";
}
function myclick(id){
hideall();
document.getElementById("faq" + id).style.display="block";
document.getElementById("link" + id).className="linkon";
}
</script>
<div class="linkoff-div"><a href='#' id="link1" onclick="myclick(1);return false;" class="linkoff">Registration</a></div>
<div id="faq1" style="display:none">
Registration stuff
</div>
<div class="linkoff-div"><a href='#' id="link2" onclick="myclick(2);return false;" class="linkoff">Logging In</a></div>
<div id="faq2" style="display:none">
Logging in stuff
</div>
<div class="linkoff-div"><a href='#' id="link3" onclick="myclick(3);return false;" class="linkoff">My Account</a></div>
<div id="faq3" style="display:none">
My Acccount stuff
</div>
<div class="linkoff-div"><a href='#' id="link4" onclick="myclick(3);return false;" class="linkoff">Videos</a></div>
<div id="faq4" style="display:none">
Video stuff
</div>
Thanks, Adam http://www.codingcereal.com/2010/12/...-tab-switcher/ when i change the js code to this: Code: j Code: Query(document).ready(function() {
jQuery("#tabswitch ul li:first").addClass("active");
jQuery("#tabswitch div.tab-container:first").show();
jQuery("#tabswitch ul li").click(function(){
jQuery("#tabswitch div.tab-container").hide();
jQuery("#tabswitch ul li").removeClass("active");
});
})
for the default state. the tab1 is show, but why when i click the tab1. it doesn't hide?. but there is a line in the click function. jQuery("#tabswitch div.tab-container").hide(); could it be that this line doesn't effect on it? jQuery("#tabswitch div.tab-container").hide(); hi all. i'm still newbie with programming. i have created a table with two columns with a list of scholarship and a read more link. this is the table that i made: what i want to do is to hide the second column if the user click the "read more" in first column and hide the first column when the user click the "read more" in second column. if the user click "read less" it will show both column back like normal. i try to use the javascript for hide column but it cannot link with my "read more" script. i hope that anyone can help me. thanks in advance Hi well my problem is.. how do i hide the popup list.. i would like to if the user click outside of that div element.. the popup div will hide.. but whenever i select the body or the id containing that popup div.. the whenever i click the down arrow button.. it shows the popup div.. but then closes again.. because of the selector hide on the container div.. http://development.andrewfopalan.com/devpage/test.html here's the test page.. when i click the down arrow.. it shoes the popup.. how to do if i want that any click outside that popup element.. i will call the hide/fadeout for the popup element.. please help.. tried various things.. just a shed of light will do.. thanks 1. I have code to show tip like: <a class="notvisible" onclick="mytip.disable();" href="javascript:void(0);">Close</a> How is correct Javascript code to Close this tip when clicked? 2. How to move next news feed with click on arror icon and back icon? <a onclick="mynews.previous();" href="javascript:void(0);">Previous</a> <a onclick="mynews.next();" href="javascript:void(0);">Next</a> How is correct Javascript code to move news item next and prevoius news? when clicked? <script type="text/javascript"> mynews.init(); mytip.init(); </script> hello guys im new in creating sites and i dont know anything about javascript so i creat a web page in frontpage 2003 wt i want to make there is.. the page is a downloading page. so i want the vistor of this page to click the adv. first, then the download link will apear, only if he/she click on the adv. here is the code of the page Code: <html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welcome to my site Download page</title>
</head>
<body>
<p align="center">"Site logo"</p>
<p align="center">Welcome to my site Download pages</p>
<p align="center">To be able to view the download link you have to open the
following advertisement first.</p>
<p align="center"> </p>
<p align="center"> <!-- Begin: AdBrite, Generated: 2009-12-10 23:02:17 -->
<script type="text/javascript">
var AdBrite_Title_Color = '0000FF';
var AdBrite_Text_Color = '000000';
var AdBrite_Background_Color = 'FFFFFF';
var AdBrite_Border_Color = 'CCCCCC';
var AdBrite_URL_Color = '008000';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<span style="white-space:nowrap;"><script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1435752&zs=3732385f3930&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
<a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1435752&afsid=1">
<img src="adbrite-your-ad-here-leaderboard.gif" style="background-color:#CCCCCC;border:none;padding:0;margin:0;" alt="Your Ad Here" width="14" height="90" border="0" /></a></span>
<!-- End: AdBrite --></p><hr>
<p align="center"> </p>
<p align="center">Thank you</p>
<p align="center">
<a href="http://pearl.plunder.com/x/$kE_C_2YS2UAKXpp9SYAs5VA2mKS3AqHD/0fa75b6711/?/FarmVilleClicker.exe">
Click here to download the file.</a></p>
</body>
</html>
so this page is linked to my blog and the downloading webpage im sorry for my bad english any ideas.. ill be so thankful this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html using this code: http://www.linkstraffic.net/programm...nd/movediv.php heres my code. can someone fix it? html: [CODE] <!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>Chris MacDonald - Javascript Assignment 2</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java.js"></script> <div id="header"> <div id="logo"><img src="images/beat.png" /></div> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li> <li><a href="#">About Us</a></li> </ul> </head> <body> <div id="content"> <a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a> <div id="coverlogin"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/> <p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p> </div> </div> </div> <div id="footer"> <div id="footertext">Beat Threads - 2010</div> </div> </body> </html> [CODE] javascript: // JavaScript Document var hh=0; var interv; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==40) { clearInterval(interv); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(interv); return; } hh-=2; obj.style.height = hh + 'px'; } [CODE] Can someone fix this for me? Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');
if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}
HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much |
|||||||