Siteroller Blog

They typically disappear when you select or start typing (Or both; on Apple.com the selection greys out on click, and hides on type) and reappear when you leave the text field empty.

Try this method to be up and running 1-2-3!

1) Add a rel with the prompt to each input field:
<input rel='Password'>

2) Create a CSS class 'prompt'.
<style> .prompt{ color:grey; font-style:italic } </style>

3) Add the following script (either after all inputs, or in a domready event. And don't forget Mootools -Core in your document head):
 

For clarity:
a. If you want it to degrade nicely when there is no Javascript, add the rel as a value as well.
<input rel='Password' value='Password' class='prompt'>
b. The reason I did not pull from the value is that when the page is refreshed with content filled in, the filled in text would become the default prompts.
As this looks weird (though its uncommon), use the rel instead.
c. I assume that all prompts are for inputs. 
If you have a textarea, the script is the same, but remove the 'input' part of the class and css selector.
d. Password fields are auto-switched to text fields inorder to make the prompt readable.

• Your mail.  Don't allow them to use their own mail, brainy!
• The email subject
• The email body 
• Email headers. Here, it sends the user's name and email in the "from" field.  All you gotta do to reply is hit the "reply" button.

The verdict:
1. Setup is not well documented (some help below, though).
2. Nginx uses PHP-CGI instead of vanilla PHP.
Testing on Nginx / php-cgi in order to deploy on Apache / PHP is a sure way to a heart attack, as you cannot be sure that things are production ready till its too late to change them.
3. It's well worth your time to become friends with Hugo first.
4. The official Nginx attitude is: "Maybe you should consider that nginx on Windows does not exactly have a "vibrant" following.." Caveat emptor.

Installing NGINX:

• Download NGINX from their website. You can use the stable (0.7.6) or dev (0.8.34) version [numbers true as of this writing.]
• Unzip into the directory of your choosing, as long as there are no spaces in the path name.
  C:\nginx is fine, and the popular choice.  C:\Program Files\nginx is not.
• Open the nginx.conf file in the conf folder.
  
  1. Uncomment the lines referring to the Fast-cgi location (~ 65 - 71):
     location ~ \.php$ {
         root           html;
         fastcgi_pass   127.0.0.1:9000;
         fastcgi_index  index.php;
         fastcgi_param  SCRIPT_FILENAME  /html$fastcgi_script_name;
         include        fastcgi_params;
     }
  2. Change the path following SCRIPT_FILENAME to the root.
     '/scripts' becomes '/html' or 'C:/nginx/html'
  3. Add index.php to the list of pages served by default, around line 45:
     location / {
         root   html;
         index  index.php index.html index.htm;
     }

• Download the unthreaded vc6 version of PHP from here.
  VC6, as the vc9 version relies on .NET and can clash with non IIS servers.
  Unthreaded, as php-cgi's oomph comes from the unthreaded bit.
  Using threaded will work, but will be up 100% slower.
• Unzip to the directory of choice, as before.
• If you use the PHP installer, choose "other CGI" for the type of server.
  Otherwise, open "php.ini-production" in the php folder
  
  • Change the name of the file to php.ini
  • Uncomment (line 962): extension=php_mysql.dll
  • Uncomment (line 809): extension_dir = "ext"
  • If you have an existing php.ini file, make sure the default mysql port is not set.
    (line 1211) mysql.default_port =
    If this is set to 3306 (as in earlier versions of PHP), you will get an error: No input file specified.

• Download and install MySQL Community Server from here.
• Install it as a service. If you do not want it to load during boot, uncheck the option during install.

• This is a handy utility that hides console windows.  Download it from here [the source, requires registration] or here.
• Put it into the nginx folder or a folder that is in the System Path. I recommend the latter as this is a useful all-round utility.

1. Open a new plain text document.
2. Copy in the following (but read the explanation):
   @ECHO OFF
   RunHiddenConsole C:\PHP\php-cgi -b 9000
   start nginx
   net start MySQL
   EXIT
3. Save in the NGINX folder as start.bat
   The batch file must be in the same folder as nginx.exe.  Saving it elsewhere, even with an absolute path to the nginx executable, will cause a path err when nginx tries to write to the log.
   If Windows hides the filetype extensions, you can and should have them shown.
4. RightClick and send the batch script to the desktop.  This creates a shortcut that can be clicked to get everything going.

1. @ECHO OFF
   means the console will not show you what it is doing.
2. C:\PHP\php-cgi -b 9000
   In the lines you edited in the nginx conf file, it sent php-cgi pages to port 9000.
   This line will turn on CGI-PHP and tell it to listen for pages on port 9000. [Adjust the program path as needed.]
   If you get the "no input file" err (see above), add -n to ignore the php.ini file.
3. RunHiddenConsole C:\PHP\php-cgi -b 9000
   The RunHiddenConsole command pipes the php-cgi run command through that other program you downloaded, which keeps the console window hidden.  You would otherwise need a messy, open, console window whenever PHP is running.
4. start nginx
   This starts nginx.
5. net start MySQL
   This starts the MySQL service. 
   If your mysql service starts during boot, remove this line.
   If you have not installed Mysql as a service, you must turn it on directly, and should use the hiddenconsole program to keep that window shut as well:
   RunHiddenConsole.exe "C:\Mysql\bin\mysqld-nt" --defaults-file="C:\Program Files\MySQL\MySQL Server 5.0\my.ini" (Copied from here, not tested).
6. EXIT
   Closes the command window in which all of these commands are being run.

Now create another batch file for the shutdown.
@ECHO OFF

Save it as stop.bat, send a shortcut to the desktop.

To test, create a page called info.php, with the following text:
<?php phpinfo(); ?>
Put it into the nginx/html folder.
Open http:/localhost/info.php in your browser.
It should give you all of your system info.
Using Process Explorer, you can see the Nginx parent and sub processes, the php-cgi process, and the mysqld service.

Good luck.

Overall, this has been relatively painless, though the lack of alpha masks in Gecko and gradient stops in Trident has provided... interest.

The one big problem has been the color wheel.  All elements, in all browsers, are meant to be square.  Curving corners is one thing.  Creating a wheel of conical gradients has been something else entirely. 

Preface:
Throughout the ensuing discussion, our goal is to make a cone or wheel using just hues, as follows:

Img1

While the color wheel used in most color pickers has a white or greyscale center, that is best actualized by adding a radial gradient after the actual wheel is created - trying to factor the gradient into the creation of the wheel is needlessly complicated.

Here goes.

CSS:
If it were possible to use style-sheets, we would.

CSS3 supports gradients (and even IE is on board with proprietary filers), but only two types: radial and linear. 
The radial gradient is made up of an inner and outer color. 
Completely useless when trying to form a color wheel in which the gradients are stacked cylindrically.

Img2

The linear gradient isn't much better.

Img3

If there just was a way to pinch the bottom of each square to a point (& round the outer edges), we would have the perfect color wheel!

img4

Interestingly enough, a "pinching" style does exist.  Webkit's z-perspective allows for everything to be skewed as though one were looking from the center of the side of the element, exactly as we need.

Unfortunately, though, this style is only supported in Webkit, and only on the Mac or iPhone.  Till I have one of those, this'll have to wait.

[Actually, the way that Webkit (and Canvas) define the radial gradient allows for the inner color to be entirely outside the starting 'outer' circle.  This can be used to create some nice conical gradients, but I couldn't work it out reliably. Considering that this syntax is bound for deprecation (I hope) it's just as well. If anyone else researches this, keep us in the loop.]

Canvas:
In the browsers that support it, Canvas allows for general pixel manipulation and can be used to draw lines and gradients.

There are three ways that canvas can be used to generate the circle:

1. Cycle through the perimeter of a square, drawing lines from the center, incrementing the hue.
2. Cycle through all the pixels of a box and set each to the requisite color.
3. Create one pixel lines of many hues, than rotate each line on its base, by different angles, to form a circle. 
   

The third method is decidedly the quickest at 1/5 of 1/10 of a second, and is use in the latest versions of ColorRoller.
However, it too is not perfect: The anti-aliasing feature built into both Firefox and Webkit cause weird artifacts when using this method to draw the circle.
There is no practical way to shut this; mozImageSmoothingEnabled did not help.
The only solution we found is to use lines of two or three pixels wide, but this must be offset correctly or the entire image will be skewed by that amount.

Note: The second and third method assume we would fill in the whole square and crop out the circle when finished.

SVG:
The SVG engine is not nearly as efficient as the Canvas engine, and it manipulates its shapes using the DOM instead of drawing to the pixel.
On the other hand, it offers quite a bit of functionality far beyond that available to the Canvas engine.

Some methods:

1. Cycle through all the pixels of the circle, covering each with a one pixel SVG square colored as needed.
   Same as the canvas method, but using the wrong tool.
2. Cycle around the perimeter of a square drawing lines of different hues to the center.
   Same as the canvas method, but using the wrong tool.
3. Draw a number of hue lines, then rotate them around the box's center point to generate the wheel.
   Same as Canvas, but better for the job.  Use transform-origin if available, otherwise position elements as needed.
   
4. Create the six linear gradient boxes, than use the filters to pinch the bottom of each into a point.
   This is the correct way, but will require testing:
   
   • feDiffuseLighting with feDisplacementMap or feComposite: This is discussed here, referencing earlier browsers.
   • feDisplacementMap to create perspective: Discussed here, with a demo on the page. May be FF only.
     
   • feTurbulence, which is based on the radial filter, has been mentioned as an avenue of investigation.
5. ClipPaths that are manipulated to draw the bottom corners together. Discussed here, demoed here.
6. Create a text path, and draw the gradient along the text path. Discussed on the same page as #5, but the demo did not work for me.
   

Vector Markup Language, like many IE-only proprietary standards, actually had potential.

However, being mostly undocumented and only partially supported by one browser, it's usefulness is quite limited.
Worse, each version of IE has progressively less support for any vector markup, so it will probably soon be entirely obsolete.

(Tough luck, excanvas guys. But a browser with top-notch graphics is not good for a company who's business model can't handle web based competition..)

The methods:

1. Same as those for Canvas and SVG (1-3 above).
2. VML actually has built in support for conical gradients, but these were not designed to be used stand-alone and are entirely undocumented.
   

<html xmlns:v=VML>
<head><style> v\:*{behavior:url(#default#VML)} </style></head>
<body>
<v:group style=width:50;height:50>
  <v:shape style=width:1000;height:1000 fillcolor=#f0f stroked=f path="M10000,5000 R, L,5000, ,, 10000,5000 X E">
    <v:fill type=gradientradial method="none" focussize=0,1.5 color2="#0f0" colors=".33 #f00;.66 #ff0;" />
    <v:path gradientshapeok=t />
  </v:shape>
</v:group>
</body>
</html>

Look at arguments.  Hack at it.  I can explain the above VML if it helps.

SMIL:
While SMIL is really about time and vector animations, it obviously must support vectors, and is somewhat embraced by all browsers.
(OK, more like a peck on the cheek than a true embrace.)

I haven't a need for this, and it may or may not do the trick, but it is at least worthy of mention.

A note on my understanding of Raphael.
Raphael's cross browser color wheel uses SVG to do what should be done in Canvas.  This together with the attempt to build in the gradient into each line, and using rotation and positioning, makes for a heavy, inflexible experience.

This is not due to a flaw in Raphael, it has to do with generated code.  When using a generator, one must expect verbiage, as the methods are not designed for any one application.
But at least it works.

The technique used (which is deserving of another post) creates and crops a color square into a circle.

The cropping part proved quite interesting in Chrome / Safari.
Which was surprising, as canvas [used to create the square] has no fewer than fourteen clipping methods, aside for quite a few others that use CSS on the parent element.

What could go wrong?!

lighter, darker, copy, xor,

The actual color square uses pixel manipulation, which is applied to the canvas using putImageData().
For some reason (perhaps a reader can explain), this causes the square to always be labeled "destination", even when drawn after the 'cropping mask'. 
The cropping circle is always identified as the "source".

All but one of the 12 compositing methods crop away the destination and/or some of the source. 
The only one that use the source as a clipping mask [ie, draw a circle, it will remove anything below what you just drew] is "destination-in".
Which does not work in Safari / Chrome.

clip
OK, if I could use clip(). 
But for some reason - not sure why at all - that is not working either.

clear
Which leaves only clearRect(). 
Which is useless here, as clear removes the source, not the destination. Besides for the fact that it only does rectangles.

Alright, so canvas methods are out.  How about good old CSS:

border-radius on the canvas's parent.
This has a disadvantage that the radius must be set, as Webkit does not support percentage based radii.
I would live with that, if it worked.  It doesn't - border-radius does not crop contained canvas elements.
Which also means that putting it into other elements with a border radius will not help.

border-radius together with background canvas.
My secret weapon!
Webkit allows for canvas to be set as a background using "background-image:-webkit-gradient()".
As a background image (which actually uses the image buffer), it surely will crop....
It does!!!!

However, we get dunked by an unrelated bug.
Radial [not sure about liner] image masks may not be applied to elements with border radii.
Since I need that clipping mask, this technique is dead in the water.

CSS3 clip() attribute?
No brainer, right?
At the moment, webkit only supports clipping rectangles.

SVG Clipping:
Besides the irony of using SVG to clip Canvas, it involves embedding and more.
I haven't tried this yet, and hope I do not need to.

So what's left?
Going now to try creating a compund path in Canvas, which can be used to clip the difference.

Wish me luck!!

Nonetheless, it works. And it's short and simple.
Take it or leave it.

First, Firefox and Opera:

.rounded {
   border-radius:50%;
   -moz-border-radius:50%;
}

Easy. They both correctly handle a percentage based border radius, even if the element is an odd number of pixels tall.
Firefox incorrectly handles width percentages based on the height, but that doesn't matter to us when we have a square.

Now for Safari / Chrome:

Webkit has a border radius property, but it doesn't handle percentages. If we know the width of the element in advance, we can do the math ourselves. Otherwise we would rely on JavaScript to set it for us.

If the element is 100px tall:

.rounded {
   border-radius:50%;
   -moz-border-radius:50%;
   -webkit-border-radius:50px;
}

Great.

Now IE, that scourge.

There is absolutely no support for rounded corners in IE, and most of the early hacks relied on SVG - which was removed in IE version 7.
The following method uses the rotation function from this post to include a dozen extra elements, each rotated a little further.  Since their border is the color of the parent, it gives the impression of a rounded element.

Ugly, but shorter and less markup heavy than any other technique (short of making an image).

function round(obj, color){
   var height = obj.clientHeight,
      width = obj.clientWidth;
   for (var i=1; i<13; i++){
      var div = document.createElement('div');
      div.style.width = width;
      div.style.height = height;
      div.style.border = "solid 15px " + (color || obj.parentNode.style.backgroundColor);
      obj.appendChild(div);
      rotate(div, 7*i, 1);
   }
}

function rotate(obj, angle, centered){
   var rad = angle * Math.PI * 2 / 360,
      cos = Math.cos(rad),
      sin = Math.sin(rad),
      height = obj.clientHeight,
      width = obj.clientWidth;

   obj.style.filter = obj.style['-ms-filter'] = 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand",M11='+cos+',M12='+(-sin)+',M21='+sin+',M22='+cos+')';
   if (centered) {
      if (obj.style.position != 'relative' && obj.style.position != 'fixed') obj.style.position = 'absolute';
      obj.style.top += (height - obj.offsetHeight) / 2;
      obj.style.left += (width - obj.offsetWidth) / 2;
   }
}

round(document.getElementById('container'));

Great.

Actually, I'd optimize this a bit by making a class for all those 'rounding elements', and dropping the unneeded checks in the rotate function.
I't be nice to adjust the number of extra elements created - no more than two or three for very small circles, probably close to thirty for very large ones.

I'm open for ideas on how to make this better.

<img src="TowerOfPisa.jpg" class="rotate" id="tilted">

.rotate{

This addresses Opera 10.5+, Firefox 3.5+, Safari/Chrome 3.1+, IE6, IE7 & 8.

• The element is rotated around its center.
• The CSS takes one argument, how much the element should be rotated.
• In IE:
  
  1. That rotation argument can be 1 - 4, representing 90, 180, 270, and 360 degrees respectively.
  2. The rotation is applied via JavaScript. If JS is disabled, the element will not rotate.
  3. The element must have 'layout'. Giving it a width or height is enough. Or set 'zoom' to 1.

All browsers support a opaque to transparent gradient, through an "alpha channel" - a way to represent the transparency of any color. 

• rgba(0, 0, 0, 0)
• hsla(0, 0, 0, 0)
• transparent

About half a year ago they created a public repository wherein anyone can create an upload their own Mootools classes.
A few years late, but better late than never.
If just it work.

It doesn't work.  Getting our MooRTE class in was hours of labor, and updating it has proven impossible.
Since there was a serious bug in our initial commit, this is a major issue.
From our complaint in January:

The forge update button is still not working.
The MooRTE plugin now has nearly 150 downloads.
And every one of them is broken.

Shortly after committing we found a major issue - not sure how it passed through testing - and went to correct it.

Now, nearly a month later, with dozens of attempts to update it ignored, I still have the same buggy commit up there.

Unsurprisingly, this has been a negative experience with our users - I don't know how many we still have.

A bug report was filed on the github branch, the IRC channel was haunted, to no avail.

Please; The forge is supposed to help the community, I beseech, beg, implore, and request if anyone who can look into this issue can please, please look into it.

Sincerely, a poor, desperate, Mootools developer.

Mootools has what it takes to dominate their field.  If they would but realize that the community is important.
I understand that Mootools is volunteer work - it includes some of my own commits.
And I understand that the Forge is being handled by just one developer. 
But it is the job of the Mootools team to see that such issues are out of they way if they wish to be taken seriously.

In the Forge plugin page it says:

Never should a plugin rely on a 3rd party link to explain its behavior or functionality. 

We need this to ensure that if a website is removed or becomes inaccessible, people can still enjoy your plugins' functionality.

For now, I strongly recommend that anyone who submits a plugin to add contact links in their README.md, and that you keep as little as possible on the Forge. 
[You] need this to ensure that if ..or [when the Forge] ..becomes inaccessible, people can still enjoy your plugin's functionality.