loading
Please wait while loading...

Read more Prettify mobile view of pretty photo
2015-07-16 jQuery

I got the issue that pretty photo shows photos too small on mobile device, I think the problem just caused by the calculating of the resizing, so I try to find the snippet of the resize function from the js source and that was easily got the solution as below:

I am using the 3.1.6 version, please find the function _fitToViewport in line 568. Then scroll down some more you will see imageWidth = (windowWidth - 200); and imageHeight = (windowHeight - 200);

Just reduce the number and then the mobile view will become very nice!! I try to adjust many times and got the best fit number is 38 and 100. You can just copy the following code to replace the original one:

if(pp_containerWidth > windowWidth - 38){
    imageWidth = (windowWidth - 38);
    imageHeight = (height/width) * imageWidth;
} else if(pp_containerHeight > windowHeight - 100) {
    imageHeight = (windowHeight - 100);
    imageWidth = (width/height) * imageHeight;
} else {
    fitting = true;
};

 

Read more Responsive image map
2014-12-02 jQuery jQuery

Source: https://github.com/stowball/jQuery-rwdImageMaps

Demo: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#bubbles

One line code to make your image map responsive, $('img[usemap]').rwdImageMaps();

Read more A better way to support placeholder in IE
2013-01-01 jQuery jQuery

Using a float span as the placeholder message instead change the value of the input

Firstly, make the form input as following style

<label><input type="text" placeholder="email" /></label>
．．．．．．．．．．．

Read more Little Boxes Menu with jQuery
2012-09-29 jQuery jQuery

A nice jQuery menu, useful to make gallery menu.

Little Boxes Menu with jQuery

Read more HoverIntent - an extends for jQuery hover
2012-08-11 jQuery jQuery

jQuery hoverIntent is a plugin used to delay the trigger of mouseover and mouse out of hover function. This helps us to prevent user trigger many times of event when move over a layer.

default hover:

$("#layer").hover(function() {
    //mouserover event
},function() {
    //mouserout event
});

hoverintent:

$("#layer").hoverIntent({
	interval: 500,
	over: function(){
		//mouserover event
	},
	timeout: 500,
	out: function(){
		//mouserout event
	}
});
．．．．．．．．．．．
1 2