<?xml version="1.0" encoding="iso-8859-1"?><rss version="0.91">
    <channel>
        <title>phpguru.org - Richard Heyes' ramblings and code</title>
        <link>http://www.phpguru.org/</link>
        <description>
            Quality PHP and Javascript code, along with a mild smattering of humour. Also second home of the RGraph HTML5 canvas graph library.
        </description>

                    <item>
                <title>19th June RGraph release</title>
                <link>http://www.phpguru.org/article/477</link>
                <pubDate>Sat, 19 Jun 2010 22:22:24 +0100</pubDate>
                <description>
                    <![CDATA[<p class="firstLetter">Back online and fully plugged in; this weeks release incorporates a 
new layout for the documentation pages, making them easier to read and 
navigate.

<ul>
  <li>Documented grid autofit properties for the Bar, Gantt, Hbar, Line 
and Scatter charts</li>
  <li>Reorganized the documentation pages</li>
  <li>Added a warning to the website for MSIE 6 & 7</li>
</ul>

<a href="http://www.rgraph.net" style="float: right; font-weight: bold">Go to the RGraph website &raquo;</a>]]>
                </description>
            </item>
                    <item>
                <title>CSS3 Gradients</title>
                <link>http://www.phpguru.org/article/476</link>
                <pubDate>Mon, 07 Jun 2010 01:54:06 +0100</pubDate>
                <description>
                    <![CDATA[<p class="firstLetter"><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, endColorstr=black);
        
        border: 2px solid black;
    }
</style>

WebKit has supported CSS gradients for a while now. Though now that Firefox 3.6 supports them too, and along with Internet Explorers
filter: CSS option, they are quite usable. Here's a lil' intro to them.

<p />

<b>First, for webkit you can do this:</b>

<pre class="code">background: -webkit-gradient(linear, left top, right bottom, from(#f00), to(#000));</pre>

<div style="width: 100px; height: 100px; background: -webkit-gradient(linear, 50 0, 100 100, from(#f00), to(#000)); float: left; border: 2px solid black"></div>

<div style="float: left; margin-left: 15px">
    The definitions are:
    
    <ul>
        <li><i>linear</i> - The gradient type - can be linear or radial</li>
        <li><i>left top</i> - The start point of the gradient (can be left/right or percentages)</li>
        <li><i>right bottom</i> - The end point of the gradient (can be left/right or percentages)</li>
        <li><i>from(#f00)</i> The start color</li>
        <li><i>to(#000)</i> - The end color</li>
    </ul>
</div>

<br clear="all" />

<b>For Firefox you can do this:</b>

<pre class="code">background: -moz-linear-gradient(top,  red,  black);</pre>

<div style="width: 100px; height: 100px; background: -moz-linear-gradient(top,  red,  black); float: left; border: 2px solid black"></div>

<div style="float: left; margin-left: 15px">
    The definitions are:

    <ul>
        <li><i>top</i> - The start point of the gradient (or the axis) - <br />to get information on this see the Mozilla more info link</li>
        <li><i>red</i> - The start color</li>
        <li><i>#000</i> - The end color</li>
    </ul>
</div>

<br clear="all" />

<b>In MSIE (!) you can do this:</b>

<pre class="code" title="background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000, endColorstr=black)">background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000, ...</pre>

<div style="width: 100px; height: 100px; filter: ; float: left; border: 2px solid black; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000, endColorstr=black);"></div>

<div style="float: left; margin-left: 15px">
    The definitions are available on the MSDN site (link below).
</div>

<br clear="all" /><br />

<hr>

So to combine them, you could add them all to a CSS class:

<br />
<br />

<div class="myGradient" style="width: 100px; height: 100px"></div>

<pre class="code">&lt;style&gt;
    .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, ...
    }
&lt;/style&gt;
</pre>

<br />

<h4>More information</h4>

<p>
    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.
</p>

<ul>
    <li><a href="http://webkit.org/blog/175/introducing-css-gradients/" target="_blank" rel="nofollow">http://webkit.org/blog/175/introducing-css-gradients/</a><br /></li>
    <li><a href="https://developer.mozilla.org/en/CSS/-moz-linear-gradient" target="_blank" rel="nofollow">https://developer.mozilla.org/en/CSS/-moz-linear-gradient</a></li>
    <li><a href="http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx" target="_blank" rel="nofollow">http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx</a></li>
</ul>
]]>
                </description>
            </item>
                    <item>
                <title>29th May 2010 RGraph release</title>
                <link>http://www.phpguru.org/article/474</link>
                <pubDate>Sat, 29 May 2010 23:32:39 +0100</pubDate>
                <description>
                    <![CDATA[<p class="firstLetter">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:

<ul>
  <li>Added adjusting to the Bar chart</li>
  <li>Added gray border effect to the Odometer</li>
  <li>Added chart.tickmarks.highlight to the Odometer</li>
  <li>Added adjusting to the Progress bar</li>
  <li>Added adjusting to the Rose chart</li>
  <li>Added chart.ymin to the Scatter chart</li>
</ul>

<a href="http://www.rgraph.net" style="float: right; font-weight: bold">Go to the RGraph website &raquo;</a>

<br clear="all" /><br />

As you can see below, there's also an article that may be of interest detailing the new notification system that is a part of Google Chrome. It allows non-modal dialogs, which may be more useful to you and your application than a simple alert().]]>
                </description>
            </item>
                    <item>
                <title>22nd May 2010 RGraph release</title>
                <link>http://www.phpguru.org/article/472</link>
                <pubDate>Sun, 23 May 2010 00:27:30 +0100</pubDate>
                <description>
                    <![CDATA[<p class="firstLetter">It's far too hot to be concerned with updating RGraph much, hence this release doesn't have much to it. It's mainly very minor tweaks and a few documentation updates. It does however introduce interactive adjustments on the Line chart. This will be useful when doing demonstrations etc. This will be expanded to other graph types in time. You can see the adjustments feature <a href="http://www.rgraph.net/docs/adjusting.html" target="_blank">here</a>.]]>
                </description>
            </item>
                    <item>
                <title>How does GMail cover the scrollbars?</title>
                <link>http://www.phpguru.org/article/471</link>
                <pubDate>Sun, 16 May 2010 20:43:31 +0100</pubDate>
                <description>
                    <![CDATA[<p class="firstLetter">GMail has dialogs that cover the entire browser window - including the scroll bars. A simple covering DIV doesn't do this. So how does GMail do it?

<p>By using an IFrame:</p>

<ol>
  <li>The index page loads an IFrame and sets it to cover the entire window</li>
  <li>This IFrame then loads the website</li>
  <li>The DIV covers the top-most page, which includes the IFrame containing the website and its scroll bars
</ol>

<p>
  It's not hard really, but does mean one thing (probably more, but this is the main one I can see),
  stuff that you link to will be loaded inside the IFrame, which isn't a problem, but does mean that their URLs won't be visible. This in turn makes bookmarking tricky. You could get around this though by using a GET query string on the page that sets up the IFrame. This is then used as the page address. Eg index.html?page=/foo/bar/jello.html. This does have implications on SEO, which for a web application isn't so much of an issue. So you could come up with some other method for determining the correct page, eg. /frame/real-page.html. Like this site and the <i>static</i> page (it's not a directory), <i>frame</i> could be a page that sets up the IFrame, and gets the real page URL (<i>real-page.html</i>) from the address.
</p>

<p>
  Here's a quick page I've put together which demonstrates it, and also has a button to resize the IFrame, to make the process a little more obvious.
</p>

<p>
  Resizing the demo will make it easy for you to grab the source.
</p>

<h4>Addendum</h4>

<p>
    Now I've thought about it for a few hours, you could resolve the URL issue with simple URL rewriting. So the URL that people use and see (what they type into their browser) would be <b>real-page.html</b>, whilst the real URL would be <b>iframe.html?page=real-page.html</b>. Much nicer. Apache has mod_rewrite for this, and (presumably) other servers have something similar. This will also make it easier for people to work on your website who don't know about the URL requirements - they use <b>real-page.html</b> as they URL and your server handles the magic. Bonza.
</p>

<div style="text-align: center">
    <a href="/cover"><b>Demo</b></a>
</div>]]>
                </description>
            </item>
                    <item>
                <title>15th May RGraph release</title>
                <link>http://www.phpguru.org/article/470</link>
                <pubDate>Sat, 15 May 2010 20:59:52 +0100</pubDate>
                <description>
                    <![CDATA[<p class="firstLetter">A few more changes than usual today:

<ul>
  <li>Updated the .getSegment() core function for use with the Rose and Donut variant charts</li>
  <li>Added RGraph.array_pad() function to the core library</li>
  <li>Grouped Bar charts can now have shadows going to the left</li>
  <li>The Line chart linewidth can now, as well as being a single number, be an array of numbers, one for each line</li>
  <li>You can now have labels on the inside of the Line charts Y axis as opposed to having them in the gutter</li>
  <li>The ModalDialog and zoom background DIVs are now much better in regards to page coverage (the semi-opaque background)</li>
  <li>You can now pass a color as the second argument to RGraph.Redraw() which it will use</li>
  <li>Resizing the window when zoomed no longer hides the zoom</li>
  <li>Little bit of work on the Odometer pointers and MSIE compatibility</li>
  <li>Added a "digital" readout option to the Odometer, as shown on the example page</li>
  <li>The Progress Bar can now have an "in-bar" indicator</li>
  <li>Converted the Pie chart to use RGraph.getSegment() for tooltips</li>
  <li>You can now set the strokestyle with the Rose chart</li>
  <li>Converted the Rose chart to use RGraph.getSegment() for tooltips</li>
  <li>Added chart.line.linewidth to the Scatter chart, and, as with the line, it can be either a number or an array of numbers</li>
  <li>The Scatter chart option chart.line.stepped can now, as well as simply true or false, be an array of booleans. This allows you to have multiple lines, some stepped, some not</li>
</ul>

<a href="http://www.rgraph.net" style="float: right; font-weight: bold">Go to the RGraph website &raquo;</a>]]>
                </description>
            </item>
                    <item>
                <title>8th May 2010 RGraph release</title>
                <link>http://www.phpguru.org/article/469</link>
                <pubDate>Sun, 09 May 2010 02:00:32 +0100</pubDate>
                <description>
                    <![CDATA[<p class="firstLetter">It's Spring! And so the website has had a bit of a clean out and it's now a little more streamlined. Other changes include:

<ul>
  <li>You can now have multi-line labels by using the text "\r\n" in your label (without the quotes). There's an example of this on the tooltips documentation page: <a href="http://www.rgraph.net/docs/tooltips.html" target="_blank">http://www.rgraph.net/docs/tooltips.html</a></li>
  <li>Resizing a graph no longer affects the page layout</li>
  <li>Added labels to the Rose chart</li>
  <li>The Rose chart origin is now the "north" axis</li>
  <li>Removed a lot of examples from the website and made the whole thing a little more streamlined</li>
  <li>Once visible, you can now double click a zoomed area to expand it to a full size zoom. You can see this on the line graph on the front page.</li>
</ul>

<a href="http://www.rgraph.net" style="float: right; font-weight: bold">Go to the RGraph website &raquo;</a>]]>
                </description>
            </item>
            </channel>
</rss>