Jquery Inspirations

Jquery Inspirations

From TUMRAI [QuickNote]

Jump to: navigation, search

Contents


Inspirations_Box > Jquery Inspirations


Quotes

Quovolver

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.quovolver/2.0.2/jquery.quovolver.min.js"></script>
<script>
$(document).ready(function() {
  $('.quotes').quovolver();
});
</script>
</head>
[show details]

scroll to div change css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Div Css</title>
[show details]

scroll div fade

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 800) {
        $('.bottomMenu').fadeIn();
    } else {
        $('.bottomMenu').fadeOut();
    }

});

Show hide

<script type="text/javascript"> 
$(document).ready(function() {   
$(".pack").click(function(){
$(this).next('.packde').slideToggle();
 });
 }); 
</script>

Insert url parameter to url

<script type="text/javascript"> 
$(document).ready(function() { 
	$("a").each(function() {
$(this).attr("href", $(this).attr("href") + '&v=d');
	});
}); 
</script>


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

Usefull

update

validator

calculation

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>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

sample

<script>
<script>
$(function(){
	 $("#accept").click( function(){ 
	 $("#cookie").hide('slow');
	 });
});
</script>


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

from google

https://developers.google.com/speed/libraries/devguide

jQuery Reference

x100px

| 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

[show details]

| 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

Time Restraints

$('#rest_example_1').timepicker({
	hourMin: 8,
	hourMax: 16
});

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>

Smooth Scroll

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>

Current Link

<script type="text/javascript"> 
var $j = jQuery.noConflict();
$j(document).ready(function(){
  var path = location.pathname.substring(1);
   if ( path )
	 $j("[href$=" + path + "]").attr('class', 'selected');
});

 </script>
<script type="text/javascript"> 
var $ = jQuery.noConflict();
$(document).ready(function(){
  var path = location.pathname.substring(1);
   if ( path )
	 $("[href$=" + path + "]").attr('class', 'selected');
});

 </script>

simple-jquery-gallery

http://papermashup.com/simple-jquery-gallery/

Crop

http://odyniec.net/projects/imgareaselect/

apple-gallery

http://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html

OrderForm

  • css-tricks.com/examples/DynamicOrderForm/

SimplejQueryDropdowns

Grid

MiddleBoxLinks


zoom

zoom_hover

jquery/zoom_hover

animate

Hover

Screen Size

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>multiple Screen Size</title>
 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" >
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 500) {
        $("body").css("background-color", "#0CF");
    } else if ((width >= 501) && (width < 700)) {
        $("body").css("background-color", "#000");
    } else {
       $("body").css("background-color", "#ccc"); 
    }
}
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
</script>
<style type="text/css">
.main-content {
	background: #eee;
	padding: 5px;
	margin-bottom: 5px;
}
</style>
</head>

<body>

<div class="main-content">Content</div>
<div class="main-content">Content</div>
<div class="main-content">Content</div>		
</body>
</html>

Hilight Current url

 <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
 .selected {
	color: #FFF !important;
}
 </style>
<script type="text/javascript"> 

$(document).ready(function(){
$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("selected")
//window.location.pathname
})

});

 </script> 

toggle

 <div class="thumbx">
<div class="image">
<a href="http://www.mothermoods.com/CLOTHING/tops cardigans/v neck tops, maternity daytime clothes">
<img 
oversrc="http://www.mothermoods.com/image/cache/data/_D3_8856_1-194x286.jpg" 
src="http://www.mothermoods.com/image/cache/data/_D3_8820_1-194x286.jpg" 
title="V Neck Sleeveless Blouse Top with Layers in Pale Blue or Brown " 
alt="V Neck Sleeveless Blouse Top with Layers in Pale Blue or Brown " 
style="border:none"/>
</a>
</div>

<div class="thumbinfo">
<div class="inin">
<div class="name">
V Neck Sleeveless Blouse Top with Layers in Pale Blue or Brown 
</div>
 1,700฿        
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	
$('.thumbx').hover(
    function() {
$(this).find('.thumbinfo').fadeIn();
},
    function(){
$(this).find('.thumbinfo').fadeOut();      
});


});
</script>

find text -> AddClass

<li><a href="http://domain.com/SALE">QUICK!!!!!</a></li>
<script type="text/javascript">
$(document).ready(function(){
	
$('a[href^http][href*=SALE]').addClass('redx');


});
</script>

giga menu

<script type="text/javascript">


$(document).ready(function() {

$('#teamenu').bind('mouseover', openSubMenu); 
$('#submenu').bind('mouseover', openSubMenu); 
$('#submenu').bind('mouseout', closeSubMenu); 
$('#teamenu').bind('mouseout', closeSubMenu); 

function openSubMenu() { $('#submenu').css('visibility', 'visible').slideDown(); }; 
function closeSubMenu() { $('#submenu').css('visibility', 'hidden').fadeIn('slow'); };

});

</script>

Audio

<script>
$(document).ready(function() {
	var audioElement = document.createElement('audio');
	audioElement.setAttribute('src', 'http://co.com/music/recovery.ogg');
	audioElement.setAttribute('src', 'http://co.com/music/recovery.mp3');
	audioElement.load()
	audioElement.play();
	
	$(audioElement).bind('ended', function()  {
    audioElement.currentTime = 0;
   audioElement.play();
});


audioElement.addEventListener("load", function() { 
		audioElement.play(); 
	}, true);



	
	$('.play').click(function() {
		audioElement.play();
		
	});
	$('.pause').click(function() {
		audioElement.pause();
	});
			
});
</script>


Load file no refresh

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  setInterval(function(){
    $('#div').load('content.php');
  },5000);

});
</script>