Jiansen Lu's Computing Blog: June 2013

Tuesday, June 25, 2013

Scroll two panorama pictures horizontally using HTML MARQUEE

In this example, I used HTML MARQUEE to scroll two panorama pictures horizontally. The pictures are P5.JPG and P6.JPG. scrollAmount decides the speed of scrolling. behavior=alternate means the pictures are scrolled back and forth.
Code:
<center>
<marquee align="center" behavior="alternate" height="400" scrollamount="5" width="900">
<table border="0" bordercolor="#999999" cellpadding="0" cellspacing="0" style="height: 400px; width: 3000px;">
<tbody>
<tr>
<td height="400" width="1500"><img height="400" src="http://swf.site40.net/p_dir/P5.JPG" width="1500" /></td>

<td height="400" width="1500"><img _="" height="400" src="http://swf.site40.net/p_dir/P6.JPG" width="1500" /> </td></tr>
</tbody></table>
</marquee>
</center>
Result of animation:

Monday, June 24, 2013

PHP: QR code generator

QR code (Quick Response Code) is the trademark for a type of matrix barcode.
PHP QRcode library can be downloaded:
http://phpqrcode.sourceforge.net/index.php
To use Qrcode library is quite simple, you just need to include "qrlib.php";
QRcode::png('code data text', 'filename.png') to create output file
QRcode::png('code data text') output code image directly to browser.
Example, first create a post form and post it to qrcode.php
<html>
<h1>Jiansen Lu tools -Generate QR Codes</h1><br />

<form action="qrcode.php" method="post">
Input your text here:<br />
<textarea rows="5" cols="50" name="text1"></textarea><br />
<input type="submit" value="Create QR Code" />
<input type="reset" value="Reset" name="reset" />
</form>
</html>
In qrcode.php
<?php

include "qrlib.php";

//QRcode::png('code data text', 'filename.png'); // creates file
QRcode::png($_POST['text1']); // creates code image and outputs it directly into browser

?>
Or you can directly use index.php as an example, the demo is here:
http://swf.site40.net/phpqrcode/

Friday, June 21, 2013

JavaScript: convert between units

Below is the JavaScript to convert between pound and Kg in mass:
<html>
<head>
<title>JavaScript to convert unit</title>
<h1>Convert between kg and pound in mass</h1>
<script language='JavaScript' type='text/JavaScript'>
function validate(type) {
    if(document.form1.textinput.value=='')
    {
        alert('Fill the Input box before submitting');
        return false;
    } else {
        var res0=document.form1.textinput.value;
        var unit1=" lb";
        var unit2=" kg";
        if(type=="to_lb"){
        var res=2.20462*res0;
        document.getElementById("result").innerHTML=res0+unit2+" = "+res.toFixed(2) + unit1;
    }else{
        var res=0.453592*res0;
        document.getElementById("result").innerHTML=res0+unit1+" = "+res.toFixed(2) + unit2;
    }

    return false;
    }
}
</script>
</head>
<body>
<form name='form1' action='' method='post'
onSubmit='return validate();'>
Input :<input type=text name=textinput size=10>
<input type=button value='Convert to Kg' onClick=validate('to_kg');>
<input type=button value='Convert to Pound' onClick=validate('to_lb');>

</form>
<div id=result></div>
</body>
</html>
Demo:

Wednesday, June 19, 2013

To get query string of URL in PHP and JavaScript

To get query string of a url in PHP, we use $_GET, for example test1.php
<?php
echo htmlspecialchars($_GET["name"]);
?>
test1.php?name=jiansen&name1=andy will return jiansen
For javascript, we use document.location.search.substring
for example test2.html
<html>
      <script>
     q=document.location.search.substring(0);
        document.write(q);
        document.write("<p>")
        q1=document.location.search.substring(1);
        document.write(q1);
       document.write("<p>")
        a=new Array();
        a=q1.split('&');
        document.write(a[0]);
    </script>
</html>

Using test2.html?name=jiansen&name1=andy,

the following picks up the ENTIRE query string including the leading question (?) mark:

q=document.location.search.substring(0);

i.e.we got ?name=jiansen&name1=andy

To skip the question mark:
q1=document.location.search.substring(1);

i.e.we got name=jiansen&name1=andy

Either way, then you have to parse the string:

a=new Array();
a=q1.split('&');

For first element in array, we got
name=jiansen

Sunday, June 16, 2013

Remove conduit toolbar and search bar

Conduit and the Conduit Toolbar hijack internet browser settings.
change the home page to search.conduit.com and default search engine to search.conduit.com
To move conduit:
control panel-programs - uninstall a program
type conduit in search, remove the program related to conduit
for example search protect by conduit
After removing the conduit, go to tools - options, change homepage to the homepage you wanted, and click OK

Wednesday, June 12, 2013

Border Design in HTML

Border design in HTML
code 1:
<center ><table bgcolor=#000066 width=500 border=10 bordercolor=#EEAD0E height=300> <TBODY> <tr><td>
<MARQUEE scrollAmount=1 direction=up width=400 height=100 ><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT></MARQUEE>
</td></tr> </TBODY></table></center><BR>

床前明月光，凝是地上霜。
举头望明月，低头思故乡。

Tuesday, June 11, 2013

A simple html5 full screen demo

Using function mozRequestFullScreen in Firefox, webkitRequestFullScreen for Chrome and Safari
Reference:
https://wiki.mozilla.org/Gecko:FullScreenAPI
Demo code: using FullScreen API
<html>
<style>
section
{
    display: block;
    float: right;
    width: 40%;
    padding: 10px;
    margin: 0;
    border: 2px solid #ddd;
    cursor: pointer;
}
section img
{
    width: 100%;
}
section:full-screen
{
    float: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0 none;
}
</style>
<section id="fullscreen">
<img src="http://www.orble.com/images/my-fish.jpg" alt="fish" />
<p>Click image or here to see FULL screen;</p>
</section>
<script>
var e = document.getElementById("fullscreen");
e.onclick = function() {
    if (e.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      e.mozRequestFullScreen();
    } else if (e.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      e.webkitRequestFullScreen();
   }
   // Now we're in fullscreen mode!

}
</script>
</html>

Thursday, June 6, 2013

CSS3 perspective demo

Css3 perspective property to see the object from where an element is viewed.
Firefox:
perspective
Safari and Chrome
-webkit-perspective
Example code in Firefox:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: block;
width: 200px;
height: 200px;
margin-bottom: 50px;
border: 1px solid #bbb;
}
.box {
width: 100%;
height: 100%;
opacity: .75;
}

#darkred .box {
background-color: darkred;
transform: perspective(600px) rotateY(45deg);
}

#darkblue {
perspective: 600px;
}
#darkblue .box {
background-color: darkblue;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<section id="darkred" class="container">
<div class="box"></div>
</section>

<section id="darkblue" class="container">
<div class="box"></div>
</section>

</body>
</html>
Demo in Firefox: (without using perspective, the result will be rectangle)

Tuesday, June 4, 2013

Replace special characters when copying from Words in posting in PHP

When we use online editor in PHP, we often found messing when copying text from Words.
For example, when I copied text with apostrophe from Words, all the text after apostrophe was cutoff. While typing apostrophe is fine. The apostrophe in Words is ascii code 145, 146, ie characters chr(145), chr(146).
Below PHP function SanitizeFromWord is to replace special characters from Words during online posting in PHP.

function SanitizeFromWord($Text = '') {

    $chars = array(
        130=>',',     // baseline single quote
        131=>'NLG',   // florin
        132=>'"',     // baseline double quote
        133=>'...',   // ellipsis
        134=>'**',    // dagger (a second footnote)
        135=>'***',    // double dagger (a third footnote)
        136=>'^',     // circumflex accent
        137=>'o/oo', // permile
        138=>'Sh',    // S Hacek
        139=>'<',    // left single guillemet
        140=>'OE',    // OE ligature
        145=>'\'',    // left single quote
        146=>'\'',    // right single quote
        147=>'"',    // left double quote
        148=>'"',    // right double quote
        149=>'-',    // bullet
        150=>'-',    // endash
        151=>'--',    // emdash
        152=>'~',    // tilde accent
        153=>'(TM)', // trademark ligature
        154=>'sh',    // s Hacek
        155=>'>',    // right single guillemet
        156=>'oe',    // oe ligature
        159=>'Y',    // Y Dieresis
        169=>'(C)',    // Copyright
        174=>'(R)'    // Registered Trademark
    );

    foreach ($chars as $chr=>$replace) {
        $Text = str_replace(chr($chr), $replace, $Text);
    }
    return $Text;
}

Usage:
   $_POST['objectives']      = SanitizeFromWord(trim($_POST['objectives']));

Jiansen Lu's Computing Blog

Pages

Adsense

Popular Posts