Archive for category Jquery, Mootools

CSS navigation with 3 個不同的state (default, active, hover)

Posted by Chowky in Jquery, Mootools on September 10, 2009

這個navigation 令chowky 眼前一亮，真的很難明白為什麼一個developer 會有這麼高的design sense 呢~ 令人羨慕。

見到效果是否覺得不錯呢~。

最難得是簡單直接~~(當然這個東西不太適用於cms 的template design 上，他的做法不是dynamic 的~但得到的是design 上的空間)

HTML 方面都是利用ul (unordered list)

<ul id="topnav">
	<li class="home"><a href="index.htm">Home</a></li>
	<li class="about"><a href="about.htm">About Us</a></li>
	<li class="services"><a href="services.htm">Services</a></li>
	<li class="portfolio"><a href="portfolio.htm">Portfolio</a></li>
	<li class="contact"><a href="contact.htm">Contact</a></li>
	<li class="blog"><a href="blog.htm">Blog</a></li>
</ul>

Read the rest of this entry »

Share

, , , , ,

No Comments

8 種 Outlook like AJAX Calendar Components 的介紹和看法

Posted by Chowky in Jquery, Mootools, RIA on September 4, 2009

chowky 覺得類似 outlook , ical 的 AJAX 的calendar好似很散，所以決定整理一下。

1. Day Pilot

這是一個為ASP.NET 而寫的一個component。成熟程度好高。還備有schedule 的 version 。

有Lite （免費，但功能會少一點）和P和Pro （當然要收錢的） version 。

daypilot1daypilot2
Source: http://www.daypilot.org

2. dhtmlxScheduler

這都是一個很成熟的component. 非常smooth。有齊daily , weekly, monthly，commercial application 其實是必定要完整的。否則一定沒有人買。

不過如果你個想寫的都要是GNU (opensource） 才可以免費使用這個calendar ，否則就要收錢了。(Dual Licensing 亦不能用的呢）

dhtml1

Demo: http://dhtmlx.com/docs/products/dhtmlxScheduler/livedemo.shtml
Source: http://dhtmlx.com/docs/products/dhtmlxScheduler/

Read the rest of this entry »

Share

, , , , , , ,

3 Comments

小心IE7 javascript 的 getElementById Method 的問題

Posted by Chowky in Articles, Jquery, Mootools, News on August 6, 2009

1. 要注意用相同的 name and id attributes for Form Inputs
chowky 很久以前都覺得奇怪，不過這是因為IE系列和其他不同的browser的分別，ie 是會search 左name attribute先，再search id attribute，但是其他browser是不會的。所以兩個attributes 都要用相同的名。避免發生問題

1

<input type="text" name="full_address" id="address" value="5th Avenue" />

2. 不要放name attribute 在form tag 入面。
和上面的情況非常相似，要避免IE的問題。

不過chowky 不知道name 是deprecated (哈)

Also, the name attribute for forms is deprecated in XHTML Strict, so it’s not best practice anyhow. The name attribute was added to form elements in older sites, so if you’re trying to debug a getElementById issue in IE7 on some inherited code, there could be a conflict occurring due to this fact.

1
2

<form id="contact_form">
</form>

Read the rest of this entry »

Share

, , , ,

No Comments

Sticky (Fixed) SideNav Layout with CSS

Posted by Chowky in Articles, Jquery, Mootools on August 5, 2009

完成圖

構成的structure

HTML tag

1
2
3
4

<div class="container">
	<div id="sidenav><!--Fixed Sidenav Goes Here--></div>
	<div id="content"><!--Content Goes Here--></div>
</div>

利用簡單的技巧，
把sidenav 的加上position 和fix的properties.
position: fixed;
float: left;
CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.container {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
	background: url(container_stretch.gif);
	font-size: 1.2em;
	position: relative;
}
#sidenav {
	width: 300px;
	position: fixed; /*--Fix the sidenav to stay in one spot--*/
	float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
	float: right; /*--Keeps content to the right side--*/
	width: 640px;
	padding: 0 20px 20px;
}

可惜ie6不支援fixed position property
所以要workaround..

1
2
3
4
5

*html #sidenav {
	position: absolute;
	left: expression( ( 0   ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) )   'px' );
	top: expression( ( 0   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) )   'px' );
}

Read the rest of this entry »

Share

1 Comment

[jQuery] 利用 jqeury 和 css 建立一個navigation menu

Posted by Chowky in Jquery, Mootools on August 3, 2009

Chowky 一向欣賞這位作者所做的simple and elegent 效果和教學。

只是簡單的4個steps 就可以做到以下的效果。

Step 1: HTML 都是利用ul 和li

1
2
3
4
5
6
7
8

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Step 2. CSS
要留意的是，現在是還未add span 的，span 會在之後用jquery 加上去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;  /*--Important - Masking out the hover state by default--*/
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(a_bg.gif) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
	color: #555;
	background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
	background-position: left top;
}

Step 3. 利用jquery製造的animation effect

a). embed jquery 的library

b). 利用jqeury 去製造animation，shift image -40px pixel向上。 

$(document).ready(function() {
 
	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
 
	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
		$(this).find("span").show().html(linkText); //Add the text in the <span> tag
	}); 
 
	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the <span> tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0"  //Move the <span> back to its original state (0px)
		}, 250);
	});
 
});

Source: http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/
Demo: http://www.sohtanaka.com/web-design/examples/fancy-navigation/

Share

, , ,

4 Comments

[AIR] jQuery Browser

Posted by Chowky in AIR, Jquery, Mootools, RIA on July 28, 2009

又一個新的air application。

jQuery 都採用air來implement這個api browser。

可見，外國的對air的接受性真係比想像中好。
pic1
Read the rest of this entry »

Share

, ,

1 Comment

[jQuery] 橫向menu subnav with CSS

Posted by Chowky in Jquery, Mootools on July 21, 2009

這個其實不太算是jquery 的，因為jquery 只是幫助解決ie6 支援問題而已。

preview

Menu Navigation 好像已經有很多了，不過chowky 欣賞這作者的simplicity。

大概的structure:
先用 ul ，包住不同的li ，再在li 中加入 [第一層] 和 span 之內的[第二層(subnav)]

<ul id="topnav">
	<li><a href="#">Link</a></li>
	<li>
        <a href="#">Link</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a>
        </span>
        <!--Subnav Ends Here--></li>
	<li><a href="#">Link</a></li>
</ul>

wireframe

通常的都不是html困難，多數都是css方面的問題。因為要支援很久以前的browser ie6。(ie6 = 煩+嘔血)

以下是對於ul 和li 的styling，應該問題不大。

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: 1.2em;
	background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
/*IE6 不支援 li:hover，只支援a:hover*/
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

Read the rest of this entry »

Share

No Comments

BBC Opensource自家的Javascript Framework： Glow

Posted by Chowky in Jquery, Mootools, News on July 11, 2009

好怪好怪，bbc為什麼要出一套javascript　framework，原因不明。哈，其實不是，只是bbc一向是內部用的，沒有公佈出來，

現在opensource　出來。有興趣可以用一下。

Picture 1

License: Apache License 2.0

Source: http://www.bbc.co.uk/glow/

Share

, , ,

No Comments

html 5 支援drag and drop  

Posted by Chowky in Jquery, Mootools, News on July 3, 2009

下一個web　standard，如無意外，應該會是html５＋css３。

This example only works in Firefox 3.5 and Safari 4 but here’s a quick tour of how it works.

IE始終都未support。這對於web developer 來說，是一個nightmare，一方面要支援ie，又要支援firefox，safari。

但是，要利用新的html５的function就要放棄ie的support。

chowky對這方面還是樂觀的。later可能會好一點（仍然抱有信念）。

（說完未？）
ok…back　to　topic

原來要make　drag　and　drop　都不太困難。
會否，因為html５會令html　更普及？

1
2
3
4
5

 
<li draggable="true" id="file1" ondragstart="drag(this, event)"><span>filename.txt</span></li> 
To create a draggable area you can do this.
 
<div id="trash" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"></div>

之後再加少少javascript　code

1
2
3
4
5
6
7
8
9

 
function drag(target, e) {
    e.dataTransfer.setData('Text', target.id);
}
function drop(target, e) {
    var id = e.dataTransfer.getData('Text');
    target.appendChild(document.getElementById(id));
    e.preventDefault();
}

Source: http://shapeshed.com/journal/drag_and_drop_in_html5/

Share

, ,

No Comments

[jQuery] Image Flip 為圖片加上倒影和動畫效果

Posted by Chowky in Jquery, Mootools on June 22, 2009

這幾天，真是太忙，是經濟轉好的signal?

希望快點轉好。(chowky 持有很多股票….哈)~

回歸主題。

可以選擇horizontal 和vertical flip，而且reflection 效果都可以turn off.

加入website 之中，立即可以提昇水準。(哈 chowky 一向不相信即時見效的東西)

imageflip

License:  License Free

Demo: http://webmuch.com/demos/image_flip_demo/flip.html

Source: http://webmuch.com/image-flip-using-jquery/

Share

, ,

No Comments