Your Ad Here
Showing posts with label jQuery plugins. Show all posts
Showing posts with label jQuery plugins. Show all posts

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?





See more in , , , , , , , , ,

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?







See more in , , , , , , , , ,

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?
See more in , , ,

27 December 2010

QR Code generator JQuery plugin

Hi everyone!


Google has cool charts API that allows you to easy have chart on your page, so I decided to create a simple JQuery plugin to work with one of them :) I have HTC phone and sometimes I'm toooooooooooooo lazy to type in an address (with a lot of slashes, dashes, dots and other parameters) which I see on my PC monitor, so QR Code is really good thing that allows to simply generate an image and open this page on my mobile.

Now the code:
1. You may need is an HTML element on page which will contain generated image, something like:
<span class="qrContainer"></span>

2. JQuery plugin can look like this:
<script type="text/javascript">
        (function()
        {
            $.fn.QRCode = function(url, options)
            {
                var settings =
                {
                    width: 200,
                    height: 200
                };

                if (options) { $.extend(settings, options); }
               
                this.each(function()
                {
                    $(this).append("<img src='https://chart.googleapis.com/chart?cht=qr&chs=" +
                        settings.width + "x" + settings.height + "&chl=" + escape(url) + "' alt='QR Code' />");
                });
            }
        })(jQuery);
</script>
Note that this plugin has two options (it's enough for my personal use) - width and height. They can be passed as second parameter. 

Google Chart API has some limitations for screen size, but I think most of developers won't create 800x600 QR Code.

3. Some place to call this script (no matter click, document ready or something else, it depends only on your custom logic):
<script type="text/javascript">
         $(document).ready(function()
        {
            $(".qrContainer").QRCode("http://webworld-develop.blogspot.com", {width:400, height:400 });
        });
</script>




Demo

Here you can find an example of this plugin usage.


Download

Download now! (Right click, Save As...)



Like this article?





See more in , ,
Subscribe to: Posts (Atom)