Your Ad Here

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

Contents

  1. How to use
  2. Settings description
  3. Download

How to use

  1. Add reference to jQuery library to your page (I'm using this one).

  2. 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.

  3. Add reference to wwselect.min.js (<script type="text/javascript" src="wwselect.min.js"></script>).

  4. 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:
  1. Demo Page
  2. How to use
  3. Settings description
  4. Updating styles and default settings
  5. Download

How to use

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

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
Back to top

Updating styles and default settings


Styles

Stylesheet consists of two parts:
  1. 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).

  2. 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.
Back to top


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" });
});

Back to top

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...
Back to top

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'); } ...
Back to top

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();



Back to top


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 });

Back to top


Download


Get HTML 5 navigation plugin now!

See index.html for more details.

Back to top


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

Back to top

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
Back to top

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'); }});
Back to top


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);
Back to top


Download


Get buttons plugin now!

See Demo.html for more details.

Back to top


Like this article?





21 April 2011

Small and quick Tri-state checkbox jquery plugin.

Contents

  1. Demo
  2. How to use it?
  3. Options
  4. 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:
  1. 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.

  2. 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.

  3. 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?