Ask and Answer

How To Create A Javascript Scroll Bar, A scroll bar for your webpage using javascript

May 8th, 2007, Javascript, General, admin, 0 Comments  Print This Post

In this tutorial I will show you how to create two buttons in the bottom left of the screen (Website) that, when hovered over, will scroll the page.

Now to start with, we must create a our buttons, the first line will create a div element, or block. Using blocks you can position items anywhere on a page. We use the ID property just to let us know what the block is used for, as for the first block, its obvious that it contains the vertical buttons and the second two blocks contains the horizontal buttons.
The style property of the div tag tells the browser how to draw it, in the first block we set it to fixed, which keeps the block in one place on the window, then we follow it with coordinates, 10 pixels from the right and 10 pixels from the bottom.
Same goes with our seconds block except it is 60 pixels from the right.
Now we use anchor tags so we can use the mouseover feature, so when the mouse moves over each image the image can change our speed variable that scrolls our screen. We also use the mouseout property to stop the screen from scrolling when we leave the image.

Below is our first few lines of code.

CODE
<div id=”verticalbuttons” style=”position: fixed; right:10px; bottom:10px;”>
<a onmouseover=”ycurrentscrollspeed=-staticscrollspeed” onmouseout=”ycurrentscrollspeed=0″><img
src=”up_arrow.gif” border=”0″></a>
<a onmouseover=”ycurrentscrollspeed=staticscrollspeed” onmouseout=”ycurrentscrollspeed=0″><img
src=”down_arrow.gif” border=”0″></a>
</div>

Note: you can roposition the buttons by changing cooridinates. Below I will split the block into two instead of one for both buttons. The left button will be all the way on the left site of the screen on the bottom, while the right will be at the right side of the screen on the bottom. If you wanted to put the buttons at the top instead you could change “bottom:10px” to “top:10px” so it will be 10 pixels from the top or however many pixels you want it from the top/bottom or where ever.

CODE
<div id=”leftbutton” style=”position: fixed; right:60px; bottom:10px;”>
<a onmouseover=”xcurrentscrollspeed=-staticscrollspeed” onmouseout=”xcurrentscrollspeed=0″><img
src=”left_arrow.gif” border=”0″></a>
</div>
<div id=”rightbutton” style=”position: fixed; left: 10px; bottom:10px”>
<a onmouseover=”xcurrentscrollspeed=staticscrollspeed” onmouseout=”xcurrentscrollspeed=0″><img
src=”right_arrow.gif” border=”0″></a>
</div>

Now we start our script and initialize our variables. The first variable is static and doesn’t change, we use this to define how fast we want our page to scroll, you may change the speed if desired.
The other two variables are used to keep track of the current speed of scrolling on the x and y axiis, (x axis is left-right, y axis is up-down). We set these to zero because we don’t want to be scrolling when the user loads the page.
CODE
<script>
var staticscrollspeed=3 //Enter scroll speed in integer (Advised: 1-3)
var xcurrentscrollspeed=0
var ycurrentscrollspeed=0

our next function will do the actual scrolling. We scroll using the function “scrollBy”. The first argument is the speed on the x axis to scroll and the second is the speed on the y axis. We, of course, fill these arguments with our speed variables for each axis.

Then last, but not least, we set an interval to call our scroll function every 20 milliseconds.

CODE
function scroll(){
window.scrollBy(xcurrentscrollspeed,ycurrentscrollspeed)
}
setInterval(”scroll()”,20)
</script>

I hope you enjoyed the tutorial and found it helpful!

del.icio.us Digg it Earthlink Furl iFeedReaders ma.gnolia Maple.nu Netvouz Netscape RawSugar reddit Scuttle Shadows Simpy Spurl StumbleUpon Wink Yahoo MyWeb

How To Make A Complete Login System In Easy Steps

May 1st, 2007, Php, Javascript, General, admin, 0 Comments  Print This Post

A Tutorial On Creating Entire Login System Along With User Profiles Quick and Easy Using Php And Mysql.

First, let’s make register.php:

CODE
<?
include(”conn.php”); // create a file with all the database connections

if($do_register){ // if the submit button were clicked
if((!$name) || (!$email) || (!$age) || (!$login) || (!$password) || (!$password2)){
print “You can’t let any fields in blank.\n”; // if the user did not put some field
exit;
}
$name = stripslashes($name);
$email = stripslashes($email);
$age = stripslashes($age);
$login = stripslashes($login);
$password = stripslashes($password);
$password2 = stripslashes($password2);

// this is for security reasons

if($password != $password2){ // if passwords didn’t match
print “The password and the confirmation are not the same!\n”;
exit;
}
$password = md5($password);
mysql_query(”INSERT INTO table (name,email,age,login,password) VALUES (’$name’,'$email’,$age,’$login’,'$password’)”) or die (mysql_error());
print “Done!\n”; // if its okay, show this message
exit;
} // close the first “if”
?>

<form action=”register.php” method=”post”>
Name: <input type=”text” name=”name”><br>
Email: <input type=”text” name=”email”><br>
Age: <input type=”text” name=”age”><br>
Login: <input type=”text” name=”login”><br>
Password: <input type=”password” name=”password”><br>
Password Again: <input type=”password” name=”password2″><br>
<input type=”submit” name=”do_register” value=”Sumbit”>
</form>

And now ‘conn.php’, which is ‘included’ in the above file.

CODE

$host = ‘localhost’;
$user = ‘root’;
$pass = ”;
$db = ‘yourdb’;
mysql_connect($host,$user,$pass) or die (”Database is unavaiable. Please try again later.”);
mysql_select_db($db) or die (”Database is unavaiable. Please try again later.”);

And now, login.php:

CODE
<?
include(”conn.php”);

if($do_login){
$login = stripslashes($login); // VERY IMPORTANT FOR SECURITY OF YOUR DATABASE DON’T ERASE IT
$passwd = stripslashes($passwd); // VERY IMPORTANT FOR SECURITY OF YOUR DATABASE DON’T ERASE IT

$check = mysql_query(”SELECT * FROM table WHERE login=’$login’ LIMIT 1;”);
$user = mysql_fetch_array($check);

if($user[password] == md5($passwd)){ // if the writed password and the db password are the same…

setcookie(”login”,”$login”,time()+360000);
setcookie(”pass”,”$passwd”,time()+360000);
// …set the cookies…
header(”Location: userspage.php”); // …and redirect to restrict page
}else{
print “Login or password incorrects!\n”;
exit;
}
}
?>

<form action=”login.php” method=”post”>
Login: <input type=”text” name=”login”><br>
Passwd: <input type=”password” name=”passwd”>
<input type=”submit” name=”do_login” value=”Log-in!”>
</form>

And finally, userspage.php:

CODE
<?
if(isset($HTTP_COOKIE_VARS[”login”])){
?>

Page contents here

<?
}else{
?>
This page is restrict for registered users only!
<?
}
?>

verify.php:
CODE

<?
include(”conn.php”); // include page with the database connection
$cookie = $HTTP_COOKIE_VARS; // to reduce the var’s name :o)

if($cookie[login] && $cookie[pass]){

$login = $cookie[login];
$pass = $cookie[pass];

$usrquery = mysql_query(”SELECT * FROM members WHERE nick=’$login’ AND password=’$pass’;”) or die (mysql_error()); // search for the user
$user = mysql_fetch_array($usrquery);

if($user[level] != ‘Admin’)
header(”Location: notfound.htm”); // if the user is not an admin, redirect to an error page
}
?>

admin.php:
CODE
<?
include(”verify.php”); // it will verify if the user is an admin
?>
<!– Here, the table with all the members –>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<form method=”post” action=”members.php”>
<table width=”100%” border=”0″ cellspacing=”3″ cellpadding=”0″>
<tr bgcolor=”#333333″>
<th width=”6%” class=”header”><font size=”1″>Editar</font></th>
<th width=”1%” class=”header”><font size=”1″>ID</font></th>
<th width=”24%” class=”header”><font size=”1″>Name</font></th>
<th width=”13%” class=”header”><font size=”1″>Age</font></th>
<th width=”40%” class=”header”><font size=”1″>E-Mail</font></th>
<th width=”11%” class=”header”><font size=”1″>Details…</font></th>
</tr>
<?
$query = mysql_query(”SELECT * FROM members ORDER BY id;”);
if(!mysql_fetch_array($query)) // If there is no members
print “<tr><td align=\”center\” colspan=\”7\”><font color=\”#FFFFFF\” size=\”2\”><b>Sorry, there is no members registered.</b></font></td></tr>\n”;
// Show you a message

while($profiles = mysql_fetch_array($query))
{
?>
<tr bgcolor=”#666666″>
<td> <div align=”center”><input type=”checkbox” name=”id[]” value=”<?=$profiles[id]?>”></div></td>
<td> <div align=”center”><?=$profiles[id]?></div></td>
<td> <div align=”center”><?=$profiles[name]?></div></td>
<td> <div align=”center”><?=$profiles[age]?></div></td>
<td> <div align=”center”><?=$profiles[email]?></div></td>
<td> <div align=”center”><a href=”profiles.php?op=edit&id=<?=$profiles[id]?>” target=”_blank”>More info…</a></div></td>
</tr>
<?
}
?>
</table>
</td>
</tr>
</table>
</form>

Done, now, profiles.php (used to see and edit member information):
CODE
<?
include(”verify.php”); // always put this page, or everybody would have access to this page

function Update (&$member, $table, $data)
{
global $id;
$items = explode(” “,$data);
$update = “”;
$i = 0;
while ($tmp = $items[$i++])
{
$data = $member[$tmp];
if (is_numeric($data))
$update .= “$tmp=$data”;
else
{
sqlQuotes($data);
$update .= “$tmp=’$data’”;
}
if ($items[$i]) $update .= “,”;
}
mysql_query(”UPDATE $table SET $update WHERE id=$member[id];”);

}
// this function is really nice!!

switch($op){
case ‘edit’: // if you’re trying to edit/see info
$profile = mysql_fetch_array(mysql_query(”SELECT * FROM members WHERE id=$id;”)); // save the user informations on an variable
?>
<!– now, lets show an table –>
<form action=”profiles.php?op=doedit&memberid=<?=$profile[id]?>” method=”post”>
<table width=”100%” border=”0″ cellspacing=”3″ cellpadding=”0″>
<tr>
<td width=”25%”><font color=”#FFFFFF”>ID</font></td>
<td width=”75%”><input name=”id” type=”text” id=”id” value=”<?=$profile[id]?>” size=”2″></td>
</tr>
<tr>
<td><font color=”#FFFFFF”>Name</font></td>
<td><input name=”name” type=”text” id=”nome” value=”<?=$profile[name]?>” maxlength=”32″></td>
</tr>
<tr>
<td><font color=”#FFFFFF”>Age</font></td>
<td><input name=”age” type=”text” value=”<?=$profile[age]?>” maxlength=”32″></td>
</tr>
<tr>
<td><font color=”#FFFFFF”>Country</font></td>
<td><input name=”country” type=”text” id=”estado” value=”<?=$profile[country]?>” size=”2″ maxlength=”2″></td>
</tr>
<tr>
<td><font color=”#FFFFFF”>City</font></td>
<td><input name=”city” type=”text” id=”cidade” value=”<?=$profile[city]?>”></td>
</tr>
<tr>
<td><font color=”#FFFFFF”>ICQ</font></td>
<td><input name=”icq” type=”text” id=”icq” value=”<?=$profile[icq]?>”></td>
</tr>
<tr>
<td height=”22″><font color=”#FFFFFF”>MSN</font></td>
<td><input name=”msn” type=”text” id=”msn” value=”<?=$profile[msn]?>”></td>
</tr>
<tr>
<td><font color=”#FFFFFF”>HP</font></td>
<td><input name=”hp” type=”text” id=”hp” value=”<?=$profile[hp]?>” size=”40″></td>
</tr>
<tr>
<td><font color=”#FFFFFF”>E-mail</font></td>
<td><input name=”email” type=”text” id=”email” value=”<?=$profile[email]?>” maxlength=”60″></td>
</tr>
<tr>
<td colspan=”2″>&nbsp;</td>
</tr>
<tr>
<td colspan=”2″><div align=”center”>
<input type=”submit” value=”Save”>
&nbsp;
<input type=”reset” value=”Reset”>
</div></td>
</tr>
</table>
</form>
<?
break;
case ‘doedit’:
if(!$memberid)
return;

$profile[name] = $name;
$profile[age] = $age;
$profile[country] = $country;
$profile[city] = $city;
$profile[icq] = $icq;
$profile[msn] = $msn;
$profile[hp] = $hp;
$profile[email] = $email;

Update($profile,”members”,”name age country city icq msn hp email”);
mysql_query(”UPDATE members SET id=$id WHERE id=$memberid;”); // update user’s id

EndNow(”Details saved!<br><br><a href=\”admin.php\”>Back</a>”);

break;
}
?>

Try to don’t only copy the code and post into your site. If you do it, you will learn nothing with this tut. I hope it have been usefull for you!

This post has been edited by jlhaslip: Jan 6 2006, 07:58 AM

del.icio.us Digg it Earthlink Furl iFeedReaders ma.gnolia Maple.nu Netvouz Netscape RawSugar reddit Scuttle Shadows Simpy Spurl StumbleUpon Wink Yahoo MyWeb Next Entries »