HTML5 & CSS3 Toggle slideup and slidedown | NO JAVASCRIPT

While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5.



To achieve this we will have to know the pseudo element :Target.

Target element takes the href value and finds the element with its ID(value).

In this tutorial I am going to take the CSS3 styling from Tympanus and add my CSS3 function of toggle.

So here is the HTML structure

[html]
<div class="container">
<section>
<div id="container_buttons">
<h1>
HTML5 & CSS3 Toggle slideup and slidedown using NO JAVASCRIPT.
</h1>

<div style="clear:both"></div>
<ul>
<li class="toggle">
<a href="#One">A clock made in CSS3 | NO Javascript</a>
<p id="One">
Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first <a href="http://webstutorial.com/css3-clock/css3">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Two">Learn CakePHP From Novice to Professional : Part 2</a>
<p id="Two">
Model-View-Controller Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas: MODELS : for all your database interaction VIEWS : for all your output and displays CONTROLLERS : for all your commands/scripts for input and program flow The typical PHP application mixes each of these three functions <a href="http://webstutorial.com/learn-cakephp-novice-professional-part-2/framework">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Three">Learn CakePHP From Novice to Professional : Part 1</a>
<p id="Three">
This guide is for beginners to CakePHP. Whether or not you have much experience with the PHP scripting language, working in Cake will require some new methods you may or may not have tried before. If you don't know what a "has-and-belongs-to-many" relationship is, don't know how to build your own class object, or don't <a href="http://webstutorial.com/learn-cakephp-novice-professional-part-1/framework">Read more...</a>
</p>
</li>

<li class="toggle">
<a href="#Four">Google Maps Server Side Geocoding Using PHP and Infobox Fully AJAX</a>
<p id="Four">
Recently I got a new project of real estate where I had to display about 1000 of projects on the google map. I was having the address of 1000 projects, so I started with my php and js code. When I coded and started testing, I found that on the map only 20-30 markers were <a href="http://webstutorial.com/google-server-side-geocoding-php-infobox/website-tweaks/google">Read more...</a>
</p>
</li>

<li class="toggle">
<a href="#Five">Learn Codeigniter | Codeigniter Tutorial | Codeigniter Lessons | Part 1 | Webs Tutorial</a>
<p id="Five">
What is CodeIgniter? CodeIgniter is an open source PHP framework. This framework is used to build web applications and websites. CodeIgniter is best for developers who are into front-end development. It's easy to learn and it's fully flexibe. To learn CI (CodeIgniter), you should know PHP, MYSQL, OOPs and MVC. If you are new to <a href="http://webstutorial.com/codeigniter-tutorials-codeigniter-lessons-part-1/programming/php">Read more...</a>
</p>
</li>
</ul>

<em style="float: right;margin:10px 0;">Credits: <a href="webstutorial.com">WebsTutorial</a> & <a href="http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/" rel="nofollow" target="_blank">Tympanus</a></em>

</div>
</section>
</div>
[/html]

Here we are making a simple unordered list structure, each list consits an anchor tag and a paragraph tag. Anchor will have a href pointing to ID of a paragraph tag.

And the final CSS to toggle the paragraph tag is

[css]
li p {
display: none;
padding: 10px 20px;
}

li p:target{
display:block;
}
[/css]

A clock made in CSS3 | NO Javascript

Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first CSS3 clock. This clock has 3 hands: seconds, minutes and an hour. All hands by default start moving from 12.



In this tutorial we going to use some of the CSS3 major elements.

• Animation


• Transform


• Keyframes

All three elements need to be cross browser coded.

• For firefox -moz-


• For Chrome -webkit-

So here is the css code for seconds hand.

[css]
.seconds{
width:200px;
height:200px;
border-left:2px solid #2187e7;
display:block;
-moz-animation:rotate 60s infinite linear;
-webkit-animation:rotate 60s infinite linear;
border-radius:50%;
}
[/css]

The animation takes following properties:

animation:name duration timing-function delay iteration-count direction;

Here we are going to use name, duration, direction and iteration-count elements.

Our name is rotate, 60 seconds for one animation, direction will be linear and infinite loop animation.

Following is the keyframe code,

[css]
@-moz-keyframes rotate
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
[/css]

We set points in this keyframe, the start point and the end point. In from point we will use transform element to rotate it from 0 degree and in to we set it till 360 degree. So in every animation it will rotate from 0 degree to 360 degree.

Similarly we code for the minute and the hour hand.

Entire Code:

[html]
<style>
body{background:#000000;}
#wrapper {
left: 40%;
padding: 10px;
position: absolute;
top: 20%;
width: 300px;
}
.seconds{
width:200px;
height:200px;
border-left:2px solid #2187e7;
display:block;
-moz-animation:rotate 60s infinite linear;
-webkit-animation:rotate 60s infinite linear;
border-radius:50%;
}

.minutes{
-moz-animation:rotate 3600s infinite linear;
-webkit-animation:rotate 3600s infinite linear;
width:100px;
height:100px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
display:block;
border-radius:50%;
position: absolute;
left: 61px;
top: 60px;
box-shadow: 0 0 35px #fff;
}

.hour{
-moz-animation:rotate 43200s infinite linear;
-webkit-animation:rotate 43200s infinite linear;
width:50px;
height:50px;
border-left:2px solid #fff;
border-right:2px solid #fff;
display:block;
border-radius:50%;
position: absolute;
left: 85px;
top: 87px;
box-shadow: 0 0 35px #fff;
}

@-moz-keyframes rotate
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}

@-webkit-keyframes rotate
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

.seconds span{
border-left: 1px solid #FFFFFF;
display: block;
height: 100px;
left: 100px;
position: relative;
top: 0;
width: 100px;
}

.minutes span{
border-left: 1px solid #FFFFFF;
display: block;
height: 50px;
left: 50px;
position: relative;
top: 0;
width: 50px;
}

.hour span{
border-left: 1px solid #FFFFFF;
display: block;
height: 25px;
left: 25px;
position: relative;
top: 0;
width: 25px;
}

</style>
<div id="wrapper">
<div class="seconds">
<span></span>
</div>
<div class="minutes">
<span></span>
</div>
<div class="hour">
<span></span>
</div>
</div>
[/html]

Learn CakePHP From Novice to Professional : Part 2

Model-View-Controller

Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas:

MODELS :	for all your database interaction
VIEWS :	for all your output and displays
CONTROLLERS :	for all your commands/scripts for input and program flow

The typical PHP application mixes each of these three functions in the same code, making it difficult to maintain and debug.



This is the typical flow for PHP scripting (see Figure 1-1):

1. The client sends a request to a PHP script by typing a URL or clicking a link of some kind.


2. The script processes the data and then sends the database requests directly to the database.


3. The script receives any database output and processes the data.


4. The script generates output and forwards it to the client’s browser.

In short, everything is contained in one PHP script. By using the include() function, developers strip out common functions into other external files, which makes it possible to reduce redundancy. The most complex PHP applications use objects that can be called anywhere in the application and modified depending on the variables and settings passed to them. Developers, when using objects and classes, can structure the application in numerous ways.

MVC improves upon the typical PHP flow and is an effective technique for making class objects available over the whole application. The main goal behind MVC is to make sure that each function of the application is written once and only once, thus streamlining code by reducing redundancy. Cake accomplishes this goal by not only providing the resources to make MVC possible but also by using a consistent method for where to store operations in the application. Simply naming your own files a certain way allows Cake to piece together the various resources without using any code specifications.



MVC can vary depending on the framework with which you’re working, but generally it works as follows (see Figure 1-2):

1. The client sends a page request to the application, either by typing a URL or by clicking a link of some kind. By convention, a typical URL is usually structured like this:
   

   http://{Domain}.com/{Application}/{Controller}/{Action}/{Parameter 1, etc.}

   
   


2. The dispatcher script parses the URL structure and determines which controller to execute. It also passes along any actions and parameters to the controller.


3. The function in the controller may need to handle more data than just the parameters forwarded by the dispatcher. It will send database requests to the model script.


4. The model script determines how to interact with the database using the requests submitted by the controller. It may run queries with the database and do all sorts of handy data-sorting instructions.


5. Once the model has pulled any data from or sent data to the database, it returns its output to the controller.


6. The controller processes the data and outputs to the view file.


7. The view adds any design or display data to the controller output and sends its output to the client’s browser.

The benefit of using MVC to develop web sites is that repeated functions or tasks can be separated, thus allowing for quicker edits. It can even help in debugging. Say an error keeps occurring during the interaction with the database. Usually the problem will be somewhere in a model. Knowing that all database interactions occur in just one place makes it easier to solve problems.

Learn CakePHP From Novice to Professional : Part 1

This guide is for beginners to CakePHP. Whether or not you have much experience with the PHP scripting language, working in Cake will require some new methods you may or may not have tried before. If you don’t know what a “has-and-belongs-to-many” relationship is, don’t know how to build your own class object, or don’t know how to parse an array, then this tutorial is a perfect place to start when getting into Cake.

Why Cake?

Ever since Ruby on Rails became a popular web-based framework, teams of developers have been creating clones of Rails or Rails-like frameworks for various languages: TurboGears for Python; Zend, Symfony, and many others for PHP; Catalyst for Perl; and on and on. With so many options out there, why choose CakePHP for your web project?

It’s PHP!

Many PHP developers overlook the benefits of a framework and simply look for premade functions or classes to be used as includes in their scripts or, as with Perl, pullin modules that chew up lots of time on the server and provide little customization. Cake, however, is thoroughly object-oriented in its scope. It supplies objects that can be implemented and modified to your liking and is not just some module or set of includes that give you little control.

Rapid Development

Getting a web project off the ground can be cumbersome and technically demanding, especially when using older methods of development. Cake, however, makes the initial steps of building a web application easy. Rather than run installation scripts from the command line, Cake comes prepackaged as a folder you simply drop onto a server and is ready to run.

Model-View-Controller

Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas: models for all your database interaction, views for all your output and displays, and controllers for all your commands/scripts for input and program flow. The typical PHP application mixes each of these three functions in the same code, making it difficult to maintain and debug.

CRUD Operations and the Bake Script

Almost all web sites use CRUD operations: create, read, update, and delete. A blog, for example, will need to create posts; users will need to be able to read each post; the author will likely want the ability to edit the post in the future or update the post; and the author will also want access for deleting posts. Cake makes these operations a breeze with its automated CRUD functions. Instead of writing each CRUD operation by hand, it has prebuilt classes that do it for you. Cake includes the Bake script, a handy command-line tool that generates editable CRUD code based on your database schema and customized parameters.

Scaffolding

Getting a web site off the ground is much easier with Cake’s scaffolding abilities. With just one simple line of code, you can call out Cake’s prebuilt scaffold to render views based on the database. In other words, it figures out how some standard interface views should work with your database and outputs the HTML forms, all without you having to write one bit of HTML.

Helpers

Cake comes with standard HTML, Ajax, and JavaScript helpers that make creating views much easier.Your HTML output will be greatly facilitated by intuitive strings of helper code that render the markup for you. And getting Ajax to work, although a little tricky at first, is much easier and far more efficient than if you had to worry about DOM peculiarities.

Customizable Elements

You can customize each of Cake’s features to fit your application. For example, you can bring FCKeditor, the popular WYSIWYG editor for web browsers, into Cake as a plugin. Using customized helpers, you can bring all the functionality of FCKeditor into your Cake application and actually trim out extra lines of PHP code to get it working.

Large Community

Should you need help down the road, a massive online community exists to provide it. In reality, the PHP community is the largest open source programming group on the Web, so if you need a quick workaround for a problem in Cake, someone somewhere will have some help for you, usually within minutes. Cake specialists have also established online forums, chat rooms, and blogs to help others improve and learn the framework. Compared to other PHP frameworks, this community is one of the largest on the Web.
Code samples are a must for anyone getting involved in web development. PHP dominates this field, and Cake has a growing repository of code samples as well. If you are considering another framework, this fact just may tip the scales in favor of Cake if you are wanting to piggyback on someone else’s work.

More Features

Cake aims to simplify the development process for building web applications by providing an overall method for organizing the database and other resource files that cuts down on code. Although this general approach to web programming is itself a major feature Cake offers, its repository of other powerful resources such as built-in validation, access control lists (ACLs), data sanitization, security and session handling components, and view caching make Cake worth any serious developer’s time.