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?

26 May 2011

HTML 5 Page Menu Navigation helper

Menu example

Click image to view Live Demo

Code:

The default code to show this menu is following:
$(document).ready(function() {
$.WwAdvMenu.Create({ location: "top", openDefault: true, innerHtml: TEST TEXT" });
});

Plugin options

Setting name	Description	Available values	Default value	Example
location	location of menu on the page	"top", "right", "bottom", "left"	"top"	$.WwAdvMenu.Create({ location: "bottom" ..
customOffset	Custom offset that will be set to menu if default location is wrong or doesn't fit your site	{ top: "1px", right: "1px", bottom: "1px", left:"1px" }	null	$.WwAdvMenu.Create({ customOffset: {top: 0, right: 15} ..
buttons	Array of buttons that will be shown on menu,	Read about creating buttons	null	$.WwAdvMenu.Create({ buttons: [ { text: 'message', click:function() { alert('execute custom code here'); } }, ..
innerHtml	HTML that will be shown instead of buttons	any html code	null	$.WwAdvMenu.Create({ innerHtml: "<span style='padding:20px; display:block;'>TEST TEXT</span>" ..
imagePath	Path of directory containing images	Virtual directory path	""	$.WwAdvMenu.Create({ imagePath: "../images/"...
dynamicContent	Variable that forces menu to create another container for dynamic html, must be set to true when displaying something inside menu	true/false	false	$.WwAdvMenu.Create({ dynamicContent: true...
maxHeight	Maximum height of inner menu container	size in pixels	460	$.WwAdvMenu.Create({ maxHeight: 500...
openDefault	Setting to open menu by default	true/false	false	$.WwAdvMenu.Create({ openDefault: true...

Callbacks

Event name	Description	Example
onShowMenu	Callback function that is called when inner menu is opened	$.WwAdvMenu.Create({ onShowMenu: function() { alert('opened'); } ..
onHideMenu	Callback function that is called when inner menu is closed	$.WwAdvMenu.Create({ onHideMenu: function() { alert('closed'); } ...

Public Methods

Method name	Description	Arguments	Example
Create	Method that creates menu	options - ww menu options	var opt = { location: "top", openDefault: true, innerHtml: TEST TEXT" }; $.WwAdvMenu.Create(opt);
HideMenuContent	Hide inner menu content	null	$.WwAdvMenu.HideMenuContent();
ToggleContent	Hides or displays inner menu content	show: true/false	$.WwAdvMenu.ToggleContent(false);
UpdateContent	Update inner content HTML (see last button in example)	HTML	$.WwAdvMenu.UpdateContent("<span style='padding:20px; display:block;'>Some loooong data here</span>");
Show	Show entire menu		$.WwAdvMenu.Show();
Hide	Hide entire menu		$.WwAdvMenu.Hide();

Buttons

Code:

Every single button is an object with inner options. The list of available options is following:

var button1 = { id:null, imagePath: null, text: 'msg', className:'', href:null, click:null, dataProvider: function(callback) {}, externalUrl:null };

Button Options

Options	Description	Available values	Default value	Example
id	Custom button id	Custom ID	null (will be auto generated)	var button1 = { id:"myid" }
imagePath	Image that will be displayed inside button	Image path	null	var button1 = { imagePath:"/images/1.jpg" }
text	Button's text, will be used if no image path is presented	text	""	var button1 = { text:"my button" }
className	Custom button class	class name	""	var button1 = { className:"myClass" }
href	Url for the button	url	null	var button1 = { url:"http://www.webworld-develop.blogspot.com/" }
click	Custom button click event	function	null	var button1 = { click: function(e) { alert('my button was clicked'); }
dataProvider	Custom function that returns HTML that will be displayed in inner menu container. (Third button in example). This function can load HTML dynamically and run callback with results.	function(callback){}	null	var button1 = { dataProvider: function(callback) { callback("Hmmm...<br />What can be here?<br /><strong>Maybe some long bold text?</strong>"); } }
externalUrl	Page url that will be loaded in an IFrame (see second button for details).	url	null	var button1 = { externalUrl: "http://www.webworld.lv/" }

Creating buttons

Code:

First you need to do is to create an array of buttons.

var myBtns = new Array();
myBtns.push({ text: 'button1', href:"http://www.webworld.lv" });
myBtns.push({ text: 'button2', href:"http://www.sobak.lv" });
myBtns.push({ text: 'button3', click:function() { alert('button 3 clicked'); } });
myBtns.push({ text: 'button4', externalUrl:"http://webworld-develop.blogspot.com/" });

Easier way to do this is following:

var myBtns = [{ text: 'button1', href:"http://www.webworld.lv" }, { text: 'button2', href:"http://www.sobak.lv" }];

Then pass created buttons as option when creating menu:

$.WwAdvMenu.Create({ buttons: myBtns });

Download

Get HTML 5 navigation plugin now!

See index.html for more details.

Like this article?

10 May 2011

Cool HTML 5 styled buttons (shadow and rounded corners) with animation

!!! Note: This works only in HTML 5 compatible browsers!!!

Examples

Click image to view Live Demo

Plugin settings

Setting name	Description	Available values	Default value	Example <selector> ($(".wwbuttons>a")) + code
animationSpeed	Speed of buttons hover animation (same setting as jQuery)	"fast", "normal", "slow", 100, ...	"fast"	.wwbutton({ animationSpeed: "slow" });
animationSize	Number of pixels for button animation	any number (including negative)	12	.wwbutton({ animationSize: 15 });
Opacity settings
normal	Opacity level for normal button state	value from 0.0 to 1.0	0.8	.wwbutton({ opacity: { normal:1, hover: 0.45, disabled: 0.05 }});
hover	Opacity level for hover button state		1
disabled	Opacity level for disabled buttons		0.2

Events

Event name	Description	Example <selector> ($(".wwbuttons>a")) + code
over	Callback function that is called after mouseover animation stops	.wwbutton({ over: function(){ alert('mouse over'); }});
out	Callback function that is called after mouseout animation stops	.wwbutton({ out: function(){ alert('mouse out'); }});
click	Custom click event	.wwbutton({ click: function(){ alert('button clicked'); }});

Methods

Method name	Description	Example <selector> ($(".wwbuttons>a")) + code
toggle	Enables/Disables button. Pass true as second argument to enable or false to disable.	.wwbutton('toggle', true);

Download

Get buttons plugin now!

See Demo.html for more details.

Like this article?

21 April 2011

Small and quick Tri-state checkbox jquery plugin.

Demo
How to use it?
Options
Download

Demo

Click image to view Live Demo

Plugin code and usage

How to use:
1. Download plugin code.
2. Add jQuery reference.
3. Add style reference "tri-state-checkbox.css" to your <head> section.
4. Add plugin file.

You will get something like this in result:

<head>
   ...
   <link rel="stylesheet" type="text/css" href="tri-state-checkbox.css" />
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" ></script>
   <script type="text/javascript" src="tristatecheck.min.js" ></script>
   ...
</head>

5. Add a function that initializes checkboxes.

For example:

   <script type="text/javascript">
   $(document).ready(function(){
   $(".mainCheckbox").each(function(){
   $(this).tristate({
   children: $(this).parent().find("ul>li>input[type='checkbox']"),
   classes: { checkbox: "customcheck", checked: "customcheckfull", partial: "customcheckpartial", unchecked: "customchecknone" }});
   });
   });
   </script>

Options:
This is very simple plugin so it has only 2 options:

classes

checkbox	Main css class for new elements that will replace checkbox.
checked	Css class for checked state.
partial	Css class for partially checked state.
unchecked	Css class for unchecked state.

children

jQuery selector for childrent (level 2) checkboxes.

You can see how to use them in example above.

Download:
Download

Like this article?

11 February 2011

Best tools that can minify your JavaScript

Why do I need to minify JavaScripts?

Millions of websites have implemented a lot of JavaScript functionality nowadays. It's used almost everywhere: switching tabs, adding cool effects, drag-drop functionality and etc. JQuery JavaScript library is very popular and it's popularity growth every day because it's small, fast and has all basic methods, but still it's not enough to completely cover all required functionality for your custom website (blog, portal, etc.). That forces you to create something new. You will see how the size of your jQuery plugin or simple JavaScript increases as long as you implement new functions, that will increase this script download time (as JavaScript is Client-side, but everyone already know about this ;)). Let's minify your plugin or script to avoid this!

What tool can be used to minify my JavaScript or jQuery plugin?

There are a lot of tools that can be used to minify javascript, but I can recommend you to see following items:

Dean Edward's Packer
Why?
Because it allows you to minify online and also available as .NET, PHP and perl applications and it's easy to use.
Closure Compiler
Why?
Because it provides warnings for illegal JavaScript and warnings for potentially dangerous operations, has good documentation, Java application that you can run from the command line.
Microsoft Ajax Minifier
Why?
Because it has good documentation, can minify Cascading Style Sheet files (CSS), people who created this tool have huge experience of working with javascript in their library, so they must know what to do to make it smaller and faster.

What result will I get after minifying?

Good question! Let's see what will happen to following code after minifying with Dean Edward's packer:
Original:

function MyMethod(parameter1, parameter2, parameter3)
{
   var myInternalVariable = 'test';
   var myInternalVariable2 = 'code';
   var result = "";
   if (parameter1)
   {
   result = parameter2 + " " + myInternalVariable;
   }
   else if (parameter3)
   {
   result = parameter2 + " " + myInternalVariable2;
   }
   return result;
}

Packed (minified):

function MyMethod(a,b,c){var d='test';var e='code';var f="";if(a){f=b+" "+d}else if(c){f=b+" "+e}return f}

Like this article?