Tips for Better Website Performance

I am here not talking about Server-side improvements. I am here talking about Front-End improvements that really affects the web page speed.

The time spent till the website is running on the client’s browser. If we analyze that time, we will get:

Request Time (in milliseconds)
Server Process Time, or response time (usually in milliseconds)
Downloading web page and files into browser (few to several seconds, depending on internet speed)
Rendering on browser.

Drag and Drop with jQuery for Touch Devices

In the last post: Drag and drop with HTML5, i explained how to drag and drop using HTML5 and Javascript (jQuery). I mentioned that touch devices such as iPhone, iPad, BlackBerry, Samsung…. etc, does not support HTML5 Drag and Drop features.

Now, in this post, i want to explain how to make Drag and Drop possible for all devices. Before we start, you must know that it’s all about Javascript.. And i will use jQuery library while i am familiar with it and it simplifies writing javascript.

How to convert HTML Forms into AJAX simply

Your ads will be inserted here byEasy Plugin for AdSense.Please go to the plugin admin page toPaste your ad code OR Suppress this ad slot. Hello reader, You may have a normal HTML Form, like: contact form, feedback form or any other forms in your website or any website you work on. Did you think… Continue reading How to convert HTML Forms into AJAX simply

15 Free Ebooks for Front-End Development and Design

Your ads will be inserted here byEasy Plugin for AdSense.Please go to the plugin admin page toPaste your ad code OR Suppress this ad slot. Hi reader,I have collected 15 free ebooks for front-end development to put it between your hands. Not all are PDF files, some are websites and online samples.

10 Top jQuery Plugin for Images – 2011

Your ads will be inserted here byEasy Plugin for AdSense.Please go to the plugin admin page toPaste your ad code OR Suppress this ad slot. 1) Nivo Slider: A stunning jQuery image gallery with 16 unique transition effects. Comes with many featrues and compatible with most browser versions (IE 7+, Firefox v3+, Google Chrome v4+,… Continue reading 10 Top jQuery Plugin for Images – 2011

jQuery Gloss Plugin

It’s lovely to make you webpage interactive. jQuery plugins add effects to multiple elements of HTML. jQuery Gloss adds a Gloss (shining) effect to images by simple and lightweight code. This effect is added on hover effect (mouseover, mouseout). This plugin is ~2.2 Kb and it’s simple as: Add a DIV element to hold the… Continue reading jQuery Gloss Plugin

Apply a custom font to your website, Works on all Browsers

For web developers and web designers who want to add their FONT to websites without using Standard Web Fonts and without making text as images. Google has create a Google Font API for public use to give web developers and web designers the ability to use extra fonts on the web, not only the standard… Continue reading Apply a custom font to your website, Works on all Browsers

jQuery: Catch Keyboard Events

Lot of jQuery projects relies on keyboard/mouse event like pressing “p” for previous and “n” for next also using the arrows. Because this is important, I have managed a code to get the keyboard character on 3 events: – Keypress – Keyup – Keydown I have created a function to return the key as below:… Continue reading jQuery: Catch Keyboard Events

Scroll window smoothly using jQuery

Using jQuery animate() function to do a smooth scrolling: I have also created a div as follow: <div id=”scrollToHere”> Scroll to here </div> You need something to run your script. Create a button like this: <input type=”button” onclick=”scollWin();” value=”Scroll up” /> The jQuery Code will be like this: function scrollWin(){ $(‘html,body’).animate({ scrollTop: $(“#scrollToHere”).offset().top }, 800);… Continue reading Scroll window smoothly using jQuery

Web page transparency for all browsers

Every browser has different CSS properties for less-used actions like: transparency or opacity. It was something weird to do transparency on your web page because there are lot of different web browsers. To make that easy, I have collected information and generated a CSS class that will work on most of the browsers. See the… Continue reading Web page transparency for all browsers