How to put images in HTML text and password fields?

How to put images in HTML text and password fields?

CSS HTML

Oktober 24, 2013 Add Comment

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?

CSS HTML

Oktober 24, 2013 Add Comment

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?

CSS HTML Javascript jQuery

Oktober 21, 2013 Add Comment

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?

CSS HTML Javascript jQuery

Oktober 20, 2013 Add Comment

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;

    }