Saturday, December 31, 2011

Global variables for CSS


Purpose: Create a CSS template file demo.txt with global variables, after processed by a PHP file convert_to_css.php, a CSS file demo.css is produced. So we can easily manage complicated CSS files.

demo.txt:

$colour2 = '#363';

body{
    text-align:center;
    background:$colour2;
}
#boundary{
    background:$colour2;
}

convert_to_css.php
<?PHP
ini_set('display_errors', 1);
error_reporting(E_ALL);
// grab the c parameter and ensure that it contains .txt is no slashes
// this is a safety measure to prevent XSS
//http://icant.co.uk/articles/cssconstants/
$c=$_GET['file'];
if(preg_match('/\//',$c) or !preg_match('/.txt/',$c))
{
    die('only local CSS files allowed!');
    exit;
}

// load the content of the CSS file into the variable css, end if the
// file wasn't found.
$css=load($c);
if($css=='')
{
    die('File not Found, sorry!');
    exit;
}
// grab all constants and store them in the array constants
preg_match_all("/\\$(\w+).*=.*\'(.*)\'/",$css,$constants);
for($i=0;$i<sizeof($constants[1]);$i++)
{

// replace all occurrences of the contants with their values
    $css=preg_replace('/\\$'.$constants[1][$i].'/',$constants[2][$i],$css);
}

// delete all constant definitions
$css=preg_replace("/\\#.*=.*?;\s+/s",'',$css);

$newfile=str_replace(".txt",".css",$c);
// save the style sheet
save($newfile, $css);
echo 'convert to '.$newfile;
function load($filelocation)
{
    if (file_exists($filelocation))
    {
        $newfile = fopen($filelocation,"r");
        $file_content = fread($newfile, filesize($filelocation));
        fclose($newfile);
        return $file_content;
    }
}
function save($newfile, $filecontent)
{
$file = fopen ($newfile, "w");
fwrite($file, $filecontent);
fclose ($file); 
}
?>
After run convert_to_css.php?file=demo.txt
 demo.css is produced:
body{
    text-align:center;
    background:#363;
}
#boundary{
 
    background:#363;
}
Reference:
http://icant.co.uk/articles/cssconstants/

Friday, December 30, 2011

Open Port 1935 for Flash Media Server in Windows 7


For remote connect to Flash Media Server, we need to open port 1935 (default) for Flash Media Server. There are three ways in Windows 7.
1) One way is to click add port in Firewall after Control panel->System and Security->Windows Firewall, following the instruction from the link below:
http://windows.microsoft.com/en-CA/windows-vista/Open-a-port-in-Windows-Firewall
2) I did not find "add port" property in firewall in Windows 7 home edition. My way is to click "Allow a program or feature through Windows Firewall" after clicking
Control panel->System and Security->Windows Firewall. I allowed following 4 programs in FireWall.
C:\Program Files\Adobe\Flash Media Server 4.5\FMSMaster.exe
C:\Program Files\Adobe\Flash Media Server 4.5\FMSEdge.exe
C:\Program Files\Adobe\Flash Media Server 4.5\FMSCore.exe
C:\Program Files\Adobe\Flash Media Server 4.5\FMSAdmin.exe
3) One simple way is to select turn off firewall after clicking
Control panel->System and Security->Windows Firewall.
This is not recommended due to putting your computer at risk.

Wednesday, December 7, 2011

Click to display message box, Javascript





Click "Show message text box" below to show message box, click again to hide message box. So this will save a lot of content space.
Show message text box
Source code:
 <style type="text/css">
<!--
.hidden { display: none; }
.displayed {
background-color: #F4F4F4;
border: 1px solid #CCC;
height: 200px;
width: 300px;
padding: 5px;
display: block;
 }
-->
</style>

<script type="text/javascript">
function display2(divID) {
    var item = document.getElementById(divID);
     
    if (item) {
        document.getElementById('toggletext2').innerHTML =(item.className=='hidden')?'Hide quoted text box':'Show quoted text box';
        item.className=(item.className=='hidden')?'displayed':'hidden';
    }

}
</script>
<a href="javascript:display2('testcode2');" id="toggletext2">Show quoted text box</a>
<div class="hidden" id="testcode2">

<h1>
Welcome to Jiansen Lu blogs</h1>
</div>

Make a dynamic table using hide content in JavaScript





When you click row 1, cell 1 in the following table, the column 2 content shows.
Same for row 2. So you can make a dynamic table to show and hide row and column contents
Show Hide/Show
row 1, cell 1
row 2, cell 1

Source code:
 <style type="text/css">
.hidden { display: none; }
.displayed { display: block; }
</style>

<script type="text/javascript">
function display(divID) {
    var item = document.getElementById(divID);
  
    if (item) {

        item.className=(item.className=='hidden')?'displayed':'hidden';
    }

}
</script>

<table border="1", width="100%">
<tr> <td width="50%"> Show </td> <td width="50%">Show/Hide </td>
<tr>
<tr> <td><a id='toggletext' href="javascript:display('row1');">row 1, cell 1</a></td> <td id="row1" class="hidden">row 1, cell 2</td> </tr>
<tr> <td><a id='toggletext' href="javascript:display('row2');">row 2, cell 1</a></td> <td id="row2" class="hidden">row 2, cell 2</td> </tr>
</table>

Tuesday, December 6, 2011

Prezi - Make you presentation dynamic and alive


You can sing up prezi free account on:
http://prezi.com/
Using prezi, you can visualize your ideas. You can insert images, videos,PDF. zoom and pan region. You can present the result online or offline. You can also use prezi online meeting to work with others for colloborative document.
My Example using prezi CV template: