mclelun » jQuery http://www.mclelun.com/blog I am a colorblind multimedia designer + developer Tue, 31 Jan 2012 14:36:42 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery Twitter Update List http://www.mclelun.com/blog/2010/01/jquery-twitter-update-list/ http://www.mclelun.com/blog/2010/01/jquery-twitter-update-list/#comments Sat, 16 Jan 2010 15:29:06 +0000 mclelun http://www.mclelun.com/blog/?p=12 After my first experiment using jQuery to develop a rotating banner, I noticed that the script I wrote could be use for other similar list items such as a Twitter update list.

To retrieve recent my tweets, I paste the following JavaScript provided by Twitter into the <body> of my page.

<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=3"></script>

Then, I make some simple changes to my jQuery rotating banner script and CSS. Viola! The twitter update list is working as expected. You can view the demo in this page.

Download

To use this twitter update list, You will need to replace the username with your twitter name. You can also specify how many tweets to retrieve by changing the value of count parameter.

jqtwitter.js 1KB
jqbanner.zip 35.5KB

]]> http://www.mclelun.com/blog/2010/01/jquery-twitter-update-list/feed/ 3 jQuery Rotating Banner http://www.mclelun.com/blog/2010/01/jquery-rotating-banner/ http://www.mclelun.com/blog/2010/01/jquery-rotating-banner/#comments Sun, 10 Jan 2010 14:33:24 +0000 mclelun http://www.mclelun.com/blog/?p=8 While I was working on the revamp of my site, I noticed I could use a rotating banner in the landing page to show certain works or blog post that I wish to highlight. My first thought was to develop this with Flash, but I changed my mind after thinking that banner like this could be done easily with just JavaScript.

While developing this banner, I used a JavaScript Framework, jQuery to speed up the development process. JavaScript is not my strongest point, but I managed to come out with a simple rotating banner. You can view the banner in this page.

jquery banner

Features

Currently, the banner will rotate automatically every few seconds and can be pause or resume anytime by clicking the button on the banner. You can go through the banners by clicking the next or previous buttons too. Slides information text is grab from the container DIV. so, you could basically put text, images or both into the rotating slides.

How To Use

This simple banner rotating script was not written as a plugin. You will need to do some editing on the page you want to display this. There are only few simple steps you need to do.

1) Include the JavaScript and CSS
Include jQuery library, JavaScript and CSS for this banner in your page header. You can cut and paste the CSS into your website main CSS file too.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner.css" />

2) Include the list of banners
To tell the script which images in your page are for rotating banners. You will need to construct the DIV in the following structure. The number of slides is count automatically through the JS. So, if you experience “extra slide” bug, it is probably because there is an extra or missing DIV tag in your page.

<div id="jqb_object">

<div class="jqb_slides">
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner1.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner2.jpg"/></a></div>
<div class="jqb_slide" title="slide title"><a href="slide link"><img src="banner3.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><span>TEXT SLIDE IN DIV</span></div></div>

<div class="jqb_bar">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>

</div>

Download

The script for this banner is quite simple and self explanatory. To use this rotating banner, you will need to download the zip file which contain all the images, CSS and sample HTML page.

jqbanner.zip 35.7KB
jqbanner_v1.zip (Old version) 35.1KB

Last Update

31/05/2010 – Add in Sliding/Fading animation for title attributes.
30/04/2010 – Change to horizontal scrolling of slides, it still can be easily modify to vertical scrolling. The old script of fading in and out of slides is still in the JS.
16/01/2010 – Pause and play share a single button now and I had change the structure slightly to allow HTML text in the rotating slides.

]]> http://www.mclelun.com/blog/2010/01/jquery-rotating-banner/feed/ 104