Make button (control) visible or invisible : Document : Development : JavaScript DHTML examples (example source code) Organized by topic








/*

JavaScript Bible, Fourth Edition

by Danny Goodman 



John Wiley & Sons CopyRight 2001

*/



<HTML>

<HEAD>

<TITLE>Data Binding</TITLE>

<STYLE TYPE="text/css">

#display {width:500px; border:10px ridge blue; padding:20px}

.hiddenControl {display:none}

</STYLE>

<SCRIPT LANGUAGE="JavaScript">

function nextField() {

    var elem = document.all.display

    var fieldName = elem.dataFld

    var currFieldNum = parseInt(fieldName.substring(7, fieldName.length),10)

    currFieldNum = (currFieldNum == 10) ? 1 : ++currFieldNum

    elem.dataFld = "Article" + currFieldNum

}

function prevField() {

    var elem = document.all.display

    var fieldName = elem.dataFld

    var currFieldNum = parseInt(fieldName.substring(7, fieldName.length),10)

    currFieldNum = (currFieldNum == 1) ? 10 : --currFieldNum

    elem.dataFld = "Article" + currFieldNum

}

function toggleComplete() {

    if (document.all.buttonWrapper.className == "") {

        document.all.display.dataSrc = "#rights_raw"

        document.all.display.dataFld = "column1"

        document.all.display.dataFormatAs = "text"

        document.all.buttonWrapper.className = "hiddenControl"

    } else {

        document.all.display.dataSrc = "#rights_html"

        document.all.display.dataFld = "Article1"

        document.all.display.dataFormatAs = "HTML"

        document.all.buttonWrapper.className = ""

    }

}

</SCRIPT>

</HEAD>

<BODY>

<P><B>U.S. Bill of Rights</B></P>

<FORM>

<INPUT TYPE="button" VALUE="Toggle Complete/Individual" onClick="toggleComplete()">

<SPAN ID="buttonWrapper" CLASS="">

<INPUT TYPE="button" VALUE="Prev" onClick="prevField()">

<INPUT TYPE="button" VALUE="Next" onClick="nextField()">

</SPAN>

</FORM>



<DIV ID="display" DATASRC="#rights_html" DATAFLD="Article1" DATAFORMATAS="HTML"></DIV>

<OBJECT ID="rights_html" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">

    <PARAM NAME="DataURL" VALUE="Bill of Rights.txt">

    <PARAM NAME="UseHeader" VALUE="True">

    <PARAM NAME="FieldDelim" VALUE="&#09;">

</OBJECT>

<OBJECT ID="rights_raw" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">

    <PARAM NAME="DataURL" VALUE="Bill of Rights (no format).txt">

    <PARAM NAME="FieldDelim" VALUE="\">

    <PARAM NAME="RowDelim" VALUE="\">

</OBJECT>

</BODY>

</HTML>


1. Output HTML in JavaScript
2. Display info in a new page
3. Recursively reverse all nodes beneath Node n, and reverse Text nodes
4. Reverse the order of the children of Node (document)
5. Open a new document and add some text
6. Get element by name: getElementsByName()
7. Get a specified element using getElementById()
8. Title of a document
9. Referrer of a document (URL of the document)
10. Hide Email Address
11. Convert space to URL encode
12. document last Modified Property in Another Format
13. Checking document referrer
14. Opening a New URL
15. HTML Page with Immediate Script Statements
16. Using document.write() on the Current Window
17. Using document.write() on Another Window
18. Methods and Properties of the Document Object