How to put images in HTML text and password fields?

How to put images in HTML text and password fields?

You can easily place images inside text fields in HTML. To explain this, I am making a registration form in which I have text and password fields like name, email, password and confirm password. I want to put user image inside name text field, email image inside email field and so on. I have kept images(32*32 png icons) of user, email and password in images folder.

HTML file

<form action="register.php" name="register" id="register" method="post">

     

  <input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">

  <input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="3" class="txtinput">

  <input type="password" name="password" id="password" placeholder="Your password" autocomplete="off" tabindex="5" class="txtinput">

 <input type="password" name="confirmpassword" id="confirmpassword" placeholder="Confirm password" autocomplete="off" tabindex="6" class="txtinput">

   <input type="submit">     

</form>

CSS file

#register input#name 

{

  background: #fff url('../images/user.png') 5px 4px no-repeat;

}

#register input#email 

{

  background: #fff url('../images/email.png') 5px 4px no-repeat;

}

#register input#password 

{

  background: #fff url('../images/password.png') 5px 4px no-repeat;

}

#register input#confirmpassword 

{

  background: #fff url('../images/password.png') 5px 4px no-repeat;

}

How to make stylish Submit and Reset HTML buttons with CSS3?

How to make stylish Submit and Reset HTML buttons with CSS3?

Recently, I had to create a registration form which had submit and reset buttons. I wrote some CSS3 code to look submit and reset html buttons stylish. I thought of sharing this code with all you guys so that it might help someone. If you have any better CSS tips to make these submit and reset buttons more stylish, do share it.

My HTML file:

<div id="buttons">

    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">

    <input type="submit" name="submit" id="submitbtn" class="submitbtn" value="Register">

</div>

My CSS file:

#buttons 

{ 

  display: block; padding-top: 10px; 

}

#buttons #resetbtn 

{

  display: block;

  float: left;

  color: #515151;

  text-shadow: -1px 1px 0px #fff;

  margin-right: 20px;

  height: 3em;

  padding: 0 1em;

  outline: 0;

  font-weight: bold;

  font-size: 1.3em;

  white-space: nowrap;

  word-wrap: normal;

  vertical-align: middle;

  cursor: pointer;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  background-color: #fff;

 background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);

 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));

  background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);

  background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);

  background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%); 

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );

  border: 1px solid #969696;

  box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  -moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  -webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

}

#buttons #resetbtn:hover 

{

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

  color: #818181;

  background-color: #fff;

  background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));

  background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

  border-color: #aeaeae;

  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

}

#buttons #submitbtn 

{

  display: block;

  float: left;

  height: 3em;

  padding: 0 1em;

  border: 1px solid;

  outline: 0;

  font-weight: bold;

  font-size: 1.3em;

  color:  #fff;

  text-shadow: 0px 1px 0px #222;

  white-space: nowrap;

  word-wrap: normal;

  vertical-align: middle;

  cursor: pointer;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  border-color: #5e890a #5e890a #000;

  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  box-shadow: inset 0 1px 0 rgba(256,256,256, .35);

  background-color: rgb(226,238,175);

  background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); 

  background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

  background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );

}

#buttons #submitbtn:hover, #buttons #submitbtn:active 

{

  border-color: #7c9826 #7c9826 #000;

  color: #fff;

  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);

  background: rgb(228,237,189);

  background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%); 

  background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54))); 

  background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 

  background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );

}

How to pause javascript setInterval method for sometime and restart again?

How to pause javascript setInterval method for sometime and restart again?

I was using javascript setInterval method to display different divs after a regular interval of time. In between, I fell into the requirement of pausing the javascript setInterval method for sometime, do some stuff and restart it again. So, I repeatedly used setInterval and clearInterval to acheive my functionality. 

I have 3 divs: div0 (green), div1 (yellow), div2 (red). All are overlapping each other. I am using setInterval to hide and show div1 and div2 after every second. if index = 4 or 6, I am showing red div else yellow div. 

My requirement is that, When index becomes 8, I want to pause the setInterval for 5 seconds and till then show div0 (green) and afterwards resume the loop of setInterval until clearInterval is called.

Below is the code snippet for pausing and restarting setInterval method which is self explanatory.

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Sample Application</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

    var index=0;    

    var auto_refresh = 0;

    $(document).ready(function(){

    hideDiv();

    auto_refresh = setInterval(function(){myTimer()}, 1000);

    });

    function myTimer() 

    {

            index+=1;

            if(index == 4 || index==6)

            {

              showDiv2();

            }   

            else if (index == 8) 

            {

              clearInterval(auto_refresh);

              showDiv0();

              auto_refresh = setInterval(function(){myTimer()}, 5000);  //Now run after 5 seconds

            }

            else if (index > 12) 

            {

              clearInterval(auto_refresh);

            }       

            else

            {

              showDiv1();

            }

        }

    function hideDiv()

    {

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

    }

    function showDiv0()

    {

      document.getElementById("div0").style.visibility="visible";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

    }

    function showDiv1()

    {

      document.getElementById("div1").style.visibility="visible";

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div2").style.visibility="hidden";

      document.getElementById("div1").innerHTML=index;

    }

    function showDiv2()

    {

      document.getElementById("div2").style.visibility="visible";

      document.getElementById("div0").style.visibility="hidden";

      document.getElementById("div1").style.visibility="hidden";

      document.getElementById("div2").innerHTML=index;

    }

    </script>

  </head>

  <body>

    <div id="container" style="position:relative;">

<div id="div0"     style="background:green;height:200px;width:200px;margin:0;position:absolute">

Relaxing for 5 seconds

</div>

         

<div id="div1" style="background:yellow;height:200px;width:200px;margin:0;position:absolute">

This is div1

</div>

<div id="div2" 

style="background:red;height:200px;width:200px;margin:0;position:absolute">

This is div2</div>

</div>

</body>

</html>

Note: I had discussed this problem on stackoverflow and written the conclusion of the discussion here in this post.

How to show / hide images randomly at regular intervals in javascript by shuffling the array?

How to show / hide images randomly at regular intervals in javascript by shuffling the array?

I had one requirement in one of my projects that I had an image which I had to show randomly in 4 places (div) in my webpage at regular intervals using javascript. I had asked this problem in stackoverflow. I got good help from a guy named "Hiral" there. With his/her help, I was able to implement this functionality. For implementing my functionality, I am shuffling an array and using javascript setInterval() and clearInterval() methods. Let me explain you my requirement and solution. Maybe you encounter similar requirement in future, then it might be helpful to you!

I have following 4 divs (bulb1, bulb2, bulb3, bulb4) and the image bulb.png in images folder of my project.

<div id="bulb1" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb2" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb3" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb4" class="lightbulb"><img src=".\images\bulb.png" /></div>

Initially, I will hide all these divs by calling my following function:

function hideBulbImages()

{

        document.getElementById('bulb1').style.visibility = "hidden";

        document.getElementById('bulb2').style.visibility = "hidden";

        document.getElementById('bulb3').style.visibility = "hidden";

        document.getElementById('bulb4').style.visibility = "hidden";

}

Now lets say I have an html button on the click of which I am calling below function showBulbImages. As I said I have 4 divs (places in html page) where I have to light the bulb randomly, so I am shuffling the array "myArray" in the below function so that array gets randomized by calling the function "shuffleArray". When array gets shuffled or randomized, I use javascript setInterval() method to turn on the visibility of bulbs randomly at regular intervals, 1 second in my case. When setInterval() method runs 4 times, I call clearInterval() to stop the show.

function showBulbImages()

    { 

        var blink_count = 0;

        var myArray = ['1', '2', '3', '4'];

        var randomArray = shuffleArray(myArray)

        var blink_the_bulbs = setInterval(function() {      

            var blinking_bulb = "bulb" + randomArray[blink_count];

            document.getElementById(blinking_bulb).style.visibility = "visible";

            blink_count+=1;

            if (blink_count > 3) 

            {

                 clearInterval(blink_the_bulbs);

            }

        }, 1000);

    }

    function shuffleArray(array) 

    {

        for (var i = array.length - 1; i > 0; i--) 

        {

            var j = Math.floor(Math.random() * (i + 1));

            var temp = array[i];

            array[i] = array[j];

            array[j] = temp;

        }

        return array;

    }

How to implement javascript count down timer using setInterval and clearInterval methods?

How to implement javascript count down timer using setInterval and clearInterval methods?

I had to implement  a count down timer in my project which runs for 40 seconds. I implemented count down timer in javascript using setInterval() and clearInterval() methods. I am sharing my javascript timer code in this post. It is very simple and can be understood in one go. Below is my javascript code snippet for count down timer.

        function playTimer()

        {

var count= 40;

document.getElementById("timer").innerHTML=count + " secs left";

var count_down=setInterval(timer, 1000); 

}

function timer()

{

count=count-1;

//if time is finished

if (count <= 0)

{

document.getElementById("timer").innerHTML="Time Over";

clearInterval(count_down);

                        //call you function which has to be called after timer

return;

}

//if 1 second is left, display "sec" instead of "secs"

if (count == 1)

{

document.getElementById("timer").innerHTML=count + " sec left";   

}

else

{

document.getElementById("timer").innerHTML=count + " secs left";

}

}

How to use setInterval and clearInterval jQuery methods in PHP?

How to use setInterval and clearInterval jQuery methods in PHP?

I will explain usage of setInterval and clearInterval jQuery methods with the help of simple example in PHP. Suppose there is a PHP array in which there are 3 elements. I want to display all of them one by one at regular intervals and stop when all the three array elements have been displayed. I will use setInterval and clearInterval jQuery methods here to implement it.

Here is my index.php file

<html>

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

var count = 0;

$(document).ready(function(){

var auto_refresh = setInterval(function (){

    $('#mydiv').load('myphpfile.php', {count: count}, function () {

        count = count + 1;

        //after three attempts it won't call php file.

        if (count > 2) {

            clearInterval(auto_refresh);

        }

    }).fadeIn("slow");

    }, 1000); 

});

</script>

</head>

<body>

<div id="mydiv"> </div>

</body>

</html>

Here is my myphpfile.php file

<?php

$questions=array(

                 "Array Item 0",

                 "Array Item 1",

                 "Array Item 2");

if (isset($_REQUEST["count"])) 

{

    echo $questions[intval($_REQUEST["count"])];

}

?>

How to generate Random Numbers at Regular Intervals in PHP?

How to generate Random Numbers at Regular Intervals in PHP? 

Following is the simple PHP tutorial to demonstrate how to generate random numbers at regular intervals in PHP? I will use jquery setInterval() method for calling PHP file (which generates random numbers) at regular intervals say after every second in my example. I will use PHP rand() function to generate random numbers in PHP. I am using google CDN for jquery libraray. So here is the simple example in PHP to generate random numbers at regular intervals.

index.php file

<!DOCTYPE html>

<html lang="en">

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var auto_refresh_random_numbers = setInterval(

function ()

{

$('#load_random_numbers').load('generate_random_numbers.php').fadeIn("slow");

}, 1000); // refresh random numbers after every 1000 milliseconds

});

</script>

</head>

<body>

<div id="load_random_numbers"> </div>

</body>

</html>

generate_random_numbers.php file

<?php

echo rand();

?>

So, that's all. Above PHP code snippet is very easy to understand by everyone. So, I don't think there is need of any explanation.