<script src="PleaseWait.js"></script>

<script>
    PleaseWait(id);
</script>

• PleaseWait.js

document.getElementById("myCanvas").width = document.getElementById("myCanvas").width;

• Introduction
• Format
• Example 1
• Example 2
• Example 3
• Example 4
• Example 5
• Related links

Introduction

The format

• The direction of the reflection. This can be left, right, top or bottom.
• The offset. This can be in pixels or a percentage. Bear in mind that the size and offset of the reflection does not affect the page layout.
• A color mask for the gradient (optional). Using this you can achieve graduated reflections, as shown below.

Example 1

This shows a basic reflection on the right of an image:

-webkit-box-reflect: right 0;

Example 2

This is the same image but with the reflection on the left hand side and offset a little. Note that the layout of the page is not affected by the reflection (much like box-shadow in this respect).

-webkit-box-reflect: left 5;

Example 3

This example has a mask applied using a gradient.

-webkit-box-reflect: right 0 -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0.7)), to(transparent))

As you can see, this example uses a gradient mask to produce a fade out effect.

Example 4

As you can see below, reflections work on just about any element, not just images.

lorem ipsum delore lorem ipsum lorem ipsum delore lorem ipsum lorem ipsum delore lorem ipsum lorem ipsum delore lorem ipsum

border: 2px solid gray; padding: 5px; width: 230px; -webkit-box-reflect: right 0

Example 5

You even use CSS reflections on video elements if you wish. This shows a short video reflected to the right. It only plays in Google Chrome, (Safari doesn't support the video).

Related links

• http://webkit.org/blog/182/css-reflections/

• Documented grid autofit properties for the Bar, Gantt, Hbar, Line and Scatter charts
• Reorganized the documentation pages
• Added a warning to the website for MSIE 6 & 7

First, for webkit you can do this:

background: -webkit-gradient(linear, left top, right bottom, from(#f00), to(#000));

background: -moz-linear-gradient(top,  red,  black);

background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000, ...

<style>
    .myGradient {
        background: -webkit-gradient(linear, 0 0, 0 100, from(#f00), to(#000));
        background: -moz-linear-gradient(top,  red,  black);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000, ...
    }
</style>

More information

The gradients have many more options for defining colors, color stops, directions etc So You are advised to get more information at the links below.

• http://webkit.org/blog/175/introducing-css-gradients/
  
• https://developer.mozilla.org/en/CSS/-moz-linear-gradient
• http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx

• Added properties to the Horizontal Bar chart: chart.title.xaxis, chart.title.yaxis, chart.title.xaxis.pos, chart.title.yaxis.pos
• Slightly increased the area recognised to initiate resizing the Rose (ie the size of the hotspot)
• Added adjusting to the TRadar

On a separate note - I've updated the HTML5 GeoLocation example with an embedded Google map. This will probably be more useful to you. Also, if you have the Google Toolbar installed, MSIE appears to have GeoLocation support (!).]]> http://www.phpguru.org/article/474 Sat, 29 May 2010 23:32:39 +0100 Back to crappy rain here. Still, at least I'm not melting. Not entirely sure which I prefer - melting or freezing. It does however mean I've spent more time on RGraph. Here's this weeks skinny:

• Added adjusting to the Bar chart
• Added gray border effect to the Odometer
• Added chart.tickmarks.highlight to the Odometer
• Added adjusting to the Progress bar
• Added adjusting to the Rose chart
• Added chart.ymin to the Scatter chart

Notify me! Notify me! (HTML)

Browser support

Code

<script>

    if (!window.webkitNotifications) {
        alert('Sorry - no support for desktop notifications found. Try Google Chrome.');
    }


    /**
    * Request permission to show desktop notifications. This will block adoption IMO.
    */
    function RequestPermission (callback)
    {
        window.webkitNotifications.requestPermission(callback);
    }


    /**
    * The function which shows the desktop notification
    */
    function ShowNotification ()
    {
        if (window.webkitNotifications.checkPermission() > 0) {
            RequestPermission(ShowNotification);
        }

        // Some variables - nothing special
        var icon  = 'http://www.rgraph.net/images/logo.png';
        var title = 'Try RGraph';
        var msg   = 'Cut the load on your server whilst showing pretty charts.';

        // Show the popup
        var popup = window.webkitNotifications.createNotification(icon, title, msg);
        popup.show();
    }


    /**
    * This show a HTML notification
    */
    function ShowHTMLNotification ()
    {
        if (window.webkitNotifications.checkPermission() > 0) {
            RequestPermission(ShowHTMLNotification);
        }

        // Show the popup
        var popup = window.webkitNotifications.createHTMLNotification('WebkitNotification.html');
        popup.show();
    } 
</script>

<button onclick="ShowNotification()">Notify me!</button>
<button onclick="ShowHTMLNotification()">Notify me! (HTML)</button>

Checking for support

Checking for support is quite simple. You can do it like this:

if (!window.webkitNotifications) {
    alert('Sorry - no support found. Try Google Chrome.');
}

API

Note that this is what I've worked out and gleaned from various sources - there doesn't appear to be a definitive reference at the current time. Or at least I've not found one.

• window.webkitNotifications.requestPermission(callback)
  
  This is the function to call to request permission from the user to show notifications. The callback is called if permission is granted. This callback could, for example, subsequently show the notification.

• window.webkitNotifications.checkPermission()
  
  Returns an number indicating the current state of permission.
  1. Permission granted
  2. Permission state not yet determined
  3. Permission denied

• window.webkitNotifications.createNotification(icon, title, text)
  
  The real meat and two veg of the whole thing. This shows a notification if permission has been granted. It accepts three arguments:
  1. A URL of an image to use in the notification
  2. The title of the notification
  3. The text to show in the notification

• window.createHTMLNotification(file)
  
  Creates an HTML notification. This allows you to use mutiple images and also links in your notifications. Doesn't appear to be restricted to the current domain.

Notes

1. Sometimes the non-HTML notification appears bigger than it needs to. I can only assume that this is a bug. The HTML variant seems to be fine.
2. Should it be required to request permission from the user? This will block adoption IMO and, in the case of non-HTML notifications, shouldn't be required. Actually, I've now remembered that I read somewhere that this is in place to try and avoid tricking the user, because the notifications could look like IM notifications. Ho-hum.
3. It would be nice to be able to dismiss the notification by right clicking on it, instead of going through the utter chore of making sure the mouse is over the rather small cross.

Related links

There's what looks like an implementor document here.