Jquery Inspirations

Jquery Inspirations

From ThaiiS Note (Wiki)

Jump to: navigation, search

Contents

Inspirations_Box > Jquery Inspirations

intro

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig. Dual licensed under the MIT License and the GNU General Public License, jQuery is free, open source software.

Both Microsoft and Nokia have announced plans to bundle jQuery[1] on their platforms, Microsoft adopting it initially within Visual Studio[2] and use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework whilst Nokia will integrate it into their Web Run-Time platform.

read more...

Jquery Blog

Extension/plug-in/tutorial

easing

learn

Tutorial URL

jQuery Tutorial



Load Jquery Framework

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

or 

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
</script>

sample

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> /* load jquery framework */
<script type="text/javascript"> // open js tag
      $(document).ready(function() { // open ready event 
					   
                  $("#ii").click(function(){  // if on this (click) event 

                              $("#ii").hide(); // Do this

                  }); // close click event

      }); // close ready event 
</script> // close js tag

<div id="ii">Cool</div>

jQuery Reference

| jQuery Selectors

*

* 	$("*") 	//All elements
#id 	$("#lastname") 	//The element with id=lastname
.class 	$(".intro")// 	All elements with class="intro"
element 	$("p") 	//All <p> elements
.class.class 	$(".intro.demo") //	All elements with class=intro and class=demo

:first

:first 	$("p:first") 	The first <p> element
:last 	$("p:last") 	The last <p> element
:even 	$("tr:even") 	All even <tr> elements
:odd 	$("tr:odd") 	All odd <tr> elements

:eq(number)

  	  	 
:eq(index) 	$("ul li:eq(3)") 	The fourth element in a list (index starts at 0)
:gt(no) 	$("ul li:gt(3)") 	List elements with an index greater than 3
:lt(no) 	$("ul li:lt(3)") 	List elements with an index less than 3
:not(selector) 	$("input:not(:empty)") 	All input elements that are not empty

:header

  
:header 	$(":header") 	All header elements <h1><h2>...
:animated 	  	All animated elements

:header

  	 
:contains(text) 	$(":contains('W3Schools')") 	All elements which contains the text
:empty 	$(":empty") 	All elements with no child (elements) nodes
:hidden 	$("p:hidden") 	All hidden <p> elements
:visible 	$("table:visible") 	All visible tables

s1,s2,s3

  	 
s1,s2,s3 	$("th,td,.intro") 	All elements with matching selectors

[attribute]

  
[attribute] 	$("[href]") 	All elements with an href attribute
[attribute=value] 	$("[href='#']") 	All elements with href attribute value="#"
[attribute!=value] 	$("[href!='#']") 	All elements with href attribute value<>"#"
[attribute$=value] 	$("[href$='.jpg']") 	All elements with href attribute value containing ".jpg"

:input 

   	 
:input 	 	$(":input") 	 	All <input> elements
:text 	 	$(":text") 	 	All <input> elements with type="text"
:password 	 		$(":password") 	 	All <input> elements with type="password"
:radio 	 	$(":radio") 	 	 	All <input> elements with type="radio"
:checkbox 	 	$(":checkbox") 	 	All <input> elements with type="checkbox"
:submit 	 	$(":submit") 	All <input> elements with type="submit"
:reset 	 	$(":reset") 	 		All <input> elements with type="reset"
:button 	 	$(":button") 	All <input> elements with type="button"
:image 	 	$(":image") 	All <input> elements with type="image"
:file 	 	$(":file") 	 	All <input> elements with type="file"

:enabled

  	  	 
:enabled 	$(":enabled") 	All enabled input elements
:disabled 	$(":disabled") 	All disabled input elements
:selected 	$(":selected") 	All selected input elements
:checked 	$(":checked") 	All checked input elements

| jQuery Events 

Event function 	Binds the function to
$(document).ready(function) 	The ready event of a document
(when an HTML document is ready to use)
$(selector).blur(function) 	The blur event of matching elements
$(selector).change(function) 	The change event of matching elements
$(selector).click(function) 	The click event of matching elements
$(selector).dblclick(function) 	The double click event of matching elements
$(selector).error(function) 	The error event of matching elements
$(selector).focus(function) 	The focus event of matching elements
$(selector).keydown(function) 	The key down event of matching elements
$(selector).keypress(function) 	The key press event of matching elements
$(selector).keyup(function) 	The key up event of matching elements
$(selector).load(function) 	The load event of matching elements
$(selector).mousedown(function) 	The mouse down event of matching elements
$(selector).mouseenter(function) 	The mouse enter event of matching elements
$(selector).mouseleave(function) 	The mouse leave event of matching elements
$(selector).mousemove(function) 	The mouse move event of matching elements
$(selector).mouseout(function) 	The mouse out event of matching elements
$(selector).mouseover(function) 	The mouse over event of matching elements
$(selector).mouseup(function) 	The mouse up event of matching elements
$(selector).resize(function) 	The resize event of matching elements
$(selector).scroll(function) 	The scroll event of matching elements

$(selector).select(function)
	The select event of matching elements
$(selector).submit(function) 	The submit event of matching elements
$(selector).unload(function) 	The unload event of matching elements

| jQuery Effects 

Hide / Show 	Description
$(selector).show(speed,callback) 	Show selected elements
$(selector).hide(speed,callback) 	Hide selected elements
$(selector).toggle(speed,callback) 	Toggle hide and show for selected elements
  	 
Slide 	 
$(selector).slideDown(speed,callback) 	Slide-show selected elements by adjusting height
$(selector).slideUp(speed,callback) 	Slide-hide selected elements by adjusting height
$(selector).slideToggle(speed,callback) 	Toggle slide-hide and slide-show for selected elements
  	 
Fade in / out 	 
$(selector).fadeIn(speed,callback) 	Fade in selected elements to full opacity
$(selector).fadeOut(speed,callback) 	Fade out selected elements to zero opacity
$(selector).fadeTo(speed,opacity,callback) 	Fade selected elements to a given opacity
  	 
Animation 	 
$(selector).animate(params,duration,effect,callback) 	Applies a "custom" animation for selected elements
$(selector).stop() 	Stops running animations on selected elements
  	 
Queue 	 
$(selector).clearQueue() 	Remove all queued functions (not yet run) for the selected element
$(selector).delay() 	Set a delay for all queued functions (not yet run) for the selected element
$(selector).dequeue() 	Run the next queued functions for the selected element
$(selector).queue() 	Show the queued functions for the selected element

| jQuery HTML 

Manipulate 	Description
$(selector).html(content) 	Set the content (inner HTML) of selected elements
$(selector).text(text) 	same as html(), but tags will be escaped
$(selector).attr(attr,value) 	Set an attribute and value of selected elements
$(selector).val(value) 	Set the value of the first selected element
  	 
Getting Contents 	 
$(selector).html() 	Get the contents (inner HTML) of the first selected element
$(selector).text() 	Get the text content of all selected elements (combined)
$(selector).attr(attr) 	Get the value of an attribute from selected elements
$(selector).val() 	Get the current value of the first selected element
  	 
Adding Content 	 
$(selector).after(content) 	Add content after selected elements
$(selector).before(content) 	Add content before selected elements
$(selector).insertAfter(selector) 	Add selected elements after selected elements
$(selector).insertBefore(selector) 	Add selected elements before selected elements
  	 
Manipulate CSS 	Description
$(selector).addClass(content) 	Add a class to selected elements
$(selector).removeClass(content) 	Remove a class from selected elements
$(selector).toggleClass(content) 	Toggle between adding/removing a class from selected elements
$(selector).hasClass(content) 	Check if the selected elements have a specified class
  	 
Adding Inner Content 	 
$(selector).append(content) 	Append content to the inner content of selected elements
$(selector).prepend(content) 	"Prepend" content to the inner content of selected elements
$(content).appendTo(selector) 	Append selected elements to the inner content of selected elements
$(content).prependTo(selector) 	"Prepend" selected elements to the inner content of selected elements
  	 
Wrapping 	 
$(selector).wrap(content) 	Wrap each selected element within a content
$(selector).wrapAll(content) 	Wrap all selected elements into one content
$(selector).wrapinner(content) 	Wrap selected inner child contents within a content
$(selector).unwrap() 	Remove and replace the parents of the specified elements
  	 
Copy, Replace, Remove 	 
$(content).replaceAll(selector) 	Replace selected elements with selected elements
$(selector).replaceWith(content) 	Replace selected elements with new content
$(selector).empty() 	Remove all content and child elements from selected elements
$(selector).remove() 	Remove all selected elements
$(selector).removeAttr(attr) 	Remove a specified attribute from all selected elements
$(selector).clone() 	Clone all selected elements
$(selector).detach() 	Remove the specified elements from the DOM

| jQuery CSS 

$(selector).css(name) 	Get the style property value of the first selected element
$(selector).css(name,value) 	Set the value of one style property for all selected elements
$(selector).css({properties}) 	Set multiple style properties for all selected elements
  	 
CSS Size 	 
$(selector).height() 	Get the pixel height of the first selected element
$(selector).height(value) 	Set the height of all selected elements
$(selector).width() 	Get the pixel width of the first selected element
$(selector).width(value) 	Set the width of all selected elements
  	 
CSS Positioning 	 
$(selector).offset() 	Get the position of the first selected element relative to the document
$(selector).offsetParent() 	Get the first parent element with an offset position
$(selector).position() 	Get the position of the first selected element relative to the parent element
  	 
$(selector).scrollTop() 	Get the scroll top offset of the first selected element
$(selector).scrollTop(value) 	Set the scroll top offset of all selected elements
$(selector).scrollLeft() 	Get the scroll left offset of the first selected element
$(selector).scrollLeft(value) 	Set the scroll left offset of all selected elements

Usefull Jquery

8-great-websites-to-learn-step-by-step-jquery


150 best jQuery effects for web

Text edior

LightBox

Photo network

http://www.projectatomic.com/2008/04/jquery-flickr/

datePicker

Scroll

    <link rel="stylesheet" type="text/css" media="all" href="http://sirikayaspa.com/wp-content/themes/sirikaya/js/styles/demoStyles.css" />
		<link rel="stylesheet" type="text/css" media="all" href="http://sirikayaspa.com/wp-content/themes/sirikaya/js/styles/jScrollPane.css" />
		<script type="text/javascript" src="http://sirikayaspa.com/wp-content/themes/sirikaya/js/scripts/jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="http://sirikayaspa.com/wp-content/themes/sirikaya/js/scripts/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="http://sirikayaspa.com/wp-content/themes/sirikaya/js/scripts/jScrollPane.js"></script>

<script type="text/javascript">
			$j=jQuery.noConflict();
			$j(function()
			{
				// this initialises the demo scollpanes on the page.

				$j('#pane3').jScrollPane({scrollbarWidth:5,scrollbarMargin:20,showArrows:true});

			});
			
		</script>

slideshow

slide

more

Preloader

jqueryui

upload

sifr

strip

jQuery Image Gallery

listnav

Image full

http://demo.marcofolio.net/fullscreen_image_slider/

slide

Column

JavaScript library List

other

inline jquery

<span onmouseover="$('#7').css({color:'#f13f29'});" onmouseout="$('#7').css({color:'#000000'});"><a href="javascript:void(0)"><span id="7">7</span>Blogger.com</a></span>

<span onmouseover="$('#mail').html('<img src=mail.png border=0>');" onmouseout="$('#mail').html('');"><a href="javascript:void(0)">Mail Me<span id="mail"></span></a></span>

<span onmouseover="$('#mail2').show();" onmouseout="$('#mail2').hide();"><a href="javascript:void(0)">Mail Me<span id="mail2" style="display: none;"><br><input type="text" size="15" style="background-image:url('mail.png');background-repeat:no-repeat;padding-left:17px;"/><input type="button" value="Send >>"></span></a></span>

LAST ADD

AJAX-ZOOM :: Image Zoom & Pan Gallery, Fullscreen View. HTML5 - iPad & Co. touch support

Buble

EX

Change/add HTML attribute

<script type="text/javascript">

$(document).ready(function() {
							$("[href$='.jpg'],[href$='.png'],[href$='.gif']").attr("rel","gallery");
							$("[href$='.jpg'],[href$='.png'],[href$='.gif']").attr("class","fancybox");
							$(".contentin img").attr('rel', 'gallery');
						//	$(".contentin img").width("430px"); 
							$('.contentin img').attr('width', '766');
							$('.contentin img').attr('height', '');
						
  });

</script>

replace img with timthumb

<script type="text/javascript">

$(document).ready(function() {
//start replace img with timthumb
var imgs = $('.contentin img');
 jQuery.each(imgs, function() {
$(this).replaceWith('<img src="scripts/tim/thumb.php?src=' + $(this).attr('src')+'&w=660&s=1&q=90" />');
});
//end tim
</script>

resize and width

<script type="text/javascript">
$(window).resize(function() {
 var windowWidth = $(window).width(); 
$(".ree").html(windowWidth);

if(windowWidth>1000){$(".hideme").css("display","none")}
if(windowWidth<1000){$(".hideme").css("display","block")}
});

</script>
Retrieved from "http://www.thaiis.eu/Jquery_Inspirations"