Categories
AJAX Browsers CSS Design DHTML Free Stuff HTML Java Script Jquery SEO Web & Programming Web Browsers XHTML

15 Free Ebooks for Front-End Development and Design

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste 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.

Categories
CSS Design DHTML Free Stuff Java Script Jquery Web & Programming XHTML

10 Top jQuery Plugin for Images – 2011

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste 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+, Safari v4+ and Opera v10+). I like this plugin and i recommend it.
Nivo Slider

2) Gloss: Gloss is not an image gallery, it’s a lightweight jQuery plugin to create a gloss effect on images for (Mouse over, Mouse out) action.  (It’s also supported for IE 6+ browsers).
jQuery Gloss

Categories
AJAX CSS DHTML Java Script Jquery Web & Programming

jQuery File Upload – With Drag n’ Drop

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads.

The plugin is based on open standards like HTML5-JavaScript and No Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.

jQuery Drag Drop File Upload

Multiple files can be selected, they can even be drag ‘n’ dropped from the desktop and the upload process can start automatically or with an event (like clicking the “upload” button).

A progress bar can display the status and uploads can be canceled anytime.

It is possible to use multiple instances of the plugin in the same page and jQuery File Upload is compatible with any server-side application platform.

Categories
AJAX CSS Design Free Stuff HTML Java Script Jquery Misc News PHP Web & Programming

15 Free IDEs for Developers

Komodo Edit (Windows, Mac, Linux)

Komodo Edit

Komodo Edit is an open source application that has support for PHP, Python, Ruby, JavaScript, Perl, Tcl, XML, HTML 5 and CSS 3.

It has syntax coloring, folding, background syntax checking,  auto-complete and calltips. It also includes libraries for autocompletion for jQuery, Ext JS, Ruby on rails and more.

I just recommend Komoodo Edit.

Categories
Browsers CSS Design DHTML Java Script Jquery Web & Programming Web Browsers XHTML

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 image with class=”gloss”. eg:
    <div class=”gloss”><img src=”” alt=”Image gloss effect” /></div>
  • Include the script file of jQuery Gloss plugin. eg:
    <script type=”text/javascript” src=”gloss.1.0.js”></script>
  • Call the Gloss function. eg:
    <script type=”text/javascript”>$(document).ready(function (){ $.gloss(); });</script>
    OR
    add this before </body>: <script type=”text/javascript”> $.gloss();  </script>

Resources:

Categories
CSS Design DHTML Free Stuff Java Script Jquery Web & Programming Web Browsers

jQuery Animate – Advanced

In the last jQuery Animate article I wrote, I mentioned how to use the .animate() function with few tricks.

But here, I am going to write about jQuery Animate function in general and I will explain few things and some tricks.

The jQuery Animate is a smart object because could be used at any syntax.
I mean,
We can use the default syntax of this function as follow:

$().animate({
/* params */ },
/* integet time period in milliseconds */
);

Categories
Browsers DHTML Java Script Jquery Misc Web & Programming Web Browsers XHTML

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:

 
function getKey(key){ 
  if ( key == null ) { 
    keycode = event.keyCode; // To Mozilla 
  } else { 
    keycode = key.keyCode; 
  } 
  // Return the key in lower case form 
  return String.fromCharCode(keycode).toLowerCase(); 
} 

Now let’s use the events:

 /*Keypress*/ 
$(document).keypress(function (eh){ 
  alert("Keypress: The key is: "+getKey(eh)); 
});
/*Keyup*/
$(document).keyup(function (eh){
  alert("Keyup: The key is: "+getKey(eh));
});

/*keydown*/
$(document).keydown(function (eh){
  alert("Keydown: The key is: "+getKey(eh));
});

To see an exaple of this code, please check the demo below:
jKey demo

Have fun.

Categories
Browsers CSS Design DHTML Free Stuff Java Script Jquery Web & Programming

jQuery Animate

Here I will mention how to use the jquery animate function and the usability and flexibility of it.
The syntax of this function is:

$.animate(options, settings, callback);
/* you can replace setting with duration (in milliseconds) or words: 'slow', 'normal' or 'fast'.
callback is optional */

Below is a list of popular and most used animation:

  • increasing/decreasing width and height
  • moving or scrolling html element
  • changing opacity
  • scrolling window

Now let me explain each in an example.

Categories
Browsers CSS Design DHTML Free Stuff HTML Java Script Jquery Misc Web & Programming Web Browsers XHTML

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);
}

Here is something to try:

now jQuery window scrolling is done with animation.

Enjoy it..

Categories
Browsers CSS Design DHTML Misc Web & Programming XHTML

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 Code below:


.transparent {
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}

filter:alpha(opacity=75); is used for Internet Explorer.
-moz-opacity:0.75; is used for Mozilla, Firefox, Netscape browsers (old versions).
-khtml-opacity: 0.75; is used for old versions of Safari.
opacity: 0.75; is used as a standard CSS property for browsers like Firefox 2+ and Safari 3+ and Opera