Web « 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

Download WES 1.0 for Firefox

Download WES 1.0 for Chrome

Comments (4)

Filed under: Web,Web Browsers — Tags: chrome, contenteditable, editable, firefox, switch, webpage — 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?

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…

Comments (0)

Filed under: Web — Tags: accurate, asp, cast, floating point, javascript, mssql, mysql, php, precision — 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

Comments (0)

Filed under: PHP — Tags: ftp, http, https, preg_replace, protocol, regular expression, sftp, strip, trim, url, www — 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:

GNU GPL v3

Screenshot:

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:

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" />

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:

jquery.windows.js (20.7KB) – Main JavaScript file
jquery.windows.min.js (10.1KB) – Main JavaScript file (minified)
jquery.windows.css (1.2KB) – Main stylesheet
jquery.windows.json (2.1KB) – Sample data file
start.png (3.3KB) – Sample start button icon
default.png (0.6KB) – Sample default application icon

Comments (0)

Filed under: JavaScript,JQuery,JSON,Web — Tags: JQuery, operating system, Operating Systems, web application platform, web based, Windows — GG @ 2:48 am

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:

GNU GPL v3

Screenshot:

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:

jquery.pte.js (8.0 KB) – Main JavaScript file
jquery.pte.min.js (3.3 KB) – Main JavaScript file (Minified)
jquery.pte.json (78.8KB) – Elements data file (Full version)
jquery.pte.lite.json (4.1 KB) – Elements data file (Lite version, contains only atomic number and symbol)

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

Comments (3)

Filed under: JavaScript,JQuery,JSON,Web — Tags: element, JQuery, periodic, plugin, table — 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>

Comments Off

Filed under: PHP,Web,Zend Framework — Tags: action, cli, controller, dbtable, form, model, module, view, Zend Framework — 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>

Comments Off

Filed under: PHP,Web,Zend Framework — Tags: doctype, headlink, headmeta, headscript, headstyle, headtitle, inlinescript, placeholder, view helper, Zend Framework — GG @ 2:32 pm

Zend Framework – View

To get the view object

witin view script
```
$view = $this;
```
within action controller
```
$view = $this->view;
```

within bootstrap

$this->bootstrap(‘view’);
$view = $this->getResource(‘view’);

within resource plugin

$this->getBootstrap()->bootstrap('view');
$view = $this->getBootstrap()->getResource('view');

Comments Off

Filed under: PHP,Web,Zend Framework — Tags: action, bootstrap, resource, view, Zend Framework — 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

Comments Off

Filed under: PHP,Web,Zend Framework — Tags: action, bootstrap, layout, view, view helper, Zend Framework — 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:

Comments Off

Filed under: PHP,Web,Zend Framework — Tags: action, cli, controller, form, layout, model, module, php, project, view, Zend Framework — GG @ 2:24 pm

« Newer Posts — Older Posts »