Category Archives: Daily

Image Resizing With jQuery

I just found a problem when I want to display image in a web page, especially for image with large dimensions, e.g. : 1024 x 768 pixels. I need this image to be automatically scaled to smaller dimensions, e.g. : 400px x 400px. There are some solutions that I can think of, such as : get the image dimensions (width & height) using Java then pass the values to JSP. But I think it will take time. So I decided to use javascript/jQuery and found this solution from stackoverflow :

  • Import jQuery source <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
  • Add this script to scale image with css-class ‘resize-img’ property $(document).ready(function() { // resize image if image's width/height is larger than 400px $('img.resize-img').each(function(){ //$(this).load(function(){ var maxWidth = 400; // Max width for the image var maxHeight = 400; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image } var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if current height is larger than max if(height > maxHeight){ ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image } // }); }); });
  • After that, define image tag & add property class=’resize-img’ <img alt="" src="{/path/to/image}" class="resize-img" />

You can see the example here.

Source :

http://stackoverflow.com/questions/1143517/jquery-resizing-image

http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

Read More

List of GIT Commands

I had long enough to hear about GIT, but haven’t worked with this tool yet. So I just read a book from NetTuts : Getting Good With GIT (Andrew Burgess), and this post is about list of GIT commands that I’ve found from this book :

git config --global user.name Set user information git config --global user.email Set user information git init Create an empty git repository or reinitialize an existing one git status Show the working tree status git add Told git to track the files. Use dot (.) to track all files in the directory (and all sub-directories), or giving their names as parameters, e.g. : git add index.html git commit Record changes to the repository git log Show commit logs.e. g. :git log --all (to see logs from all branches)git log --graph --all --oneline (--graph to show tree view, --oneline to reduce the amount of information about each commit that we see). git branch List, create, or delete branches. e.g. : git branch authorization (create a branch name ‘authorization’) git checkout Checkout a branch or paths to the working tree. e.g. : git checkout authorization (Switch to branch ‘authorization’) gitk To open GUI program for GIT git merge Merging branches. e.g : git merge authorization

Read More