ajaxBlender.com— jQuery Scripts. Custom jQuery Programming. jQuery Scripts Integration.

bgStretcher II

ajaxBlender.com — Tue, 26 Apr 2011 11:50:16 +0000

bgStretcher 2011 (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).
bgStretcher 2011 has tons of new features suggested by our users. We appreciate all your feedback, and you will see below that we have implemented many new features and functions requested. Please continue to help us improve it by leaving suggestions in our comments area or you may contact us directly.

Features

Unobtrusive script, simple to setup
Works with all modern browsers
Supports single and multiple images

How to Use

1. Download bgStretcher script. The package already contains the jQuery framework.

2. Add the following code to your … tag to connect jQuery framework, bgStretcher plugin and CSS. (Make sure paths to files are correct.)



"stylesheet" href="../bgstretcher.css" />

3. Use the following code to initialize the bgStretcher (see Options section below for details):

<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>

And if you want to initialize plugin for custom div use next:

<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('.classname-of-div').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>

4. Insert content of your page inside BODY or custom DIV:


"classname-of-div">
Your content goes here...

That’s it ;) Click the Demo button to see it in action.

Options

Configuration Option	Default Value	Description
imageContainer	bgstretcher	bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it’s constructed.
resizeProportionally	true	Indicates if background image(s) will be resized proportionally or not.
resizeAnimate	false	Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images	empty	An array containing list of images to be displayed on page’s background.
imageWidth	1024	Original image’s width.
imageHeight	768	Original image’s height.
maxWidth	auto	Maximum image’s width.
maxHeight	auto	Maximum image’s height.
nextSlideDelay	3000 (3 seconds)	Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed	normal	Numeric value in milliseconds or jQuery string value (’fast’, ‘normal’, ’slow’). The parameter sets the speed of transition between images.
slideShow	true	Allows or disallows slideshow functionality.
transitionEffect	fade	Transition effect (use also: none, simpleSlide, superSlide).
slideDirection	N	Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode	normal	Sequence mode (use also: back, random)
buttonPrev	empty	Previous button CSS selector
buttonNext	empty	Next button CSS selector
pagination	empty	CSS selector for pagination
anchoring	‘left top’	Anchoring bgStrtcher area regarding window
anchoringImg	‘left top’	Anchoring images regarding window
preloadImg	false	For Preload images use true
stratElementIndex	0	Start element index
callbackfunction	null	Name of callback function

Methods

Method Name	Description
$(objID).bgStretcher.play()	Resume background slideshow
$(objID).bgStretcher.pause()	Pause background slideshow
$(objID).bgStretcher.sliderDestroy()	Destroy background slideshow

Browser Detection

ajaxBlender.com — Wed, 24 Nov 2010 12:50:20 +0000

Our friends at DevSlide recently launched a Labs area where they publish ideas, software, script, apps, etc., and we thought that this one could be interesting for JS developers and webmasters. It is a JavaScript browser detection tool that detects the user’s browser. If an old browser is detected, it will display a friendly suggestion for them to upgrade their browser to the latest version or download a new browser.

Background

Coding for old browsers (such as old versions of Internet Explorer, Firefox, Opera) can be a nightmare even for experienced web developers who hand code XHTML/CSS markup. It is difficult to find a balance of features, speed, and browser compatibility. It is particularly frustrating when you run a JS / CSS3 website and know that only a small percentage of your users are preventing you from using all the features of CSS3 (which, when used correctly, is feature rich, optimizes page load speeds and is easier to maintain).

Well, we have not opened a new world here :). But, this is a big problem and it is further complicated, because most users who are running such an out-dated browser do not even know where to go to upgrade their browser. The DevSlide team created a script written from scratch in JavaScript and will not conflict with any existing JavaScript frameworks such as jQuery, and MooTools. It displays a nicely styled and friendly message. You can choose from five predefined messages (professional, informal, goofy, technical, and even a mean one, lol) or customize your own message. There is also a cookie feature, so that the user can choose to ignore the message or ask to be reminded later.

How to Install It

It’s easy to add to your site and configure. There is even a configuration form where you can customize it and load it from the DevSlide servers or download and host it on your server.

1.) Go to DevSlide Labs and configure the script.
2.) Add generated code to your … tag.
3.) Help us all to eliminate out dated browsers ;)

That’s it ;) Click the links below to visit DevSlide Labs to download and configure the script.

jFiller

ajaxBlender.com — Mon, 26 Apr 2010 08:08:30 +0000

Our team often works on developing server-side scripts which sometimes have registration forms, large survey forms, etc. During testing our engineers might have to fill out a form 200-300 times a day, and this, of course, is a boring and tedious process ;)

That’s why we developed a quick but very useful jQuery plugin which prevent the developer from having to fill out the form manually during testing. It automatically detects forms in your document and saves your filling preference. The jFiller plugin also provides proper data for the different types of fields: radio buttons, check boxes, text inputs, textareas, selects, etc. The only field type we cannot provide automatic data filling for is the file upload field, but the reason is obvious, right? :)

And at the end it won’t require any modifications, you just include it and use it. When the debug phase is complete, you can simply exclude it from your HTML document. We like this automatic form filling script, and hope others will find it useful during development too.

How to Use

1.) Download jFiller script. The package already contains jQuery framework.
2.) Add the following code to your … tag to connect jQuery framework and jFiller plugin. (Make sure paths to files are correct.)

That’s it ;) Click the Demo button to see it in action.

How to Add Hints & Auto Focus Form Fields using jQuery

ajaxBlender.com — Fri, 19 Feb 2010 15:52:16 +0000

This tutorial teaches you how to easily add hints to your forms and auto focus fields.

We are continuing a series of quick articles for web developers which explain how to automate things during website programming. Today we will talk about forms and two usability items the every current website should have:

Auto Focus Fields. The first field in the form should be focused by default, so that the user can start entering his password or name right after page loaded and would not have to click the field to start typing. This is a small and obvious usability items, but still a very important one.
Hints. Forms should have quick tips for fields which requires entering data in a specific format (for example email address, phone number, date / time, etc.)

So, let’s say our website have this contact form:

Auto Focus

Full Name – this field will be automatically focused when the page loads, here is how it will be coded in the markup:

"text" name="fullname" id="fullname" class="auto-focus" />

Notice the field has ‘auto-focus’ class. This is so that any field in the form with this CSS class will be automatically focused on page load.

The auto focus can be implemented in JavaScript:

$('.auto-focus:first').focus();

2.) Email Address (the same for phone number and message fields) – If the field does not contain any value it will show a quick tip on the required data format. When the user clicks the field, the tip will disappear and let the user enter data. Here is how it will look in the markup:

"text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />

As you see, our hint will be stored in ‘title’ attribute of the field. This will let user see it when the field already contains a value in it.

By default, the color of text in input field will be black, we need to differentiate the color of the hint and common input value. Let’s set this color in CSS:

Now we move to JavaScript implementation. At first we should display the hint in fields which have empty values:

$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
    if($(this).val() == $(this).attr('title')){
        $(this).val('');
        $(this).removeClass('auto-hint');
    }
});

And handle focus / blur events:

$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
    if($(this).val() == '' &amp;&amp; $(this).attr('title') != ''){
       $(this).val($(this).attr('title'));
       $(this).addClass('auto-hint');
    }
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
    if($(this).attr('title') == ''){ return; }
    if($(this).val() == ''){ $(this).val($(this).attr('title')); }
    else { $(this).removeClass('auto-hint'); }
});

That’s it! ;) Click the Demo button to see it in action.

jSnow

ajaxBlender.com — Thu, 17 Dec 2009 15:21:33 +0000

Adding an animation effect of falling snow with JavaScript is a quick and easy way to keep your site looking current during the holidays for your site’s users. jSnow, is a jQuery plug-in that adds falling snow effect to your website. jSnow is lightweight (2kb), doesn’t require any external files to run (css or images) and it’s very easy to use.

Convert Images to Grayscale

ajaxBlender.com — Mon, 07 Dec 2009 15:33:03 +0000

Read this tutorial to find out how to desaturate an image (convert color images to grayscale) using JavaScript. A cross-browser code sample is supplied.
Recently we published a tutorial explaining how to rotate images using JavaScript. To continue this series of tutorials on image manipulation using JavaScript, we would like to explain how to change color images to grayscale using JavaScript.

This is a relatively simple task, but there are two methods (one method for Internet Explorer and one method for all other browsers).

Canvas Method

As you probably know, screen color consists of 3 components: red, green and blue. Each component or color (for example, red) has a value from 0 to 255. The value 0 indicates there is no red color and the value 255 would be the brightest possible red color. To convert a color to grayscale you just need to calculate the average for all three components. This can be done using the simple formula below:

grayscalecolor = (red + green + blue) / 3;

All modern browsers support the CANVAS tag which is allowed access to the image’s pixels. The code below will go through each pixel in the image and replace the color values with an average value. Here is the code:


var canvas = document.createElement('canvas');

var canvasContext = canvas.getContext('2d');

var imgW = imgObj.width;

var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

for(>var y = 0; y < imgPixels.height; y++){
     for(>var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

From the above code sample, you see that we created a canvas, loaded the image into it, and then changed the color values of each pixel in the image to an average value. After that we simply replaced the SRC of our image to the image changed in the canvas.

Using the same method you can also flip images using JavaScript. (We will create a tutorial for this in the future).

MSIE (Internet Explorer) method

Microsoft Internet Explorer does not support the CANVAS tag, but Microsoft does provide image manipulation through filters. The filter to use for converting images to grayscale is the filter named DXImageTransform.Microsoft.BasicImage. Therefore, we simply apply this filter to our image, and it will work in all versions of MSIE (starting from version 6).

imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';

That’s it ;) Click the Demo to see it in action.

Rotate Images Using JavaScript

ajaxBlender.com — Mon, 30 Nov 2009 17:32:19 +0000

Rotate images using JavaScript – is this even possible? Of course ;) Read this tutorial to find out how to rotate images using JavaScript, and the code is a cross-browser solution.

Ok, let’s start from the easiest part. Let’s say we have the following markup:

"/article-sources/images/plane-1.jpg" alt="" id="image" />
>

The markup above adds the image that we will rotate and the CANVAS tag (which is used to display the rotated image). The CANVAS tag only works for current browsers such as FF, Opera, Chrome, IE8 and Safari. IE 6 and IE 7 do not support the CANVAS tag, so that we will remove it if browser is IE.

Now let’s review how we will rotate the image. Most current browsers supports the object which actually allows for ‘rotate’ and ‘drawImage’ methods in 2D context, but the IE 6 and IE7 will not recognize this tag. So Microsoft invented rotation using their filters via DXImageTransform.Microsoft.BasicImage (here is a quick link to MSDN). The good news is that the filter works and is easy to use, but the bad news is that it supports only 4 angles (0, 90, 180 and 270 degrees). The code to rotate images for IE will look like this:

//  Use DXImageTransform.Microsoft.BasicImage filter for MSIE
>switch(degree){
     case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
     case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
     case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
     case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}

And for browsers that support the CNAVAS tag, the code will look like this:


var cContext = canvas.getContext('2d');

var cw = img.width, ch = img.height, cx = 0, cy = 0;
//   Calculate new canvas size and x/y coorditates for image
>switch(degree){
     case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
     case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
     case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
}
//  Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);

We have to change the X/Y coordinates for drawImage function. Otherwise it will not be visible in the viewport (see Figure B versus Figure C on the illustration below).

That’s it ;) Click the Demo to see it in action.

Create Custom Cursors without .cur File

ajaxBlender.com — Wed, 25 Nov 2009 14:33:10 +0000

Sometimes you may want to replace your cursor with a custom image or use a custom image to move with your cursor. This quick JavaScript tutorial will show you how to implement it.
The task is pretty simple. At first we should hide the default cursor for the section where we will display our custom one. Our custom cursor will actually be a DIV with an image on the background. We will use JavaScript to change the position of this DIV when the user moves the mouse over the section.

The markup

"test-area">
     Move mouse over this area.

"mycursor">

The #test-area will be the section with our custom cursor to appear and the #mycursor will be the actual DIV with the custom cursor image. Here are a few lines of CSS code to stylize the markup:

#test-area {
     height: 200px;
     border: 3px dashed #CCCCCC;
     background: #FFFFFF;
     padding: 20px;
     cursor: url(./blank.cur), none;
}
#mycursor {
     cursor: none;
     width: 97px;
     height: 137px;
     background: url("/article-sources/images/pointer-cursor.gif") no-repeat left top;
     position: absolute;
     display: none;
     top: 0;
     left: 0;
     z-index: 10000;
}

The code (we hope) is crystal clear but let’s stop to review one aspect. In the #test-area you see the ‘cursor: …’ declaration. We will use this to hide the default browser cursor. The easiest way to do so is to load a blank cursor (you may download it here), but this unfortunately will not work in Chrome & Opera. It will display a black rectangle in Chrome and a default pointer cursor in Opera. But since this tutorial covers other important aspects related to cursor behavior (such as how to handle mouse movement, etc.), it is still a useful topic to cover for those just starting to learn JavaScript programming. So, let’s continue ;).

The finishing part is to add a few lines of JavaScript code for jQuery to make our arrow follow the cursor.

<script type="text/javascript">
     $(document).ready(function(){
          $('#test-area').mouseout(function(){
               $('#mycursor').hide();
               return >false;
          });
          $('#test-area').mouseenter(function(){
               $('#mycursor').show();
               return >false;
          });
          $('#test-area').mousemove(function(e){
               $('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
          });
});
</script>

That’s it ;) Click the Demo button to view it in action.