Share Coding

Tutorials, Problems, Stuffs …

Tag Archives: jquery

jQuery scroll to top not working

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.

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’

$('input.setOfButton');

 
3. One select to do all works

// Correct
$('#btnTest')
	.val('Test')
	.css('color', 'red');
	.show();

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

 
4. Reduce append times

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

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

$('#btnSubmit')

 

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

$('#btnSubmit').parent().parent().parent().parent().parent()

 

Solution:

$('#btnSubmit').closest('table')

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

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: http://code.google.com/chrome/extensions/getstarted.html
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