TimberLandChapel's Tech Blog

TimberLandChapel provide Tips, tech note and scribbling.
Updated my site as English site for APAC users.
TLC.com .Metrix 4.0 Beta1 released

サイトの日本語化方法はこちら

Syndication

News

INETAJ

情報処理関係官公庁

SQL Server

TLC.com

Microsoft

クリエイティブ・コモンズ

http://www3.clustrmaps.com/
W3C valid visible switch with jQuery
Related Resources
Google Libraries API - Developer's Guide
http://code.google.com/apis/libraries/devguide.html#jquery
Microsoft Ajax Content Delivery Network
http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery
http://jquery.com/
Objective

Using CSS "display: block;" and "display: none", It can provide "visible switch block".
Combined with more complex CSS, "Tab" UI can be implemented in HTML.

In my site, I use visible switch to provide inline translation like following.

in Japanese:
ここに日本語訳が入ります。(The Japanese translation goes here.)

This topic suggests the implementation of "visible switch" with jQuery however without "onClick" and "javascript:void(0);".

Yes it works...

To implement this scenario, there are several ways. Most typical one may be following.
Copy this html code to flatfile and view with browser. Yes it work...

You can switch visibility to click "Switch-1" or "Switch-2". This code uses "javascript:void(0);" or "#" in href. And it uses [onclick] attribute to launch javascript with "target" argument.

Code Copy to clipboard
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03    <head>
04        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05        <title>W3C valid visible switch with javascript:void(0); or #</title>
06        <script type="text/javascript">
07function dispswitch(target){
08    var obj = document.getElementById(target);
09    obj.style.display = (obj.style.display === "none") ? "block": "none";
10};
11        </script>
12    </head>
13    <body>
14        <div><a href="javascript:void(0);" onclick="dispswitch('target1');return false;">Switch-1:</a></div>
15        <div id="target1" style="display: none;">
16            This block is controled by "Switch-1".
17        </div>
18        <div><a href="#" onclick="dispswitch('target2');">Switch-2:</a></div>
19        <div id="target2" style="display: none;">
20            This block is controled by "Switch-2".
21        </div>
22        <p>Yes. It works...</p>
23    </body>
24</html>

Points

This typical code also valid as W3C XHTML 1.0 Strict.
However...

1 There is a tricky [href] attribute doing nothing.

"javascript:void(0);" or "#" do nothing. Because "onclick" attribute has main action.

2 There is a tricky [return false;] to interrupt event.

Set of [onclick] and [return false;] can cause environment-dependent problems.

3 This old approach mixes [view] and [control].

We would like to divide html and script also content and action. [onclick] attribute essentially contains script code.

4 [onclick] attribute conflicts with some CMS(Contents Management System).

It is the most troublesome issues for me. Some CMS removes [onclick] attribute automatically to avoid embedded scripts. So onclick action dosen't work.

Visible switch with jQuery

Long story short, here is a code.

Code Copy to clipboard
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03    <head>
04        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05        <script src="https://www.google.com/jsapi?key=<!-- Change key to "your key"-->" type="text/javascript"></script>
06        <script type="text/javascript">google.load("jquery", "1.6.1");</script>
07        <title>W3C valid visible switch with jquery</title>
08        <style type="text/css">
09[id|=switcher]{
10    color : #1e90ff; /* dodgerblue */
11}
12
13[id|=switcher]:hover{
14    text-decoration: underline;
15    cursor:pointer;
16    color : #1e90ff; /* dodgerblue */
17}
18        </style>
19        <script type="text/javascript">
20$(function(){
21    $(".defaultNoDisplay").css("display","none");
22    $("[id^='switcher']").click(function(){
23            var target = "[id^='" + $(this).attr("class") + "']";
24            $(target).css("display",($(target).css("display") === "none") ? "block": "none");
25    });
26});
27        </script>
28    </head>
29    <body>
30        <div>
31            <span id="switcher-1" class="target1">Switch-1:</span>
32        </div>
33        <div id="target1" class="defaultNoDisplay">
34            This block is controled by "Switch-1".
35        </div>
36        <div>
37                <span id="switcher-2" class="target2">Switch-2:</span>
38        </div>
39        <div id="target2" class="defaultNoDisplay">
40            This block is controled by "Switch-2".
41        </div>
42        <p>This document was successfully checked as XHTML 1.0 Strict.</p>
43    </body>
44</html>

Points

0 Sample: This sample uses above code.
Switch-1:
This block is controled by "Switch-1".
Switch-2:
This block is controled by "Switch-2".

This document was successfully checked as XHTML 1.0 Strict.

1 Contents: Main contents contains only primary html tags.

Code
30        <div>
31            <span id="switcher-1" class="target1">Switch-1:</span>
32        </div>
33        <div id="target1" class="defaultNoDisplay">
34            This block is controled by "Switch-1".
35        </div>

This content contains only [id] attribute and [class] attribute. It's just a HARD html.

2 Switch: jQuery and CSS

Code
19        <script type="text/javascript">
20$(function(){
21    $(".defaultNoDisplay").css("display","none");
22    $("[id^='switcher']").click(function(){
23            var target = "[id^='" + $(this).attr("class") + "']";
24            $(target).css("display",($(target).css("display") === "none") ? "block": "none");
25    });
26});
27        </script>

This jQuery has 2 blocks.

The first block controls the post-load action. This code hides contents with [defaultNoDisplay] class as a default.
By doing that, The browser with javascript-on can hide additional contents as a default. In the other hand, The browser with javascript-off shows all contents. This approach cares both environments (javascript on/off) and provides an additional experience to javascript-on.

Code
21    $(".defaultNoDisplay").css("display","none");

The second block controls visibility itself.
It handles CLICK EVENT whose ID starts with keyword [switcher]. In this sample, there are two [span] tags having [switcher] keyword.
To find switch target, this code use class attribute. To make a pair with switch and target, the target content ([div] in this case) has id that is same with switch's class attribute ([target1] in this case).

If switch is clicked, associated target content is displayed or is hidden by changing CSS (display: block/none ;).

Code
22    $("[id^='switcher']").click(function(){
23            var target = "[id^='" + $(this).attr("class") + "']";
24            $(target).css("display",($(target).css("display") === "none") ? "block": "none");
25    });

3 Clickable: UI similar to the [link] with CSS.

This sample uses [span] content as a "switch". But [span] itself has no UI which is reminiscent of clickable.
So using CSS to display the content as lightblue (It looks like clickable link, isn't it?). Also if a mouse is over the content, text underline appears.
This is implemented with only CSS on the content whose [ID] attribute starts with a keyword "switcher".

Code
08        <style type="text/css">
09[id|=switcher]{
10    color : #1e90ff; /* dodgerblue */
11}
12
13[id|=switcher]:hover{
14    text-decoration: underline;
15    cursor:pointer;
16    color : #1e90ff; /* dodgerblue */
17}
18        </style>

4 jQuery: Using hosted jQuery library.

To use jQuery, CDN(Content Distribution Network) is useful.
This sample uses the Google Libraries API.

Code
05        <script src="https://www.google.com/jsapi?key=<!-- Change key to "your key"-->" type="text/javascript"></script>
06        <script type="text/javascript">google.load("jquery", "1.6.1");</script>
For more informations
See also
  • Not yet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n\t<head>\n\t\t<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n\t\t<script src="https://www.google.com/jsapi?key=<!-- Change key to your key-->" type="text/javascript"></script>\n\t\t<script type="text/javascript">google.load("jquery", "1.6.1");</script>\n\t\t<title>W3C valid visible switch with jquery</title>\n\t\t<style type="text/css">\n[id|=switcher]{\n\tcolor : #1e90ff; /* dodgerblue */\n}\n\n[id|=switcher]:hover{\n\ttext-decoration: underline;\n\tcursor:pointer;\n\tcolor : #1e90ff; /* dodgerblue */\n}\n\t\t</style>\n\t\t<script type="text/javascript">\n$(function(){\n\t$(".defaultNoDisplay").css("display","none");\n\t$("[id^='switcher']").click(function(){\n\t\t\tvar target = "[id^='" + $(this).attr("class") + "']";\n\t\t\t$(target).css("display",($(target).css("display") === "none") ? "block": "none");\n\t});\n});\n\t\t</script>\n\t\t<style type="text/css">\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div>\n\t\t\t<span id="switcher-1" class="target1">Switch-1:</span>\n\t\t</div>\n\t\t<div id="target1" class="defaultNoDisplay">\n\t\t\t\tThis block is controled by "Switch-1".\n\t\t</div>\n\t\t<div>\n\t\t\t<span id="switcher-2" class="target2">Switch-2:</span>\n\t\t</div>\n\t\t<div id="target2" class="defaultNoDisplay">\n\t\t\tThis block is controled by "Switch-2".\n\t\t</div>\n\t\t<p>This document was successfully checked as XHTML 1.0 Strict.</p>\n\t</body>\n</html>\n

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n\t<head>\n\t\t<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n\t\t<title>W3C valid visible switch with javascript:void(0); or #</title>\n\t\t<script type="text/javascript">\nfunction dispswitch(target){\n\tvar obj = document.getElementById(target);\n\tobj.style.display = (obj.style.display === "none") ? "block": "none";\n};\n\t\t</script>\n\t</head>\n\t<body>\n\t\t<div><a href="javascript:void(0);" onclick="dispswitch('target1');return false;">Switch-1:</a></div>\n\t\t<div id="target1" style="display: none">\n\t\t\tThis block is controled by "Switch-1".\n\t\t</div>\n\t\t<div><a href="#" onclick="dispswitch('target2');">Switch-2:</a></div>\n\t\t<div id="target2" style="display: none">\n\t\t\tThis block is controled by "Switch-2".\n\t\t</div>\n\t\t<p>Yes. It works...</p>\n\t</body>\n</html>\n

Published 2011年6月28日 22:17 by timberlandchapel
Filed under:

Comments

# Copy the source code into the clipboard@ 2011年7月2日 20:20

Related Resources Google Libraries API - Developer&#39;s Guide code.google.com/.../libraries