designersdairy: May 2013

Friday, May 24, 2013

Background Image with Full Screen in Browsers

Welcome to Designers Dairy blog here i have posted How to make a Background image in

full screen in browsers

Step1:

Create a Image with width size 1024 or more as u wish

step2:

Add these css code

html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Step3 :

It will Support in Browser like IE 9 and IE 10 , Firefox, Safari and Google Chrome

To Fix Background Image in Full Screen Browsers7 and IE 8 by

Calling the class in Image

Step1:

Add the css code in Style sheet

img.bg {
           /* Set rules to fill background */
           min-height: 100%;
           min-width: 1024px;

           /* Set up proportionate scaling */
           width: 100%;
           height: auto;

           /* Set up positioning */
           position: fixed;
           top: 0;
           left: 0;
       }

       @media screen and (max-width: 1024px){
           img.bg {
               left: 50%;
               margin-left: -512px; }
       }

Step 2:

Html Code :

</head>

<body>

<img src="bg.jpg" width="1024" height="683" class="bg">

</body>

To Fix Background Image in Full Screen in IE 8 by Calling the class in Div

Step1:

HTML CODE:

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

CSS :

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

To Fix Background Image in Full Screen in IE 7 use Java script

Step1:

Html Code:

<img src="images/bg.jpg" id="bg" alt="">

Step: 2

Css:

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

Step:3

Add these script in Head tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Script :

$(window).load(function() {

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

Friday, May 3, 2013

Html 5 Default Css and Js

HTML 5 :

Js:

http://code.google.com/p/html5shiv/

Default Css

* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; }

body {
    font-size: 12px;
    line-height: 22px;
    font-family: verdana, arial, sans-serif;
    color: #727272;
    background: url(images/body-pattern.png) repeat 0 0;
    min-width: 100%;
}

/*font-family: 'Raleway', sans-serif;*/

a { color: #00acef; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }

article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

Simple Php Login page with Database

Welcome to Designers Dairy blog here i have posted How to create a Simple Php Login page

without Database

Step 1: Create Login .html and save

Login.html

<form action='logins.php' method='post'>

                  Username : <input type='text' name='username'> <br/>

                  Password : <input type='password' name='pass'> <br/>

                                       <input type='submit' value='Login'>

            </form>

Step 2: Create Login .php and save

Login.php

<?php

   //connecting to database

   $db = mysql_connect("localhost","root","") or die(mysql_error());

   //selecting our database

   $db_select = mysql_select_db("login", $db) or die(mysql_error());

   //Retrieving data from html form

$username = $_POST['username'];

   $password = $_POST['pass'];

   //for mysql injection (security reasons)

   $username = mysql_real_escape_string($username);

   $password = mysql_real_escape_string($password);

   //checking if such data exist in our database and display result

   $login = mysql_query("select * from user where USERNAME = '$username' and

   PASSWORD = '$password'");

   if(mysql_num_rows($login) == 1) {

      echo "Login Successfull";

header('Location: booked.html');


   }

   else {

      echo "Username and Password does not Match";

   }

?>

Step3 : Have A fun.............!

Simple Php Login page without Database

Welcome to Designers Dairy blog here i have posted How to create a Simple Php Login page

without Database

Step 1: Create Login .html and save

Login.html

Login.php

<form action='login.php' method='post'>

                  Username : <input type='text' name='username'> <br/>

                  Password : <input type='password' name='pass'> <br/>

                                       <input type='submit' value='Login'>

            </form>

<?php

    $username = $_POST['username'];
    $password = $_POST['pass'];

   if($username == 'admin')

{

      echo "Login Successfull";

    header('Location: booked.html');

   }

   else

{

echo "Username and Password does not Match";

}

?>

Step3 : Have A fun.............!

designersdairy

Search This Blog

Friday, May 24, 2013

Background Image with Full Screen in Browsers

Step1:

step2:

Step3 :

To Fix Background Image in Full Screen Browsers7 and IE 8 by

Calling the class in Image

Add the css code in Style sheet

To Fix Background Image in Full Screen in IE 8 by Calling the class in Div

To Fix Background Image in Full Screen in IE 7 use Java script

Friday, May 3, 2013

Html 5 Default Css and Js

Simple Php Login page with Database

Login.html

Login.php

Simple Php Login page without Database

Login.html

Login.php

Validating to select in sequencial order using angular