2 January 2013

jQuery tools overlay with queue integration

Few days back I had one problem that is related to standard jquery .overlay() method and multiple messages on the page.

Say you have two different messages that you want to display in an overlay, and call multiple methods during page load (sometimes it's hard to tell how many messages you will get as they can depend on site mode, user status and etc.). Once you will call $(...).overlay() it will try to open both messages and can break background (it just dissapears) can show messages that will overlap each other and that sucks! No matter what is behind the page and how fast it works if UI sucks...

To avoid this I simple extension for standard $.overlay() method that will just enqueue messages and will show them in order you loaded.

View Demo page

Download Now

It also has a support to display how many messages are in the queue right now, to use it bind this event to body:

$("body").bind("overlayCount", function(event, count)
{
...
}

You can use it for tips on your web page and show multiple images for user as a guide on how to do something.
It won't affect initial .overlay behavior, so enyoj!

27 January 2012

Hidden skype emotions (smileys) in version 5.5

Let's forget about something useful for a while and do a small research in Skype :)

You can find huge number of people who use Skype as a communication software because it has free internet calls, cheap calls to phones, video chats and a lot of other nice features.
Stop!
Enough of UNpaid advertising!!! :)

Let's go deeper into the part with emotions.
Every user has an access to this list:

One of my friends provided me with a full list of emotions that is available in skype version 5.5.0.124.

Let's save your time and go directly to hidden part:

(brokenheart)
(bug)
(call)
(smoke)
(mooning)
(drunk)
(e)
(phone)

(finger)
(swear)
(wtf)
(movie)
(talk)
(time)
(zilmer)
(wfh)

(hrv)
(fubar)
(skype)
(toivo)
(hollest)
(rock)
(punch)
(headbang)

P.S.: Almost every emotion has an alternating text, for example: (smoke) and (ci) will give you same image, but I think you are good with single description.

P.P.S.: (swear) and (wtf) looks same in this screenshot, but they have different behavior in real life.

Thanks for reading,
WW Admin.

Like this article?

12 November 2011

Small blog cleanup...

Hi everyone,

While I try to create something useful for my beloved visitors and add new plugins code to my blog, first page becomes slow and overloaded with different things.
That's why I have to do a small cleanup on the main page. I'm going to move all existing demos to separate pages and replace them with links/images on the existing pages.
Forgive me if my actions cause you any inconvenience, this is my first (and only for this moment) blog, so I'm just learning how to make it more user friendly.

Kind regards,
Your WebWorld-develop author.

11 November 2011

Cool HTML 5 select with jquery and css styles (rounded corners and gradient)

Demo

Click image to view Live Demo

How to use

Add reference to jQuery library to your page (I'm using this one).
Add reference to wwselect.css to <head> section (<link rel="Stylesheet" type="text/css" href="wwselect.css" />).
Note that css requires 2 images for arrows that can be found in archive. Don't forget to update urls in css if you move them to another directory.
Add reference to wwselect.min.js (<script type="text/javascript" src="wwselect.min.js"></script>).
Init plugin code.
$(window).load(function(){ {$("select").wwselect(); }); - to update all selects on the page
$(window).load(function(){ {$("#example2").wwselect(options); }); - to update all single select with some options
Take a look at demo page source for more details.

Settings description

Setting name	Description	Example
width	Indicates maximum width of generated select. When this value is exceeded option text will be minified.	Any number greater then 0. $(<selector>).wwselect({ width: 100 });
height	Indicates maximum height of generated list of options. When this value is exceeded vertical scroll will appear.	Any number greater then 0. $(<selector>).wwselect({ height: 100 });

Download

Download page

See demo.html for more details.

!!! Note: Some browsers may have invalid gradient and rounded corners handling!!!

Like this article?

20 October 2011

Stylish page background using google fonts.

Hi everyone, here you can see a demo page of my new plugin. The idea is to create the background of the page using some words and Google's web fonts.

Contents:

How to use

Add reference to jQuery library to your page (I'm using this one).
Add reference to wwback.css to <head> section (<link rel="Stylesheet" type="text/css" href="wwback.css" />).
Add reference to wwback.min.js (<script type="text/javascript" src="wwback.min.js"></script>).
Init plugin code, something like: $(document).ready(function() { $.WWBack.DrawBack(); });

Settings description

Setting name	Description	Example
Text	Semicolon separated text that will we the basic for background creation.	Lorem ipsum dolor sit amet;consectetur adipiscing elit;Nulla eget est dolor;eu tristique purus;Donec rhoncus leo eget
Color	Text color	"#F8CC70", "red", "blue", "rgb(100,200,59)"
BackColor	Background color	"#F6E19B", "red", "blue", "rgb(100,200,59)"
BackElementID	To avoid any problem with existing IDs on the page you can update default element id.	"myNewIDHere"
NumberOfVariations	wwback.css has some classes with fonts and other settings described there. If you with to add/remove classes you need to set this variable to new count (ofcourse if you wish to see them).	1,2,3...
ClassNamePrefix	if you don't want to use wwback.css or you have your classes specified already, you can tell the plugin what will be your class name prefix. Just see wwback.css for more details of structure.	"mySuperClassNameHere"
FontSizeRange	An array of font-sizes you want to fill your page with. One note, small sizes work longer.	[20,30,50]
UseProgresiveText	If it is set to false, then random text will be displayed (coool one :)) on the page, otherwise the text will grow depending on next setting direction :)	true/false
ProgresiveTextDirection	Direction can be up or down.	up/down

Updating styles and default settings

Styles

Stylesheet consists of two parts:

Google font styles import

You can see Google web fonts to get more fonts. Every font has "quick use" button.
On this page in third section (Add this code to your website) click on "@import" tab to get link for css.
Next step is to get "font-family" name from next section (Integrate the fonts into your CSS).
Fonts descriptions

".wwBackStyle" is a main class which is applied to all text elements of background.

All other classes are indicating different font families. Names of this classes are created using main class as prefix and number (from 1 to 5).

NOTE: Don't forget to update NumberOfVariations setting when you add/remove font-families.

Check out wwback.css for more details.

Default settings

To update default settings open "wwback.min.js" and update required settings in _defaults.

Download

Download page

See demo.html for more details.

Back to top

Like this article?