Share Coding

Tutorials, Problems, Stuffs …

Category Archives: HTML

jQuery scroll to top not working

Leave a comment Posted by on 2016/09/07 
var $container = $('html, body, .divProductList');	

$scrollToTop.on('click',function(){
    
    $container.animate({
        scrollTop : 0
    }, 300);
    return false;
});

The magic is in the $container selector. Put your list, html, body into the target.

HTML, Javascript, jQuery , , ,

Div has equal width and space

Leave a comment Posted by on 2016/06/21
Example: three or two span share the equal space in a row. (inline-block)

space

Read more of this post

BahBahBah, CSS, HTML , , , , , , , , ,

Custom Scroll bar like Facebook by using JQuery Plugin

2 Comments Posted by on 2012/11/08

Click here for Demo

To make a scrollbar like that, you will need jQuery, jQuery UI and SlimScroll: http://rocha.la/jQuery-slimScroll

 
1. Import the jQuery, jQuery UI library and SlimScroll plugin

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript" src="http://rocha.la/misc/jsdemos/slimScroll/slimScroll.js"></script>

 
Read more of this post

HTML, jQuery ,

Create a jQuery + PHP Webpage Template

Leave a comment Posted by on 2012/07/17 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Simple jQuery Template</title>

<!-- (jQuery & jQuery UI) SCRIPT and CSS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery.ui.all.css" rel="Stylesheet" />

<style>
* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
</style>

<script>
$.fn.center = function() {
	this.css('position', 'absolute');
	this.css('left', '50%');
	this.css('top', '50%');
	this.css('margin-left', -this.width() / 2 + 'px');
	this.css('margin-top', -this.height() / 2 + 'px');
	return this;
}
	
$(document).ready(function(){
	
	$("#btnTest").button().center().click(function() {
		alert("Simple jQuery Layout");
	});
	
});
</script>

</head>

<body style="font-family:微軟正黑體, 微软雅黑, Tahoma, Geneva, sans-serif; font-size:12px;overflow-x: hidden">

	<?php echo '<input id="btnTest" type="button" value="Test" />'; ?>

</body>
</html>
HTML, Javascript, jQuery, PHP , , ,

Use Paypal as a payment gateway

1 Comment Posted by on 2012/02/17

1. Register as a business account on Paypal.

2. Make a Paypal payment HTML form.

<form method="post" name="paypal_form" action="https://www.paypal.com/cgi-bin/webscr"> 
    <input type="hidden" name="business" value="account@gmail.com" /> <!-- Registered business account -->
    <input type="hidden" name="cmd" value="_xclick" />
    <input type="hidden" name="return" value="http://server/return.php" /> <!-- Client will redirect into this URL after payment is done -->
    <input type="hidden" name="notify_url" value="http://server/success.php" > <!-- Paypal server will access to this URL when payment is done -->
	   
    <input type="hidden" name="rm" value="2" />
    <input type="hidden" name="currency_code" value="HKD" /> <!-- Currency -->
    <input type="hidden" name="lc" value="HK" /> <!-- Location -->
    <input type="hidden" name="bn" value="toolkit-php" />
    <input type="hidden" name="cbt" value="Continue" />
    
    <!-- Payment Page Information -->
    <input type="hidden" name="no_shipping" value="1" />
    <input type="hidden" name="no_note" value="1" />
    <input type="hidden" name="cn" value="Comments" />

    <!-- Product Information -->
    <input type="hidden" name="item_name" value="Produce 1" /> <!-- Product Name -->
    <input type="hidden" name="amount" value="100" /> <!-- Price of the product -->
    <input type="hidden" name="quantity" value="1" /> <!-- Quantity of the product -->
</form>
HTML ,