GGshow reloaded GGshow reloaded

April 23, 2015

Grayscaling your website

A quick solution to convert webpages into black and white using CSS grayscale filter, supported by all major web browsers including MSIE, Firefox, Chrome, Safari. Suitable for making mourning page, paying tribute, & etc.

Demo

Convert the entire page into black & white:

body {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(1);
}

Convert selected elements into black & white:

.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(1);
}

And add grayscale class to selected HTML elements. E.g.:

<div class="grayscale">
 ...
<div>

Print webpages in black & white:

@media print {
  .grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(1);
  }
}

CDN options
CSS also available on CDN.

Grayscale all:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale-all.css">

Grayscale selected:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale.css">

Grayscale print:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale-print.css">

Or using CSS import method:

Grayscale all:

@import url("http://cdn.ggshow.com/styles/grayscale-all.css");

Grayscale selected:

@import url("http://cdn.ggshow.com/styles/grayscale.css");

Grayscale print:

@import url("http://cdn.ggshow.com/styles/grayscale-print.css");
Filed under: CSS,HTML,Uncategorized — Tags: , , , , — GG @ 6:59 pm

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

October 23, 2010

Roots in dynamic and input text field

This is a solution for using Square root (SQRT), cube root, nth root, and other roots formula in dynamic and input text field, extended from the article How to use subscript & superscript in dynamic and input text field.

  1. Download & install GG Root Sans N, GG Root Sans Radical, GG Root Sans Radicand fonts.
  2. Create a dynamic text field with Arial font embeded. Set the HTML property to true.
  3. Create a dynamic text field with GG Root Sans N font embeded.
  4. Create a dynamic text field with GG Root Sans Radical font embeded.
  5. Create a dynamic text field with GG Root Sans Radicand font embeded.
  6. Use HTML tag to set text to roots formula like below: 
    my_txt.html = true;
my_txt.htmlText = "GG Root Sans<br>";
my_txt.htmlText += "<font face="GG Root Sans Radical"> </font><font face="GG Root Sans Radicand">2</font>";
my_txt.htmlText += "<font face="GG Root Sans Radical">n</font><font face="GG Root Sans Radicand">x</font>";
my_txt.htmlText += "<font face="GG Root Sans Radical">2</font><font face="GG Root Sans Radicand">3</font>";
my_txt.htmlText += "g = <font face="GG Root Sans N">f(d+e</font><font face="GG Root Sans Radical">)</font><font face="GG Root Sans Radicand">(ax+by)(ax-by)</font>";

Demo:

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

Download:

Filed under: ActionScript,Flash Platform,HTML — Tags: , , , — GG @ 3:37 pm

October 20, 2008

WMODE for SWF

Issue:

  • How to display other HTML content above a swf?
  • DHTML menus appear underneath swf
  • HTML layer z-index not working on swf object

Reason:
By default wmode=”window”, Active Content is rendered directly to the screen on top of web browser window, which means it appears on top of other HTML content.

Solution:
Set the wmode parameter for swf object & embed tag to “opaque” or “transparent”.
e.g.:

  • In HTML,
    1. add to object tag: 
      <param name="wmode" value="opaque">
    2. add to embed tag: 
      wmode="opaque"

    So your html code will looked like:

    • <object ... >
    ...
    <param name="wmode" value="opaque">
    <embed ... wmode="opaque" ... >
</object>
  • From Flash,
    1. From menu, File > Publish Settings,
    2. click HTML tag,
    3. select “Opaque Windowless” for Window Mode.
    4. Publish
  • From Dreamweaver,
    1. Select the swf in the Design View.
    2. In the Properties panel, choose Parameters.
    3. Enter “wmode” (without quotes) for the Parameter.
    4. Enter “transparent” (without quotes) for the Value.
    5. Save the document.

Additional Information:

TechNote:
Flash content displays on top of all DHTML layers
How to make a Flash movie with a transparent background

Filed under: Flash Platform,HTML,Web — Tags: , , , — GG @ 1:48 am

April 19, 2007

How to use subscript & superscript in dynamic and input text field

Issue:

  • Unable to use subscript or superscript in dynamic and input text field.
  • Unable to display subscript or superscript for external loaded text.
  • Unable to use <sub> & <sup> tags in dynamic or input text field.
  • To create subscript or superscript text without Text Layout Framework (TLF).

Reason:
<sub> & <sup> tags are not supported by Flash.

TechNote: Subscript and superscript fail in dynamic and input text fields
LiveDocs: Supported HTML tags

Solution:

  1. Download & install GG Subscript & GG Superscript TrueType fonts. You will need to restart Flash software after installed fonts.
  2. Create a dynamic text field with Arial font embeded. Set the HTML property to true.
  3. Create a dynamic text field with GG Subscript font embeded.
  4. Create a dynamic text field with GG Superscript font embeded.
  5. Use HTML tag to set text to subscript or superscript like below: 
    Adobe<font face="GG Superscript">TM</font>

    If you are using ActionScript to test the htmlText, use script like below:

    my_txt.text = "Adobe<font face="GG Superscript">TM</font>";

Demo:

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

Download:
superscript.fla
superscript.swf

Updated: (2008-09-21)
A new set of superscript & subscript fonts includes both sans & serif type, with more complete & improved glyphs, standard scale & shift, is now available to be downloaded (free) from here.

Updated: (2010-10-23)
Another set of fonts for displaying square root (SQRT), cube root, nth root, and other roots formula in dynamic and input text field is now available here.

Related:
For creating subscript & superscript text with Text Layout Framework in AS3 or Flex project, refer to here

Filed under: ActionScript,HTML — Tags: , , , , — GG @ 5:51 pm

© 2024 GGSHOW | Powered by WordPress