Learn VBA & Macros in 1 Week!

JavaScript - Expandable Table - Html Java Help

Full Excel VBA Course - Beginner to Expert

Expandable Table - Html Java Help	View Content

Trying to put my finger on how to achieve this result. About half way down on the page linked below you'll see "Recent - Comments - Popular - Tags"
this table expands when you rollover and stays expanded while allowing you to populate the different content. Any help would be greatly appreciated, not even sure if I'm in the right forum.

http://thedailydisney.com/blog/2010/...magic-kingdom/

Thanks for the time.
Will

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Expandable Detail Table Rows

Expandable Table Of Contents... School Final Project

Java Script To .html

Help With Java - Page Not Loading In Html

Html/java Form To Local Csv File

Need To Compare Html Text Area Values By Using Java Script

Need Help With The Expandable Divs

Expandable Menu Help

Expandable Groups

Expandable Sticky Bar

Expandable Lists Issue

Expandable And Collapsable Forum Categories

How To Make Expandable Para Or Link?

Expandable Checkboxes Restricted Based On Choice

Open Tables With Expandable Sections Closed

Fixing Forum Through Java: Adding Picture Button And Html Button

How Not Get Always The Same Row Cloned In Table<html>

Disabling Html Table In A Form.

How To Generate Html Table With Javascript

Output Recordset To Html Table

Learn VBA & Macros for Excel in 1 Week!

Expandable Detail Table Rows

Similar Tutorials

I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable.

I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post...nd-plugin.aspx

FROM JAVASCRIPTTOOLBOX

A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row.
The only requirements a

1. Put a class of "parent" on each parent row (tr)
2. Give each parent row (tr) an id
3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs

Original code:

Code:

$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});

This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing.

My code now looks like this:

Code:

$(document).ready(function() {
	$('tr:not(.parent)').hide();
	
	//$('tr.parent')
	$('.arrow')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
			$(this).toggleClass("up");
		});
	});

So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me?

Thanks

Expandable Table Of Contents... School Final Project

Similar Tutorials

Hey thanks in advance to anyone who can take a peak at my code and hopefully point me in the correct direction.

I have been working on my final project in my javascript class for a bit, and there are a few erros I cant seem to find through firebug or error console.
It is due this evening at midnight, so anyone that could help, I really need this assignment for a decent grade.

Basically there are two issues so far, one needs to be solved so the other can be as well.

First, line 103 - 105 should create a hyperlink to the specified id, but is doesn't return a number. so the link goes no where
it is this code:
PHP Code:
//create hypertext link to the section heading
            var linkItem = document.createElement("a");
            linkItem.innerHTML = n.innerHTML;
            linkItem.href = "#" + n.id;

Next I belive there is a problem with the function expandCollapseDoc(), that might fix itself when the other problem is solved.

The document should expand and collapse with the menu.

Here is my javascript code:
PHP Code:
/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 7
   Tutorial Case

   Author: Mike Cleghorn
   Date:   2-15-10

   Filename: toc.js

   Global Variables:
   sections
      An array contain the HTML elements used as section headings in the historic document

   Functions List:

   addEvent(object, evName, fnName, cap)
      Adds an event hander to object where evName is the name of the event,
      fnName is the function assigned to the event, and cap indicates whether
      event handler occurs during the capture phase (true) or bubbling
      phase (false)

   makeTOC()
      Generate a table of contents as a nested list for the contents of the "doc"
      element within the current Web page. Store the nested list in the "toc"
      element.

   levelNum(node)
      Returns the level number of the object node. If the object node does not
      represent a section heading, the function returns the value -1.

   createList()
      Goes through the child nodes of the "doc" element searching for section headings.
      When it finds a section heading, a new entry is added to the table of contents

   expandCollapse()
      Expands and collapse the content of the table of contents and the historic
      document

   expandCollapseDoc()
      Goes through the child nodes of the "doc" element determining which elements to
      hide and which elements to display

   isHidden(object)
      Returns a Boolean value indicating whether object is hidden (true) or
      not hidden (false) on the Web page by examining the display style for object
      and all its parent nodes up to the body element

*/

function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

addEvent(window, "load", makeTOC, false);

var sections = new Array("h1","h2","h3","h4","h5","h6");
var sourceDoc; //document on which TOC is based on

function makeTOC(){
    var TOC = document.getElementById("toc");
    TOC.innerHTML = "<h1>Table of Contents</h1>";
    var TOCList = document.createElement("ol");
    TOC.appendChild(TOCList);

    sourceDoc = document.getElementById("doc");

    //generate list items containing section headings
    createList(sourceDoc, TOCList);
}

function levelNum(node) {
    for (var i = 0; i < sections.length; i++) {
        if(node.nodeName == sections[i].toUpperCase()) return i;
    }
    return -1; //node is not section heading
}

function createList(object, list) {

    var prevLevel = 0; //level of the pervious TOC entry

    var headNum =  0; //running count of headings

    for (var n = object.firstChild; n != null; n = n.nextSibling) {
        //loop through all nodes in object

        var nodeLevel = levelNum(n);
        if (nodeLevel != -1) {
            //node represents a section heading

            //insert id for the section heading if necessary
            headNum++;

            //create list item to match
            var listItem = document.createElement("li");
            listItem.id = "TOC" + n.id;


            //create hypertext link to the section heading
            var linkItem = document.createElement("a");
            linkItem.innerHTML = n.innerHTML;
            linkItem.href = "#" + n.id;


            //append the hypertext to the list entry
            listItem.appendChild(linkItem);


            if (nodeLevel == prevLevel) {
                //append the entry to the current list
                list.appendChild(listItem);
            } else if (nodeLevel > prevLevel) {
                //append entry to new nest list
                var nestedList = document.createElement("ol");
                nestedList.appendChild(listItem);

                list.lastChild.appendChild(nestedList);

                //add plus/minus box beffore the text
                var plusMinusBox = document.createElement("span");
                plusMinusBox.innerHTML = "--";
                addEvent(plusMinusBox, "click", expandCollapse, false)
                nestedList.parentNode.insertBefore(plusMinusBox, nestedList.previousSibling);

                list = nestedList;
                prevLevel = nodeLevel;

            } else if (nodeLevel < prevLevel) {
                //append entry to a higher-level list
                var levelUp = prevLevel - nodeLevel;
                for (var i = 1; i<= levelUp; i++) {list = list.parentNode.parentNode;}

                list.appendChild(listItem);
                prevLevel = nodeLevel;
            }
        }
    }
}

function expandCollapse(e) {
    var plusMinusBox = e.target || event.srcElement;
    var nestedList = plusMinusBox.nextSibling.nextSibling;

    //Toggle the plus and minus symbol
    if (plusMinusBox.innerHTML == "--") plusMinusBox.innerHTML = "+"
    else plusMinusBox.innerHTML = "--";

    //Toggle display of nested list
    if(nestedList.style.display == "none") nestedList.style.display = ""
    else nestedList.style.display = "none";

    //expand/collapse doc to match TOC
    expandCollapseDoc();
}

function expandCollapseDoc() {
    var displayStatus = "";

    for  (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) {
        var nodeLevel = levelNum(n);
        if (nodeLevel != -1) {

            //determain display status of TOC entry
            var TOCentry = document.getElementById("TOC" + n.id);

            if (isHidden(TOCentry)) displayStatus = "none"
            else displayStatus = "";
        }

        if (n.nodeType == 1) {
            //apply to current status for the node
            n.style.display = displayStatus;
        }
    }
}

function isHidden(object) {
    for (var n = object; n.nodeName != "BODY"; n = n.parentNode) {
        if (n.style.display = "none") return true;
    }
    return false;
}

the html was too long, so i uploaded it to my webspace

you can check out the almost working version at http://www.kinetic-designs.net/final/usconst.htm

Again thank you so much! Any questions just ask!

Java Script To .html

Similar Tutorials

Hi all. I am a newbie. I would like to know how I can get the following script to work on the web. I have produced a flyer in iWeb on my mac. I published it on line and then viewed the source while it appeared on my web browser. The code is below.

I then copied this code into a webmail server panel that sends out emails to a list of people in a database. The flyer didn't appear. It just came back as the code I copied. No pictures, no colours etc.

I noticed the term javascript in the code. Did some research and found that I might need to convert this to html.

Am I right?

Can anyone test this for me?

js2html is a program that apparently does this for me. Is that what I should buy?

Anyway, here's the script...

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 2.0.4" />
<meta name="iWeb-Build" content="local-build-20100523" />
<meta name="viewport" content="width=700" />
<title>Blank</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="Blank_files/Blank.css" />


<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
<script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<script type="text/javascript" src="Blank_files/Blank.js"></script>

</head>
<body style="background: #ffffff; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: #ffffff; text-align: left; width: 700px; " id="body_content">
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 35px; margin-top: 0px; position: relative; width: 630px; z-index: 1; ">

<div id="widget0-navbar" class="navbar">

<div id="widget0-bg" class="navbar-bg">

<ul id="widget0-navbar-list" class="navbar-list">
<li></li>
</ul>

</div>

</div>
</div>
<script type="text/javascript"><![CDATA[//><!]]></script>

<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 1px; width: 630px; height: 0px; left: 35px; position: absolute; top: 3px; width: 630px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 630px; ">
<img src="Blank_files/shapeimage_1.jpg" alt="" style="height: 1px; left: 0px; position: absolute; top: 0px; width: 630px; " />
</div>

</div>
</div>
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 497px; width: 703px; height: 497px; left: -2px; position: absolute; top: -53px; width: 703px; z-index: 1; " class="tinyText style_SkipStroke stroke_0">
<img src="Blank_files/BSC%20Banner%20May%202010.jpg" alt="" style="border: none; height: 497px; width: 704px; " />
</div>
<div style="height: 480px; line-height: 480px; " class="spacer"> </div>

</div>
<div style="height: 150px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
</body>
</html>

Help With Java - Page Not Loading In Html

Similar Tutorials

Something is up with my coding, when I try to load the page.. it will only load in notepad. Help!

<html>
<head>
<title>Other ways to help</title>

<SCRIPT TYPE="text/javascript">

</SCRIPT>

</head>

<body>
<a name="other">
<body background="otherbackground.jpg">
<center><table border="2" cellspacing="2" width="900" height="190" bordercolor="#000000">
<tr>
<td width="60%" td bgcolor="white">
<b>To make a donation, fill and submit the following form. You can also make a cash donation directly by filling out your credit card information.<br/>
Also, be sure to check yes if you would like to subscribe to our online monthly newsletter.</b><br/>
<form name="Donations" method="post" action="#" onsubmit="validateForm(this);">
First Name<input type="text" name="txtFname" size="25" tabindex="1">
M.I.<input type="text" name="M.I." size="1">
Last Name<input type="text" name="Last Name" size="25"><br/>
Street Address<input type="text" name="Street Address" size="25">
Street Address 2<input type="text" name="Street Address 2" size="25"><br/>
City<input type="text" name="City" id="myCity" size="20">
State<input type="text" name="State" size="2">
Zip<input type="text" name="Zip Code" size="10"maxlength="9"><br/>
Email<input type="text" name="Email" size="25"><br/>
Credit Card Number<input type="text" name="Credit Card Number" size="10"maxlength="8">
Expiration Date<input type="text" name="Expiration Date" size="5">
Security Number<input type="text" name="Security Number" size="3"maxlength="3">
<textarea cols="50" rows="4" name="Comments">Comments or Questions:</textarea><br/>
Subscribe to newsletter? <input type="radio" name="choices" value="Yes">Yes<input type="radio" name="choices" value="No">No<br/><br/>
<input type="submit" value="Submit">
<input type="reset">
</form><br/>
</table><br/>

<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Choose a Destination...
<OPTION VALUE="home.html">Home Page
<OPTION VALUE="dogs.html">Learn About Dogs
<OPTION VALUE="cats.html">Learn About Cats
<OPTION VALUE="exotics.html">Learn About Exotics
<OPTION VALUE="other.html">Other Ways To Help
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
<br/><br?>

</body>

</html>

Html/java Form To Local Csv File

Similar Tutorials

Need To Compare Html Text Area Values By Using Java Script

Similar Tutorials

I have one html text area in my JSP file. when i click on that text area, a pop-up will come, in that pop-up i have list of items. So after selecting a item from that pop-up list, need to click okay. so that text area will update with the selected value.

In this case, i need to compare the first text area value and updated text area value. How can i do that in Java Script.

Need Help With The Expandable Divs

Similar Tutorials

I just got this problem when I try to add the expandable divs in my webpage.
However when I click the divs on the page, I can't see the rest of my content.

This is my page, does anybody know what happened with my code??!!

http://www.calibredesign.com/clients..._news_new.html

the divs are on the button of the page.

Thanks!!

Expandable Menu Help

Similar Tutorials

hi, i got a expandable menu that is working. i wonder if there is any way to make the links show as html and css if the user has disabled javascript

i

my code including javascript and css

<!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>Untitled Document</title>

<script language="JavaScript" type="text/JavaScript">

</script>

<style type="text/css">
.menu1{
margin-left:25px;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
width: 200px;
background-color: #03C;
border: thin solid #FFF;
}

.submenu{
background-image: url(images/submenu.gif);
display: block;
height: 19px;
margin-left: 38px;
padding-top: 2px;
padding-left: 7px;
color: #333333;
}

.hide{
display: none;
}

.show{
display: block;
}

</style>

</head>

<body>

<a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
<div id="mymenu1" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
<div id="mymenu2" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
<div id="mymenu3" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
<div id="mymenu4" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
<div id="mymenu5" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>

</body>
</html>

Expandable Groups

Similar Tutorials

Hi, I'm completely new to using JavaScript having never used it before so please forgive me if this is ridiculously easy to solve.

I want to include an expandable FAQ section in part of my website. I managed to find some code that works however by default the sections are expanded. I want them to automatically be collapsed when the page loads and when you click the image it then expands and shows the hidden text.

The code I found is
Code:

<head><title> Untitled Page </title> 

<script type="text/javascript"> 

function expandable_toggle(id) 
{ 
var tr = document.getElementById(id); 
if (tr==null) { return; } var bExpand = tr.style.display == ''; 
tr.style.display = (bExpand ? 'none' : ''); 
} 

function expandable_changeimage(id, sMinus, sPlus) 
{ 
var img = document.getElementById(id); 
if (img!=null) 
	{ 
	var bExpand = img.src.indexOf(sPlus) >= 0; 
	if (!bExpand) img.src = sPlus; 
	else img.src = sMinus; 
	} 
} 

function Toggle_trGrpHeader1() 
{ 
expandable_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif'); 
expandable_toggle('trRow1'); 
} 

function Toggle_trGrpHeader2() 
{ 
expandable_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif'); 
expandable_toggle('row1'); 
} 



</script> 

</head> 
<body> 
<div> <table border="0"> <tr id="trGrpHeader1"> <td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td> </tr> <tr id="trRow1"> <td>&nbsp;&nbsp;Hello<br><br></td></tr> 

<tr id="trGrpHeader2"><td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td> </tr> <tr id="row1"> <td>&nbsp;&nbsp;123</td></tr> 

</table> 
</div> 
</body> 
</html>

Any help you can give would be greatly appreciated. Many thanks

Expandable Sticky Bar

Similar Tutorials

Hey guys,

I own an online internet radio station and I have many different way which people can tune in. One way is the browse 'n' play feature.
The browse 'n' play feature allows you to browse the net at the same time as being tuned into the radio. Below, I have installed an 'Expandable Sticky Bar' which is used for the radio panel.

http://www.dynamicdrive.com/dynamici.../stickybar.htm

What I am trying to do, is simply add that bar on every page my visitors visit. So, when the listen chooses 'Browse 'n' Play' I want a new window or tab to open, with Google and my bar at the bottom.

I cannot figure out how I could do this, any ideas on how I could make this happen?

Thanks.

Expandable Lists Issue

Similar Tutorials

Hello, I'm pretty new to JS but I can script a few things. I'm using a pre-written script, but trying to add a functionality that uses my + and - images to indicate whats whether the list is expanded or not.

It works on the first click. The symbol starts as a plus, you click it and it expands and goes to minus. After that the list maintains functionality (for the most part) but doesn't continue changing symbols back and forth. I've pored over the script for HOURS but I can't find the solution.

Working Link Example

My written JS:
Code:

// JavaScript Document

var expandables = new Array();
expandables[0] = "expand_northeast";
expandables[1] = "expand_southeast";
expandables[2] = "expand_midwest";
expandables[3] = "expand_southwest";
expandables[4] = "expand_west";

var clickCounter = 0;

function expand(current) {

	//add height to the containing div
	if(clickCounter<=1) {
		var newHeight = document.getElementById('region_us').offsetHeight + 187;
		document.getElementById('region_us').style.height = newHeight.toString() + 'px'; 
		clickCounter+=1;
		}
	
		
	//get the section name
	var section = current.split('_')[1];
	
	for ( var i=0; i<expandables.length; i++ ){
		if(document.getElementById(expandables[i]).id.indexOf('collapse') != -1){ //if it has collapse in id string
		  var tempSection = expandables[i].split('_')[1]; 							//parse just the region
		  
		  document.getElementById(expandables[i]).id='expand_' + tempSection; 		//change the id to expand / plus symbol
		  expandables[i] = document.getElementById('expand_' + tempSection).id;		//make the change in the array as well
		  }
	}
	
	
	
	document.getElementById(current).href='javascript:animatedcollapse.show(\'stats_'+ section + '\');';
	document.getElementById(current).onclick=function() {collapse('\'collapse_'+section +'\'');};
	document.getElementById(current).id="collapse_" + section + "";
	
	for (x in expandables)
	{
		if(expandables[x] == current){
			expandables[x] = document.getElementById('collapse_' + section).id;
		}
		
	}
//alert(expandables);


}



function collapse(current) {
var section = current.split('_')[1];
//alert(current);
current = ("expand_"+section);


	
document.getElementById(current).href='javascript:animatedcollapse.hide(\'stats_'+ section + ');';
document.getElementById(current).onclick=function() {expand('"expand_'+section+'"');};
document.getElementById(current).id='expand_' + section;

for (x in expandables)
{
	if(expandables[x] == current){
		expandables[x] = document.getElementById('expand_' + section).id;
	}
	
}

}

Relevant HTML:

Code:

<a id="expand_northeast" href="javascript://" onclick="expand('expand_northeast');"></a>
                            <span class="state_title">Northeast</span>
                            <span class="state_title_num">2,749</span>
                            <span class="state_title_perc">62.5%</span>
                            
                                <div id="stats_northeast" style="display:none;">
                                
                                <span class="state colored">Maine</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Maryland</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">Pennsylvania</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                            
                            
                                </div>

Thanks guys!

Expandable And Collapsable Forum Categories

Similar Tutorials

Hello,

I was wondering whether it is possible to expand and collapse forum categories using JavaScript. The forum board I am using is phpBB.

How To Make Expandable Para Or Link?

Similar Tutorials

I want to create a link which doesn't takes you to anew page but just expands to show it's information . Exactly like the one in FAQs where you click the question and the page expands to show you the answer.

Expandable Checkboxes Restricted Based On Choice

Similar Tutorials

Hi, I have a web form that I'm creating and it has some expandable checkboxes that need to be restricted based on choice.

This is my criteria:
If someone chooses checkbox number 1, they cannot choose any other checkbox.
If someone chooses checkbox number 2, they may also choose number 3 but not 1 or 4, they must also answer the question that appears below.
If someone chooses checkbox number 3, they may also choose number 2 but not 1 or 4, they must also answer the question that appears below.
If someone chooses checkbox number 4, they cannot choose any other checkbox, and must answer the questions that appears below. One more caveat: If checkbox number 2 is chosen, and they've filled in all three lines of the question below, I need for them to dynamically add more lines as needed.

I have attached my web form so you can see what I've done. I've researched these options and tried code from various examples but I can't seem to get it to work.

Does anyone know how to accomplish all of this? Thank you in advance!

Open Tables With Expandable Sections Closed

Similar Tutorials

Fixing Forum Through Java: Adding Picture Button And Html Button

Similar Tutorials

Hey guys.

I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image)

I do not know how to achieve this but shouldnt be too hard.

Here are the two sources you will need to look through to help me fix the forum.

http://neoweather.com/FWFORUM.JS
http://static.websimages.com/JS/fw.js

THANKS

How Not Get Always The Same Row Cloned In Table<html>

Similar Tutorials

Disabling Html Table In A Form.

Similar Tutorials

Hi,
I am trying to submit a form in javascript on clicking 'Button1'.On submission,it will disable the html table 'HTMLTable1' present in it.The code which I am using is as:

Code:

function OnButton1_Click ( )  {

  var oRows = document.getElementById('HTMLTable1').getElementsByTagName('tr');
  var irows = oRows.length ; 

if (confirm("Are you sure you want Submit?"))
{
for(k=1; k<=irows; k++)    
{
if(document.getElementById("list"+k).selectedIndex == 0)
{
document.getElementById("list"+k).selectedIndex = 1;
document.getElementById("list"+k).options[1].style.backgroundColor = "green"; 
}
}
Saver();

document.getElementById("HTMLTable1").disabled = true;
}
else{
alert("Submit cancelled!");
}
}

But On submit,the html table is getting disabled just for a moment then again it becomes active and user can interact with it.Can anyone tell me where this code is misbehaving?

Thanks,
Anil

How To Generate Html Table With Javascript

Similar Tutorials

Hi,

I have a problem. please help me in this regard.

I have a combobox which contain numeric values from 1-7.

i want to generate a table with 2 rows and 4 columns through javascript. Means when a user select numeric value like '3' from a combo box then a page generates '3' tables without refreshing a page. And if a user selects '4' from a combobox then a script generates 4 tables with 2 rows and 4 columns and so on.

kindly guide me that how can i mkae this javascript.

plz help

Output Recordset To Html Table

Similar Tutorials

Hi There,

I really need your help.

How could I amend the following code below to incorporate the fieldnames on the top before displaying the values of the recordset?

Ie.

[FIELDNAME1] [FIELDNAME2] [FIELDNAME3] [FIELDNAME4]
value1 value2 value3 value4

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<script language="javascript" type="text/javascript">

function getsqltable() {

  	var strtable = ""
	var cn = new ActiveXObject("ADODB.Connection")
	var rs = new ActiveXObject("ADODB.Recordset")
	var dbfile = "imts.mdb"
	var dbPath = "F:/PROJECTS/IMTS PROJECT/V7/database/"

	cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + dbPath + dbfile + "")
	
	var mySQL = "SELECT * FROM tbl_imts WHERE [File Number] = 'A-2010-00301'"
       
    rs.Open(mySQL, cn, 1, 3)

    rs.MoveFirst
    
       strtable='<table cellpadding=0 cellspacing=0 width=75%>';
       while (!rs.eof)
       {
           strtable+='<tr>';
           strtable+='<td>'+rs.fields(0)+'</td>' + '<td>'+rs.fields(1)+'</td>' + '<td>'+rs.fields(2)+'</td>' + '<td>'+rs.fields(3)+'</td>'
           strtable+='</tr>';
           rs.movenext;
       }
       strtable+='</table>';
       
       
       rs.close;
       cn.close;
       
       document.getElementById('htmltable').innerHTML=strtable;
   }
   </script>


</head>

<body>

   <input type="button" onclick="getsqltable();" value="Click Me"/>
   
   <div id="htmltable"></div>
   
</body>

</html>

I've tried modifying the while code, but it puts it all on one line:

Code:

       while (!rs.eof)
       {
           strtable+='<tr>';
           strtable+='<td>'+rs.fields(0).Name+'</td>' + '<td>'+rs.fields(1).Name+'</td>' + '<td>'+rs.fields(2).Name+'</td>' + '<td>'+rs.fields(3).Name+'</td>'
           strtable+='<td>'+rs.fields(0)+'</td>' + '<td>'+rs.fields(1)+'</td>' + '<td>'+rs.fields(2)+'</td>' + '<td>'+rs.fields(3)+'</td>'
           strtable+='</tr>';
           rs.movenext;
       }

any ideas?

Much thanks and appreciation for everyones help.

Cheers and much thanks in advance,

Jay