rajesh gollapudi’s blog
Get Updates
Subscribe via RSS »
Image effects using Javascript
The people at Pixastic have created a fantastic js library for image effects using javascript. Here is the code that you can use to get a horizontal and vertical reflection effect.
Wondering how this could be useful?
Say you want to apply rounded corners to a div or a html element using images. Instead of requiring 4 images for all the corners of an element, you can achieve the same rounded effect using just one image. Refer to the Pixastic documentation for more effects.
Centering an element on a page
Here is how you can position an element at the center of a web page (both horizontally and vertically).
The content of the div with the id 'centered', will be positioned at the center of the web page. The 'absolute' positioning ensures that it is positioned at the center w.r.t the webpage or document.Instead if you want to position an element relative to an enclosing div, changing docheight and docwidth variables accordingly ensures that your element is centered.
This is often useful in situations where you want to display error messages like 404-page not found and for showing 'page redirect' messages.
How to make a footer stick to the bottom of a webpage
Often you face a situation where you don't have enough content on the webpage to make use of the space available in the browser window. A good example, for this is the "404 - File not found" page on your site.
I use the following technique to get rid of the situation where the footer doesn't stick to the bottom of the page. The idea is simple - Measure the height of the content and compare it with your window height. If the content height is less than the window height, then fill the difference with an empty space or to say exactly, add a div with the height set to the difference. The code below uses jquery javascript library and should work pretty much in every browser. Enjoy !!Update:
I have updated the code above, to make sure that the footer sticks to the bottom on window resize events. Now when you are using FireBug, to should notice the footer moving up and down and window resize events. This is especially useful if you have a large monitor.
Includes in Javascript
Ever wondered how to include other javascript files in javascript, here is how you can do it.
You can ask me when this could be useful. You can use it when you want to conditionally include javascript and css files. Lets say on the admin part of the site you want to use a different stylesheet, then you can parse the url and include the stylesheet, given certain parameters or if the url matches a regular expression.
0 Comments