Carousels with jQuery

28 Apr 2010

jCarousel is a simple jQuery plugin to create continuous sliding effect.  I like the way they created the plugin.

http://sorgalla.com/jcarousel/

jcarousel

jCarousel uses both javascript array and structured html  for inputing data. The data can be modified with html using post callback functions. For example, you can show flicker images using jCarousel by importing the images as an javascript array. To format the appearance and style , you can use html in callback function.

If you need to you fully html based Carousel, use  jCarouselLite

Tags: , , , , , , ,

· · · ◊ ◊ ◊ · · ·

jquery-logo

Recently I created a sliding menu for a project using jQuery and ScrollTo functions.

See demo: Slider  Menu

We can use the jQuery function $(“.menubar”).scrollTo(id_of_element) to scroll any scrollable area to a particular location.

The idea behind every smooth sliding is using scroll function with overflow:hidden mode.

You can download the source code from : http://www.sajithmr.me/downloads/slider/slider.zip

Here div menu-bar is the scrollable div with overflow:hidden mode contains set of menu and a duplicate as a  buffer

At the bottom of the code, you can see a filler div, this is for filling the menu one by one to the right side menu-bar to make the sliding very smooth

The function setMotion(this) calls  the scroll function and it moves till the called DOM object’s id reaches

If you use an ajax call after the motion to load the content at the bottom, you can make this sliding menu for proper navigation purpose.

Thanks

Sajith

Tags: , , , , , , ,

· · · ◊ ◊ ◊ · · ·

If you are facing onchange and form submit of select-box (combo box) in html, you are not alone.

In sometimes onchange = “document.formname.submit()” won’t submit the form, while it works on other html pages.

There is hidden truth of this problem is , there may be some other input having the name “submit”. This cause problem in IE and some other browsers. So rename the input field name from submit to any other name (In most case we use the name of submit button as “submit”).

It is a rare tip,  you may  face this someday !!!

Tags: , , , ,

· · · ◊ ◊ ◊ · · ·

Yahoo Media Player

03 Aug 2009

It may be an unwanted post, but I recently got this information while sufing through.. It is nothing but a javascript file from Yahoo. It is duty is to convery every mp3 link inside an html page into mp3 player and it also creates a playlist according the the mp3 links available.

What you have to do, is just add this js file below your html page which contains some mp3 href

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
You can see the demo here,if your browser supports flash
http://www.sajithmr.com/downloads/yplayer.html
Take view source to see how does it work
Thanks
Sajith

Tags: , , , , ,

· · · ◊ ◊ ◊ · · ·

Start jquery for manipulating html file and execute javascript just like sql queries.

Simply pointer the dom object with a $  and manipulate with different built in function.

For example 

$(“p.neat”).addClass(“ohmy”).show(“slow”);

Don’t need to write javascript inside each node. It is like prototyping. Insted of adding an onClick=”function()” inside the node, jquery define the onclick function from the top level. Your html code will be clean and tidy. If CSS removes all the styling bits, Jquery removes all the javascript bits from html.

You can remap every default action from an html object.

For example normally when you click a link  (<a> tag) it navigate you through the href value. But if you add the jquery code as below:

$(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for clicking!");
   });
 })
It adds a thanks alert for every click in links.
and if you add :
event.preventDefault();
It prevents the default action also.
You can go to JQuery homepage: http://jquery.com/
and can learn more about JQuery.
The intention of this post was not an explaination about jquery, but some addition website which develops addons based on jquery.
Those are:
http://jqueryui.com/
jquerystyle.com/
visualjquery.com/
http://15daysofjquery.com/
http://usejquery.com/

http://blog.themeforest.net/?s=jquery
Comment me if you know any other jquery websites.
Logging out
-Sajith

Tags: , , , , ,

· · · ◊ ◊ ◊ · · ·

Fun Time

04 Nov 2008

Hello Techies ,

Lets watch a fun video with your browser interactive effect. Kill me if you dont like this flash + javascript effect.

Dont maximise (enlarge ) your browser window  after clicking the below link. Wait a moment  after the click.

REMEMBER, DONT MAXIMIZE the window

http://www.fly-a-balloon.be/

Regards

Sythoos

Tags: , , , , , ,

· · · ◊ ◊ ◊ · · ·

Stylish Blockquote

19 Apr 2008

Stylish Blockquote

The tag blockquote in html has a special beauty than any other tags by default. And when you use blockquote in your post, it gets more meaning than merely a text.

Then what will happen if you make your blockquote more stylish.

See my blockquote below:

There are 10 kinds of people in this world….Those who understand binary and those who don’t “

How i made this type of blockquote is simple. Add the following text to your style sheet.

blockquote:first-letter {
background: url(http://www.sajithmr.com/downloads/quote-left.png) no-repeat left top;
padding-left: 45px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

blockquote p:first-letter {
background: url(http://www.sajithmr.com/downloads/quote-left.png) no-repeat left top;
padding-left: 45px;
font:  3.4em Georgia, "Times New Roman", Times, serif;
}

blockquote {
font:  1.3em Georgia, Times, serif;
color: #555555;
}

the second block in not necessary. Some blogs automatically add P tag after blockquote , thats why i used blockquote “p”.

Download the file http://www.sajithmr.com/downloads/quote-left.png and save locally, (if you want) and you can change the quote picture according to your blog style.

Tags: , , , ,

· · · ◊ ◊ ◊ · · ·

وظائف 2011 تحويل العملات برامج برنامج تسريع التحميل برنامج الفلاش برنامج محول الصوتيات عربي hotel 2011 زيادة رواتب العساكر 1431