google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Hướng dẫn tạo bộ Ẩn / hiện nội dung không dùng JavaScript Hãy đi vào hậu trường của hiệu ứng Ẩn / hiện nội dung không cần dùng JavaScript thông qua bài viết này. Tác giả sẽ hướng dẫn chi tiết bạn cách thức để tạo ra hiệu ứng này cùng với những chú ý quan trọng. Vui lòng vào trang chi tiết để xem thêm.


Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

Recently, while doing research/work on a completely unrelated topic, I came across the beautiful illustrations on Rype Arts, which are displayed inside of a JavaScript-driven content switcher. For some reason, I happened to visit the page with JavaScript disabled and noticed that the content switcher was still working (albeit, with a few flaws).

At first I couldn't figure out how it was functioning. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any "switching" functionality. After some poking around, I realized it's not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.

View the Demo to preview what I'll be describing below.

Here is the HTML that I'll be using to demonstrate this effect with and without JavaScript:

	<div id="content-slider">

	<ul id="content-slider-inside">
		<li id="one">1</li>
		<li id="two">2</li>
		<li id="three">3</li>

		<li id="four">4</li>
		<li id="five">5</li>
	</ul>
</div>

<ul id="navigation">

	<li><a href="/javascript/article/How_to_Create_a_Web_CSS_Content_Switcher_Without_JavaScript.php/#one">1</a></li>
	<li><a href="/javascript/article/How_to_Create_a_Web_CSS_Content_Switcher_Without_JavaScript.php/#two">2</a></li>
	<li><a href="/javascript/article/How_to_Create_a_Web_CSS_Content_Switcher_Without_JavaScript.php/#three">3</a></li>

	<li><a href="/javascript/article/How_to_Create_a_Web_CSS_Content_Switcher_Without_JavaScript.php/#four">4</a></li>
	<li><a href="/javascript/article/How_to_Create_a_Web_CSS_Content_Switcher_Without_JavaScript.php/#five">5</a></li>
</ul>

The key part of this code is the <div> with the id "content-slider". Normally, that element would not be necessary, as it seems to be doing nothing. In this case, however, it's needed in order to hide the unselected content inside the list nested inside it. Also, each list item inside the content switcher is given a unique id, which is needed for the switching to work even without JavaScript.

The CSS to style the content switcher is as follows (I've excluded all irrelevant styles):

#content-slider {
	width: 650px;
	overflow: hidden;
	height: 300px;
}

#content-slider-inside {
	list-style: none;
	height: 320px; 		// these 3 lines
	overflow: scroll;	// help Opera
	overflow-y: hidden;	// behave
}

	#content-slider-inside li {
		width: 650px;
		height: 300px;
	}

A few things to note in the CSS above: The outer container has its overflow set to "hidden". It also has a width equal to one of the content boxes (650px). Inside the container is the <ul> element that holds the list items that represent the content boxes. Finally, the list items are given dimensions of 650px by 300px. Since the container element is equal to one list item, and the container has overflow set to "hidden", only one list item will be visible at a time.

UPDATE: I added three new lines of code in the CSS above (commented), to get the non-JavaScript version (the first demo) to work in Opera. Thanks to comment by Damian Muti.

How it Works

The navigation links are linked to internal anchors. An HTML page, by default will search the page for an anchor set as <a name="one"></a>, and if it doesn't find it, will then match the anchor to a corresponding id attribute. This is what allows the content switcher to still change the content inside of the container.

After the above code is in place, we just need to add some CSS to make it look a little nicer, then we have the option to enhance the switcher with JavaScript. The switcher also allows deep linking by means of the hash in the URL, which works with or without JavaScript.

Compatibility

This works in every modern browser, except for Opera, and also works in IE6. Opera doesn't seem to support in-page anchors that appear in hidden sections of a <div> - or else I'm doing something else wrong, but I couldn't figure out how to get Opera to recognize the switching without JavaScript enabled.

Take a look at the demo, which also includes a link to a JavaScript/jQuery-enhanced version that I coded myself, as a bonus. And just to demonstrate the deep-linking capabilities, the demo link appends "#three" to the URL - so you should see the number "3″ in the content area, if it's working correctly.

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web