Glad see you again.
Today we gonna write easy jquery plugin, that will help us with accordion.
Accordion is block that slides on web page up or down, showing or hiding it conent
First
-Create a default html page.
-Include jquery framework version 1.4.2 or higher.
Paste following into <body>:
<div class=”accordion-wrap”>
<div class=”accordion-head folded”>Halt, accordion!</div>
<div class=”accordion-body” style=”display: none; “>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam vestibulum pulvinar augue et varius.
Etiam molestie semper erat sit amet congue.
Sed purus augue, vehicula non vulputate vitae, auctor quis augue.
Proin nec pellentesque nisl. Duis sed bibendum ante.
</div>
</div>
That was structure of accordion.
Now we should add some CSS code, but before take this images that we will use as indicators of accordion:
Save them in your website we will use them later.
CSS
body {font-family:Georgia,Serif;}
.accordion-wrap{background: none repeat scroll 0 0 #E9E9E6;
border-color: #C3CBD1;
border-style: solid;
border-width: 1px 1px 1px 2px;
margin: 6px;
width: 90%;
}
.accordion-head {
font-size: 11px;
line-height: 15px;
margin-left: 6px;
padding: 1px 14px 3px;
cursor: pointer;
width: 97%; // for IE6
}
.folded {
background: url(“icon_plus_1.gif”) no-repeat scroll left center transparent;
display: block;
padding-left: 14px;
}
.unfolded {
background: url(“icon_minus_1.gif”) no-repeat scroll left center transparent;
display: block;
padding-left: 14px;
}
.accordion-body {
background: none repeat scroll 0 0 #F5F5F5;
border-top: 1px solid #C3CBD1;
padding: 1px 6px 2px;
line-height: 20px;
}
Well here we see websafe fonts, and color’s with border’s, that make’s our accordion opaque, our image’s is here too !
So after all of it, you should see something as that:
Afterword
That’s all cookies, eko24.
If you have directory (for example “includes”) and you want, that no one of visitors could visit it from adress row - you should use .htaccess file !
Just create it in directory that you want to block and add following:
deny from all
Now try to visit it.
What, can’t do this ?
And no one can, so you can feel normal, becouse nobody can stole your files !
HINT:This work only on hosting that allow php and .htaccess files !
That’s all cookie’s, eko24
Filed under blocking directory directory dir php .htaccess htaccess eko24 tutorium lessons php hosting
Hi Dear.
Today i gonna teach you how paint in <canvas> tag.
For “less write” we will use jQuery.
Copy our page in file “canvas.html” or “index.html” as you like:
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset=”utf-8”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script>
$(document).ready(function() {
var canvas = $(“#myCanvas”);
var contex = canvas.getContext(“2d”);
});
</script>
</head>
<body>
<canvas id=”myCanvas” width=”500” height=”500”>
<!— Insert fallback content here —>
</canvas>
</body>
</html>
When we use element <canvas>, in fact it not situated on the page. Instead, you just get the picture that is formed in two-dimensional context, and access to this pattern is you can get via JavaScript API, easy isn’t in ?
System of axes
If you worked with any graphic library in PHP,ActionScript,Python - you know that axes system is like this:
It similar to primary system but “y” axes goes down.
Begin paint !
Base color is black, so all objects that you will paint become black color.
How change color i teach you later in this lesson.
So lets paint square:
Square is a reactangle but all sides are same.
And clever people created function contex.fillRect(x, y, width, height).
Paste after var contex = canvas.getContext(“2d”); next string:
contex.fillRect(50, 50, 100, 100);
Save file and restore page.
Now you can see something like this:
Yes ! It's a square, but let me explain one thing:
We used prefix fill in function fillRect, it's mean that square will be filled with black color, or that what you have set.
If you want see unfilled square replace fill with stroke.
Of course save document and restore page.
Arcs and circles
Let's try to draw a circle.
If you thing that there be a function like circle - you going wrong.
There be function arc.
Why? Because circle is type of arc, so here we go:
arc(x, y, radius, startAngle, endAngle, anticlockwise);
Explain:
I think, i should say, that in <canvas> you work with radians.
It’s mean that values of angles could be between 0 and double pi:
If radians is unknown for, or you just dont like work with them - use following code:
var degrees = 270; var radians = degrees * (Math.PI / 180);
It translate degrees into radians.
Also you can create function as this:
function degrees_into_radians(degrees)
{
var angle = degrees * (Math.PI / 180);
}
And that’s all, easy isn’t it )
Paths
Using path allow you create different poligons.
Firstly you should begin path:context.beginPath();
Then move to requaried point:moveTo(x,y);
Start draw line:lineTo(x,y);
Close your path:contex.closePath();
Then fill or stroke path:context.fill(); or context.stroke();
That’s all.
Want draw bigger lines, squares or arcs.
Nevermin - just use this:
context.lineWidth = 1 - infinity;
Earsing
For earsing use following function:
context.clearRect(x,y,width,height);
It’s just like similar rectangle, but it clear all in own area.
Afterword
Possibilities of canvas are infinity.
Proffesional web-developers use them for creating films,animations even games, that have not so much differences as PC games.
Popularity of canvas growing every moment,so don’t lose your chance to learn more about it.
That’s all cookies, eko24.
Filed under Lessons tutorials canvas html jquery eko24 Tutorium
Hi all first-readers of my blog.
My first post - is lesson.
Today i decided teach you how create graph with PHP, MySQL and jQuery.
Firs what you need is a website that support aforementioned techniques or local server (denwer).If you haven’t any of this you can create your own website free !
Visit next one links:freewebhostingarea.com,000webhost.com,byethost.com.
Here with a few steps complete registration.
After it you may create databases, load files and use youre ftp account.
Creating basement
At first we should create startpage.
You can use following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8” />
<title>My super site )</title>
</head>
<body>
Lorem ipsum dolor sit amet, dabo es ego esse haec sed haec in lucem concitaverunt in.<br />
Coepit cognitionis huius tuo curavit quo contra me naufragus ferro dolor virgo decubuit rimas in deinde cupis ei.<br />
Circumdat flante vestibus introivit suam ad per accipere nescio in rei sensibilium iussit in rei civibus nescis admonente iustum. Decollari rediit est cum magna.<br />
At ipsum se sed dominum depressit filia in.<br />
</body>
</html>
Creating tables and including PHP
Save it as “index.php” at main directory (root).
Second - is create database table with name “visits” with following rows:
id - INT(4) PRIMARY
visits - INT(4)
date - INT(2)
If you done it - lets set up PHP into it !
Add to body content next text:
<?php
$db = mysql_connect(“your_host,”password”,”username”) or die (echo mysql_error(););
mysql_select_db(“database_name”,$db) or die (echo mysql_error(););
mysql_query(“SET TIME_ZONE=’+03:00’”);
//Set your timezone in previous row, as you see my is +3:00
$cur_date = date(‘j’);
$all_select = mysql_query(“SELECT * FROM visits ORDER BY id DESC”);
$last_date = mysql_fetch_array($all_select);
$last = $last_date[‘date’];
$last_id = $last_date[‘id’];
$last_value = $last_date[‘date’];
echo $cur_date.”|”.$last.”<br>”;
if($last == $cur_date)
{
$select_cur_date = mysql_query(“SELECT * FROM visits WHERE id=’$last_id’”) or die (“sel cur date fale !:/n”.mysql_error());
$current = mysql_fetch_array($select_cur_date) or die (“cur date fetch fale !”);
$new = $current[‘visits’] + 1;
$update_cur_date = mysql_query(“UPDATE visits SET visits=’$new’ WHERE id=’$last_id’”) or die (“update cur date fale !:”.mysql_error());
}
else
{
$new_field = mysql_query(“INSERT INTO visits (date, visits) VALUES (‘$cur_date’, ‘1’)”) or die (“new row ins fale !:/n”.mysql_error());
}
?>
Let me explain what maze do:
Firstly we connect to database and select our table “visits”.
Than we just minifize variables - so no problems )
And the core of this - script analyze current date with last recorded in table.
If they are same - its mean that no day become, so we just update value of today visits.
Else it mean that new day is here and we should create new row with value “1”.
And thats goes more and more and more…
So this done.
Only print stats
Now we want to see stats !
And you know i understand you )
So create file “stats.php” in this directory.
And fill it with following:
<?php
include(“../include/db.php”);
$viev_select = mysql_query(“SELECT * FROM visits ORDER BY id DESC”);
$visits = mysql_fetch_array($viev_select);
do
{
echo $visits[‘date’].” day-“.$visits[‘visits’].” visits<br>”;
}
while($visits = mysql_fetch_array($viev_select));
?>
This is should be easy for you:
Here we just take info form table and print it with cycle, and see result.
But this is not end !
Using “Visualize”
As i promised we complete graph with it.
We will use jQuery plugin visualize (if i’m not fool this plug create filament group),
also you should see demo !
Now just visit that page, and read a little about it, for economize my time)
OK, i hope you read it, so:
Use shell of it but replace <table> content for following:
<thead>
<tr>
<td></td>
<?php
include(“../include/db.php”);
$sd = mysql_query(“SELECT * FROM visits ORDER BY id”);
$date = mysql_fetch_array($sd);
do
{
echo “<th>day #”.$date[‘date’].”</th>”;
}
while($date = mysql_fetch_array($sd));
?>
</tr>
</thead>
<tbody>
<tr>
<th>visits</th>
<?php
include(“../include/db.php”);
$q2 = mysql_query(“SELECT * FROM visits ORDER BY id”);
$visits = mysql_fetch_array($q2);
do
{
echo “<td>”.$visits[‘visits’].”</td>”;
}
while($visits = mysql_fetch_array($q2));
?>
</tr>
</tbody>
And thats all - finish !!!
Afterword
Hope you enjoyed read it.
It was my first and not last lesson.
Saying about privacy and copyrating - im say nothing.
I’m don’t copy or loaded it lesson form anywhere, so you can feel free to paste it on your blog, page or website with link to here.
Wait new teaching.
Special your, eko24.
Filed under admin chart charts eko24 graph graph graphs javascript jquery js lessons mysql php script scripts site tutorials visualize web website
