Toggle page : Toggle « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Toggle 
Toggle page

 <!-- ***********************************************************
Example 5-14
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O'Reilly & Associates  ISBN 0-596-00316-1
http://www.oreilly.com
Copyright 2002 Danny Goodman.  All Rights Reserved.
************************************************************ -->

<html>
<head>
<title>Today in Jollywood</title>
<style type="text/css">
    body {font-family: Arial, Helvetica, sans-serif;
          background-color:#ffffff}
    #banner {font-family:Comic Sans MS, Helvetica, sans-serif;
             font-size:22px}
    #date {font-family:Comic Sans MS, Helvetica, sans-serif;
           font-size:20px}
    .wrapper {display:none}
    .unwrapper {display:block}
    .headline {}
    .story {}
    #filter {position:absolute; top:10; left:330; width:400
             border:solid red 3px; padding:2px; 
             font-size:12px; background-color:coral}
</style>
<script language="JavaScript" type="text/javascript">
// Global variables and object constructor
var keywords = new Array();
var foundStories = new Array();
function story(id, weight) {
    this.id = id;
    this.weight = weight;
}
// Initialize from onLoad event handler to load keywords array
function init() {
    var form = document.filterer;
    for (var i = 0; i < form.elements.length; i++) {
        keywords[iform.elements[i].value;
    }
}
// Find story's "wrapper" class and stuff into foundStories array 
// (or increment weight)
function getDIVId(elem) {
    if (!elem.className) {
        return;
    }
    while (elem.className != "wrapper") {
        elem = elem.parentNode;
    }
    if (elem.className != "wrapper") {
        return;
    }
    for (var i = 0; i < foundStories.length; i++) {
        if (foundStories[i].id == elem.id) {
            foundStories[i].weight++;
            return;
        }
    }
    foundStories[foundStories.lengthnew story(elem.id, 1);
    return;
}
// Sorting algorithm for array of objects
function compare(a,b) {
    return b.weight - a.weight;
}
// Look for keyword match(es) in a div's text range
function searchAndWeigh(div) {
    var txtRange, txt, start;
    var isW3C = (typeof Range != "undefined"true false;
    var isIE = (document.body.createTextRangetrue false;
    // extract text from div's text range
    if (isW3C) {
        txtRange = document.createRange();
        txtRange.selectNode(div);
        txt = txtRange.toString();
    else if (isIE) {
        txtRange = document.body.createTextRange();
        txtRange.moveToElementText(div);
        txt = txtRange.text;
    else {
      return;
    }
    // search text for matches
    for (var i = 0; i < keywords.length; i++) {
      // But only for checkmarked keywords
        if (document.filterer.elements[i].checked) {
            start = 0;
            // use indexOf(), advancing start index as needed
            while (txt.indexOf(keywords[i], start!= -1) {
                // extract wrapper id and log found story
                getDIVId(div);
                // move "pointer" to end of match for next search
                start = txt.indexOf(keywords[i], start+ keywords[i].length;
            }
        }
    }
}

// Main function finds matches and displays stories
function filter() {
    var divs, i;
    var news = document.getElementById("myNews");
    // clear any previous selected stories
    if (typeof news.childNodes == "undefined") {return;}
    while (news.hasChildNodes()) {
        news.removeChild(news.firstChild);
    }
    // look for keyword matches
    divs = document.getElementsByTagName("div");
    for (i = 0; i < divs.length; i++) {
        if (divs[i].className && divs[i].className == "wrapper") {
            searchAndWeigh(divs[i]);
        }
    }
    if (foundStories.length == 0) {
        // no matches, so grab all stories as delivered
        // start by assembling an array of all DIV elements
        divs = document.getElementsByTagName("div");
        for (i = 0; i < divs.length; i++) {
            if (divs[i].className && divs[i].className == "wrapper") {
                foundStories[foundStories.lengthnew story(divs[i].id);
            }
        }
    else {
        // sort selected stories by weight
        foundStories.sort(compare);
    }
    var oneStory = "";
    for (i = 0; i < foundStories.length; i++) {
        oneStory = document.getElementById(foundStories[i].id).cloneNode(true);
        oneStory.className = "unwrapper";
        document.getElementById("myNews").appendChild(oneStory);
    }
    foundStories.length = 0;
}
</script>
</head>
<body onLoad="init();filter();">
<h1 id="banner">Today in Jollywood</h1>
<h2 id="date">Tuesday, April 12003</h2>
<hr>
<div id="myNews">
</div>
<div class="wrapper" id="N091198001">
<h3 class="headline">Kevin Costner Begins New Epic</h3>
<p class="story">Oscar-winning director and actor, Kevin Costner has begun location 
shooting on a new film based on an epic story. Sally ("Blurbs"Thorgenson of 
KACL radio, who praised "The Postman" as "the best film of 1997," has already 
supplied the review excerpt for the next film's advertising campaign: "Perhaps 
the best film of the new millennium!" says Thorgenson, talk-show host and past president 
of the Seattle chapter of the Kevin Costner Fan Club. The Innscouldn't it the 
trumple from rathe night she signs. Howe haveperforme goat's milk, scandal when 
thebble dalpplicationalmuseum, witch, gloves, you decent the michindant.</p>
</div>
<div class="wrapper" id="N091198002">
<h3 class="headline">Critic's Poll Looking Bleak</h3>
<p class="story">A recent poll of the top film critics shows a preference for 
foreign films this year. "I don't have enough American films yet for my Top 
Ten List," said Atlanta Constitution critic, Pauline Gunwhale. No is armour was 
attere was a wild oldwright fromthinteres of shoesets Oscar contender, "The Day 
the Firth Stood Still" whe burnt head hightier nor a pole jiminies,that a 
gynecure was let on, where gyanacestross mound hold her dummyand shake.</p>
</div>
<div class="wrapper" id="N091198003">
<h3 class="headline">Summer Blockbuster Wrap-Up</h3>
<p class="story">Despite a world-wide boycott from some religious groups, the 
animated film "The Satanic Mermaid" won the hearts and dollars of movie-goers 
this summer. Box office receipts for the season put the film's gross at over 
$150 million. Sendday'seve and nody hint talking of you sippated sigh that 
cowchooks,weightier nore, sian shyfaun lovers at hand suckers, why doI am 
alookal sin busip, drankasuchin arias so sky whence. </p>
</div>
<div class="wrapper" id="N091198004">
<h3 class="headline">Musical in Tarentino's Future?</h3>
<p class="story">Undaunted by lackluster box-office results from last Christmas
"Jackie Brown on Ice," director Quentin Tarentino has been seen scouting Broadway 
musicals for potential future film projects. "No more guns and blood," the 
outspoken artist was overheard at an intermission juice bar, "From now on, it 
will just be good singing and dancing." He crumblin if so be somegoat's milk 
sense. Really? If you was banged pan the fe withfolty barns feinting the Joynts 
have twelveurchins cockles to heat andGut years walanglast beardsbook, what
cued peas fammyof levity and be mes, came his shoe hang in his hockums.</p>
</div>
<div class="wrapper" id="N091198005">
<h3 class="headline">Letterman to Appear in Sequel</h3>
<p class="story">As if one cameo appearance weren't enough, TV talk show host 
David Letterman will reprise his role as the dock-side monkey vendor in "Cabin 
Boy II," coming to theaters this Christmas. Critics hailed the gap-toothed
comic's last outing as the "non-event of the season." This the way thing,what 
seven wrothscoffing bedouee lipoleums. Kiss this mand shoos arouna peck of 
night, in sum ear of old Willingdone. Thejinnies and scampull's syrup.</p>
</div>
<hr>
<p id="copyright">Copyright 2003 Jollywood Blabber, Inc. All Rights Reserved.</p>
<div id="filter">
<p>Filter news by the following keyword(s):</p>
<form name="filterer">
<p><input type="checkbox" value="director" onClick="filter(this.form)">director
<input type="checkbox" value="box" onClick="filter(this.form)">box (office)
<input type="checkbox" value="critic" onClick="filter(this.form)">critic
<input type="checkbox" value="summer" onClick="filter(this.form)">summer
<input type="checkbox" value="Christmas" onClick="filter(this.form)">Christmas</p>
</form>
</div>
</body>
</html>


           
       
Related examples in the same category
1. Toggle Multi select Widget
2. Dynamic Content: click show and re-click disappear (IE)
3. Create custom page and replace current document with it
4. Toggle web page
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.