GGshow reloaded GGshow reloaded

February 16, 2013

Webpage Editable Switch

FREE! A handy web browser extension/add-on to turn document body contentEditable on or off.

* Pencil icon used in this extension was downloaded from http://openclipart.org

Webpage Editable Switch 1.0 for Firefox

Download WES 1.0 for Firefox

Webpage Editable Switch 1.0 for Chrome

Download WES 1.0 for Chrome

Filed under: Web,Web Browsers — Tags: , , , , , — GG @ 10:50 pm

December 26, 2012

Floating Point Precision

When ASP CInt( ( 0.3 - 0.2 ) * 10 ) gives you 1, but PHP (int) ( ( 0.3 - 0.2 ) * 10 ) gives you 0;

When MySQL SELECT CAST( 3 * ( 1.0 / 3 ) AS SIGNED ) gives you 1, but MSSQL SELECT CAST( 3 * ( 1.0 / 3 ) AS INT) gives you 0;

How accurate the result you can expect from your web application?

floating point

When your web application is built on top of the myth of the floating point, you can’t even expect 0.1 from JavaScript (0.3-0.2), it gives 0.09999999999999998

Filed under: Web — Tags: , , , , , , , , — GG @ 7:30 pm

December 11, 2012

PHP regular expression to strip/trim protocol from the beginning of an URL.

To remove http://, https://, ftp://, sftp://, www

echo preg_replace('#^[^:/.]*[:/]+(www.)?#i','',$url);

Examples:

function strip_url($url){
  return return preg_replace('#^[^:/.]*[:/]+(www.)?#i','',$url);
}
echo strip_url('http://www.ggshow.com');
echo strip_url('https://www.ggshow.com');
echo strip_url('ftp://www.ggshow.com');
echo strip_url('sftp://www.ggshow.com');
echo strip_url('http://ggshow.com');
echo strip_url('http:/www.ggshow.com');
echo strip_url('http:www.ggshow.com');
echo strip_url('http:ggshow.com');
echo strip_url('HTTP://WWW.ggshow.com');
echo strip_url('anything://www.ggshow.com');
echo strip_url('anything//www.ggshow.com');
echo strip_url('//www.ggshow.com');
echo strip_url('/www.ggshow.com');

Every echo statement above will output ggshow.com

Filed under: PHP — Tags: , , , , , , , , , , — GG @ 8:56 pm

September 10, 2012

jQuery Windows

Description:
jQuery Windows is a jQuery plugin to build web application platform in web based Windows interface.

License:

Screenshot:
jQuery Windows

Requirements:

  • jquery library
  • jQuery UI
  • jQuery Windows plugin

Demo:

  • Demo 1 – Startup jQuery Windows
  • Demo 2 – Startup jQuery Windows with parameters
  • Demo 3 – jQuery Windows loaded into iframe
  • Demo 4 – Integrating jQuery Windows to existing webpage

Usage:

  1. Include script and stylesheet
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" type="text/css" />
    <script src="jquery.windows.min.js"></script>
    <link rel="stylesheet" href="jquery.windows.css" type="text/css" />
  2. startup Jquery Windows
    $().windows();

    or startup with parameters

    $().windows({
        data : 'jquery.windows.json',
        config : {
            backgroundColor:'#000',
            backgroundImage:'wallpaper.jpg',
            backgroundOption:'fill',
            startupFullscreen:false,
            shutdownExitFullscreen:true,
            showFullscreenButton:true,
            showShutdownButton:true
        },
        startupHandler : startup,
        shutdownHandler : shutdown
    });

Parameters:

  • data : path to the web application data file, default ‘jquery.windows.json’
  • config : jQuery Windows interface configurations
    • backgroundColor : desktop background color, default ‘#000’
    • backgroundImage : desktop background image path, default ”
    • backgroundOption : available options [ ‘fill’ / ‘stretch’ / ‘fit’ / ’tile’ / ‘center’ ]
    • startupFullscreen : start full screen mode when startup, default false.
    • shutdownExitFullscreen : exit full screen mode when shutdown, default false.
    • showFullscreenButton : display a full screen button on menu, default false.
    • showShutdownButton : display a shutdown button on menu, default false.
  • startupHandler : event handler function when startup jQuery Windows
  • shutdownHandler : event handler function when shutdown jQuery Windows

Parameters are optional.
startup and/or shutdown function must be exist if startupHandler and/or shutdownHandler is defined.

Data Format:
Web applications and categories data for jQuery Windows stored in JSON data.
Example:

{
    "CATEGORY":[{
        "TITLE":"Category 1",
        "ITEM":[{
            "TITLE":"Application 1-1",
            "PATH":"app11.html"
        },{
            "TITLE":"Application 1-2",
            "PATH":"app12.html",
            "ICON":"gpl.png",
            "WIDTH":"400",
            "HEIGHT":"300",
            "RESIZABLE":"FALSE",
            "SCROLLING":"FALSE",
            "AUTOSTART":"FALSE"
        }]
    },{
        "TITLE":"Category 2",
        "ITEM":[{
            "TITLE":"Application 2-1",
            "PATH":"app21.html",
            "ICON":"app21.png"
        },{
            "TITLE":"Application 2-2",
            "PATH":"app22.html",
            "ICON":"app22.png"
        }]
    }]
}

Parameters are optional.
Detail parameters for separate application window please refer to data format in demo.
Full screen function & button is available only for web browsers which support JavaScript requestFullscreen method.

Download:

August 17, 2012

jQuery – Periodic Table of Elements

Description:

  • JQuery plugin to display a Periodic Table of Elements.
  • Loads element detail from a JSON data file, includes element name, symbol, atomic number, atomic weight, oxidation states, boiling point, melting point, density & etc.
  • With click event handling.

License:

Screenshot:
jQuery Windows
Demo:

Source:

<!DOCTYPE html>
<html>
    <head>
        <title>JQuery - Periodic Table of Elements - Element Selector</title>
        <link rel="stylesheet" type="text/css" href="jquery.pte.dark.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://jquery-pte.googlecode.com/files/jquery.pte.min.js"></script>
    </head>
    <body>
        <input type="text" id="element" name="element" readonly="readonly" onfocus="show_pte()" />
        <br>
        <label for="element">
            <span style="font-size:small;color:#AAA;">Click to select element.</span>
        </label>
        <br><br>
        <script>
            function select_element(element){
                $('.periodic_table').remove();
                $('#element').val(element.ATOMIC_NUMBER);
            }
            function show_pte() {
                $('<div>').addClass('periodic_table').appendTo('body').pte({
                    data : 'jquery.pte.lite.json',
                    config : {
                        x:$('#element').position().left,
                        y:$('#element').position().top,
                        tooltip:false,
                        closable:true,
                        size:24,
                        spacing:1
                    },
                    clickHandler : select_element
                });
            }
        </script>
    </body>
</html>
/*
* jquery.pte.dark.css
* v1.0
*/
.pte_table,.pte_element,.pte_detail {
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    font-family: cursive;
    padding: 0;
}
.pte_table {
    box-shadow: 4px 4px 2px #666;
    border: #999 1px solid;
    background-color: #333;
}
.pte_element {
    border: #999 1px solid;
    background-color: #CCC;
}
.pte_element:hover {
    background-color: #FFF;
}
.pte_title {
    font-size: 1.0em;
    color: #AAA;
}
.pte_label {
    font-size: 0.6em;
    color: #AAA;
}
.pte_number {
    font-size: 0.5em;
    color: #333;
}
.pte_symbol {
    font-size: 0.6em;
    color: #333;
    text-align: center;
}
.pte_close {
    font-size: 0.8em;
    color: #999;
}
.pte_detail {
    background-color: #FFF;
    border: #CCC 1px solid;
    font-size: 0.7em;
    padding: 8px;
}
.pte_detail_label {
    float: left;
    clear: left;
    color: #333;
}
.pte_detail_value {
    float: left;
    clear: right;
    color: #666;
}

Parameters:

  • data – path to the JSON data file.
  • config – configuration.
    • x : position x
    • y : position y
    • size : size of element boxes in pixel
    • spacing : spacing between element boxes in pixel
    • tooltip : display element detail in tooltip when mouse over an element
    • closable : display a [x] and remove the pte when clicked
  • clickHandler – event handler when an element is clicked.

Download:

More examples: (view source to see the source code)

  1. Basic
  2. Style
  3. Config – sizing
  4. Config – positioning
  5. Config – tooltip
  6. Click Handler
  7. Element detail
  8. Text input with element picker
Filed under: JavaScript,JQuery,JSON,Web — Tags: , , , , — GG @ 5:58 pm

July 4, 2012

Zend Framework – CLI – Module

  • Create module
    zf create module <moduleName>
  • Create dbTable class in module
    zf create db-table <className> <tableName> <moduleName>
  • Create model in module
    zf create model <mapperName> <moduleName>
  • Create controller in module
    zf create controller <controllerName> index-action-included[=1] <moduleName>
  • Create form in module
    zf create form <formName> <moduleName>
  • Create action in module
    zf create action <actionName> <controllerName>[=Index] view-included[=1] <moduleName>
  • Create view in module
    zf create view <controllerName> <actionName> <moduleName>
Filed under: PHP,Web,Zend Framework — Tags: , , , , , , , , — GG @ 2:50 pm

Zend Framework – View Helper – Placeholder

Example usage for place holders:

  • doctype()
  • headTitle()
  • headMeta()
  • headLink()
  • headStyle()
  • headScript()
  • inlineScript()

DOCTYPE

$view->doctype('HTML5');

Title

$view->headTitle('Site Title');
$view->headTitle('Site Title')
	->setSeparator(' :: ');

Meta

$view->headMeta()->appendName('keywords', 'page, keywords')
	->appendName('description', 'page description')
	->appendName('author', 'author name');

Refresh

$view->headMeta()->appendHttpEquiv('Refresh','30');

Redirect

$view->headMeta()->appendHttpEquiv('Refresh','0;url=http://www.ggshow.com');

Disable client side cache

$view->headMeta()->appendHttpEquiv('expires','-1')
	->appendHttpEquiv('pragma', 'no-cache')
	->appendHttpEquiv('Cache-Control', 'no-cache');

Setting content type and character set

$view->headMeta()->setCharset('utf-8');
$view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=UTF-8')
	->appendHttpEquiv('Content-Language', 'en-US');

Favicon with headLink

$view->headLink(array('rel' => 'favicon', 'href' => 'favicon.ico'),'PREPEND');
$view->headLink(array('rel' => 'shortcut icon', 'type' => 'image/x-icon', 'href' => 'favicon.ico'),'PREPEND');

CSS with headLink

$view->headLink()->appendStylesheet('style.css');

// appendStylesheet, prependStylesheet, setStylesheet, offsetStylesheet, appendAlternative, prependAlternative, setAlternative, offsetAlternative

CSS with headStyle

$view->headStyle->captureStart();
?>
body { margin: 0; }
<?php
$view->headStyle->captureEnd();

JavaScript

$view->headScript()->appendFile(“script.js”);
$view->headScript()->prependFile(“script.js”);
$view->inlineScript()->appendFile(“script.js”);
$this->headScript()->appendFile('script.js', 'text/javascript', array('conditional' => 'lt IE 7') );

Example output (within layout/view)

echo $this->headTitle();
echo $this->headLink();
echo $this->headMeta();
echo htmlentities($view->headMeta()->setPostfix("n"));

Example layout with placeholders

<?php echo $this->doctype() ?>
<html>
	<head>
		<?php echo $this->headTitle() ?>
		<?php echo $this->headScript() ?>
		<?php echo $this->headStyle() ?>
	</head>
	<body>
		<?php echo $this->layout()->content; ?>
		<?php echo $this->inlineScript() ?>
	</body>
</html>

Zend Framework – View

To get the view object

  1. witin view script
    $view = $this;
  2. within action controller
    $view = $this->view;
  3. within bootstrap
    $this->bootstrap(‘view’);
    $view = $this->getResource(‘view’);
  4. within resource plugin
    $this->getBootstrap()->bootstrap('view');
    $view = $this->getBootstrap()->getResource('view');
Filed under: PHP,Web,Zend Framework — Tags: , , , , — GG @ 2:30 pm

Zend Framework – View Helper – Layout

To get layout object

  • within view script
    $layout = $this->layout()
  • within action controller
    $layout = $this->_helper->layout()
    $layout = $this->_helper->getHelper(‘Layout’)->getLayoutInstance()
  • within bootstrap
    $layout = $bootstrap->getResource(‘Layout’);
  • elsewhere
    $layout = Zend_Layout::getMvcInstance();

To assign variable to layout object

$layout->var = ‘value’;
$layout->assign(‘var’, ‘value’);

To enable or disable layout

$layout->enableLayout();
$layout->disableLayout();

To enable or disable layout using CLI

zf enable layout
zf disable layout
Filed under: PHP,Web,Zend Framework — Tags: , , , , , — GG @ 2:27 pm

Zend Framework – CLI

  • Show info
    zf show < config | manifest | phpinfo | profile | project.info | version >
  • Create project
    zf create project <projectName>
  • Enable layout
    zf enable layout
  • Create dbTable class
    zf create db-table <className> <tableName>
  • Create model
    zf create model <mapperName>
  • Create controller
    zf create controller <controllerName>
  • Create form
    zf create form <formName>
  • Create action
    zf create action <actionName> <controllerName>
  • Create view
    zf create view <controllerName> <viewName>
user@ubuntu:~$ zf ?
Zend Framework Command Line Console Tool v1.11.11
Usage:
    zf [--global-opts] action-name [--action-opts] provider-name [--provider-opts] [provider parameters ...]
    Note: You may use "?" in any place of the above usage string to ask for more specific help information.
    Example: "zf ? version" will list all available actions for the version provider.

Providers and their actions:
 Version
    zf show version mode[=mini] name-included[=1]
    Note: There are specialties, use zf show version.? to get specific help on them.

 Config
    zf create config
    zf show config
    zf enable config
    Note: There are specialties, use zf enable config.? to get specific help on them.
    zf disable config
    Note: There are specialties, use zf disable config.? to get specific help on them.

 Phpinfo
    zf show phpinfo

 Manifest
    zf show manifest

 Profile
    zf show profile

 Project
    zf create project path name-of-profile file-of-profile
    zf show project
    Note: There are specialties, use zf show project.? to get specific help on them.

 Application
    zf change application.class-name-prefix class-name-prefix

 Model
    zf create model name module

 View
    zf create view controller-name action-name-or-simple-name module

 Controller
    zf create controller name index-action-included[=1] module

 Action
    zf create action name controller-name[=Index] view-included[=1] module

 Module
    zf create module name

 Form
    zf enable form module
    zf create form name module

 Layout
    zf enable layout
    zf disable layout

 DbAdapter
    zf configure db-adapter dsn section-name[=production]

 DbTable
    zf create db-table name actual-table-name module force-overwrite
    Note: There are specialties, use zf create db-table.? to get specific help on them.

 ProjectProvider
    zf create project-provider name actions

Related Articles:

Filed under: PHP,Web,Zend Framework — Tags: , , , , , , , , , , — GG @ 2:24 pm
« Newer PostsOlder Posts »

© 2020 GGSHOW | Powered by WordPress