Category Archives: JavaScript

Using core Javascript how to Slide DIV, Fade a DIV, make Slideshow of DIVs


JavaScript that can slide a div horizontally : read the tutorial

Description : A very simple to code JavaScript Tutorial which can slide your DIV from left to the right. This is a tutorial without plain style and you can customize it easily.


Fancy JavaScript Slideshow – no framework required : This program has fading effect and one image appears one after another. This is a good tutorial on pure JavaScript without any Framework like jQuery.

JavaScript / Any language: Delete a specific array element and shift other elements after deletion

How to delete a specific array element and shift other elements after deletion in JavaScript or any other programming languages

Here I have used an array , to be precise, predefined fixed array I have used here.
Initial array is [15,10,20,22,1,3,6].

Then I have decided to delete an item based on a comparison, here I have chosen to delete item 20.
After deletion the array will be : [15,10,22,1,3,6]

Initially after assigning the array by the statement var myArray = [15,10,20,22,1,3,6];
myArray[0]=15,
myArray[1]=10,
myArray[2]=20,
myArray[3]=22,
myArray[4]=1,
myArray[5]=3,
myArray[6]=6 and
array length = 7 found by the statement myArray.length;

After deletion the the item 20 will be deleted i.e myArray[2] and (after delete) myArray[2] will hold (before delete) myArray[3] i.e 22, (after delete) myArray[3] will hold (before delete) myArray[4] value i.e 1.

So , after deletion the array elements will be as follows :
myArray[0]=15
myArray[1]=10
myArray[2]=22
myArray[3]=1
myArray[4]=3
myArray[5]=6
array length = 6

Below we have used JavaScript splice() method, but this shifting and delete can be done without this method. I am giving you a hint.

I have not used this splice() method in the following JavaScript code snippet, you can use it also instead of the code in Gray.

Make deletion and shifting without splice() method in JavaScript. The following algorithm will work in any programming language.

The algorithm :
Step1: first reach the item which you want to delete by a FOR LOOP,
Step 2: Then get the ARRAY INDEX of that element.
Step 3: Then assign next array element to that element. Assign next array element to that element to shift and continue the process.

// Make shifting a global variable.
var shifting = 0;
for(var i = 0; i <= myArray.length-1; i++) { if(myArray[i] == 20) shifting = 1; if(shifting == 1) myArray[i] = myArray[i+1]; }

Delete an array element and shift the rest of the element by the help of SPLICE() method in JavaScript.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var myArray = [15,10,20,22,1,3,6];
document.write("<br />"+myArray);
document.write("<br />Before delete Array Length : "+myArray.length);
for(var i = myArray.length-1; i >= 0; i–)
{
if(myArray[i] == 20)
{
myArray.splice(i,1);
}
}
document.write("<br />After deleting item 20 the array becomes : "+myArray);
document.write("<br />Array Length : "+myArray.length);
</script>
</head>

<body>
</body>
</html>

Sorting arrays in Javascript, Numeric sorting

If you normally sort an array, then it is sorted alphabetically or lexically.

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
var myarray = [10,1,100,23,2,33,4];
myarray.sort();
document.write(myarray);
</script>
</head>

<body>
</body>
</html>

The output will be : 1,10,100,2,23,33,4
Because the array myarray is sorted alphabetically.

But if you want to sort it numerically then pass a function in argument as mentioned below.

<html>
<head>
<script type="text/javascript">
var myarray = [10,1,100,23,2,33,4];
myarray.sort(function f(a,b) { return a-b; });
document.write(myarray);
</script>
</head>

<body>
</body>
</html>

Mastering JavaScript Arrays, Know in details

The best tutorial I have found on JavaScript Arrays till date is here :
http://www.hunlock.com/blogs/Mastering_Javascript_Arrays

  • Creating A New Array
  • Initializing An Array
  • Storing Data In An Array
  • Multi-Dimensional Arrays
  • How JavaScript Arrays are passed to a function : Javascript Arrays Are Passed By Reference
  • Javascript Arrays Are Assigned By Reference
  • Passing Arrays As Values
  • Array.length
  • Javascript Does Not Support Associative Arrays
  • Array Methods Reference

jQuery Form Validation without and with Plugins

Custom contact us page for WordPress using jQuery Contact Form without a Plugin :

http://trevordavis.net/blog/wordpress-jquery-contact-form-without-a-plugin/


10 Useful jQuery Form Validation Techniques and Tutorials
http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/


Good Image & banner rotator plugins JQuery Mootools

A jQuery Image Scroller [ Very Good looking scroller ]
View Live Demo
Main Script Page Link : http://www.htmldrive.net/items/show/111/a-jQuery-Image-Scroller


SlideItMoo v1.1 – image slider
Page Link : http://www.php-help.ro/mootools-12-javascript-examples/slideitmoo-v11-image-slider/
View Live Demo : SlideItMoo v1.1 – image slider


Simple jQuery Slider SUDO SLIDER : Good simple jQuery Slider
Main page link: http://www.htmldrive.net/items/show/434/Sudo-Slider-jQuery-Plugin
Demo


jQuery cool hover Slide Effect
View Demo: http://www.htmldrive.net/items/demo/685/jQuery-cool-hover-Slide-Effect


Slideshow Feature List : Visual lists (Looks good )

Demo : http://www.htmldrive.net/items/demo/59/Slideshow-Feature-List/


A JQuery Dual Slider
View Demo

———————————————————-

Fatpaint is a free online photo editor, Graphic design software, that lets you design online, put your design on products, and then directly purchase those products.

s3Slider jQuery plugin – jQuery Image Rotator

This is the s3Slider jQuery main plugin page : http://www.serie3.info/s3slider/

View the live example of this s3Slider jQuery plugin based on jQuery

View the usage of this plugin here : http://dreamweavertutorial.co.uk/dreamweaver/video/jquery-image-rotator.htm

HOW TO USE

It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.

JavaScript code inside <head> section of HTML page :

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

A sample code which needs to be put in <BODY> tag :

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

The CSS Code needs to be put in <style> tags in <head> section

#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Calling of the JavaScript Library is initiated by the following lines :

Then you need to initalize s3Slider and set the duration of how long will one picture be shown on the page (value is in miliseconds).

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

Image Gallery with jQuery Lightbox

A very good video tutorial on jQuery Lightbox

Here is the link to part 2:

Here is the link to part 3:

The image gallery is available for a free download, here is the link to the Dreamweaver Tutorial EXERCISE FILES:

http://bit.ly/lightbox-gallery-files

=============================================

Fatpaint.com is completely online Graphic Design Software. This online picture editor is the most advanced online photo editing software that I have come across.