Hide / Show Table - For Loop Ends Prematurely
May 18, 2011
The functions hide/show tables within a page, and update a button by the table title accordingly. The number of tables on the page is dynamic (php generated based on an SQL query), so the Expand/Collapse all buttons are generated last, and pass the table count to the functions in variable x. I have confirmed that the number passed in x is correct for the number of tables, and that all of the tables' IDs are correct in the generated HTML. The problem is that no matter what is passed in x (currently over 300), the loop ends at 27.
function expand_all(x){
var i=1
for(i = 1; i <= x; i++){
document.getElementById('tbl' + i).style.display = "block";
document.getElementById('lnk' + i).value = "[ - ]";
}}// end expand_all
function shrink_all(x){
var i=1
for(i = 1; i <= x; i++){
document.getElementById('tbl' + i).style.display = "none";
document.getElementById('lnk' + i).value = "[ + ]";
}}// end shrink_all
To confirm the values, I changed
document.getElementById('lnk' + i).value = "[ - ]";
to
document.getElementById('lnk' + i).value = "[ - ] " + i + " of " + x;
In both functions, I got incrementing values for i from 1 to 27. X consistently was 343.
View 3 Replies
ADVERTISEMENT
Oct 14, 2011
I think there is something simple I'm missing, but I'm unsure how to fix at this point. I have a sidebar with a bunch of unordered lists. Each sidebar li item may or may not have a class assigned to it. I need to scan every list item for any with a special class, say: listClass1, listClass2, listClass3. Ignore all others.
[Code]...
View 10 Replies
View Related
May 6, 2010
Does anyone know why this isn't working? The toggle function works perfectly fine with PHP loops, but when I insert the table td tr tags, it does not hide the loop when the page first loads...It just shows the results in the div which it shouldn't be doing.
Here's what my code looks like...
JS
Code:
<script type="text/javascript">
function toggle(element) {
if (document.getElementById(element).style.display == "none") {
[Code]....
View 3 Replies
View Related
Sep 12, 2011
I am trying to hide/show table when hide/show button is pressed
Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.
Code:
View 1 Replies
View Related
Sep 2, 2009
I have a table, with a repeat region when there is more than one record to show, and a javascript function, that when you click on the Project ID, it shows the Job ID information in a row underneath.
Code:
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
[Code].....
The problem is that when I click on the Project ID (Show/Hide link) of one of the 'looped' resutls, it always shows/hides the first Project ID's Job ID information
View 5 Replies
View Related
Jul 13, 2009
I'm cooperating with some friends on making the design for a website. I'll be handling all the flash stuff. I'm very good with Actionscript, flash's scripting language. What I'm trying to do is this: in the Home page, I want to add a big flash animation, that goes on top of the normal content (as in a higher layer). The animation will end after some point, after which I want to get rid of it, sort of like a welcome animation, that vanishes off after it ends. This way when someone accesses the website, they'll be greeted to a small non-annoying animation that overlaps the rest of the page, and then they'll be left with the Home.
The problem is this: I don't know how to do it. I don't know javascript. I do know that actionscript is based in javascript. I've been fooling around on some javascript tutorial pages and indeed they are pretty similar, so I'm not entirely helpless.But I can't find what I'm looking for. After a set amount of time, how do I get rid of the flash in the document? Can I eliminate it, make it invisible, unvalidate it or whatever?I thought that instead of having the animation in another page that redirects to the Home, this would be a great opportunity to finally learn how to integrate flash with websites.
View 4 Replies
View Related
Jul 13, 2009
What I'm trying to do is this: in the Home page, I want to add a big flash animation, that goes on top of the normal content (as in a higher layer). The animation will end after some point, after which I want to get rid of it, sort of like a welcome animation, that vanishes off after it ends. This way when someone accesses the website, they'll be greeted to a small non-annoying animation that overlaps the rest of the page, and then they'll be left with the Home.
But I can't find what I'm looking for. After a set amount of time, how do I get rid of the flash in the document? Can I eliminate it, make it invisible, unvalidate it or whatever?
I thought that instead of having the animation in another page that redirects to the Home, this would be a great opportunity to finally learn how to integrate flash with websites. After all, I've been meaning to learn javascript for some time now.
View 3 Replies
View Related
May 13, 2009
I have several elements that I can perform show hide and fadeIn animations on but I want the action to continue on an endless loop. Is this possible? If it is, are there any cpu usage issues when using a loop?
<script type="text/javascript">
$(document).ready(function(){
$(".upright").hide(300);
$(".cntrlg").show(300);
$(".cntrlg").hide(300);
$(".cntrmed").show(500);
$(".cntrmed").hide(300);
$(".cntrlg, .lowleftmed").show(100);
$(".cntrlg, .lowleftmed").hide(100);
$(".lowrightmed").show(300);
$(".lowrightmed").hide(300);
$(".cntrmed").show(300);
$(".cntrmed").hide(300);
$(".upright").show(2000);
$("#dai1").fadeIn(3000);
$("#dai2").fadeIn(3000);
$("#dai3").fadeIn(3000);
$("#june1").fadeIn(3000);
$("#june2").fadeIn(3000);
$("#june3").fadeIn(3000);
});
</script>
View 8 Replies
View Related
Jul 23, 2005
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
View 10 Replies
View Related
Jun 2, 2009
I have a table with three columns (and about 20+ rows). The third column has embedded javascript to show/hide additional information. It works, however when I try to show/hide information on a different table row (except the top), only the top row opens/shows.
Here's my script:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show";
}else {
ele.style.display = "block";
text.innerHTML = "Hide";
}}
</script>
And here's my HTML:
</head><body>
<h2>Beaus CD Collection</h2>
<table border="1">
<tr bgcolor="#99CCCC">
<th>Artist:</th>
<th>Album Title:</th>
<th>More Information:</th></tr>
<xsl:for-each select="CATALOG/CD"><tr>
<td><xsl:value-of select="ARTIST"/></td>
<td><xsl:value-of select="TITLE"/></td><td>
<a id="displayText" href="javascript:toggle();">Show</a>
<div id="toggleText" style="display: none">
<ul>
<li>Country: <xsl:value-of select="COUNTRY"/></li>
<li>Record Company: <xsl:value-of select="COMPANY"/></li>
<li>Price: <xsl:value-of select="PRICE"/></li>
<li>Year of Release: <xsl:value-of select="YEAR"/></li>
</ul></div>
</td></tr>
</xsl:for-each>
</table></body></html>
</xsl:template>
</xsl:stylesheet>
I didn't form this script myself - I just grabbed it online from a separate source.
View 2 Replies
View Related
Apr 27, 2011
jquery hide & show table row concept
View 1 Replies
View Related
Apr 23, 2010
Note that these issues are specific to IE8, and I am using for the purpose of creating a program which works in IE, FF, Chrome, so I've only tested my solutions in those 3. I wasn't sure whether to start this as a question (as I am asking for an easier solution) or if I note it as a problem or discussion.
Any time I've used .show(x) where x > 0 on anything inside of a table, I get this "flicker", which has been mysterious to me for a while. As I need the row to expand it's height when the object grows, so I can't use "position:absolute;", which I found as a suggestion elsewhere (and does work...if the space is already allocated).
[Code]...
I hope this helps anyone who is having the IE "flicker" issue, and I hope even more that someone out there can give an easier solution!
View 2 Replies
View Related
Aug 16, 2010
I have a query regarding the hide/show of the cells in a table.
The first column is 'Yes and No' options using combo box, 2nd option is 'input field', 3rd column is also 'Yes and No' option using combo box, and 4th option is also 'input field'.
What I want is to make a table using JAVASCRIPT, in which if i select 'No' from the first row first column, i want to hide the remaining 3 cells of the first row. Otherwise if i select 'yes' from the first row first column i want to show all the 3 other options of the first row. Also in between if I select 'No' from the first row third column i want to hide the first row fourth column cell. Selecting 'yes' from the first row third column will show the first row fourth column.
I want apply the same setting of hide and show cells into the remaining columns also.
By selecting 'no' from first column -> hide other corresponding cells of the row
by selecting 'yes' from the first column -> show other corresponding cells of the row
AND ALSO
By selecting 'no' from third column -> hide fourth cell of the corresponding/same row by selecting 'yes' from the third column -> show fourth cell of the corresponding/same row
View 1 Replies
View Related
Nov 19, 2010
I want to hide a table when user click on a link
this is my code looks like code...
is it possible to hide above table at same time print this link clicked?
View 2 Replies
View Related
Aug 10, 2010
I have a query relating javascript hide/show cells in a table
I have created a table of 5 rows and 5 columns. The first row is drop down menu having Yes and No option and remaining cells in the row are two text box and two drop down menu.
I want to hide (or may be block) the other four cells as per the option selected from the drop down menu in the first row. If i select No from the drop down menu from the first row i want to hide the remaining cells in the row and if i select Yes I want to show the remaining cells in the row.
View 1 Replies
View Related
Nov 17, 2011
I got a selection tag which pulls values from DB to populate,i want to hide or show related div/table based on the selection. now i got two confusions. how can i know what is selected coz the option tag value is coming from DB, also i never work with show/hide thingy. how can i achieve it?
View 6 Replies
View Related
Feb 4, 2004
I want to show one extra row in a table when the user click on the option button, and hide this row when the user click on the other button. Code:
View 4 Replies
View Related
Mar 15, 2011
I ahve this table as code shown below with buttons Up and down above and below the table respectively now whgat i want to do is that as I have ten enteries in the table.I want to show only 6 of them at one go on a page and the rest 4 should be hidden and when I cliock the "down" button the next four should be displayed and vice versa when I click "up" button the first 6 should be displayed.
Code:
<div >
<input type="button" id="up" value="up"/>[code]....
View 2 Replies
View Related
May 4, 2011
I have a table that is set up to look like a menu and would like to show/hide certain rows, the problem is that the rows do not have id's...basically, it looks like this:
<table class="mainTable">
<tbody>
<tr><td class="Level1 Selected"><a href="page1.aspx">Page 1</a></td></tr>[code]....
Ultimately, what I would like to do is: show all Level1 rows.hideadditionallevels below Level1 (which could be any number deep)
and finally, if row is selected then show additional levels below (td class will change to "Selected" when on the page) and above (ie. if Level2 is selected).
View 4 Replies
View Related
Jan 28, 2010
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.
View 2 Replies
View Related
May 12, 2011
I need a button that not only resets what is typed in the textarea but also hides all shown tables...[code]...
View 3 Replies
View Related
Aug 16, 2010
I have a query regarding the hide/show of the cells in a table.The first column is 'Yes and No' options using combo box, 2nd option is 'input field', 3rd column is also 'Yes and No' option using combo box, and 4th option is also 'input field'.What I want is to make a table using JAVASCRIPT, in which if i select 'No' from the first row first column, i want to hide the remaining 3 cells of the first row. Otherwise if i select 'yes' from the first row first column i want to show all the 3 other options of the first row. Also in between if I select 'No' from the first row third column i want to hide the first row fourth column cell. Selecting 'yes' from the first row third column will show the first row fourth column.I want apply the same setting of hide and show cells into the remaining columns also.
By selecting 'no' from first column -> hide other corresponding cells of the row by selecting 'yes' from the first column -> show other corresponding cells of the row
AND ALSO
By selecting 'no' from third column -> hide fourth cell of the corresponding/same row by selecting 'yes' from the third column -> show fourth cell of the corresponding/same row
I have posted this question in the tablular form, but it is now showing in the proper format. Anyone in the forum please help me to make this table using JAVASCRIPT. I need this table within a day or two.
View 3 Replies
View Related
Sep 2, 2010
I've got a table that I want to be able to show/hide rows based on what check box is checked. By default, I don't want anything displayed, then if you check a or some of the check boxes you'll see the data.Here is what I have, which has some effect in FF but does not work at all in IE.This is my script (which is part mine, part web-found)
<style type="text/css">
.this {
display: none;[code]......
View 3 Replies
View Related
May 4, 2009
I am generated some HTML / Javascript through the use of some XSLT, and what I aim to do is generate a table with many rows where we always have the 1st row showing (which has a +/- image there for users to click so that they can expand/collapse the rest of the rows in that table). I am having trouble with the Javascript on assigning the relevant class to the rows so that they get hidden or shown.So far my XSL is outputting the following...
HTML Code:
<table class="InfoBlock" cellspacing="0" cellpadding="0">
<col class="report_column_headings">[code]...
I know I am violating HTML here by having many tags with the same ID, but I am just looking for ways to get this to work.what I place in my 'ShowHide()' javascript method?
View 1 Replies
View Related
May 27, 2009
is it possible to have several rows in a table with the same id so i can show/hide them in a block?I have also tried adding a span around the block of rows but that doesn't work ( I seem to remember you cant hava a span around TR tags?)
View 4 Replies
View Related
Jan 6, 2006
I've tried some methods mentioned in other topics here, but I can't seem to get any of them to work for this specific problem I have. I'm not very experienced in javascript so I haven't been able to modify any of the other examples to work the way I need it to.
I hope the code gives you some idea of what I need even though it's a bit messy, I think most of it should be pretty self explanatory? Code:
View 4 Replies
View Related