GGshow reloaded GGshow reloaded

January 4, 2014

Chord Canvas

This is a HTML5 build of Dynamic Chord Diagam.

Usage:

  • Include JavaScript at HTML head.
    <script src="http://commondatastorage.googleapis.com/ggshow/files/chordcanvas/chordcanvas-1-0-0.min.js"></script>
  • Creating/rendering chord instance.
    var myChord = new ChordCanvas(value, size);
    myChord.render();

Simplified method:

  • <script>new ChordCanvas("C,X,3,2,0,1,0","100").render();</script>

Customize Color:

  • var chord1 = new ChordCanvas("C,X,3,2,0,1,0","150");
    chord1.backgroundcolor = "#CCF";
    chord1.bordercolor = "";
    chord1.titlecolor = "#FFF";
    chord1.labelcolor = "#00F";
    chord1.chordcolor = "#00F";
    chord1.titlebackgroundcolor = "#00F";
    chord1.render();

Overwrite chord container display style:

  • Chord container has block display by default, you can overwrite the display style by .chord-container class selector. e.g:
    <style>
    .chord-container {
        display:inline-block;
    }
    </style>

Examples:

Source:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chord Canvas - Example 01</title>
<style>
.chord-container {
display:inline-block;
}
</style>
<script src="http://commondatastorage.googleapis.com/ggshow/files/chordcanvas/chordcanvas-1-0-0.min.js"></script>
</head>
<body>
<h1>Chord Canvas Examples</h1>
<h3>Basic</h3>
<script>new ChordCanvas("C,X,3,2,0,1,0","100").render();</script>
<script>new ChordCanvas("Am,X,0,2,2,1,0","100").render();</script>
<script>new ChordCanvas("F,X,X,3,2,1,1","100").render();</script>
<script>new ChordCanvas("G,X,0,2,2,1,0","100").render();</script>
<br />
<script>new ChordCanvas("C#7-5,X,X,3,4,2,3","100").render();</script>
<script>new ChordCanvas("D♭7-9,X,4,3,4,3,X","100").render();</script>
<script>new ChordCanvas("E♭,11,10,8,8,8,11","100").render();</script>
<script>new ChordCanvas("B♭m,X,X,11,10,11,9","100").render();</script>
<h3>Customize Size</h3>
<script>new ChordCanvas("C,X,3,2,0,1,0","150").render();</script>
<script>new ChordCanvas("C,X,3,2,0,1,0","250").render();</script>
<script>new ChordCanvas("C,X,3,2,0,1,0","").render();</script>
<h3>Customize Color</h3>
<script>
var chord1 = new ChordCanvas("C,X,3,2,0,1,0","150");
chord1.backgroundcolor = "#CCF";
chord1.bordercolor = "";
chord1.titlecolor = "#FFF";
chord1.labelcolor = "#00F";
chord1.chordcolor = "#00F";
chord1.titlebackgroundcolor = "#00F";
chord1.render();

var chord2 = new ChordCanvas("C,8,10,10,9,8,8","150");
chord2.backgroundcolor = "#F00";
chord2.bordercolor = "#F00";
chord2.titlecolor = "#F00";
chord2.labelcolor = "#000";
chord2.chordcolor = "#FFF";
chord2.titlebackgroundcolor = "#FFF";
chord2.render();
</script>
</body>
</html>
Filed under: CSS,HTML5,JavaScript — Tags: , , , , , , — GG @ 8:44 am

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

February 3, 2012

Duplicated placeholder output

Issue:

  • Zend Framework placeholder (headTitle, headMeta, headLink, headScript, headStyle, inlineScript) creates twice or multiple title/meta/link/script tags in HTML.
  • Duplicated title/meta/link/script tags generated from Zend Framework placeholder.
  • e.g.:

    source:

    <?php echo $this->headScript()->appendFile("/scripts/global.js") ?>
    <?php echo $this->headScript()->appendFile("/scripts/main.js") ?>

    output:

    <script src="/scripts/global.js" type="text/javascript"></script>
    <script src="/scripts/global.js" type="text/javascript"></script>
    <script src="/scripts/main.js" type="text/javascript"></script>

Reason:

  • Echo will output all elements in a placeholder.

Solution:

  • Echo only once for each placeholder.
  • e.g.:
    <?php $this->headLink()->appendStylesheet('/styles/global.css') ?>
    <?php $this->headLink()->appendStylesheet('/styles/main.css') ?>
    <?php echo $this->headLink() ?>
    
    <?php $this->headScript()->appendFile("/scripts/global.js") ?>
    <?php $this->headScript()->appendFile("/scripts/main.js") ?>
    <?php echo $this->headScript() ?>
Filed under: CSS,JavaScript,PHP,Web,Zend Framework — Tags: , , — GG @ 11:15 am

July 26, 2007

GG jsWindow

A flash actionscript component integrates JavaScript popup window function, launch JavaScript popup window in Flash, with fully customizable window properties, include toolbar, location, directories, status, menubar, scrollbars, resizable, copyhistory, width, and height.

openWindow function
componentInstance.openWindow(url, windowName);

e.g.:

my_btn.onPress = function() {
my_popup.openWindow(“http://www.ggshow.com”, “my_window”);
};

Example:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

May 7, 2007

ActiveX Controls

Issue:

  • Security warning “Click to activate and use this control.”
  • Flash button need double click in MSIE
  • How to remove border/frame/rectangle around swf in MSIE?
  • How to automatic activate active control?
  • Rollover on swf in MSIE
  • ac_runactivecontent.js

Reason:
An update to Microsoft Internet Explorer (MSIE) 6 changes its way in handles some webpages that use ActiveX controls and Java applets like Adobe Reader, Apple QuickTime Player, Macromedia Flash Player, Microsoft Windows Media Player, Real Networks RealPlayer, Sun Java Virtual Machine, and more. After you install this update, you cannot interact with ActiveX controls loaded by the APPLET, EMBED, or OBJECT elements, until these controls are enabled. To enable an ActiveX control, manually click the control.

Solution:

  1. By using JavaScript:
  2. By installing extension/updater

Additional Information:

Developer Center:
Active Content Developer Center
Active content FAQ

TechNote:
Installing the Flash Active Content Update extension

Microsoft Support:
Internet Explorer ActiveX update

MSDN:
Activating ActiveX Controls

Filed under: Flash Platform,JavaScript,Web — Tags: , , , — GG @ 6:28 pm

© 2018 GGSHOW | Powered by WordPress