<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
function description()
{
var productid=$('#productid').val();
var productid1=$('#productid1').val();
$.ajax({
type: 'POST',
url: 'description.php',
data: "productid="+productid
+ "&productid1="+productid1,
success: function(data)
{
$('#msg').text(data);
}
});
}
</script>
</head>
<body>
<form>
<span id="msg"></span>
<input type="text" id="productid" name="productid">
<input type="text" id="productid1" name="productid1">
<input type="button" value="submit" Onclick="return description();">
</form>
</body>
</html>
=================================================================
JQUERY FOR MOBILE
http://jquerymobile.com/demos/1.2.1
=================================================================
Jquery PhotoZoom Plugin to view bigger images.
http://www.9lessons.info/2012/12/jquery-photo-zoom-plugin.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+9lesson+%289lessons%29
JQUERY WITH AJAX
____________________
function priceDisplay(qty)
{
var brand = $('#brand').val();
var color = $('#color').val();
var size = $('#size').val();
var waist = $('#waist').val();
var quantity = $("#quantity option:selected").text();
$('.total').html('');
$('#price').val('');
if(brand != '0.0')
{
var user ='<?= $current_user_id ?>';
var url='<?= $_SERVER['REQUEST_URI']?>';
var id='<?= $_SERVER['QUERY_STRING'] ?>';
var title= '<?= $product_code ?>';
var qtyvalue=$('#quantity').val();
$.ajax({
type: 'POST',
url: 'getprice.php',
data: "brand="+brand
+ '&color='+color
+ '&size='+size
+ '&waist='+waist
+ '&catid='+<?=$categoryid?>
+ '&qtyvalue='+qtyvalue
+ '&quantity='+quantity,
success: function(data)
{
var pricearray = data.split('_');
var productid =pricearray[0];
if (qty != 'quantity')
{
displayContent(productid,title);
}
var price =pricearray[1];
//var catname = $('#catname').val();
if(price=="")
{
$('.display').hide();
$('.cart-btn').hide();
$('#product_content').hide();
}
else if(price!='0' || price!="")
{
var catname = $('#catname').val();
if(quantity != 'Select Quantity')
{
if(catname == 'Signage')
var total = (quantity * price);
else
var total = (price*1);
if(total != 0 && user != 0)
$('.total').html('Total : $'+ total.toFixed(2) + ' NZD');
$('#price').val(total);
$('#productid').val(productid);
if(total == 0){
$('.cart-btn').hide();
$('.display').hide();
}
else if (user == 0){
$('.cart-btn').hide();
$('.display').hide();
}
else{
$('.cart-btn').show();
$('.display').show();
}
if(user == 0)
$('.total').html('<a href="login.php?fnm=product_detail.php?<?=$_SERVER['QUERY_STRING']?>">Login to access prices<a>');
}
}
}
});
}
else
{
$('#product_content').hide();
$('.cart-btn').hide();
}
}
function createcombo()
{
var brand = $('#brand').val();
var categoryid = $('#categoryid').val();
var title='<?=$product_code?>';
$.ajax({
type: 'POST',
url: 'getallcombo.php',
data: "brand="+brand
+ '&categoryid='+categoryid
+ '&title='+title,
success: function(msg)
{
//alert(msg);
var comboback = msg.split('_');
var combodetail=comboback[0];
var hide=comboback[1];
if(hide!=0){
$('#comboPack').html(combodetail);
priceDisplay();
}
else{
$('#color').html('<option>Select Quantity</option>');
$('#size').html('<option>Select Quantity</option>');
$('#waist').html('<option>Select Quantity</option>');
$('#quantity').html('<option>Select Quantity</option>');
$('.display').hide();
priceDisplay();
}
}
});
}
function description(productid)
{
//alert(productid);
$.ajax({
type: 'POST',
url: 'description.php',
data: "productid="+productid,
success: function(data)
{
//alert(data);
//var contentarray = data.split('__');
//var content =contentarray[0];
//var quantity =contentarray[1];
if(data !=""){
$('#product_content').show();
$('#product_content').html(data);
}
else
{
$('#product_content').hide();
}
}
});
}
function displayContent(productid,title)
{
var brand = $('#brand').val();
var color = $('#color').val();
var size = $('#size').val();
var waist = $('#waist').val();
var quantity = $("#quantity option:selected").text();
$.ajax({
type: 'POST',
url: 'getcontent.php',
data: "productid="+productid,
data: "brand="+brand
+ '&color='+color
+ '&size='+size
+ '&waist='+waist
+ '&quantity='+quantity
+'&productid='+productid
+'&title='+title,
success: function(data)
{
alert(data);
var Qantity_array = data.split('_');
var Q1=Qantity_array[0];
var Q2=Qantity_array[1];
if(Q2 == 'hi')
{
$('#msg').show();
$('#msg').html('Error:Product Not Available!');
$('#quantity').html('<option value=0>Select Quantity</option>');
}
else if(Q2 == '1')
{
$('#quantity').html(Q1);
$('#msg').hide();
}
}
});
}
____________________________________________________________________
Run this when the whole page has been downloaded.
<script type="text/javascript" src="jquery.js"></script>
or
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
alert('Loaded Whole Page including images)');
});
</script>
Generally used Jquery Code
<script type="text/javascript">
$(document).ready(function()
{
alert('Welcome 9lessons Jquery Basic Series');
});
</script>
Click() Event
<script type="text/javascript">
$(function()
{
$('#button_action').click(function()
{
alert('Hey Button');
});
$('.link_action').click(function()
{
alert('Hey Link');
});
});
</script>
<body>
<include type='button' value='BUTTON' id='button_action'/>
<a href='#' class='link_action'>LINK</a>
</body>
Hide and Show With Click Event
<script type="text/javascript">
$(function()
{
$('.hide_box').click(function()
{
$('#box').hide();
});
$('.show_box').click(function()
{
$('#box').show();
});
});
</script>
<body>
<a href="#" class="hide_box">HIDE</a>
<a href="#" class="show_box">SHOW</a>
<div id="box"></div>
</body>
Fading Effect
<script type="text/javascript">
$(function()
{
$('.fadeOut_box').click(function()
{
$('#box').fadeOut("slow");
//Sliding effect just replace fadeOut() to slideUp()
});
$('.fadeIn_box').click(function()
{
$('#box').fadeIn("slow");
//Sliding effect just replace fadeIn() to slideDown()
});
});
</script>
<body>
<a href="#" class="fadeOut_box">fadeOut()</a>
<a href="#" class="fadeIn_box">fadeIn()</a>
<div id="box"></div>
</body>
CSS code
#box
{
background-color:#96BC43;
border:solid 3px #333333;
height:160px;
margin-top:30px;
}
Attributes
<script type="text/javascript">
$(function()
{
$('.link').click(function()
{
var id=$(this).attr("id");
var class=$(this).attr("class");
var href=$(this).attr("href");
alert(id);
alert(class);
alert(href);
});
});
</script>
<a href="http://9lessons.blogspot.com" class="link" id="901">link</a>
Get the html contents (innerHTML) of the matched element. $(selector).html().
<script type="text/javascript">
$(function()
{
$('.link').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>
<a href="http://9lessons.blogspot.com" >Click </a>
Link HREF value : <h1></h1>
addClass()
<script type="text/javascript">
$(function()
{
$('.changeclass').click(function()
{
$(".big").addClass("small");
});
});
</script>
<a href="#" class="changeclass" >Click </a>
<div class="big">9lessons.blogspot.com</div>
CSS Code
.big
{
font-size:106px;
}
.small
{
font-size:12px;
}
Get the value from Span using class
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
var h1=$('span[class*="ms-cui-ctl-largelabel"]').text();
$("h1").html(h1);
});
</script>
</head>
<body>
<span style="" class="ms-cui-ctl-largelabel" unselectable="on">Notify<br>Me</span>
<h1 id="h1class"></h1>
</body>
</html>
UItoTop jQuery Plugin
http://mattvarone.com/web-design/uitotop-jquery-plugin/
How to create a Popup with CSS and Javascript
http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/
FancyMoves a jQuery Product Slider
http://webdesignandsuch.com/fancymoves-jquery-product-slider-2/
fancybox-youtube
http://webdesignandsuch.com/posts/fancybox-youtube/
No comments:
Post a Comment