Asp-DotNet-Rama: javascript

Showing posts with label javascript. Show all posts

Friday, 24 October 2014

Shake image using javascript

Move over JavaScript onMouseover scripts, your DHTML cousin is in town. The very first of its kind anywhere on the web (as least at time of writing), this script "shakes" an image when the mouse comes in contact with it. Use it to add instant eye-popping effect to your image links.

Step 1: Insert the below into the <head> section of your page:

<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>

Step 2: Add the below inside the <img> tag of all of the images you want the effect applied to:

class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"

An example would be:

<img src="man.gif" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()">

Thursday, 23 October 2014

Image slider with pager using javascript

HTML CODE:-

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="Image-Slider-Pager.js"></script>
<link rel="stylesheet" type="text/css" href="Image-Slider-Pager.css">
</head>

<body>
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
<ul id="pager">
</ul>
</div>

</body>
</html>

CSS CODE:-

.container{
width:800px;
height:400px;
padding:20px;
border:1px solid gray;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
text-align: center;
}
.slider_wrapper{
overflow: hidden;
position:relative;
height:280px;
top:auto;
}
#image_slider{

position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding:0px;
margin:0px;
}
#image_slider li{
position: relative;
float: left;
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
left: 0px;
}
#next{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
right: 0px;
}
#pager{
/* firefox has different center method. this doesn't work for fire fox */
/* not in the center*/
padding:0px;
position:relative;
height:50px;
margin:auto;
margin-top:10px;
}
#pager li{
padding: 0px;
margin:5px;
width:20px;
height:20px;
border:1px solid white;
color:white;
list-style: none;
opacity: 0.6;
float:left;
border-radius: 3px;
cursor: pointer;
}
#pager li:hover{
opacity:0.9;
}

JAVASCRIPT

//1. set ul width

//2. image when click prev/next button

var ul;

var liItems;

var imageNumber;

var imageWidth;

var prev, next;

var currentPostion = 0;

var currentImage = 0;

function init(){

ul = document.getElementById('image_slider');

liItems = ul.children;

imageNumber = liItems.length;

imageWidth = liItems[0].children[0].clientWidth;

ul.style.width = parseInt(imageWidth * imageNumber) + 'px';

prev = document.getElementById("prev");

next = document.getElementById("next");

generatePager(imageNumber);

//.onclike = slide(-1) will be fired when onload;

prev.onclick = function(){slide(-1);};

next.onclick = function(){slide(1);};*/

prev.onclick = function(){ onClickPrev();};

next.onclick = function(){ onClickNext();};

}

function animate(opts){

var start = new Date;

var id = setInterval(function(){

var timePassed = new Date - start;

var progress = timePassed / opts.duration;

if (progress > 1){

progress = 1;

}

var delta = opts.delta(progress);

opts.step(delta);

if (progress == 1){

clearInterval(id);

opts.callback();

}

}, opts.delay || 17);

//return id;

}

function slideTo(imageToGo){

var direction;

var numOfImageToGo = Math.abs(imageToGo - currentImage);

// slide toward left

direction = currentImage > imageToGo ? 1 : -1;

currentPostion = -1 * currentImage * imageWidth;

var opts = {

duration:1000,

delta:function(p){return p;},

step:function(delta){

ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';

callback:function(){currentImage = imageToGo;}

};

animate(opts);

}

function onClickPrev(){

if (currentImage == 0){

slideTo(imageNumber - 1);

}

else{

slideTo(currentImage - 1);

}

function onClickNext(){

if (currentImage == imageNumber - 1){

slideTo(0);

}

else{

slideTo(currentImage + 1);

}

function generatePager(imageNumber){

var pageNumber;

var pagerDiv = document.getElementById('pager');

for (i = 0; i < imageNumber; i++){

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

pageNumber = document.createTextNode(parseInt(i + 1));

li.appendChild(pageNumber);

pagerDiv.appendChild(li);

// add event inside a loop, closure issue.

li.onclick = function(i){

return function(){

slideTo(i);

}

}(i);

}

var computedStyle = document.defaultView.getComputedStyle(li, null);

//border width 1px; offsetWidth = 22

var liWidth = parseInt(li.offsetWidth);

var liMargin = parseInt(computedStyle.margin.replace('px',""));

pagerDiv.style.width = parseInt((liWidth + liMargin * 2) * imageNumber) + 'px';

}

window.onload = init;

Image slider with prev/next button

HTML CODE:-

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="Image-Slider-LnR.js"></script>
<link rel="stylesheet" type="text/css" href="Image-Slider-LnR.css">
</head>

<body>
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
</div>
</body>
</html>

CSS CODE:-

.container{
width:800px;
height:400px;
padding:20px;
border:1px solid gray;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
}
.slider_wrapper{
overflow: hidden;
position:relative;
height:280px;
top:auto;
}
#image_slider{

position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding:0px;
margin:0px;
}
#image_slider li{
position: relative;
float: left;
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
left: 0px;
}
#next{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
right: 0px;
}

JAVASCRIPT:-

//1. set ul width
//2. image when click prev/next button
var ul;
var li_items;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;

function init(){
ul = document.getElementById('image_slider');
li_items = ul.children;
imageNumber = li_items.length;
imageWidth = li_items[0].children[0].clientWidth;
ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
prev = document.getElementById("prev");
next = document.getElementById("next");
//.onclike = slide(-1) will be fired when onload;
/*
prev.onclick = function(){slide(-1);};
next.onclick = function(){slide(1);};*/
prev.onclick = function(){ onClickPrev();};
next.onclick = function(){ onClickNext();};
}

function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration;
if (progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.delay || 17);
//return id;
}

function slideTo(imageToGo){
var direction;
var numOfImageToGo = Math.abs(imageToGo - currentImage);
// slide toward left

direction = currentImage > imageToGo ? 1 : -1;
currentPostion = -1 * currentImage * imageWidth;
var opts = {
duration:1000,
delta:function(p){return p;},
step:function(delta){
ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';
},
callback:function(){currentImage = imageToGo;}
};
animate(opts);
}

function onClickPrev(){
if (currentImage == 0){
slideTo(imageNumber - 1);
}
else{
slideTo(currentImage - 1);
}
}

function onClickNext(){
if (currentImage == imageNumber - 1){
slideTo(0);
}
else{
slideTo(currentImage + 1);
}
}

window.onload = init;

Basic Image slider with JAVASCRIPT

html code:-

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h3>Basic Image Slider with pure JavaScript, no jquery</h3>
<p>Note: the pictures using here are from the internet:</p>
<div class="container">
<div class="image-slider-wrapper">
<ul id="image_slider">
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
</ul>
<div class="pager">
</div>
</div>
</div>
</body>
</html>

css

.container{
width:800px;
height:400px;
padding:20px;
border:1px solid gray;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
}
.image-slider-wrapper{
overflow: hidden;
}
#image_slider{
position: relative;
overflow: hidden;
height: 280px;
padding:0;
left:0;
}
#image_slider li{
position:relative;
max-width: 100%;
float:left;
list-style: none;
left: 0;

}

Javascript:-

var ul;
var li_items;
var li_number;
var image_number = 0;
var slider_width = 0;
var image_width;
var current = 0;
function init(){
ul = document.getElementById('image_slider');
li_items = ul.children;
li_number = li_items.length;
for (i = 0; i < li_number; i++){
// nodeType == 1 means the node is an element.
// in this way it's a cross-browser way.
//if (li_items[i].nodeType == 1){
//clietWidth and width???
image_width = li_items[i].childNodes[0].clientWidth;
slider_width += image_width;
image_number++;
}

ul.style.width = parseInt(slider_width) + 'px';
slider(ul);
}

function slider(){
animate({
delay:17,
duration: 3000,
delta:function(p){return Math.max(0, -1 + 2 * p)},
step:function(delta){
ul.style.left = '-' + parseInt(current * image_width + delta * image_width) + 'px';
},
callback:function(){
current++;
if(current < li_number-1){
slider();
}
else{
var left = (li_number - 1) * image_width;
setTimeout(function(){goBack(left)},2000);
setTimeout(slider, 4000);
}
}
});
}
function goBack(left_limits){
current = 0;
setInterval(function(){
if(left_limits >= 0){
ul.style.left = '-' + parseInt(left_limits) + 'px';
left_limits -= image_width / 10;
}
}, 17);
}
function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration
if(progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.dalay || 17);
}
window.onload = init;