ROUNDED MENU WITH CSS3 AND JQUERY

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Similar to the spinner demo button we use

 Enjoyed this post? Subscribe to our RSS feeds!

To make things easier, we created two functions, one for expanding an item and one for collapsing it. The expand function will make the icon rotate 4 times around itself (360 times 4 are 1440). We will also make the item expand by animating an increase in its width. Then, we let the content appear, first the whole div and then the paragraph element.

The collapse function will rotate the icon back, decrease the width of the item and make the content disappear.

JQUERY FANCY DRAGGABLE CAPTCHA

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

jQuery draggable captcha

<script type="text/javascript">
            (
            function($){

                $.fn.shuffle = function() {
                    return this.each(function(){
                        var items = $(this).children();

                        return (items.length)
                            ? $(this).html($.shuffle(items,$(this)))
                        : this;
                    });
                }

                $.fn.validate = function() {
                    var res = false;
                    this.each(function(){
                        var arr = $(this).children();
                        res =    ((arr[0].innerHTML=="A")&&
                            (arr[1].innerHTML=="B")&&
                            (arr[2].innerHTML=="C")&&
                            (arr[3].innerHTML=="D")&&
                            (arr[4].innerHTML=="E")&&
                            (arr[5].innerHTML=="F"));
                    });
                    return res;
                }

                $.shuffle = function(arr,obj) {
                    for(
                    var j, x, i = arr.length; i;
                    j = parseInt(Math.random() * i),
                    x = arr[--i], arr[i] = arr[j], arr[j] = x
                );
                    if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))
                    else return arr;
                }

            })(jQuery);

            $(function() {
                $("#sortable").sortable();
                $("#sortable").disableSelection();
                $('ul').shuffle();

                $("#formsubmit").click(function(){
                    ($('ul').validate()) ? alert("Yeah, you are a human!") : alert("No, you are not a human!");
                });
            });
        </script>

 …

SUPER AWESOME CSS3 BUTTONS

One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

The Objective

We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.
The button style

This is the default class that is applied to each button on our page. We can customise a button is by adding a chain of CSS classes, this way we can set the colour and size. You’ll see below that we have an overlay.png background image. This gives us the gradient effect if your still conscious about IE6 you’ll need to use a PNG transparency hack to make 24 bit PNG’s render correctly.

Another feature with CSS3 is RGBA.

This is the same as RGB but with an alpha layer allowing you to set the opacity of a colour. This allows us to easily change the background of our buttons containing div without us having to adjust the buttons style…

POSHY TIP ( TOOL TIP )

jQuery powered tooltips, for your site.

Poshy Tool Tips

I almost hear you asking – why another jQuery tooltip plugin? Well, I actually never planned creating this plugin until I reached the final stages of designing this website and decided to add some pretty tooltips. So I started looking for a tooltip plugin that allows easily creating stylish tooltips and also includes the most useful features for such a script. However, I wasn’t pleased with the results I found so I ended up writing a completely new plugin and am now making it available for all.

License

Like jQuery, Poshy Tip is dual licensed under the MIT and GPL licenses.

Download

Download link: http://vadikom.com/files/?file=poshytip/poshytip-1.0.zip

Git

The Poshy Tip source code is also available at GitHub:

git clone git://github.com/vadikom/poshytip.git

Support

Post your questions/suggestions in the support forums.…

SIMPLE MODAL WINDOW

In this tutorial, I’m going to share how to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to “modal” and grab the DIV #id defined in the href and displays it as a modal window. jQuery has made everything so simple, be sure to check out the demonstrations, examples I made.

Simple Modal Window

Author Kevin

Introduction

In this tutorial, I’m going to share how to create a simple modal window with jQuery. I like jQuery, it makes everything so simple and so easy. In case you don’t know what’s modal window. You can click here. That’s an example of a modal window.

In this website, I’m using facebox (inspiration from facebook). Others, such as lightbox, thickbox, multibox, litebox…… it’s too many of them and they all are having different features.

Right, let’s start, this example will show you how to create a modal window that will display the content of a DIV #ID.

My objectives are:

* Able to search the whole html document for A tag NAME=”modal” attribute, so when users click on it, it will display the content of DIV #ID in the HREF attribute in Modal Window.
* A mask that will fill the whole screen.
* Modal windows that is simple and easy to modify.

The finished product

Yes, that’s all you need to make a simple jquery modal window. In this tutorial, it shown you the concept of how to display DIV content inside a …

GMAIL GOOGLE MAIL

This is a quick coffee time tip for you guys that use Gmail. You may well know that this is dooable… you may not

Extend your Google Mail Account

Do you use your Google Mail for all of your website emails ? We do, and perhaps like us.. you just let your emails arrive from all over the internet to your generic email address. But there is a smarter way, and some code you may not be fully aware of.
This coffee time tit bit, may just be useful for you.

youremail@gmail.com

Could effectively become … youremail+sales@gmail.com or youremail+info@gmail.com In Fact you can pretty much have anything after the ‘+’ sign, apart from the @ symbol.

Controlling where my new aliases go to?

Quite easily you can use Google Email Filters for Gmail.

Using Filters

Gmail’s filters allow you to manage the flow of incoming messages. Using filters, you can automatically label, archive, delete, star, or forward your mail, even keep it out of Spam — all based on a combination of keywords, sender, recipients, and more.

To create a filter:

  1. Click Create a filter (next to the Search the Web button at the top of any Gmail page).
  2. Enter your filter criteria in the appropriate field(s).
  3. Click Test Search to see which messages currently in Gmail match your filter terms. You can update your criteria and run another test search, or click Next Step.
  4. Select one or more actions from the list. These actions will be applied to

JQUERY LENS FLARE

jQuery Lens Flare is a very striking effect, by Professor Cloud The effect works by distributing various flare images at proportional distances along a line projected from the Sun through the centre of the viewport and on to the opposing side. In the sunset demo, we deliberately cut-off the lens flare as the Sun moves out of shot.

Flare Images

All of the flare and Sun images are 8-bit (256 colour, palletised) PNGs with alpha. In most situations this is a good alternative to 32-bit PNGs as there is a significant size saving. Fine gradients can look a little banded, but this can be mitigated somewhat with dithering.

IE6 Issues

While the plugin code works perfectly well in IE6, the transparent PNG images do not. There are some work-arounds to enable PNG alpha support in IE6, but frankly, as this is just a cosmetic effect, I would simply not bother turning the effect on for IE6. In most applictions (excluding this page of course), the end user will be none the wiser.

In the space demo above, we have basic occlusion as you move the Sun behind the Earth. This actually works rather well, and the effect would be further improved if varying opacity could be applied correctly to images with alpha channels. This would allow us to fade in and out of the lens flare, rather than just on or off. Unfortunately, opacity only seems to work correctly with non-alpha images. You can also move the small star in …

JQUERY CLOUD ZOOM

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Standard Settings with Gallery

Hover over the large image to see the zoom working.
These are the ‘out of the box’ settings, with the big image appearing to the right of the small image.
The appearance of the smaller image, lens and zoom window can be altered with regular CSS.

Features

  1. Works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari).
  2. Easy integration with basic valid HTML.
  3. Small 6Kb (minified) script.
  4. Smooth zoom movement.
  5. Gallery mode.
  6. Tint, soft focus and inner zoom features.
  7. Degrades gracefully with Javascript turned off.
  8. Fully accessible with no CSS or text only browsers.
  9. It’s completely free.

Tints

Add a tint of any colour (including black or white) to the small image. The intensity of tint is fully customisable, shown here in red at 50%.

In this example, the movement smoothness is set to a higher value for a gentle drifting effect.

Inner Zoom

Zoom position can be inside the smaller image, useful if you would rather not obscure any other content.

Soft Focus

Apply a subtle soft-focus effect to the small image.

In this example, the zoom window position is specified as a div target which can be positioned anywhere. The movement smoothness is set to a lower value for a snappier feel.…

EMAIL OBFUSTICATOR

Email obfusticator, basically uses javascript to encode your email, such that spammers cannot harvest your email “easily” shall we say. Find out how it works

What is an obfusticator

Well basically it is a way of disguising the source code of text, making it visually appear how you want, but within the source code it is actually disguised, thus making spam bots unable “we hope” to extract your email.
Using javascript, you can quite easily mask your email address from spammers, within your source code.

Bugger that , here is an example

youremail@gmail.com
This is how your email usually appears both on your public webpage and within your source code, making spam harvesters and email bots able to extract your email addy, and send you such goodies as Male Hormone Enhancement Pills.

Using the Obfusticator

type your regular email address ” like above ” into the form field. Hit ENCODE and your disguised or “obfusticated” email appears in the text area.
Now just copy and paste that code into your website in place of your regular email.
So:
anyone@gmail.com
Becomes:

But Appears as:
anyone@gmail.com

Here is the code, feel free to use it and play with it to your hearts content.

Download:

Email Obfusticator (3)