How to highlight external controller for JCarousel

JCarousel is  a great JQuery plugin where you put multiple  image and text into horizontal or vertical slide.

Sadly, there is no proper documentation on how to highlight the external controller.

After few try and error, I manage to get the selected number in highlight mode ( using CSS of course ).

My external controller is a collection of hyperlink inside a DIV.

<div id=”jcarousel-control”>

<a href=”#”>1</a>

<a href=”#”>2</a>

<a href=”#”>3</a>

</div>

Below are the Jquery code.

<script type="text/javascript">

// it will append class="selected" into <a>
// <a href="#">1</a> to <a href="#" class="selected">1</a>
function highlight(carousel, obejctli,liindex,listate){	
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').attr("class","selected");
};
// it will remove last selected slide from <a>
// <a href="#" class="selected">1</a> to <a href="#">1</a>
function removehighlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').removeAttr("class","selected");
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
	itemVisibleInCallback:  highlight,
	itemVisibleOutCallback: removehighlight		
    });
});
</script>

Feel free to use the comment area if you need any help.

WordPress

• Moving WP

Font Test View

test different font on your screen

JavaScript Fading Tooltips

An “improvement” on previous tooltips with some CSS and Javascript… very, very nice.

Preg in javascript.

this site have tips on how to manipulate string or replace it with string. Click here

Yellow Fade Technique

i play around with Tada List by 37 Signals. Saw the fade technique when I updating through Tada List. Here linkthat provide article on fade technique by Adam Michele. Adam was inspire by 37 Signals fading technique

Hell of Collections

usually when I develop web based system, I coded Javascript(JS) into the system. My knowledge on JS is low. So, after google few times, i found out some of this website is very good in term of example resource. Dont expect too much with each line of code with explaination. They serve you with free stuff, so you to have serve yourself with extra effort on understanding the code. Period.

1. IRT on JS
So-so collection, and not for dummy 😛

2. Quirkmode
Lots of script and idea from Peter-Paul Koch

Direct Manipulation Using JavaScript and CSS

Direct manipulation, particularly drag and drop, is under utilized in desktop applications and is almost non-existant in web applications. That’s in the process of changing.

Drag-drop

How to write and to print Chinese texts in Adobe Illustrator 10

Follow the steps below to create a Chinese file in Illustrator 10:

Configure Non-Unicode Chinese support in Windows XP.

1.In Windows XP, click Start>>Control Panel>>. Select Regional and Language Options. In the “Regional and Language Options” window, click the Advanced tab. In the “Language for Non-Unicode programs” drop-down list, select “Chinese (PRC)” for Simplified Chinese input or “Chinese (Taiwan)” for Traditional Chinese input. Change it back to U.S. when you use other programs.

2.Run Illustrator and open a text box. Press Ctrl+Shift+1 (for Simplified Chinese) or Ctrl+Shift+2 (for Traditional Chinese) to open the Chinese Partner’s Input Prompt Line.

3.Go to the “Input Code Using” option, and then select “Unicode: Simplified Chinese” or “Unicode: Traditional Chinese”.

4.Now select a Chinese font, such as TSC JSong S TT for Simplified Chinese, or TSC FMing S TT for Traditional Chinese, to begin typing your Chinese text.

To print a Illustrator 10 file containing Chinese texts:

1.From the menu bar, click File>>Print.

2.In the Print dialog box, make sure the “Force Fonts to Download” feature is selected. Click OK to print.

Apartment Style

Great for people who love decorate their house. Those guys really awesome transforming small apartment into really cool and nice design. Some of it probably just stuff their room with unnecesary stuff. Hmmmm…. where should I start first?