5 min read

 

PHP jQuery Cookbook

PHP jQuery Cookbook

Over 60 simple but highly effective recipes to create interactive web applications using PHP with jQuery

  • Create rich and interactive web applications with PHP and jQuery
  • Debug and execute jQuery code on a live site
  • Design interactive forms and menus
  • Another title in the Packt Cookbook range, which will help you get to grips with PHP as well as jQuery

About Holiday List Calendar

This widget will help you in knowing the list of holidays in various countries. Here in this example, I have listed holidays pertaining to only two counties, namely India and US. You can make use of this widget on your websites or blogs to tell your readers about holidays and their importance if necessary.

Adding jQuery to your page

Download the latest version of jQuery from the jQuery site. This site can be added as a reference to your web pages accordingly. You can reference a local copy of jQuery after downloading tag in the page. You can also directly reference the remote copy from jQuery or Google Ajax API.

Pre-requisite Knowledge

In order to understand the code, one should have some knowledge of AJAX concepts and XML Structure, basic knowledge of HTML, advance knowledge of CSS3 and lastly and mostly important one should know advance level of jQuery coding.

Ingredients Used

  • jQuery [Advance Level]
  • CSS3
  • HTML
  • XML
  • Photoshop [Used for coming up with UI Design]

HTML Code

XML Structure





---------------------
---------------------

---------------------

CSS Code

body{
 margin: 0;
 padding: 0;
 font-family: "Lucida Grande", "Lucida Sans", sans-serif;
 font-size: 100%;
 background: #333333;
 }
#calendar-container{
width:370px;
padding:5px;
border:1px solid #bcbcbc;
margin:0 auto;
background-color:#cccccc;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.nav-container{
padding:5px;
}
.nav-container span{display:inline-block; text-align::left; padding-right:15px; border-right:1px solid
#828282; margin-right:12px; text-shadow: 1px 1px 1px #ffffff; font-weight:bold;}
.nav-container span.last{padding-right:0px; border-right:none; margin-right:0px;}

.data-container{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#selectMonth{width:120px;}

.data-container ul{margin:0px; padding:0px;}
.data-container ul li{ list-style:none; padding:5px;}
.data-container ul li.list-header{border-bottom:1px solid #bebebe; border-right:1px solid #bebebe;
background-color:#eae9e9; -webkit-border-radius: .2em .2em 0 0; -moz-border-radius: .2em .2em 0 0;
border-radius: .3em .3em 0 0; background:-moz-linear-gradient(center top , #eae9e9, #d0d0d0) repeat
scroll 0 0 transparent; margin-top:5px; text-shadow: 1px 1px 1px #ffffff;}
.data-container ul li.padding-left-10px {background-color:#EEEEEE; border-bottom:1px solid #BEBEBE;
border-right:1px solid #BEBEBE; font-size:12px;}

/* button
---------------------------------------------- */
.button {
font-size: 25px;
font-weight: 700;
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: bottom;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #555555;
padding: 0px 10px 3px 10px;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
select{
-webkit-border-radius: .2em .2em .2em .2em;
-moz-border-radius: .2em .2em .2em .2em;
border-radius: .2em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
padding:5px;
font-size:16px;
border:1px solid #4b4b4b;
}
/* color styles
---------------------------------------------- */
.gray {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',
endColorstr='#575757');
}
.gray:hover {
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
background: -moz-linear-gradient(top, #757575, #4b4b4b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',
endColorstr='#4b4b4b');
}
.gray:active {
color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
endColorstr='#888888');
}
.grayDis{
color: #999999;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
endColorstr='#888888');
}
h2{ color:#ffffff; text-align:center; margin:10px 0px;}

#header{
text-align:center;
font-size: 1em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
padding:1px;
margin:10px 0px 80px 0px;
background-color:#575757;
}

.ad{
width: 728px;
height: 90px;
margin: 50px auto 10px;
}

#footer{
width: 340px;
margin: 0 auto;
}

#footer p{
color: #ffffff;
font-size: .70em;
margin: 0;
}

#footer a{ color: #15ADD1; }

 


Subscribe to the weekly Packt Hub newsletter

* indicates required

LEAVE A REPLY

Please enter your comment!
Please enter your name here