Programming Ideas, Logics, Tips and Tricks » html

Carousels with jQuery

Mr Me — Tue, 27 Apr 2010 19:40:14 +0000

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

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

Sliding menu using jQuery and ScrollTo

Mr Me — Sat, 20 Feb 2010 21:38:53 +0000

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

Onchange, form submit – Error

Mr Me — Mon, 09 Nov 2009 20:27:27 +0000

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 !!!

Yahoo Media Player

Mr Me — Mon, 03 Aug 2009 18:22:08 +0000

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

JQuery – Play with html

Mr Me — Tue, 02 Jun 2009 23:23:00 +0000

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 ( 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

Fun Time

Mr Me — Tue, 04 Nov 2008 03:14:45 +0000

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

Stylish Blockquote

Mr Me — Sat, 19 Apr 2008 03:44:29 +0000

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.