Jquery Dialog Example

=====================
HTML
====
<p>Hello World!
</p>
<div id="dialog-message" title="Important information">
<span class="ui-state-default"><span class="ui-icon ui-icon-info" style="flo
at:left; margin:0 7px 0 0;"></span></span>
<div style="margin-left: 23px;">
<p>
We're closed during the winter holiday from 21st of December, 2010 u
ntil 10th of January 2011.
<br /><br />
Our hotel will reopen at 11th of January 2011.<br /><br />
Another line which demonstrates the auto height adjustment of the di
alog component.
</p></div>
</div>
CSS
===
body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; }
.ui-dialog-osx {
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px;
}
Jquery
=======
$("#dialog-message").dialog({
modal: true,
draggable: true,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
});
Submit Event Example
======================
HTML
====
<form method="get" action="https://www.google.com" target="top">
<input type="text" name="q" value="">

<input type="submit" value="Search Google">

</form>
Jquery
=======
$('form').submit(function() {
return confirm('Are you sure you want to search Google?');
});
Table Zebra Stripes effect with jQuery
=======================================
HTML
====
<table>
<tr>
<th>ID</th>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>0.60</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>0.50</td>
</tr>
<tr>
<td>3</td>
<td>Banana</td>
<td>0.10</td>
</tr>
<tr>
<td>4</td>
<td>strawberry</td>
<td>0.05</td>
</tr>
<tr>
<td>5</td>
<td>carrot</td>
<td>0.10</td>
</tr>
</table>
CSS
===
body,td {
font-size: 10pt;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
border: 1px outset silver;
background-color: maroon;
color: white;

}
tr {
background-color: white;
margin: 1px;
}
tr.striped {
background-color: coral;
}
td {
padding: 1px 8px;
}
Jquery
=======
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(even)").addClass("striped");
});
</script>

Page Loading Effects with jQuery

=================================
HTML
====
<div id="page_effect" style="display:none;">
<h1>JQuery Page Loading Effect</h1>
This
This
This
This
This
This
This
This
This
This
This
This
This
This
</div>

is
is
is
is
is
is
is
is
is
is
is
is
is
is

page
page
page
page
page
page
page
page
page
page
page
page
page
page

loading
loading
loading
loading
loading
loading
loading
loading
loading
loading
loading
loading
loading
loading

effect
effect
effect
effect
effect
effect
effect
effect
effect
effect
effect
effect
effect
effect

with
with
with
with
with
with
with
with
with
with
with
with
with
with

JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery

Jquery
======
<script type="text/javascript">
$(document).ready(function(){
$('#page_effect').fadeIn(2000);
});

1<BR>
2<BR>
3<BR>
4<BR>
5<BR>
6<BR>
7<BR>
8<BR>
9<BR>
10<BR>
11<BR>
12<BR>
13<BR>
14<BR>

</script>
Stop a page from exit with jQuery
==================================
HTML
====
<button id="reload">Refresh a Page in jQuery</button>
Jquery
=======
$('#reload').click(function() {
location.reload();
});
$(window).bind('beforeunload', function(){
return 'Are you sure want to leaving?';//Message not display on
firefox.
});
Check if an element exists or not in jQuery
===========================================
html
====
<input type='button' value='div1 exists?' id='buttonDiv1'>
<input type='button' value='div2 exists?' id='buttonDiv2'>
jquery
======
<script type="text/javascript">
$(document).ready(function(){
$("#buttonDiv1").click(function () {
if($('#div1').length){
alert("Div1 exists");
}else{
alert("Div1 does not exists");
}
});
$("#buttonDiv2").click(function () {
if($('#div2').length){
alert("Div2 exists");
}else{
alert("Div2 does not exists");
}
});
});
</script>

add / remove CSS class dynamically in jQuery

============================================
html
====
<p id="para1">This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
<button id="addClass">Add highlight</button>
<button id="removeClass">Remove highlight</button>
css
====
.highlight {
background:green;
}
jquery
======
$("#addClass").click(function () {
$('#para1').addClass('highlight');
});
$("#removeClass").click(function () {
$('#para1').removeClass('highlight');
});
check if an element has a certain class name with jQuery
=========================================================
HTML
====
<div class="redColor">This is a div tag with class name of "redColor"</div>
<p>
<button id="isTest">is('.redColor')</button>
<button id="hasClassTest">hasClass('.redColor')</button>
<button id="reset">reset</button>
</p>
CSS
===
.redColor {
background:red;
}
.blueColor {
background:blue;

}
Jquery
======
$("#isTest").click(function () {
if($('div').is('.redColor')){
$('div').addClass('blueColor');
}
});
$("#hasClassTest").click(function () {
if($('div').hasClass('.redColor')){
$('div').addClass('blueColor');
}
});
$("#reset").click(function () {
location.reload();
});
create a tooltips with jQuery
=============================
HTML
====
<label id="username">Username : </label><input type="text" / size="50">
<span id="hint">hint (mouseover me)</span>
CSS
===
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:yellow;
position: absolute;
z-index: 2;
}
Jquery
======
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});

};
var showTooltip = function(event) {
$('div.tooltip').remove();
$('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>'
)
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
Highlight table row record on hover - jQuery
============================================
HTML
====
<table border="1">
<tr><th>No</th><th>Name</th><th>Age</th><th>Salary</th></tr>
<tr><td>1</td><td>Yong Mook Kim</td><td>28</td><td>$100,000</td></tr>
<tr><td>2</td><td>Low Yin Fong</td><td>29</td><td>$90,000</td></tr>
<tr><td>3</td><td>Ah Pig</td><td>18</td><td>$50,000</td></tr>
<tr><td>4</td><td>Ah Dog</td><td>28</td><td>$40,000</td></tr>
<tr><td>5</td><td>Ah Cat</td><td>28</td><td>$30,000</td></tr>
</table>
JQuery
=======
$("tr").not(':first').hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
or
$(function() {
$('tr').hover(function() {
$(this).css('background', 'red')
},function() {
$(this).css('background', '')
}
);
});