Jiangyue Zhu

Impossible is Nothing

Leave a comment

Customize jQuery Plugin–Back to Top widget

How to make a more friendly widget which can enhance the user experience on the website? Imagine this scenario: when you browse a web page with long height and you almost reach the bottom of this page, how would you feel if you have to go back to the top right now? Is it too much boring to use the scroll bar which may make your finger exhausted? You may need a small widget which can make this even happen just by one click. Actually, when I browsed some websites, I noticed that some of them implemented this kind of features which I think are very user-friendly. In this blog, I want to tell how I implemented this  by using defining a customized jquery plugin.

For someone who may not be familiar with jquery plugin, please take this as reference.

Firstly, I need to write some codes for this widget using div with an id “backToTop” assigned. And I would use a small icon –up arrow for this widget. 

The code samples for this part is pretty simple:

<div id="backToTop">
   <img src="img/up.png" alt="up" width="60" height="80" />

Now, the task would be switched to the style sheet. What I want is to move this widget to the right-bottom corner and always be there during scrolling through the page. In this way, it will not affect users’ reading behaviors. So the style sheet for this part looks like this:


Some additional parts should be noted. As we prefer not to see this widget at the first time (cause we only need it when we leave the top position), we set the display attribute to none. Also, we set cursor to pointer in order to tell users they can click on it.

Then, it comes to the core part, the jquery plugin. Firstly, let’s create a new js file, naming it ‘plugin.js’. Inside it, let’s add these codes:

// JavaScript Document

 var settings = $.extend({

 var this_= this;
 var position = settings["position"];


 var currentPos=$(window).scrollTop();

 if(currentPos >= position){
 else {







Simply put, what I am doing is to define a function called ‘backToTop’ with an optional parameter called position. This position attribute is used to define when the widget should appear. I set the default value to 200. Besides, I added a scroll event to the document object and retrieve the current top offset. Using a if-else statement to control the visibility of the widget, the widget would not show up until the current top offset goes beyond the position we set. Then, don’t forget to set a click event on this widget, in the event, define a function to let set the window object scroll to the top by using scrollTop(0). And if we scroll back to top in which the current offset is smaller than the position that we set, the widget would disappear.

After we accomplished this javascript file, we need to call this function in our page. Generally, we use $(“#backToTop”).backToTop([optional parameters]) to invoke the function.


Now, we are set! Please visit my live project.


Leave a comment

HTML5 Box Model

As we know, the contents enclosed by <div></div> would be considered as block-level container as default. If there are some contents that we want them to be in a menu, it needs some more work to implement it.

Let’s see an much easier and more elegant way to do this by using box-model.

Now, I have a div which has an id “menu”. It would be used to display a menu with three elements:

<div id="menu">
 <div id="home">Home</div>
 <div id="contact">Contact</div>
 <div id="about">About</div>

If we did not change anything, the sub-div would be aligned vertically. What we want to do now is to align them horizontally, just like what we see in some websites.

It is easy to do this by using box-model. The codes of this part are like this:

<style type="text/css"> 



Actually, we need to set the display attribute of menu div section to box. In the codes, there are two additional attributes which has prefixes: -webkit and -moz which aims to solve the cross-browser compatibility. -webkit is to support several browsers such as Opera, Chrome, and Safari, while -moz supports Mozilla Firefox. We note that the box orient attribute is also being set to horizontal.

Are we set now? Not yet. Why? The reason is that the sub-div elements will not inflate into the whole menu div, even though all these three sub-div elements are aligned horizontally. For example, if we set the width of the menu div to 500px, then the current result would be something like this:

That’s definitely not what we expect. Now, the next step is to add some codes for controlling those menu sub-div elements. The codes are like this:

#menu > div{
 border:#999999 solid;
 border-radius: 5px;

The important part is the attribute box-flex. Simply put, if we set the box-flex value of all the sub-div elements to 1, it means that those three elements would occupy the whole menu div with equal width. That’s what we want! So, after adding these codes, the result looks exactly what we expect:

Here is a live result, click here. It has more than what I introduced above because it has some additional attributes which can allow the div stretch when the mouse is hover on it. Also, it has some features such as the shadow or border radius.

Leave a comment

Configure Virtual Hosts–Use XAMPP

By default, I can access to my localhost in http://localhost:8080/(my port sets to 8080) and the projects are deployed under htdocs folder.

But, how to change that? I read some posts online and find a way to do it for XAMPP.

Firstly, copy the following lines to C:\xampp\apache\conf\extra\httpd-vhosts:

<VirtualHost *:8080>
 DocumentRoot "C:/xampp/htdocs/zend/public"
 ServerName zend
 SetEnv APPLICATION_ENV development
<Directory "C:/xampp/htdocs/zend/public">
 Options Indexes MultiViews FollowSymLinks
 AllowOverride All
 Order allow,deny
 Allow from all

The port number is 8080. And the root directory is : “C:/xampp/htdocs/zend/public, which is my zend framework project application folder.

Also, I customize my host name as ‘zend’. So in this way. I can use http://zend:8080/ instead of http://localhost:8080/

But before open the browser, there is still one more thing to do:

Go to ‘C:\Windows\System32\drivers\etc’, and find open ‘hosts’.

Here, I edit another host by using the following contents:       localhost zend

After this configuration, don’t forget to restart the apache server.

Then it is the time to open the browser to try the new url:  http://zend:8080

and it will access the public/ directory.

1 Comment

Learn How to set up Zend Framework

After considering several days, I planned to learn Zend Framework. Actually, I had generated this idea since I graduate in last December. But I was confused about the process of setup. It seems that Zend Framework is powerful, but at the same time, you need to tolerate the complicate installation procedure.

Recently, I came across some tutorials on the web, and I finally, finally got it set up. I tried it on NetBeans 7.0 and Zend Studio.

It would be much easier when you use Zend Studio which would automatically help you set up the architecture if you choose ‘File’->’New’->’Zend Framework Project’.

The project structure looks like this

The files under public/ directory are the web pages for this application. Also, it should be noted that the project contains ‘models’,’views’, and ‘controllers’ folders.

Previously, when I tried this,  I got error when I launched the browser with url access to index.php under application/public/ directory. I found out that it was the reason that the project missed the Zend library, which can be downloaded here. I downloaded the zip file and extract the contents under library/ directory to the project library/ directory. Then it works!

The index page would like this:

I accessed to this result by this url: http://localhost:8080/zend/public/, where zend is my project name.

Also, the url:  http://localhost:8080/zend/public/index would have the same result because index under public/ directory is the a default action within a controller called Index.

For NetBeans IDE, the process is a little bit complicated. It is easy to find the way to create a new PHP application. After setting some necessary parameters such as project name, php version…, you have the option to select one framework. But it would invoke a alert which says that a zend script is required. Use the ‘Browse’ option and go to the folder of zend framework which was downloaded before and select ‘zf.bat’ and at the same time, you need to make sure that the Zend library is in your ‘\php\PEAR’ directory. In my case, I copy the ‘library/’ contents to ‘C:\xampp\php\PEAR’

After this, don’t forget to click the ‘Register Provider’ button just below the zend script line.

And, All the stuffs are set!!

The project structure is the same as Zend Studio one. And also, the result of launching the project is also the same.

Now, I would spend some time to study Zend Framework MVC. I want to share a good tutorial which is in PDF format. I t can be downloaded in http://akrabat.com/wp-content/uploads/Getting-Started-with-Zend-Framework.pdf

Also, the author provides some resources such as the sample codes for this tutorial: http://akrabat.com/zend-framework-tutorial/