Archive for September, 2009

0

Skinnable Interface

Posted by admin - September 16, 2009

Create a skinnable interface with CSS and allow the user to change the look of your web application.

Adding stylesheets or letting users upload their stylesheets you can create a completely custom enviroment for each individual user.

Code:

Save the code as index.php in your PHP server

<html>
 <head>
 <?php 
 $style = "default";
 if($_GET['style'])
 {
   $style = $_GET['style'];
 }
 $files = array();
 $dir = opendir('styles');
 while($file = @readdir($dir))
 {
   if(preg_match("#[.]css$#", $file))
   {
     $files[] = $file;
   }
 }
 ?>
 <style type="text/css">@import url('styles/<?php echo $style; ?>');</style>
 </head>
 <body>
 <table width="1000">
 <tr>
 <td width="300" class="links" valign="top">
 <div class="active"><a href="">Home</a></div>
 <div class="inactive"><a href="">Browse</a></div>
 <div class="inactive"><a href="">About</a></div>
 </td>
 <td width="700" valign="top">
 <table class="box">
 <tr>
 <td class="title">
 INFO
 </td>
 </tr>
 <tr>
 <td class="entry">
 Hello World!
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <form>
 Select Style:
 <select name="style">
 <?php
 foreach($files as $file)
 {
 ?>
   <option value="<?php print $file; ?>" <?php print($file == $style ? 'selected' : ''); ?>><?php print $file; ?></option>
 <?php
 }
 ?>
 </select>
 <input type="submit" value="Style" />
 </form>
 </body>
 </html>

Create a styles directory in the same directory with index.php script

Save the next code as styles/default.css

CSS Code:

 body
 {
   font-family:verdana;
   font-size:90%;
   margin:0;
 }
.box
 {
   background-color:#0066CC;
 }
 .title
 {
   color:#fff;
   font-weight:bold;
   text-align:center;
 }
 .entry
 {
   background-color:#fff;
   font-size:80%;
   padding:10px;
 }
 .links
 {
   margin:5px;
 }
 .active
 {
   padding:5px;
   background-color:#CC0000;
 }
 .active a
 {
   color:#fff;
   font-weight:bold;
   text-decoration:none;
 }
 .inactive
 {
   padding:5px;
   background-color:#ccc;
 }
 .inactive a
 {
   color:#000;
   text-decoration:none;
 }

Save the next code as styles/style1.css

CSS Code:

 body
 {
   font-family:verdana;
   font-size:90%;
   margin:0;
 }
 .box
 {
   background-color:#666;
 }
 .title
 {
   color:#fff;
   font-weight:bold;
   text-align:center;
 }
 .entry
 {
   background-color:#fff;
   font-size:80%;
   padding:10px;
 }
.links
 {
   margin:5px;
 }
.active
 {
   padding:5px;
   background-color:#CC0000;
 }
 .active a
 {
   color:#fff;
   font-weight:bold;
   text-decoration:none;
 }
 .inactive
 {
   padding:5px;
   background-color:#666;
 }
 .inactive a
 {
   color:#fff;
   text-decoration:none;
 }
0

Radio Object

Posted by admin - September 11, 2009

The example demonstrates how to look throught a group of buttons to find out which one is checked and how to use the value attribute.

Note : Members of a group of radio objects must have the same name. Multiple groups can exists within a form but each member of the same group must share the same name.

Code:

<html>
<head>
<title>
Radio Button
</title>

<script type=”text/javascript”>

function myfunction()
{
var myform = document.forms[0];

for(var i=0; i<myform.countries.length; i++)
{
if(myform.countries[i].checked)
break;
}

alert(myform.countries[i].value);
}

</script>

</head>

<body>
<form>
<input type=”radio” name=”countries” value=”Italy” checked />
<input type=”radio” name=”countries” value=”France”  />
<input type=”radio” name=”countries” value=”England” />
<input type=”radio” name=”countries” value=”Spain” />
<input type=”button” value=”Click” onClick=”myfunction();” />
</form>
</body>
</html>

0

Checkebox - checked property

Posted by admin - September 9, 2009

A checkbox is a simple element of the form object.

The key property of a checkbox object is wether or not the box is checked.

The checked property is a boolean value: true is checked , false is not.

Code:

<html>
<head>
<title>
Checkbox
</title>

<script type=”text/javascript”>

function myfunction()
{
if(document.myform.mycheckbox.checked)
{
alert(”The box is checked”);
}
else
{
alert(”The box is not checked”);
}
}

</script>

</head>

<body>
<form name=”myform” onSubmit=”return false”>
<input type=”checkbox” name=”mycheckbox” onClick=”myfunction();” />
</form>
</body>
</html>

0

Getting and setting a text value property

Posted by admin - September 7, 2009

To demonstrate how a text field’s property can be read and change the script below provides a simple  html page with a single form.

In this example we use the “toUpperCase()” function which converts the value to uppercase.

code:

<html>
<head>
<title>
Read and change the text value property
</title>
<script text=”text/javascript”>

function myfunction()
{
var text_field = document.forms[0].myfield;
var make_upper_case = text_field.value.toUpperCase();
text_field.value = make_upper_case;
}

</script>
</head>

<body>
<form onSubmit=”return false”>
<input type=”text” name=”myfield” onChange=”myfunction();”/>
</form>
</body>
</html>

0

Popup Window

Posted by admin - September 5, 2009

Popup windows are browser windows opened from a web page and used most of times for displaying advertisements.

The popup below activated when the user clicks on a link.

The time between two instances is 24 hours, you can change that if in the function “showPopupWindow” change the number that represents the hours of the cookie expiration (24 in this case).

In the same function replace the “www.example.com” with the url you want to display in the popup window.

Code:

<script type=”text/javascript”>
var windowContainer = new Object();
var popW = 800;
var popH = 600;

if(screen.availWidth)
{
popW = screen.availWidth;
popH = screen.availHeight;
}

function get_cookie(Name) {
var search = Name + “=”  ;
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
// if the cookie exists
offset += search.length
//set the index of beginning value
end = document.cookie.indexOf(”;”, offset);
if (end == -1)
// set the index of the end of cookie value
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function showPopupWindow() {
if (get_cookie(’popunder’)==”){
expires = new Date(Date.parse(new Date())+1*24*60*60*1000);    document.cookie=”popunder=yes;path=/;expires=”+expires.toGMTString(); var windowObj = window.open(
“http://www.example.com”, “name”, “width=”+popW+”,height=”+popH);
windowObj.blur();
window.focus();
}
else return;
}

function addListener(element, event, listener)
{
if (element) {
if(element.addEventListener) {
element.addEventListener(event, listener, false);
return true;
}    else if(this.attachEvent) {
element.attachEvent(”on” + event, listener);
return true;
}
}
return false;
}

function hookLinkTags(tagId,include) {
if (document.all) {
var linkElements = document.all.tags(”A”);
for (var x = 0; x < linkElements.length; x++) {
if (!tagId || (linkElements(x).id == tagId && include == true) || (linkElements(x).id != tagId && include == false)) {                              addListener(linkElements(x), “click”, function() { showPopupWindow(); });
}
}
}
else if (document.getElementsByTagName) {
var linkElements = document.getElementsByTagName(”A”);
for (var x = 0; x < linkElements.length; x++) {
if (!tagId || (linkElements[x].id == tagId && include == true) || (linkElements[x].id != tagId && include == false))                         {
addListener(linkElements[x], “click”, function() { showPopupWindow(); });
}
}
}
}

if (addListener(this, “load”, function() { hookLinkTags(); }) == false) {
addListener(document, “load”, function() { hookLinkTags(); });
}
</script>

0

Firefox Add-ons

Posted by admin - September 3, 2009

Add-ons are enhancements to the Mozilla Foundations projects and allow the user to increase the browser’s functionallity adding new features to the browser.

You can find here my add-ons.

If you want to ask anything feel free to contact with the author: koula.koula@gmail.com

Relative links

http://en.wikipedia.org/wiki/Add-on_%28Mozilla%29

http://www.youtube.com/watch?v=K611DfZ9Q24

http://www.youtube.com/watch?v=G9kjq9VtgC4&feature=fvsr

Directions for the developers

https://developer.mozilla.org/En/Developing_add-ons

0

JScroller

Posted by admin - September 2, 2009

JScroller is a javascript widget that scrolls text or images.

Example here: torrentgamez.com

Compatible browsers

Firefox, explorer, chrome, safari.

Javascript code

// JavaScript Document
var id_timmer;

function run(x)
{
var ul_elem = document.getElementById(x);
var li_elem = ul_elem.firstChild;
var first_li_elem = null;

while(li_elem)
{
if(li_elem.nodeType != 3)
{
first_li_elem = li_elem;
break;
}

li_elem = li_elem.nextSibling;
}

var w = 0;
first_li_elem_width = first_li_elem.clientWidth;

if(first_li_elem.style.marginLeft != ”)
{
w = parseInt(first_li_elem.style.marginLeft);
}

first_li_elem.style.marginLeft = (w - 1) + “px”;

if(parseInt(first_li_elem.style.marginLeft) <= -(first_li_elem_width))
{
first_li_elem.style.marginLeft = “0px”;
ul_elem.removeChild(first_li_elem);
ul_elem.appendChild(first_li_elem);
}
}

function start_run(z)
{
id_timmer = setInterval(”run(\’” + z + “\’)”, 20);
}

function stop_run()
{
clearInterval(id_timmer);
}

HTML template

<div id=”scrolling_tags”>
<ul id=”scroller” onmouseover=”stop_run()” onmouseout=”start_run(’scroller’)”>
<li>
<a href=”">string1</a>
</li>

<li>
<a href=”">string2</a>
</li>

etc

</ul>

</div>

CSS code

#scrolling_tags
{
width:100%;
height:30px;
margin:0 0 6px 0;
background-color:#000E1C;
color:#fff;
padding:0;
}

#scroller
{
height:25px;
list-style:none;
text-align:center;
overflow:hidden;
margin:0;
padding:0;
display:block;
}

#scroller li
{
float:left;
height:18px;
margin:0;
padding:8px 0 0 0;
overflow:hidden;
}

#scroller li a
{
font-weight:bold;
font-size:100%;
color:#838383;
text-decoration:none;
}

#scroller li a:hover
{
text-decoration:none;

}

Notice

For autorun when the page is loaded put this in your html code:

<script type=”text/javascript”>start_run(”scroller”)</script>

0

Magic Pagination

Posted by admin - September 1, 2009

The MagicPagination is a tool which help you to split large result sets over multiple pages.
The only thing that you must to do is to follow the next pattern:

<?php
…
$paginationObj = new pagination(total_limit);
$limit = $paginationObj->paginationGetLimit();

mysql query(variable $limit goes here)
…
$paginationObj->paginationCreatePages();
…
 ?>

Default values

total_limit:500
results per page:30
Number of pagination links:5

Note: works only with dynamic urls.(http://www.example.com/script.php?page=num or script.php?var=something&page=num etc)

Code:

<?php
 class pagination
 {

   //-----------------------------------------------------------------------------------------------------------------------
   private $max_rows = 30;//MAXIMUM NUMBER OF DISPLAYING ITEMS
   private $max_num = 5;//MAXIMUM NUMBER OF NUMERIC LINKS
   private $limit;
   private $maxId;//TOTAL NUMBER OF ITEMS
   private $lastpage;
   private $page;
   private $url;
   private $match = "page=";

 //------------------------------------------------------------------------------------------------------------------------
 public function __construct($maxId = null)
 {
   if(!$maxId)
   {
     $this->maxId = 500;
   }
   else
   {
     $this->maxId = $maxId;
   }
 }

 //-------------------------------------------------------GET CURRENT PAGE-------------------------------------------------------
 public function getPage()
 {
   return $this->page;
 }

 //--------------------------------------------------------PAGINATION UP DIVISION------------------------------------------------
 public function paginationGetLimit()
 {
   $this->page = isset($_GET['page']) ? strip_tags($_GET['page']) : 1;
   $this->lastpage = ceil($this->maxId / $this->max_rows);
   $this->page = (int)$this->page;
   if($this->page < 1)
   {
     $this->page = 1;
   }
   elseif($this->page > $this->lastpage)
   {
     $this->page = $this->lastpage;
   }
   return ($this->limit = 'LIMIT ' .($this->page - 1) * $this->max_rows .',' .$this->max_rows);
 }

 //-----------------------------------------------------PAGINATION DOWN DIVISION SIMPLE PAGES-------------------------------------
 public function paginationCreatePages()
 {
   //.........................................................
   $this->url = $_SERVER['REQUEST_URI'];//THE REQUESTED URL
   $pos = strpos($this->url, $this->match);
   //.........................................................
   echo "<div class='pagination'>";
   echo "<ul>";
   //NEXT ENTRIES
   if ($this->page == 1)
   {
     //do nothing
   }
   else
   {
     $prevpage = $this->page-1;
     if($pos != '')
     {
       $nextUrl = str_replace($this->match.$this->page, $this->match.$prevpage, $this->url);
       echo "<li>";
       echo "<a href='".$nextUrl."'>&laquo;</a>";
       echo "</li> ";
     }
     else
     {
       print "The document can not create pages";
       return;
     }
   }
   //MIDDLE PAGES
   if($this->lastpage != 1)
   {
     $max_links = $this->max_num + 1;
     $h = 1;
     if($this->page > $max_links)
     {
       $h = (($h + $this->page) - $max_links);
     }
     if($this->page >= 1)
     {
       $max_links = $max_links + ($this->page-1);
     }
     if($max_links > $this->lastpage)
     {
       $max_links = $this->lastpage + 1;
     }
     for($i=$h; $i<$max_links; $i++)
     {
       if ($i == $this->page)
       {
         echo "<li id='f'>";
         echo $i;
         echo "</li>";
       }
       else
       {
         if($pos == '')
         {
           if(strpos($this->url, '?') != '')
           {
             $specialChar = "&amp;";
           }
           else
           {
             $specialChar = "?";
           }
           $currentUrl = $this->url.$specialChar.$this->match.$i;
         }
         else
         {
           $currentUrl = str_replace($this->match.$this->page, $this->match.$i, $this->url);
         }
         echo "<li>";
         echo "<a href='".$currentUrl."'>$i</a>";
         echo "</li> ";
       }
     }
   }
   //PREVIOUS ENTRIES
   if ($this->page == $this->lastpage)
   {
     //do nothing
   }
   else
   {
     $nextpage = $this->page + 1;
     if($pos == '')
     {
       if(strpos($this->url, '?') != '')
       {
         $specialChar = "&amp;";
       }
       else
       {
         $specialChar = "?";
       }
       $prevUrl = $this->url.$specialChar.$this->match.$nextpage;
     }
     else
     {
       $prevUrl = str_replace($this->match.$this->page, $this->match.$nextpage, $this->url);
     }
     echo "<li>";
     echo "<a href='".$prevUrl."'>&raquo;</a>";
     echo "</li> ";
   }
   //-------------------------------------------------------------------------------
   echo "</ul>";
   echo "</div>";
 }

 //--------------------------------------------------------------------------------------------
}
?>

ccs code:

/* CSS Document */
 .pagination
 {
   width:100%;
   margin-top:20px;
   margin-left:10px;
   clear:left
 }
 .pagination ul
 {
   list-style-type: none;
   margin:0;
   padding:0;
 }
 .pagination ul li
 {
   color:#666666;
   float:left;
   font: Eras Bold ITC;
   font-size: 12px;
   letter-spacing: .01em;
 }
 .pagination ul li a
 {
   color: #47809E;
   display: block;
   margin: 0 0.1em;
   padding: 2px;
   padding-left: 4px;
   padding-right: 4px;
   text-decoration: none;
 }
 li#f
 {
   background-color:#fff;
   display: block;
   margin: 0 0.1em;
   padding: 2px;
   padding-left: 4px;
   padding-right: 4px;
   text-decoration: none;
   color:#666666;
 }
 .pagination ul li a:hover
 {
   text-decoration:underline;
 }
Previous Page