Archive for category Jquery, Mootools

[jQuery] 1.3.2 和 1.4 的比較

Posted by Chowky in Jquery, Mootools, News on January 20, 2010

jQuery 近來都差不多成為最多人用的javascript framework 了。

近來jQuery 推出新的release 1.4. 聽聞 performance 改善了很多。

No. of Function Calls (因為減少了很多不必要 method 的call，可能就是大大改善performance 的原因)

dom 的insertion 看來需要的時間真是快了很多 (ie 系列快了很多)

Read the rest of this entry »

  • Share/Bookmark

, , ,

2 Comments

Website Navigation Usability 小貼士

Posted by Chowky in Design, Jquery, Mootools on December 26, 2009

每一個 website ，除了 visual 上要設計之外，navigation 上的設計其實更為重要。 試問user click來click 去都找不到自己想要的information。這種website 的user experience 一定不會好，即使visual 上做得好好，都只是一個外觀很好的website。

User 找不到想要的info，看完就算，對於你的目標，就是否這麼簡單呢？你可能會失到potential customers。

所以website navigation 上面一定要花心機去令website 更容易去browse.

這方面就應該要參考一下其他人的做法呢。

1. 簡潔的 Menu Navigation
這個例子當然會是apple 的design。直接的表達，就會避免混亂，而且可以令到visitors 更容易找到想要的資料

2. 加上主頁的link去自己的logo 上
現在很多不同的website 都已經是這樣做了，差不多是 standard 做法，最重要的是visitors 早已習慣。

Read the rest of this entry »

  • Share/Bookmark

, , , ,

No Comments

[CSS] Radioactive Buttons (Safari 4.x, Google Chrome Only)

Posted by Chowky in Design, Jquery, Mootools, News on December 7, 2009

就近聖誕，當然要加入一些聖誕元素呢~~。

這個demo 就教你利用webkit 的css animation 去做一個閃閃下的button~~..

因為是利用了webkit 的關係，所以~~…..只可以做到safari, google chrome show 到出來。

radioactive_button

做法就很簡單 (當然是因為利用了css 的animation)
Read the rest of this entry »

  • Share/Bookmark

, , , ,

No Comments

Appcelerator Titanium 一個很有趣的工具 + 比較

Posted by Chowky in AIR, Jquery, Mootools, Mac, News, Opensource, RIA, iPhone on October 15, 2009

雖然chowky 已經知道這個工具很久，不過覺得這套工具未成熟，所以沒有理會。 直至今天嘗試開發專為 iphone 的 web。在找尋的過程之中，又看到這個工具，看來已經比之前好成長了不少。於是，今天就看看是怎樣的東西~

首先是titanium 是 opensource，另外這件東的 concept 其實不錯的，真的有點似adobe air，mobile, desktop 的version 都有buildin 的sqlite support。 主要的分別，titanium 就是compiled and run in native OS，所以分為，mobile version, desktop version and web version ，而 ADOBE AIR 就放在flash platform / AIR 之中。而titanium 就比adobe air 走快了一步，支援了mobile (iphone and andriod) ，所以都有些人認為是air 的最大的competitor (為什麼沒有m$ 的silverlight，不入流呢)。


Read the rest of this entry »

  • Share/Bookmark

1 Comment

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/Bookmark

, , , , ,

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/Bookmark

, , , , , , ,

2 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/Bookmark

, , , ,

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/Bookmark

No Comments

[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/Bookmark

, , ,

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/Bookmark

, ,

No Comments