Tuesday, October 18, 2011

Mootools - Javascript Framework

Note: This tutorial it's not for beginners but it's for people already with some knowledge of Javascript, HTML and CSS.

Mootools it's a javascript framework that allows you to create animations and take your website to the next level. Check Mootools Website and check their documentation and demos.

Mootools - Javascript Framework


I leave here an exemple of how to create a cool publicity to your website using mootools function Fx.Slide.

Code:


<html>
<head>
<script src="js/codemirror.js" type="text/javascript"></script>
<script src="js/mootools-core-1.3-full.js" type="text/javascript"></script>
<script src="js/mootools-more-1.3-full.js" type="text/javascript"></script>
<script src="js/mootools-art-0.87.js" type="text/javascript"></script>


<script language="JavaScript" type="text/javascript">
/* function called when the page loads */
window.addEvent('domready', function() {

var state = 0; /* state variable  0 - out 1 - in */
var mySlideH = new Fx.Slide('slideH_div', {mode: 'horizontal', duration: 7000}); /* initialize the slide */

mySlideH.hide(); /* Initialy hide the image */
animated_truck();
window.setInterval(animated_truck,10000); /* Set the time interval to call the animated_truck function */


/* Alternate the slide state */
function animated_truck(){
if(state == 0)
{
slide_in();
state = 1;
}
else
{
slide_out();
state = 0;
}
}
  
/* Function to slide in the image */
function slide_in(){
document.getElementById('truck_img').src="images/truck2.png"; /* change the image */
mySlideH.slideIn(); /* slide in the image */
}
  
/* Function to slide out the image */
    function slide_out(){
document.getElementById('truck_img').src="images/truck4.png"; /* change the image */
mySlideH.slideOut(); /* slide out the image */
    }
});


</script>


</head>
<body>
<div id="slideH_div" style="height: 200px; width: 1000px;">
<img id="truck_img" src="images/truck2.png" style="float:right;"/>
</div>
</body>
</html>

Download: Mootools Example







Monday, October 3, 2011

Give a better look to your login forms

Note: This tutorial it's not for beginners but it's for people already with some knowledge of HTML and CSS.

So instead of creating a regular login form like this:

User:

Password:



Code:

<html>
<head>
</head>
<body>
<form action="" method="post">
User:<br>

<INPUT type="text" name="username" size="25"><br>
Password:<br>
<INPUT type="password" name="password" size="25"><br><INPUT type="submit" value="Send">
</form>
</body>
</html>

 You can add some stuff that will make your login form look a lot more professional and nice like this:

 User:

 Password:



Code:


<html>
<head>
<style>
input:focus {
outline: none;
}/*This CSS propriety takes out that yellow border that apears when you select the input box with your mouse*/
#login_div{
font-family: Impact, fantasy;
font-size: 13px;
color: #66665E;/*font color*/
letter-spacing:2px;
}
.login_form{
background-color:#EDEDED;
border-type:solid; /*configure border*/
border-width:3px; /*configure border*/
border-color:#3088bc; /*configure border*/
font-family: Impact, fantasy;/*font type*/
font-size: 13px;
color: #66665E;/*font color*/
letter-spacing:2px;/*space between letters*/
-moz-border-radius: 7px 7px / 7px 7px;/*configure the rounded corners*/
border-radius: 7px 7px / 7px 7px;/*configure the rounded corners*/
}
</style>
</head>
<body>
<div id="login_div">
<form action="" method="post">
&nbsp;User:<br>
<INPUT type="text" name="username" size="25" class="login_form"><br>
&nbsp;Password:<br>
<INPUT type="password" name="password" size="25" class="login_form"><br>
<INPUT TYPE="image" SRC="submit.png" ALT="Submit Form" style="margin-top:4px;margin-left:2px;"><!-- Change the image of the submit button -->
</form>
</div>
</body>
</html>

I hope it helped.