|
JavaScript - Can I Make A Table Shrink To Zero Regardless Of Content?
I'm absolutely new to JavaScript and HTML, although I've done a fair amount with Visual Basic (VB6 and macros in Word and Excel). I'm trying to create a form with different sections. When the user checks a checkbox for a section, the table with the input areas for that section will appear; if the user changes his mind and unchecks the box, that table will go away.
I've played with the visibility attribute, and that works - sort of. I can hide the table from view, but it's still there in the page, taking up as much room as it does whether visible or not. There's a big empty gap containing an invisible table or two if the user only selects the third or fourth section. Code: function showhide(element){
if(document.getElementById(element).style.visibility=="hidden"){
document.getElementById(element).style.visibility="visible";
document.getElementById(element).style.display="block";
}else{
document.getElementById(element).style.visibility="hidden";
document.getElementById(element).style.display="none";
}
}
And I played with the height attribute, and that works - to a point. I can only collapse the table ror height when there's nothing in it. But if there's text, or a text box, or a textarea box, the row will not go down to zero, even if that's what I set it to. Code: <tr ID="targetrow" style="height:0px;"></tr> I'm hoping the only solution isn't to write the table into the document on the fly when the box is checked, and then delete it if the box is unchecked. Any help? Ed Similar TutorialsHi, I have advertiser adbrite, and they are pressuring me to create a mature content gateway. Do you know how on some porn sites it has "click here if you are 18 and older to proceed" and "Click Here to exit if you are not over 18" (redtube.com has an example) I have figured out the easiest way for me to do this is: when a user clicks on a link to mature content, they are redirected to the mature content gateway. the gateway will have options: "Continue" and "Exit" Continue will link them to the original Mature Content URL, while Exit will reffer them to the home page. How would I do this? I have a form with a postcode field in it I want to add a button or text link next to this field which if clicked on goes to the google maps url querying that postcode i.e. if the postcode text in the field (form not submitted) was SW1A 1AA then without submitting that form there would be a button / link next to it which when clicked on went to "http://maps.google.co.uk/?q=SW1A1AA" Pretty sure Java should be able to do this ? Hello there, I'm an IT student that recently started to learn JavaScript. I'm trying to write a code that starts with a prompt inputs a number like n. Then the code will ask another n prompts for data input. For example I will input 5 for first prompt, code will ask for 5 more prompts for input. Can't figure out how to do it
Hi, have table with 5 rows. First 2 rows visible. Last 3 rows hidden - Code: <tr id="row1" style="display: none"> <tr id="row2" style="display: none"> <tr id="row3" style="display: none"> With onclick would like to make those rows visible to user - how can I do that? thank - john Hello, I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2 from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2. I am new to HTML/javascript programming I really appreciate your help This is urgent needs to be done by sunday. Table must be generated dynamically, depending on the number of columns and rows that the user enters. Table is filled with numbers, starting from the bottom-right corner, and then sequentially in a circle, in clockwise, until all fields are filled. Note: technology that is certified as HTML, CSS, JavaScript, jQuery, AngularJS. The interface should be crossbrowser compatible (IE8 +, Chrome, Firefox, Opera, Safari). When should be optimized and user interface tidy and generally correspond to the sketch. Reply With Quote 01-23-2015, 07:36 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Wth 234 posts you should know very well that this forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work. Why have you left starting your assignment so late? The outlook for your future employment appears doubtful, to say the least. Hi Guys, i am wondering if there is a way to have an auto Complete form field from a db table data ? thanks Hello everyone, I am just learning the basics of javascript, and am finding myself stuck. Any help is greatly appreciated. So, I'm using the below javascript for expand / collapse text, it suffices well. However it will only collapse either table rows, or table data cells. Now, I know that these tags Code:
{var trs = table.getElementsByTagName('tr');
{var a = trs[i].getElementsByTagName('td')
Make the rows / data cells expand. However, I cannot seem to make it work on headers. To be lucid, I would like to know what I have to add, or edit to make the below code expand table headers (<th>), and perhaps div tags. The full javascript is thus : Code:
window.onload = function()
{
var table = document.getElementById('stjorn');
if (table)
{
var trs = table.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i++)
{
var a = trs[i].getElementsByTagName('td')[0].getElementsByTagName('a')[0];
a.onclick = function()
{
var span = this.parentNode.getElementsByTagName('span')[0];
span.style.display = span.style.display == 'none' ? 'block' : 'none';
this.firstChild.nodeValue = span.style.display == 'none' ? 'More' : 'Less';};
}
}
};
Thank you for your time. Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. hi guys i having some problems with jquery plugin table sorter on a dynamic table. if i use it on a regular html table it works fine,but on my dynamic table its not working. if someone could look at my code and see if i done something wrong i would appreciate it . Thanks will43 Code:
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script>
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script>
<script type="text/javascript"/>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<form id="form1" name="form1" method="post" action="">
<label for="Position">Position</label>
<select name="Position" id="Position">
<option>QB</option>
<option>HB</option>
<option>FB</option>
<option>WR</option>
<option>TE</option>
<option>RG</option>
<option>RT</option>
<option>C</option>
<option>LG</option>
<option>LT</option>
<option>CB</option>
<option>LB</option>
<option>SS</option>
<option>FS</option>
<option>DE</option>
<option>DT</option>
<option>P</option>
<option>K</option>
</select>
<input type="submit" name="Summit" id="Summit" value="Submit" />
</form>
<p> </p>
<p> </p>
<table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable">
<thead>
<tr>
<th bgcolor="#FF0000">id</th>
<th bgcolor="#FF0000">Team</th>
<th bgcolor="#FF0000">FirstName</th>
<th bgcolor="#FF0000">LastName</th>
<th bgcolor="#FF0000">Position</th>
<th bgcolor="#FF0000">Year</th>
<th bgcolor="#FF0000">Overall</th>
<th bgcolor="#FF0000">Speed</th>
</tr>
</thead>
<?php do { ?>
<tbody>
<tr>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td>
</tr>
</tbody>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</table>
Hello all i have to implement simple LIFO algorithm ( if i can call it like this .. ) say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table for example : im fetching the string "111" so it will be the first record next im fetching the string "222" now the string "111" will be the second and the string "222" will be the first .. and so on hi all, i have a table, just a basic table with 6 rows. depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one. the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc.... i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it. hope that makes sense. my entire test page is: (click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2) -------------------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function reformatMe() {
var divObj = document.getElementById('reformatMe');
var numRows = document.getElementsByTagName("tr");
var z = "1";
for (i = 0; i < numRows.length; i++) {
if (numRows[i].childNodes[0].innerHTML == "2") {
var markStart = numRows[i];
alert(markStart.nextSibling);
var closeTable = document.createElement("/table");
var addTable = document.createElement("table");
//var tbody = document.createElement("tbody");
//addTable.appendChild(tbody);
addTable.setAttribute("id", "subOptionID" + z);
if(numRows[i+1] != null){
numRows[i].parentNode.insertBefore(addTable, numRows[i+1]);
}
z++;
}
}
alert(divObj.innerHTML);
}
</script>
</head>
<body>
<a href="#" onclick="reformatMe();">reformat table</a>
<div id="reformatMe">
<table border="1" cellpadding="4" cellspacing="2" id="menuItemID1">
<tr><td>1</td> <td>1</td> <td>How would you like your food prepared?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Choose two of the following sides</td> <td>0</td> <td>2</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>What do you want on your Baked Potato?</td> <td>0</td> <td>2</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>What type of dressing do you want on your salad?</td> <td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want fries?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want ketchup on your fries?</td> <td>1</td> <td>1</td> <td>1</td></tr>
</table>
</div>
</body>
</html>
I found this copy and paste java script for slide shows... I can only put 1 on the page then the other don't work... how do i edit it so i can put multiple on 1 page? http://www.javascriptkit.com/script/.../jsslide.shtml Code: <script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
Code: <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
I want the dynamically add fields can be appear with a contain of php code, but I have not found the way, I wondering there who are willing to help me. my code as fallowing: Code: <!-- // another fields here //-->
<div id="new_field"--></div>
<script type="text/javascript">
var inputs = {
fields: 0,
target: "new_field",
addInput: function() {
if (this.fields != 5) {
this.fields++;
var newElement = document.createElement('div');
newElement.id = this.target + this.fields;
newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?>' size='auto' maxlength='100%' /><?php } } ?>";
document.getElementById(this.target).appendChild(newElement);
} else {
alert("Only 5 fields allowed.");
}
},
};</script>
i know it does not appear because the php code Quote: newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?' size='auto' maxlength='100%' /><?php } } ?>"; but please let me know is there another idea and pointer to make it work?, I would appreciate it and many thanks. I realy did not mean over image I ment some like "text"<br> then image here there are 4 parts to this script. I am trying to change it so that there is text content over the image. part 1 Code: meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href='slideshow1.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>
<div id="rotator">
AD One<a href="$siteurl/index.pl" onmouseover=\"Tip('<img src="/upload/3282.jpg" width="300">')\" onmouseout=\"UnTip()\"><img src="imageone.jpg" width="120" height="90" border="0" alt="2 bed/1 bath House" /></a>
Ad TWO1<a href="$siteurl/index.pl" onmouseover=\"Tip('<img src="/upload/2485.jpg" width="300">')\" onmouseout=\"UnTip()\"><img src="imagetwo.jpg" width="120" height="90" border="0" alt="CSS Beauty" /></a>
</div>
the "AD ONE" and "AD two" Content above is what I would like to show up over the image and roate with it. I think I just need to change something in part 4 of the code but not sure were. part two slideshow1.css Code: *
{
margin: 0;
padding: 0;
}
#rotator
{
border: 1px solid #000;
cursor: pointer;
overflow: hidden;
margin: 50px auto 10px;
position: relative;
width: 120px;
height: 90px;
}
#rotator img
{
border: 0;
cursor: pointer;
width: 120px;
height: 90px;
}
p
{
text-align: center;
}
part 3 slideshow2.css Code: #rotator img
{
display: none;
position: absolute;
top: 0;
left: 0;
}
part 4 xfade2.js Code: /*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
Rewrite of old code found he http://slayeroffice.com/code/imageCrossFade/index.html
*/
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init()
{
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else
{
setTimeout(so_xfade,50);
}
function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
Hello. I'm creating a simple auto updating script based on PHP and using jQuery to set the interval to 1000 miliseconds. It works in FireFox, as the only one I've tested so far, but in Internet Explorer (Version 7 right now, didn't test others) it just freezes and doesn't auto update. Doesn't auto update either if I refresh the page, so something's messed up here. I'm using the same way of auto updating on other things, such as a chat-page - works on those in all browsers, so I'm kinda on a lost track here. Here's the JavaScript/jQuery: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function loadContent() {
$('#count').load('counter.php', function() {
setTimeout("loadContent()", 1000);
});
return false;
}
$(loadContent);
And this is what I put on the body of the page: Code: <div id="count"></div> Can anyone see what my problem is? And any workarounds for this? I work for a certain print and online publication. The one problem we have is other sites copying ad pasting our content to thier own websites or blogs. Wondering if theirs some way to allow a user to only to be able to copy/paste a certain character limit and then somehow add link to copied and pasted blurb? Maybe theirs a way to use javascript to command notepad to only allow a set number of characters.... Maybe theirs a service available or should be. |
|||||||