Thursday 27 December 2012

Validation in MVC

public partial class Person
    {
        public string Name { get; set; }

        public string MiddleName { get; set; }

        public string SurName { get; set; }

        public List<Person> getdata()
        {
            List<Person> lst = new List<Person>();
           
            for (int i = 0; i < 5; i++)
            {
                Person OBJ = new Person();
                OBJ.Name = i+"";
                OBJ.SurName = "Sur" + i;
                OBJ.MiddleName = "Mid" + i;
                lst.Add(OBJ);
            }
            return lst;
        }
    }



Partial class Validation :-

 public class Person_Validate
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public string MiddleName { get; set; }
        [Required]
        public string SurName { get; set; }
    }

    [MetadataType(typeof(Person_Validate))]
    public partial class Person
    {
    }

posted by Asif Sayyad @ December 27, 2012   0 Comments

Monday 17 December 2012

Jquery Crud Operation Sample

aspx Code:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="Script/jquery-1.6.2.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {

             LoadData();
         });

         var filldata = null;
         function LoadData() {
             $.ajax({
                 type: "POST",
                 async: true,
                 url: "JqueryCrud.aspx/GetAllData",
                 data: {},
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (list) {
                     $("#list").append("<ul id='bullets'></ul>");
                     alert(list.d.length);

                     //                    for (i = 0; i < list.d.length; i++) {
                     //                        $("#bullets").append("<li>" + list.d[i].Topping
                     //                                             + " : " + list.d[i].Slices + "</li>");
                     //                    }
                     //                    $("#Something").closest("tr").remove();
                     document.getElementById("Something").deleteTHead();
                     for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
                         document.getElementById("Something").deleteRow(i - 1);
                     }

                     var resultAsJson = list.d
                     var items = "";
                      if (resultAsJson.length) {
                         for (var i in resultAsJson) {
                             var Food = resultAsJson[i];
                             items += "<option value='" + Food.StateId + "'>" + Food.State1 + "</option>";
                         }
                         $("#mydrop").html(items);
                     }
                     $("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
                     for (var i in resultAsJson) {
                         var Food = resultAsJson[i];
                         var user_name = Food.State1;
                         $("#Something").append("<tr style='background-color:Silver;'><td>" + Food.StateId
                            + "</td>  <td>" + Food.State1 + "</td> <td><button name=" + Food.StateId + " onclick='Click(" + Food.StateId + ")'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
                         // Here you append that value to your label
                     }
                     //                        $("#row").css('background-color', 'silver');    -->reflact only one row.
                 },
                 error: function (e) {
                     $("#Something").html("There was an error retrieving records");
                 }
             });

         }


         function Click(argument) {
             var param = 'Id=' + argument;
             alert(param);
             $.ajax({
                 type: "Post",
                 url: "JqueryCrud.aspx/DeleteData",
                 data: "{'Id': '" + argument + "'}",
                 contentType: "application/json; charset=utf-8",
                 datatype: "json",
                 success: function (json) {
                     alert(json.d);
                     //                    var tr = $(this).closest('tr')
                     //                    alert(tr);
                     alert(json.d.length);
                     filldata = "data";
                     //Fill the data
                     document.getElementById("Something").deleteTHead();
                     for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
                         document.getElementById("Something").deleteRow(i - 1);
                     }
                     var resultAsJson = json.d
                     $("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
                     alert(resultAsJson);
                     for (var i in resultAsJson) {
                         var Food = resultAsJson[i];
                         var user_name = Food.State1;
                         alert(i);
                         $("#Something").append("<tr style='background-color:Silver;'><td>" + Food.StateId
                            + "</td>  <td>" + Food.State1 + "</td> <td><button name='button" + Food.StateId + "'  onclick='Click(button" + Food.StateId + ")'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
                     }

                     //                    LoadData();
                 },
                 error: function (e) {
                     $("#Something").html("There was an error retrieving records");
                 }
             });
         }
    </script>
    <link href="Script/colorbox.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery.colorbox-min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="background-color:Olive; width:100%; height:150px;">
   
        </div>

        <div id="list"></div>
       
        <div class="">
            <select id="mydrop" ></select>
            <table id="Something" cellpadding="2" cellspacing="2" style="background-color:Orange;border-color:White; border-width:1px; border-style:dashed;"><thead style="background-color:Red;"><td>Food</td><td>No.</td></thead></table>
            <br />
             <input type="button" value="Show" name="brnpopup0" onclick="ShowPopup()" />
        </div>

        <%--<thead style="background-color:Red;"><td>Food</td><td>No.</td></thead><tbody ></tbody>--%>
         <div style="background-color:Olive; position:fixed; width:100%; height:150px;">
           
        </div>
    </div>
    
        <div id="popup" style="background-color:White; height:175px; width:300px; z-index:111; position:absolute; display:none; left:35%; top:20%;">
            <table width="100%" style="width: 100%; height: 100%;" cellpadding="0" cellspacing="5">

                <tr style="background-color: #0924BC; position:fixed; height:15px; ">
                    <td colspan="2" style="color:White; font-weight: bold; font-size: 1.2em; padding:3px"
                        align="center">
                        Edit State <a id="closebtn" style="color: white; position:fixed; float: right; text-decoration:none" class="btnClose"  href="#">X</a>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="width: 45%">
                        State ID:
                    </td>
                    <td>
                        <input type="text" name="txtStateId" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        State Name:
                    </td>
                    <td>
                        <input type="text" name="txtState" />
                    </td>
                </tr>
                <tr>
                    <tr><td></td><td><input type="button" style="float:right;" value="Add" /></td></tr>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>




.cs Code:-

 protected void Page_Load(object sender, EventArgs e)
        {
         
        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<Food> Result()
        {
            List<Food> res = new Food().Get();
            return res;
        }


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<State> Test(int Id)
        {
           TestEntities db = new TestEntities();
         
            return db.States.ToList();

        }



        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static void InsertData(State objState)
        {

        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<State> GetAllData()
        {
            return new TestEntities().States.ToList();
        }
       
        [WebMethod]
        //[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<State> DeleteData(string Id)
        {
            TestEntities db = new TestEntities();
            State obj = new State();
            var del = (State)db.States.ToList().Find(s => s.StateId == Id);
            db.DeleteObject(del);
            db.SaveChanges();
            return db.States.ToList();
        }

        [WebMethod]
        public static string MethodWithNoParameter(string strParam)
        {
            return "Message from server.";
        }

posted by Asif Sayyad @ December 17, 2012   0 Comments

Monday 10 December 2012

Menu Control

Css:-
body {
    font-size: 100%;
    background:#32373d;
}
a {
    text-decoration: none;
}
ul, ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper {   
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}
.menu {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #878d95;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 1px solid #103c56;
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
    border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
    content: '';
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    font-size: 36px;
    height: 1em;
      width: 1em;
    position: absolute;
      left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}
.item1 > a:before {
    background-position: 0 0;
}
.item2 > a:before {
    background-position: -38px 0;
}
.item3 > a:before {
    background-position: 0 -38px;
}
.item4 > a:before {
    background-position: -38px -38px;
}
.item5 > a:before {
    background-position: -76px 0;
}
.menu > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%;
    background: #48515c;
    line-height: 1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0;
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
    background: #2173a1;
}
.menu > li > ul li a:before{
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #32373D;
}


.menu ul > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0;
    color: #878d95;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius: 769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}



Script:-
 <script type="text/javascript">
            $(function () {
                var menu_ul = $('.menu > li > ul'),
                menu_a = $('.menu > li > a');

                menu_ul.hide();

                menu_a.click(function (e) {
                    e.preventDefault();
                    if (!$(this).hasClass('active')) {
                        //menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true, true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true, true).slideUp('normal');
                    }
                });

            });
        </script>



Aspx Code:-
  <div style="float:left; width:180px; top:-100px; position:relative;" id="wrapper">
                         <ul class="menu">
                                   <li class="item1"><a href="#">Menu1 <span style="background-color:#616975;"><img src="../../Images/admin.png"  width="30" height="30" /></span></a>
                                       <ul>
                                            <li class="subitem1"><a href="#">SunMenu1 <span>Text</span></a></li>
                                            <li class="subitem2"><a href="#"> SunMenu2 <span>6</span></a></li>
                                            <li class="subitem3"><a href="#"> SunMenu3 <span>2</span></a></li>
                                        </ul>
                                    </li>
                                    <li class="item2"><a href="#">Menu2</a>
                                        <ul>
                                            <li class="subitem1"><a href="#">SunMenu1</a></li>
                                            <li class="subitem2"><a href="#"> SunMenu2 <span>6</span></a></li>
                                            <li class="subitem3"><a href="#"> SunMenu3 <span>2</span></a></li>
                                        </ul>
                                    </li>
                                    <li class="item3"><a href="#">Menu3</a>
                                         <ul>
                                            <li class="subitem1"><a href="#">SunMenu1</a></li>
                                            <li class="subitem2"><a href="#"> SunMenu2 <span>6</span></a></li>
                                            <li class="subitem3"><a href="#"> SunMenu3 <span>2</span></a></li>
                                        </ul>
                                    </li>
                                    <li class="item4"><a href="#">Menu4</a>
                                         <ul>
                                            <li class="subitem1"><a href="#">SunMenu1</a></li>
                                            <li class="subitem2"><a href="#"> SunMenu2 <span>6</span></a></li>
                                            <li class="subitem3"><a href="#"> SunMenu3 <span>2</span></a></li>
                                        </ul>
                                    </li>
                                    <li class="item5"><a href="#">Menu5</a>
                                         <ul>
                                            <li class="subitem1"><a href="#">SunMenu1</a></li>
                                            <li class="subitem2"><a href="#"> SunMenu2 <span>6</span></a></li>
                                            <li class="subitem3"><a href="#"> SunMenu3 <span>2</span></a></li>
                                        </ul>
                                    </li>
                    </ul>

            </div>

posted by Asif Sayyad @ December 10, 2012   0 Comments

Sunday 9 December 2012

Popup in jquery

The following  show how to display popup in jquery.

CSS:-
 <style type="text/css">

        #Container
        {
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: 4;
            opacity: 0.4;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* first!*/
            filter: alpha(opacity=40); /* second!*/
            background-color: gray;
            display: none;
            width: 100%;
            height: 100%;
        }
    </style>

Script:

<script type="text/javascript" language="javascript">
          function ShowPopup() {
              $('#Container').show();
              $('#popup').show();
          }
          function HidePopup() {
              $('#Container').hide();
              $('#popup').hide();
          }
          $(".btnClose").live('click', function () {
              HidePopup();
          });
          $(".btnAdd").live('click', function () {
              HidePopup();
          });
</script>

.aspx Code :-
<div id="Container">
         <!--Display List-->
       
    </div>
<div id="popup" style="background-color:White; height:175px; width:300px; z-index:111; position:absolute; display:none; left:35%; top:20%;">
            <table width="100%" style="width: 100%; height: 100%;" cellpadding="0" cellspacing="5">

                <tr style="background-color: #0924BC; position:fixed; height:15px; ">
                    <td colspan="2" style="color:White; font-weight: bold; font-size: 1.2em; padding:3px"
                        align="center">
                        Edit State <%--<a id="closebtn" style="color: white; position:fixed; float: right; text-decoration:none" class="btnClose"  href="#">X</a>--%>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="width: 45%">
                        State ID:
                    </td>
                    <td>
                        <input type="text" id="txtStateId" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        State Name:
                    </td>
                    <td>
                        <input type="text" id="txtState" />
                    </td>
                </tr>
                <tr>
                    <tr><td></td><td><input type="button" value="Add" class="btnAdd" onclick="ADD()" /><input type="button" value="Close" name="closebtn" id="closebtn" class="btnClose" /></td></tr>
                </tr>
            </table>
        </div>

posted by Asif Sayyad @ December 09, 2012   0 Comments

Monday 3 December 2012

Getting records using jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="Script/jquery-1.6.2.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {

             LoadData();
         });

         var filldata=null;
         function LoadData() {
             $.ajax(
            {
                type: "POST",
                async: true,
                url: "ListDisplay.aspx/Result",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (list) {
                    $("#list").append("<ul id='bullets'></ul>");
                    alert(list.d.length);
//                    for (i = 0; i < list.d.length; i++) {
//                        $("#bullets").append("<li>" + list.d[i].Topping
//                                             + " : " + list.d[i].Slices + "</li>");
//                    }
                    //                    $("#Something").closest("tr").remove();
                    document.getElementById("Something").deleteTHead();
                    for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
                        document.getElementById("Something").deleteRow(i - 1);
                    }

                    var resultAsJson = list.d
                    $("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
                    for (var i in resultAsJson) {
                        var Food = resultAsJson[i]
                        var user_name = Food.Topping
                        $("#Something").append("<tr style='background-color:Silver;'><td>" + Food.Topping
                            + "</td>  <td>" + Food.Slices + "</td> <td><button name='button1' value='clicked' onclick='Click()'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
                        // Here you append that value to your label
                    }
                    //                        $("#row").css('background-color', 'silver');    -->reflact only one row.
                },
                error: function (e) {
                    $("#Something").html("There was an error retrieving records");
                }
            });

        }


        function Click() {
            $.ajax({
                type: "Post",
                async: true,
                url: "ListDisplay.aspx/Test",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: function (json) {
                    alert(json.d);
                    alert(json.d.length);
                    filldata = "data";
                    //Fill the data
                    document.getElementById("Something").deleteTHead();
                    for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
                        document.getElementById("Something").deleteRow(i - 1);
                    }
                    var resultAsJson = json.d
                    $("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
                    for (var i in resultAsJson) {
                        var Food = resultAsJson[i]
                        var user_name = Food.Topping
                        $("#Something").append("<tr style='background-color:Silver;'><td>" + Food.Topping
                            + "</td>  <td>" + Food.Slices + "</td> <td><button name='button1' value='clicked' onclick='Click()'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
                        // Here you append that value to your label
                    }

                    //                    LoadData();
                },
                error: function (e) {
                    $("#Something").html("There was an error retrieving records");
                }
            });

          
         
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <div id="list"></div>
       
        <table id="Something" cellpadding="2" cellspacing="2" style="background-color:Orange;border-color:White; border-width:1px; border-style:dashed;"><thead style="background-color:Red;"><td>Food</td><td>No.</td></thead></table>
        <%--<thead style="background-color:Red;"><td>Food</td><td>No.</td></thead><tbody ></tbody>--%>
    </div>
    </form>
</body>

</html>




Code Behind:-

 [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<Food> Result()
        {
            List<Food> res = new Food().Get();
            return res;
        }


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static object Test()
        {
            try
            {
                List<Food> res = new Food().Get();
                return res;
            }
            catch (Exception)
            {
                return "Record deleted succesfully";
            }
           
        }

posted by Asif Sayyad @ December 03, 2012   0 Comments

Garage Door Menu


<!DOCTYPE html>
<html class="no-js">
 
<head>
<meta charset="UTF-8">
<title>Garage Door Menu with jQuery</title>
 
<link href="css/style.css" rel="stylesheet">
 
<script src="js/modernizr-1.5.min.js"></script>
</head>
 
<body>
    
    <h1>Garage Door Menu</h1>
    <h2>This Browser is using CSS3 Transitions for this effect.</h2>
 
<ul id="garagedoor">
<li id="shutter1"><a href="#1">Link 1</a></li>
<li id="shutter2"><a href="#2">Link 2</a></li>
<li id="shutter3"><a href="#3">Link 3</a></li>
<li id="shutter4"><a href="#4">Link 4</a></li>
</ul>
<script>
var jQueryScriptOutputted = false;
function initJQuery() {
   
   if (typeof(jQuery) == 'undefined') {
   
       if (!jQueryScriptOutputted) {
           jQueryScriptOutputted = true;
           
           // Primitive way of loading scripts (no library yet)
           document.write("<scr" + "ipt src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\"></scr" + "ipt>");
       }
       setTimeout("initJQuery()", 50);
       
   } else {
   
    // jQuery way of loading scripts
    $.getScript('js/jquery.backgroundPosition.js', function() {
   
    // Just for demo
    $("h2").text('This Browser is using a jQuery fallback for this effect.');
        
           // Set CSS in Firefox (Required to use the backgroundPosition js)
$('#shutter1').css({backgroundPosition: '0px 0px'});
$('#shutter2').css({backgroundPosition: '0px 0px'});
$('#shutter3').css({backgroundPosition: '0px 0px'});
$('#shutter4').css({backgroundPosition: '0px 0px'});
// Animate the Shutter  
$("#garagedoor a").hover(function() {
     $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
   }, function() {
     $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
});
    });
   }
           
}
if (!Modernizr.csstransitions) {
initJQuery();
}
</script>
</body>
 
</html>

posted by Asif Sayyad @ December 03, 2012   0 Comments