Image Transition on Hover - Jquery

When you want to change the image source with transition effect on hover just come here take out the script below. Also i included caption sliding with this transition.

I have used three images on normal state like "baby1.jpg", "baby2.jpg", "baby3.jpg" and for hover state "baby1over.jpg", "baby2over.jpg", "baby3over.jpg".

Note:

#gallery .imgs img - Selector to point the image
over.jpg - addition to image name
img/baby1.jpg - Change the path to where you have images

CSS part :

<style type="text/css">
 .imgs {
 float:left;
 margin:10px;
 padding:5px;
 background:#FF7F7F;
 border:solid 1px #888;
 position:relative;
 width:220px;
 }
 .imgs span {
 display:none;
 width:210px;
 padding:5px;
 background:#ff7f7f;
 opacity:0.8;
 filter:alpha(opacity=80);
 position:absolute;
 left:5px;
 bottom:0;
 }
</style>

Jquery part:

<script type="text/javascript">

$(document).ready(
function(){

 $('#gallery .imgs img').mouseover(function (){
  $(this).fadeOut('slow');
  var src = $(this).attr('src').match(/[^\.]+/) + 'over.jpg';
  $(this).attr('src', src);
  $(this).fadeIn('slow');
  $(this).parent().find('span').slideDown('slow');
 });

 $('#gallery .imgs img').mouseout(function(){
  $(this).fadeOut('slow');
  var src = $(this).attr("src").replace("over", "");
  $(this).attr("src", src);
  $(this).fadeIn('slow');
  $(this).parent().find('span').slideUp('slow');
 });

});

</script>

HTML part:

<div id="gallery">
 <div class="imgs">
  <img src="img/baby1.jpg">
  <span>Your thoughts will decide your way of life</span>
 </div>
 <div class="imgs">
  <img src="img/baby2.jpg">
  <span>If your happiness is inner feeling, no one can change it! Its the gift</span>
 </div>
 <div class="imgs">
  <img src="img/baby3.jpg">
  <span>Dont be stupid by hesitating people who loves you</span>
 </div>
</div>

Create HTML element and import data by using javascript

After a long time i just struggled with this task and finally found a solution. As a HTML developer and a web designer i just enlarging my knowledge in Client side running scripts. So, I welcome your feedback and suggestion !

Creating a HTML element is bit easy but having data in a corresponding manner is some difficult. Yes, I have a series of data ummm ... For example i've an array with my details like Name, Age, Email ...etc., So, I need to pull that data to my HTML page in below format.

Fisrst Name : Arun

Last Name : raj

Age : 24

Email : arungetz@gmail.com

Address : Chennai

Got it right. Just have a look at below Javascript and HTML code.

function getdetails(){
 var myarray = ['Arun','raj','24','arungetz@gmail.com','Chennai'];

 var userdetails = document.getElementById('userdetails');
 var inside = userdetails.getElementsByTagName('p');
 
 for (i=0; i<inside.length; i++){
  var insideP = inside[i].getElementsByTagName('span');

  if(insideP.length == 0){
   var myspan = document.createElement('<span>')
   inside[i].appendChild(myspan);
   myspan.innerHTML = myarray[i];
  } 
  else {continue}
  break;  
 }
}

<div id="userdetails">
    <p>Fisrst Name : </p>
    <p>Last Name : </p>
    <p>Age : </p>
    <p>Email : </p>
    <p>Address : </p>
</div>
<input type="submit" onclick="getdetails()" value="Submit">

Initially we need to reach the <p> elements then going to add <span> element inside the <p> p tag. After that, the data need to be pulled here correspondingly. Finally having the correct data set.

var userdetails identifies 'userdetails' id. Then we're getting the paragraph tags by using getElementsByTagName, this has identified as inside. condition used whether the span tag there or not(insideP[i]). Initially there will be no span tag, so the span added.

myspan.innerHTML = myarray[i]; For every count of span added, the data from myarray will be pulled here(myarray[i]).break; is used to stop the action, when we click again the action will be continued.

Access child Elements - Part 2

Accessing child elements can be done in many ways. We already discussed about getElementsByTagName. Now i worked and refined another script by using childNodes. Below is the script:

<script type="text/javascript"> 
rootelement = document.getElementById("ulparent");
for (i=0; i < rootelement.childNodes.length; i++) 
{
node = rootelement.childNodes[i];
if (node.nodeName=="LI") 
{
node.onmouseover=function() {
this.className+="over"; 
}
node.onmouseout=function() { 
this.className=this.className.replace("over", ""); 
}
}  
}
</script>

In above script we're going to add over class to the list elements when we mouse over on that. Initially we'll get total child nodes by describing rootelement.childNodes[i]. The condition node.nodeName =="li" enables the mouseover and mouseout event. In both events we are adding and removing class names correspondingly.

Jquery Accordion menu

$(function(){

$('#accordian ul:first').show();

$('#accordian li a').click(

function accmenu(){

var accstatus = $(this).next();
if ((accstatus.is('ul')) && (accstatus.is(':visible')))
{
accstatus.slideUp();
}
if ((accstatus.is('ul')) && (!accstatus.is(':visible')))
{
accstatus.slideDown();

}
});

});

When we are nesting the child menu list into the parent menu list in a vertical manner, we can add this accordion style. It'll be more straight forward and clear to understand.

Simple Drop down menu in jquery

Script i mentioned below is very simple to use and understand. It's effective too.. Let's check it out.

$(document).ready(function(){

$('#mainmenu li').hover(
function(){
$('ul',this).slideDown('slow');
},
function (){
$('ul',this).slideUp('slow');
}
);

});

Simple lightbox in Jquery

I am really happy to write about this lightbox. I thought it'll be hard to create a lighbox but i tried the below script it's fantastic. You can do really enjoy!

Jquery script(Don't forget to include jquery library)
/*Smooth Pop up window*/
var popupstatus = 0;

//Loading Popup window
function loadpop(){
if (popupstatus == 0)
{
$('#base').css({'opacity':'0.6'});
$('#base').fadeIn('slow');
$('.more').fadeIn('slow');
popupstatus = 1;
}
}

//Disabling popup window

function disablepop(){
if (popupstatus == 1)
{
$('#base').fadeOut('slow');
$('.more').fadeOut('slow');
popupstatus = 0;
}
}

//Making the lightbox center to the page

function poscenter(){
var windowwidth = document.documentElement.clientWidth;
var windowheight = document.documentElement.clientHeight; 

var popwidth = $('.more').width();
var popheight = $('.more').height();

$('.more').css(
{
'top':windowheight/2-popheight/2,
'left':windowwidth/2-popwidth/2
});
}


//Loading Popup
$(document).ready(function(){
$('#html a').click(function(){
poscenter();
loadpop();
})
});

//Disable Popup
$(document).ready(function(){
$('.more a.close').click(function(){
disablepop();
});
$('#base').click(function(){
disablepop();
});
});

HTML part
<div id="base"></div>
<div id="htmlmore" class="more">
<p align="right"><a href="#close" class="close">X</a></p>
The content will goes here.
<div>

CSS part
#base {
display:none;
background:#666;
opacity:0.6;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.more {
display:none;
position:absolute;
z-index:2;
width:400px;
height:300px;
background:#fff;
padding:10px;
border:solid 2px #666;
}

Tab in Jquery

Nowadays Jquery simplified the UI developer workload. Here i given tab controlled content by using jquery library. This method will help you to use multi tabs with respective contents.

<div id="uitab">
<ul>
<li><a class="sltd" href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#jscript">Javascript</a></li>
</ul>
<div id="html">
HTML is the language can be understood by all web browsers. Used to visually present the data.
<a href="#">Click here</a>
</div>
<div id="css">
CSS is used with html and xml to showcase the data in web browser.
<a href="#">Read more</a>
</div>
<div id="jscript">
Javascript is the client side running script. It can be used with all programming languages.
<a href="#">Readmore</a>
</div>
</div>

$(function (){
 var content = $('#uitab > div');
 $('#uitab li a').click(function(){
 content.slideUp('6000').filter(this.hash).slideDown('3000');
//Here slideUp and slideDown can be replaced with your animations ...
 $('#uitab li a').removeClass('sltd');
 $(this).addClass('sltd');
 return false;
 });
});

In the above code you can change the slideUp to hide slideDown to show. filter(this.hash) filters the anchor tag's href value which is clicked.By having that value we enabling the slideDown to the content which is having the same id i.e., filtered from anchor tag href. For E.g. HTML anchor tag href value is "#html" (<a href="#html">). The html tab content div id is "#html" (<div id="html">). Maintaining the same vaue to id is important. Sorry for not including the css...

Create & Modify styles of child elements

Sometimes we need to access the child elements in such cases. Getting the child nodes is not so tough with the below code. Initially we need to have one parent ID to access the child elements inside that.

var cont = document.getElementById('parentcontainer');
var lists = cont.getElementsByTagName("li");

for ( var i = 0; i < lists.length; i++ )
{
 lists[i].style.backgroundPosition = 'right 8px';
}

From above example, "cont.ElementsByTagName" is assigned for getting the list tags inside the "parentcontainer". So we had the bundle of list tags. From this bundle we're accessing every single list by the way of "lists[i]". The value of "i" received from the for loop condition.

Simple HTML Form Validation

This form made with simple and easily understanding. So this will help you to create a better form validation using javascript. I've written below code with my knowledge level. If anyone having good idea or suggestion please let me know ...

HTML Code

<form name="sample" method="post" action="#" onsubmit="return validatethis()">
 <p><input type="text" value="Enter your name" name="name" onfocus="clearthis(this)" onblur="rollback(this)"></p>
 <p><input type="text" value="Enter your Ph no." name="phone" onfocus="clearthis(this)" onblur="rollback(this)"></p>
 <p><input type="text" value="Enter your Email" name="email" onfocus="clearthis(this)" onblur="rollback(this)"></p>
 <p><input type="radio" id="male" value="Male" name="gender">Male</p>
 <p><input type="radio" id="female" value="Female" name="gender">Female</p>
 <p><input type="checkbox" value="read" name="option">Read</p>
 <p><input type="checkbox" value="write" name="option">Write</p>
 <p><select name="age">
  <option value="" selected>Select your age</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
 </select></p>
 <p><input type="submit" value="Submit">
 <input type="reset" value="Reset">
 </p>
</form>

Javascript Code

function clearthis(val)
{
if (val.defaultValue==val.value) val.value = "";
}
function rollback(val)
{
var valcon = val.defaultValue;
if (val.value == 0) {
val.value = valcon;
val.style.backgroundColor ="#ff0";
}
}
function validatethis()
{
var stripped = document.sample.phone.value.replace(/[\(\)\.\-\ ]/g, ''); 
var em = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

var a = document.sample.name.value;
var b = document.sample.phone.value;
var c = document.sample.email.value;
var h = document.sample.age;

if (a == "Enter your name" || a == 0){
alert("Enter your Name");
a.focus();
return false;
}

if (b == "Enter your Ph no." || b == 0){
alert("Enter your ph no.");
b.focus();
return false;
}
else if (isNaN(parseInt(stripped))) {
        alert("The phone number contains illegal characters.\n");
}
if (c == "Enter your Email" || c == 0){
alert("Enter your Email");
c.focus();
return false;
}
else if (em.test(c)==false) {
        alert("The Email contains illegal characters.\n");
  return false;
}

if (!document.sample.gender[0].checked && !document.sample.gender[1].checked)
{
alert("Select Gender");
return false;
}

if (!document.sample.option[0].checked && !document.sample.option[1].checked)
{
alert("Select any Option");
return false;
}
if (h.selectedIndex > 0)
{
}
else {
alert("Select your age");
return false;
}
}

Very thanks !!! Catch you later soon

Browser Detection Javascript

Hello ... You may tired of searching javascript for browser detection. For your best use i've given below very neat javascript.

<script type="text/javascript">
var browsername = navigator.appName;
var browserversion = navigator.appVersion;
var browserdetail = browsername+browserversion;
if (browserdetail.indexOf(' ')!=-1)
{
alert(its working!);
}
</script>

Inside indexOf(''), you can mention the browser name with version (e.g. MSIE 6.0).

thank you ... bye

CSS style attributes in Javascript

We often confused when using style attributes in java script.
I below listed the attribute names in java script equivalent to css.

line-height ---- lineHeight
text-align ---- textAlign
text-decoration ---- textDecoration
text-indent ---- textIndent
text-transform ---- textTransform

vertical-align ---- verticalAlign

font-family ---- fontFamily
font-style ---- fontStyle
font-variant ---- fontVariant
font-weight ---- fontWeight

list-style ---- listStyle

color ---- color
background-color ---- backgroundColor

margin-top ---- marginTop
margin-right ---- marginRight
margin-bottom ---- marginBottom
margin-left ---- marginLeft

Using indexof in Javascript

Hi all,
You know well about -

indexof() returns the position of first occurrence of a specified value.

window.self.location returns the path of the window.

<script type="text/javascript">
var url = ''+ window.self.location;
if (url.indexOf('yoursite.com')!=-1)
{
document.getElementById('wrapper').style.backgroundColor ='green';
//You can modify here
}
</script>

Change the class name or content using innerhtml javascript

Using the innerhtml, we can define the content. Here i am showing how we can replace the content.
Use the changeit() into onload or you can use for any event.

<script type="text/javascript">
function changeit(){
var oldHTML = document.getElementById('column1').innerHTML;
var newHTML = "<div class='classname'>this is the new content</div>";
document.getElementById('column1').innerHTML = newHTML;
}

I feel this is the cool way...
If not let me know ... thanks.

It's a quite simple toggling script

I feel this would be a better way to hide and show the content. Go through the following script.

Here,
sm is the id which one you want hide and show.

call the function "togglesm()".

function togglesm() {
  var state = document.getElementById('sm').style.display;
   if (state == 'block') {
    document.getElementById('sm').style.display = 'none';
   } else {
    document.getElementById('sm').style.display = 'block';
    
   }
  }

You can suggest or feedback ... thanks

Very simple Tab javascript

I've used three tabs for example. You can add any number of tabs by changing "i" value.

<script type="text/javascript">
function changeit(a) {
for(i=1; i<=3; i++) {
if(i==a) {
document.getElementById("block"+i).style.display="block";
document.getElementById("t"+i).className="tab";
} else {
document.getElementById("block"+i).style.display="none";
document.getElementById("t"+i).className="";
}
}
}
</script>

Into the body tag

<a href="#" id="t1" onClick="changeit(1)" class="tab">tab1</a>
<a href="#" id="t2" onClick="changeit(2)">tab2</a>
<a href="#" id="t3" onClick="changeit(3)">tab3</a>
<div id="block1">test blcok1</div>
<div id="block2" style="display:none;">test block2</div>
<div id="block3" style="display:none;">test block3</div>

Any doubts reply me ! thanks

Fading out javascript after page loading

Below is the script i used. If you want to fadeout any image after page was loaded, you can use this code. It is working ...

HTML part

<body onLoad="settime()">
<img id="click" src="refine.gif" />

Add below script into your <head> tag.

<script type="text/javascript">
function settime()
{
setTimeout("slowly.fade('click')",3000);
}
var opacity = 96;
var slowly = {
 fade : function (id) {
  this.fadeLoop(id, opacity);
 },
 fadeLoop : function (id, opacity) {
  var o = document.getElementById(id);
  if (opacity >= 30) {
   slowly.setOpacity(o, opacity);
   opacity -= 4;
   window.setTimeout("slowly.fadeLoop('" + id + "', " + opacity + ")", 150);
  } else {
   o.style.display = "none";
  }
 },
 setOpacity : function (o, opacity) {
  o.style.filter = "alpha(style=0,opacity:" + opacity + ")"; // IE
  o.style.KHTMLOpacity = opacity / 100;    // Konqueror
  o.style.MozOpacity = opacity / 100;     // Mozilla (old)
  o.style.opacity = opacity / 100;     // Mozilla (new)
 }
}
</script>

Guys if you find any better way to do this best revert me ... thanks