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/

6月 2011 - Posts

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

Related Resources

Here is KB from TachNet.

Definitions issues
http://technet.microsoft.com/en-us/library/bb418925.aspx
Scenarios and objectives

Security Essentials is simple solution against viruses, spyware from Microsoft.

It is usuful for, for example, test environments with virtual machine(Virtual PC or Virtual Server). We often manage some test environments in development machine (Sometimes they cover OS variation, others they cover requirement variation).

However, they are rarely connected to web directly. So definitions update fails.

We can update via proxy.

How to do it

Here is a message for update fail.

error message

This concept is very simple: We just can use IE proxy settings.

1Set the IE LAN settings to use proxy server. LAN settings

2Execute following command with [Administrator command prompt]. execute command

Code Copy to clipboard
01netsh winhttp import proxy source=ie

netsh winhttp import proxy source=ie

Posted by timberlandchapel | with no comments
Filed under: