Share Coding

Tutorials, Problems, Stuffs …

Tag Archives: jquery

jQuery scroll to top not working

var $container = $('html, body, .divProductList');	

        scrollTop : 0
    }, 300);
    return false;

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


How to improve your jQuery

1. Use unique ‘id’ when selecting (Fastest)

$('#btnTest'); //Correct
$('input#btnDiv'); //Wrong
$('#btnDiv #btnTest'); //Wrong

2. Use ‘tag’ before select ‘class’


3. One select to do all works

// Correct
	.css('color', 'red');

// Wrong
$('#btnTest').css('color', 'red');

4. Reduce append times

// Correct
var appendHTML = '';
for(var i=0; i<10; i++) {
	appendHTML += '<p>' + i + '</p>';

// Wrong
var $divTest = $('#divTest');
for(var i=0; i<10; i++) {
	$divTest.append('<p>' + i + '</p>');

Select excetly parent

Basically, this is the jQuery basic selector to select a html object.



How to select a parent?

$('#btnSubmit').parent() // my parent
$('#btnSubmit parent') // my top parent


But browser will add <tbody> to our <table>, so that we can’t select excetly parent by





Select the closest table parent, you may use class to instead table

Create a jQuery + PHP Webpage Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" >

<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=""></script>
<script type="text/javascript" src=""></script>
<link type="text/css" href="" rel="Stylesheet" />

* {

$ = 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;
	$("#btnTest").button().center().click(function() {
		alert("Simple jQuery Layout");


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

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


How to Build a Photobucket Album Viewer Extension of Chrome

To start building the viewer (View all Photos by one click), we should learn how to build a simple extension first.
A tutorial has already made by Google:
As you can see, the viewer extension’s layout is similar to the tutorial of Google.
Chrome Extension Tutorial by Google

Read more of this post