June 9, 201016 yr Hello friends, I was just wondering how can i create the gap between the jdock icons likethis here is the css code html, body {width:100%; height:100%; margin:0; padding:0; border:0 none;} /*give menu5 a black background...*/ body {font-family:arial; font-size:14px; background:#ffffff url(black000.gif) repeat-y;} h2 {font-size:20px;} h3 {font-size:16px;} a, a:link, a:visited, a:hover, a:active {color:#0000ff; text-decoration:none;} #page {height:100%;} #eop {position:absolute; top:610px; left:0; width:100%; font-size:11px; font-style:italic; overflow:hidden;} #eop label {position:relative; float:left;} #pagetitle {margin-top:20px;} #showClicked {position:absolute; top:190px; left:622px; z-index:1; display:none; border:1px solid #cc0000; color:#333333; padding:6px 10px; text-align:center; background-color:#ffcccc; font-style:italic;} /*I am hiding all demo menus...*/ .demo {display:none;} /*...but I could have left them visible and set all image sizes to a standard 48px...*/ .demo img {border:0 none; padding:0; width:48px; height:48px; vertical-align:top;} .demo img {padding-right:5px;} /*page switching buttons...*/ #buttons {padding-top:8px; padding-left:134px;} #pagebuttons ul {list-style-type:none; padding:0; margin:0;} #pagebuttons li {float:left; padding:0 0 0 6px; margin:0;} #pagebuttons li a {display:block; border:1px solid #808080; font-size:12px; padding:1px 6px; color:#000000; background-color:#f0f0f0;} #pagebuttons li a:hover {color:#ffffff; background-color:#666666;} #pagebuttons li a.currentpage {color:#999999; cursor:default;} #pagebuttons li a.currentpage:hover {color:#999999; background-color:#f0f0f0;} /*documentation links/buttons...*/ #docbuttons {clear:left; padding-top:5px;} #docbuttons ul {list-style-type:none; padding:0; margin:0;} #docbuttons li {float:left; padding:0 0 0 6px; margin:0px;} #docbuttons li a {display:block; border:1px solid #808080; font-size:12px; padding:1px 6px;} #docbuttons li a.doclink:hover {color:#ffffff; background-color:#9999ff;} #docbuttons li a.docdisabled {color:#999999; background-color:#f0f0f0; text-decoration:line-through; cursor:default;} /*download link...*/ a#goDownload {display:block; float:left; font-size:12px; border:1px solid #ffffff; padding:1px 6px; margin-left:12px;} a#goDownload:hover {border-color:#0000ff;} /*documentation content styling...*/ div.docpage {color:#333333; font-family:arial; font-size:12px; width:100%;} .SpookPreAppend div.docpage {width:900px;} div.docpagepad {padding:0px 20px 10px 10px;} div.docpage pre {padding:4px; background-color:#ffffff; border:1px solid #999999; font-family:Courier New, Courier, monospace; font-size:11px;} #dockexamples.docpage {padding-top:10px;} #dockexamples .docexample {float:left; margin-right:10px; margin-bottom:10px; width:274px; height:60px;} #dockexamples a {display:block; font-size:11px; color:#808080; background-color:#ffffff; height:100%;} #dockexamples b {display:block; height:100%; border:1px solid #808080; font-weight:normal; font-style:italic; cursor:pointer;} #dockexamples a .examplesTitle {color:#000000; font-style:normal;} #dockexamples a:hover {background-color:#eeeeee; color:#6666cc;} #dockexamples a:hover .examplesTitle {color:#000066;} .floatSnapshot img {position:absolute; display:none; border:0 none;} /*general...*/ .hideThis {display:none;} .clearL {clear:left; padding-top:1px;} .info {margin-left:100px;} .inset200 {padding-left:200px;} .changesList, .optionsList, .issuesList, .faqsList, .faqsList ul {padding-left:8px; margin-left:8px;} .optionsList li {padding-bottom:9px;} .faqsList li {padding-bottom:9px;} .faqsList ul li {padding-bottom:2px;} .faqsq {font-weight:bold; background:#ffffff url(arrows00.jpg) no-repeat right 1px; padding-right:20px; cursor:pointer;} .faqsqall {float:right; z-index:10; text-align:left; font-size:12px; font-weight:bold; background:#ffffff url(arrows00.jpg) no-repeat right 1px;; width:50px; cursor:pointer;} .grey {color:#999999;} .dgrey {color:#666666;} .red {color:#ff0000;} .small {font-size:12px;} .transformAdd {color:#0000ff;} .transformRemove {color:#ff0000;} /************************ ** JQDOCK : DEMO CSS ** ************************/ /*place the various demo menus around the screen (note: 1, 3, 4 and 7 are horizontal; 2, 5 and 6 are vertical)... *also note that the relative menu (#menu1) is positioned (z-indexed) below any vertical menus so as not to interfere...*/ #menu1 {position:relative; padding-top:90px; padding-left:130px; z-index:10;} /*...menu2 needs enough width to show the shrunken images, because it's positioned fully to the right...*/ #menu2 {position:absolute; top:0; right:0; width:48px; z-index:15;} #menu3 {position:absolute; top:346px; left:130px;} #menu4 {position:absolute; top:510px; left:130px;} #menu5 {position:absolute; top:0; left:0; z-index:15;} /*...menu6 has zero width, which might affect its position in different browsers depending on doctype...*/ #menu6 {position:absolute; top:190px; right:200px; width:0; z-index:15;} #menu7 {position:absolute; top:140px; left:580px;} /*if you really, really need to space the images out you can pad them...*/ #menu4 img {padding:0 4px;} /*dock styling...*/ /*docks (div.jqDock) get absolute position, zero padding and margin, and visible overflow; width and height are calculated*/ /*...set a default dock background colour...*/ div.jqDock {background-color:transparent;} /*...override background colour and/or border for specific demo docks...*/ #menu2 div.jqDockWrap {background-color:#999999;} #menu3 div.jqDock {border:2px solid #ff9900;} #menu4 div.jqDock {background-color:#000000; border:1px solid #000000;padding-right:15px;width:400px;} #menu5 div.jqDock {background-color:#000000;} #menu6 div.jqDock {background-color:#e0e0ff; border:3px solid #0000ff;} #menu7 div.jqDock {border:1px solid #0000cc;} /*label styling...*/ /*labels (div.jqDockLabel) only get absolute position and zero margin (with top and left being calculated); the rest is up to you*/ /*...let's set some defaults...*/ div.jqDockLabel {border:0 none; padding:0 4px; font-weight:bold; font-size:14px; font-style:italic; white-space:nowrap; color:#000000; background-color:transparent;} div.jqDockLabelLink {cursor:pointer;} div.jqDockLabelImage {cursor:default;} /*...and some overrides...*/ /*...give the right-hand vertical a smaller, non-bold, deep red label, on a white background...*/ #menu2 div.jqDockLabel {color:#cc0000; background-color:#ffffff; padding:1px; font-size:12px; font-weight:normal;} /*...and the left-hand vertical (with the black background) a white label...*/ #menu5 div.jqDockLabel {color:#ffffff; padding:0 1px;} here is the linkto my horizontal menu
June 9, 201016 yr Change these values #menu4 div.jqDock {background-color:#000000; border:1px solid #000000; padding-right:15px; width:400px;} Should work.
June 9, 201016 yr Author Change these values #menu4 div.jqDock {background-color:#000000; border:1px solid #000000; padding-right:15px; width:400px;} Should work. hello i changed to this #menu4 div.jqDock {background-color:#000000; border:1px solid #000000;padding-right:35px;width:800px;} but nothing happened
June 9, 201016 yr Can you post the html from the page. The script is inserting a lot of dynamic css, the original styles i changed didn't actually appear in your css, so i tried to substitute them. I'll check your jquery though, in case theirs values hidden their somewhere Edit: Try this instead #menu4 img {padding:0 20px;}
June 9, 201016 yr Author here is the html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>jqDock : a jQuery plugin</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8;charset=utf-8' /> <meta name='title' content='jqDock : a jQuery plugin' /> <meta name='description' content='jqDock, a plugin for jQuery. Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover' /> <meta name='keywords' content='jqdock, jquery, dock, menu, horizontal, vertical' /> <meta name='author' content='Roger Barrett' /> <meta name='language' content='en-UK' /> <meta name='distribution' content='global' /> <meta name='rating' content='General' /> <meta name='robots' content='index,follow,all' /> <link rel='stylesheet' type='text/css' href='b_files/style000.css' /> <link rel='stylesheet' type='text/css' href='b_files/spook000.css' /> <link rel='stylesheet' type='text/css' href='b_files/spook001.css' /> <script type='text/javascript' src='b_files/jquery-1.js'></script> <script type='text/javascript' src='b_files/spook000.js'></script> <script type='text/javascript' src='b_files/jquery00.js'></script> <script type='text/javascript' src='b_files/demo0000.js'></script> <script type='text/javascript'> //<![CDATA[ jQuery(function($){ /********************* ** JQDOCK SETUPS... ** *********************/ //your links would have proper href urls in them; mine don't, so I'm simply going to intercept //all clicks on menu options (links and images) and put up a small message... $('div.demo').children().click(function(ev){ var wrapper = $(this).parent().parent() , label = wrapper.find('.jqDockLabel').text() || '' , t = [ 'you clicked on' , '#' + wrapper.closest('.jqDocked').attr('id') + ', option ' + (wrapper.index()+1) ]; if(label){ t.push('"' + label + '"'); } $('#showClicked').stop().hide().css({opacity:1}).html(t.join('<br />')).show().fadeOut(5000); this.blur(); return false; }); var changeSource = function(i){ //use the 'alt' attribute if present, else construct a PNG path from the 'src'... return (this.alt) ? false : this.src.replace(/(jpg|gif)$/,'png'); } //options are only set/shown where they differ from the defaults... , demoOpts = [ // #menu1 : horizontal, labelled, with expanding image set by function... {labels:true, source:changeSource} // #menu2 : vertical, reduced distance, centered labels, 4 second inactivity... , {align:'right', distance:60, labels:'mc', inactivity:4000} // #menu3 : horizontal, reduced distance, labelled... , {align:'top', distance:60, labels:true} // #menu4 : horizontal, linear coefficient, labelled at bottom-right... , {align:'middle', size:30, distance:80} // #menu5 : vertical, labelled... , {align:'left', labels:true} // #menu6 : vertical, bigger 'at rest' size, increased distance... , {align:'center', size:60, distance:80} // #menu7 : horizontal, smaller 'at rest' size, reduced distance, fading in over 1 second, with expanding image set by function... , {size:36, distance:54, fadeIn:1000, source:changeSource} ]; //apply jqDock to each of the demo menus, setting the options (as specified above) for each one... $('div.demo').each(function(i){ $(this).jqDock(demoOpts[i]); }); }); //]]> </script> </head> <body> <div id='page'> <div id='eop'> <div class='inset200 grey'> <div><label>jQuery Version :</label><div id='eop_jqv' class='info'></div></div> <div><label>... Browser Info :</label><div id='eop_jqbi' class='info'></div></div> <div><label>Box Model :</label><div id='eop_box' class='info'></div></div> <div><label>User Agent :</label><div id='eop_ua' class='info'></div></div> <div>[End of Demo Page]</div> </div> </div> <div id='showClicked'></div> <div id='buttons'> <div id='pagebuttons'> <ul> <li><a class='pagelink' title='XHTML 1.0 Transitional' href='http://www.wizzud.com/jqDock/index.php?dt=0'>XHTML 1.0 Transitional</a></li> <li><a class='pagelink' title='XHTML 1.0 Strict' href='http://www.wizzud.com/jqDock/index.php?dt=1'>XHTML 1.0 Strict</a></li> <li><a class='pagelink' title='HTML 5' href='http://www.wizzud.com/jqDock/index.php?dt=2'>HTML 5</a></li> <li><a class='pagelink' title='HTML 4.01 Transitional' href='http://www.wizzud.com/jqDock/index.php?dt=3'>HTML 4.01 Transitional</a></li> <li><a class='pagelink' title='HTML 4.01 Strict' href='http://www.wizzud.com/jqDock/index.php?dt=4'>HTML 4.01 Strict</a></li> <li><a class='pagelink' title='None' href='http://www.wizzud.com/jqDock/index.php?dt=5'>None</a></li> </ul> </div> <div class='clearL'></div> <div id='docbuttons'> <ul><li><a class='doclink' title='Introduction, Change Log, Credits' href=''>Introduction</a></li> <li><a class='doclink' title='Usage' href=''>Usage</a></li> <li><a class='doclink' title='jqDock() Options' href=''>Options</a></li> <li><a class='doclink' title='jqDock() Styling' href=''>Styling</a></li> <li><a class='doclink' title='jqDock : Demo CSS' href='http://www.wizzud.com/jqDock/demo/style.css.php'>Demo CSS</a></li> <li><a class='doclink' title='FAQs' href=''>FAQs</a></li> <li><a class='doclink' title='Examples' href=''>Examples</a></li> </ul> <a id='goDownload' href='http://www.wizzud.com/component/option,com_remository/Itemid,27/func,fileinfo/filecatid,64/parent,category/' title='Go to Download page'>Download Script...</a> </div> <div class='clearL'></div> </div> <h2 id='pagetitle' class='inset200'>jqDock<span id='jqDockVersion'></span> ... a jQuery plugin</h2> <h3 class='inset200 grey'>DOCTYPE : XHTML 1.0 Transitional</h3> <div class='inset200'><em>Transform a set of images into a Mac-like Dock menu, <br />horizontal or vertical, with icons that expand on rollover!</em></div> <div class='inset200 grey small'>(Minimum requirement : jQuery v1.2.3)</div> <!-- menu1 can use jpg images that have a white background --> <div id='menu1' class='demo'> <a href='' title='Clock'> <img src='b_files/Clock000.jpg' alt='' /> </a> <img src='b_files/Connect0.jpg' alt='' title='Connect' /> <a href='http://www.wizzud.com/jqDock/index.php?dt=1' title='Music'> <img src='b_files/Music000.jpg' alt='' /> </a> <img src='b_files/Pictures.jpg' alt='' title='Pictures' /> <a href='' title='Search'> <img src='b_files/Search00.jpg' alt='' /> </a> <a href='' title='System'> <img src='b_files/System00.jpg' alt='' /> </a> <img src='b_files/Trash000.jpg' alt='' title='Trash' /> </div> <div id='menu2' class='demo'> <a href='' title='Camera'> <img src='b_files/Camera00.png' alt='' /> </a> <img src='b_files/Floppy00.png' alt='Floppy' title='Floppy' /> <a href='' title='iMac'> <img src='b_files/iMac0000.png' alt='' /> </a> <img src='b_files/iPod0000.png' alt='iPod' title='iPod' /> <a href='' title='Notebook'> <img src='b_files/Notebook.png' alt='' /> </a> <a href='' title='Printer'> <img src='b_files/Printer0.png' alt='' /> </a> <img src='b_files/Speakerb.png' alt='Speakerbox' title='Speakerbox' /> </div> <div id='menu3' class='demo'> <a href='' title='Address Book'> <img src='b_files/Addressb.png' alt='' /> </a> <img src='b_files/DVD-Play.png' alt='images/m3/DVD-Player.png' title='DVD Player' /> <a href='' title='eMail'> <img src='b_files/eMail000.png' alt='images/m3/eMail.png' /> </a> <img src='b_files/Instant_.png' alt='images/m3/Instant_Messaging.png' title='Instant Messaging' /> <a href='' title='QuickTime'> <img src='b_files/QuickTim.png' alt='images/m3/QuickTime.png' /> </a> <a href='' title='Safari'> <img src='b_files/Safari00.png' alt='images/m3/Safari.png' /> </a> <img src='b_files/Terminal.png' alt='Terminal' title='Terminal' /> </div> <div id='menu4' class='demo'> <a href='' title='Forbidden'> <img src='b_files/Forbidde.png' alt='' /> </a> <img src='b_files/Games000.png' alt='Games' title='Games' /> <a href='' title='Library'> <img src='b_files/Library0.png' alt='' /> </a> <img src='b_files/Private0.png' alt='Private' title='Private' /> <a href='' title='Records'> <img src='b_files/Records0.png' alt='' /> </a> <a href='' title='Stuff'> <img src='b_files/Stuff000.png' alt='' /> </a> <img src='b_files/Windows0.png' alt='Windows' title='Windows' /> </div> <!-- menu5 can use png32 images that have a black background --> <div id='menu5' class='demo'> <a href='' title='Chat'> <img src='b_files/128_Chat.png' alt='' /> </a> <img src='b_files/128_Down.png' alt='Downloads' title='Downloads' /> <a href='' title='Favourites'> <img src='b_files/128_Favo.png' alt='' /> </a> <img src='b_files/128_MyMu.png' alt='My Music' title='My Music' /> <a href='' title='My Videos'> <img src='b_files/128_MyVi.png' alt='' /> </a> <a href='' title='System'> <img src='b_files/128_Syst.png' alt='' /> </a> <img src='b_files/128_WebF.png' alt='Web' title='Web' /> </div> <div id='menu6' class='demo'> <a href='' title='Doc'> <img src='b_files/doc00000.png' alt='' /> </a> <img src='b_files/htm00000.png' alt='Htm' title='Htm' /> <img src='b_files/mp300000.png' alt='MP3' title='MP3' /> <a href='' title='PDF'> <img src='b_files/pdf00000.png' alt='' /> </a> <a href='' title='SWF'> <img src='b_files/swf00000.png' alt='' /> </a> </div> <div id='menu7' class='demo'> <img src='b_files/a0000000.gif' alt='images/m7/a.png' title='Kayaking' /> <img src='b_files/b0000000.gif' alt='' title='Sailboarding' /> <img src='b_files/c0000000.gif' alt='images/m7/c.png' title='Parachuting' /> <img src='b_files/d0000000.gif' alt='' title='Skiing' /> </div> <div class='hideThis'> <div id='dockintro' class='docpage'><div class='docpagepad'> <h2>jqDock</h2> <h3>A jQuery Plugin</h3> <p>The Dock - as anyone familiar with a Mac will know - is a set of iconic images that expand when rolled over with the cursor, and usually perform some action when clicked. This plugin mimics that behaviour by transforming a contiguous set of HTML images into an expanding Dock, vertical or horizontal, with or without labels.</p> <div style='text-align:center;'> <img style='float:right;padding-left:20px;' src='images/intro2.jpg' alt='Example of a vertical Dock' title='Example of a vertical Dock' /> <img src='images/intro1.jpg' alt='Example of a horizontal Dock' title='Example of a horizontal Dock' /> </div> <div> <p>Basically, all the Dock does is expand a reduced size image towards its full size when the cursor is on or near it. You can specify a vertical or horizontal orientation for the Dock, and select the direction in which the image should expand and whether to show labels or not. The styling and positioning of the Dock is (almost) entirely down to you.</p> <p>You can use 2 different images for clarity, one for the minimised 'at rest' state, and one for performing the enlargement to its full size. Alternatively, you can just use the one larger image as long as you are happy with its definition when reduced by the browser.</p> <p>There is no restriction on the type of image that can be used, but obviously if you are applying any styling to your Dock that makes it stand out against the background (such as a border or background colour), then a transparent GIF or PNG (8-bit for IE6!) may be preferable to an image that displays with an opaque background. The images can be enclosed within links, or not, depending on how you wish to control your navigation or application. The only requirement is that the parent container, probably a DIV, holds only images and/or anchors that enclose an image.</p> <p>You may need to ensure that the placement of your menu allows for expansion, either horizontally or vertically depending on the assigned alignment. The Dock will extend both ends of its major axis as the images are rolled over, as well as enlarging the relevant images themselves, and you want to avoid having it disappear off screen, or under other elements, if you can help it. The Dock will always do its very best to position itself centrally (along its major axis) within what it thinks is the maximum space required for any expansion.</p> <p>The Dock uses the document's original HTML, in other words it does not create clones and append them to the end of the document. This means that the container element to which you apply jqDock() is what controls the position of the Dock, and what elements the Dock can appear on top of. Although absolute positioning is used, and a few wrapper elements are added below the container element, <em>any</em> other elements in your document may be styled in such a manner as to obscure all or part of the Dock. It is therefore recommended that the container element be placed or positioned with care within your document such that the Dock will not appear underneath any other elements on the page.</p> <h3>Change Log</h3> <ul class='changesList'> <li><strong>v1.4</strong> <ul> <li>bugfix : in IE8, non-statically positioned child elements do not inherit opacity, so fadeIn did not work correctly</li> <li>new option, fadeLayer (default ''), allows the fade-in to be switched from the original menu element down to either the div.jqDock or div.jqDockWrap layer</li> <li>documentation updated, and 3 more single-menu examples added (for fading menus in)</li> </ul> </li> <li><strong>v1.3</strong> <ul> <li>default size increased to 48 (from 36)</li> <li>default label position changed from 'tc' to 'tl' for any alignment except 'top' (default 'br') and 'left' (default 'tr')</li> <li>default distance increased to 72 (from 54)</li> <li>default duration reduced to 300 (from 500)</li> <li>new option, inactivity (default 0), allowing auto-collapse after a specified period (mouse on dock)</li> <li>new option, fadeIn (default 0), allowing initialised menu to be faded in over a specified period (as opposed to an instant show)</li> <li>new option, step (default 50), which is the interval between animation steps</li> <li>bugfix : handle integer options being passed in as strings (eg. size:'48' instead of size:48)</li> <li>bugfix : ie8's problem with horizontal floats resolved (double-wrap of <em>all</em> items)</li> <li>better 'best guess' for maximum dimensions of Dock</li> <li>the wrapper div now has width, height, and a class</li> <li>dimensioning switched from image to innermost of the item's double-wrap</li> <li>labels now assigned per menu item (regardless of labels option setting) instead of one for the entire dock</li> <li>where an image is within an anchor, the label is also within the anchor, so clicking the label activates anchor</li> <li>label positioning calculations are now only required for alignments that include 'middle' and/or 'center'</li> <li>events switched from mouseover/out to mouseenter/leave</li> <li>documentation updated, and a number of single-menu examples added</li> </ul> </li> <li><strong>v1.2</strong> <ul> <li>adding handling of Opera 9.5</li> <li>updated demo to use jQuery v1.2.6</li> </ul> </li> <li><strong>v1.1</strong> <ul> <li>some speed optimisation within the functions called by the event handler</li> <li>added positioning of labels (top/middle/bottom and left/center/right)</li> <li>added click handler to label (triggers click event on related image)</li> <li>added jqDockLabel(Link|Image) class to label, depending on type of current image</li> <li>updated demo and documentation for label positioning and clicking on labels</li> </ul> </li> </ul> <h3>Credits</h3> <p>jqDock was inspired by, and owes full credit to, Isaac Rocca's "iconDock" plugin - <a class='targetBlank' href='http://icon.cat/software/iconDock/'>http://icon.cat/software/iconDock/</a>. I have simply re-modelled it, tweaked it, expanded it, and re-packaged it.</p> </div> </div></div> <div id='dockusage' class='docpage'><div class='docpagepad'> <h3>HTML</h3> Example: <pre class='dgrey'><div id='menu'> <img src='image1.gif' alt='image1.png' title='' /> ... <a href='page.html' title=''> <img src='imageN.png' alt='' title='' /></a> ... </div></pre> <p>A menu contains images, which may or may not be within links - you can mix and match as you wish. You should provide css styling as necessary to position your menu where you want the Dock to appear. You can initially hide it (display:none;) if you wish; jqDock will reveal it once initialised. You can set the width and/or height styles on the images - for instances where javascript is disabled? - but you should avoid using the width and height IMG attributes.</p> <p>Images are always expanded to their full natural width/height, or a fraction thereof, depending on the position of the cursor at the time. You can not control the ultimate dimensions of the expanding image by css, because jqDock overrides it, and if you try using the width/height attributes things won't work as expected.</p> <p>If the 'alt' attribute contains what looks like an image path (ends with a dot-suffix of gif, png or, jp[e]g) then 'src' will be used as the small image and 'alt' as the larger, expanding one.</p> <p>By default the 'labels' option is off, and jqDock will remove any values for 'title' and 'alt' attributes (after examination), in an attempt to prevent the browser displaying a tooltip when hovering over an image (causes 'fluttering' in some browsers if the cursor is allowed to move over the tooltip). Also, jqDock will remove all text nodes within the menu - this helps to ensure a known and standard presentation of the Dock, and smooth animation.</p> <h3>jQuery</h3> <p><span class='red'><strong>Important!</strong></span> This plugin requires at least jQuery v1.2.3, because it uses API constructs that only became available in that version.</p> <p>Link in the jqDock source (full or compressed) after jQuery itself...</p> Example: <pre class='dgrey'><script type='text/javascript' src='jquery-1.2.3.min.js'></script> <script type='text/javascript' src='jquery.jqDock.js'></script></pre> <p>To convert your HTML into a Dock, simply call the jqDock function in the standard manner...</p> Example: <pre class='dgrey'>jQuery(document).ready(function(){ jQuery('#menu').jqDock(<a class='inPageLink' href='' title='jqDock() Options'>Options</a>); });</pre> <p>jqDock() supports full chaining, noConflict(), and the metadata() plugin.</p> <h3>Advanced</h3> <p>In order to support the switching of images in real time, there is an alternative syntax available which comes into effect when jqDock() is called on IMG elements that are already part of a jqDock menu.</p> With reference to the example HTML above... <pre class='dgrey'>jQuery('#menu img:eq(0)').jqDock(<a class='inPageLink' href='' title='jqDock() Options'>Alternate Options</a>);</pre> <p>...will enable you to change <em>image1.gif</em> and/or <em>image1.png</em> for different image(s).</p> <p>The options available - but <strong>only</strong> when passed IMG element(s) that are <em>already</em> part of an initialised jqDock! - are detailed under the <strong>Alternate Options</strong> heading on the <a class='inPageLink' href='' title='jqDock() Options'>Options</a> page.</p> </div></div> <div id='dockoptions' class='docpage'><div class='docpagepad'> <h3>Options</h3> <p>There are a number of options available, which can be set on per-Dock basis. None of the options are mandatory since they all have defaults.</p> Example: <pre class='dgrey'>//the most commonly used options are likely to be align, size and labels, closely followed //by fadeIn and inactivity (the other options are probably for the more advanced user) var opts = // horizontal Dock with images expanding downwards in the vertical axis... { align: 'top' // set the maximum minor axis (vertical) image dimension to 48px , size: 48 // add labels.. , labels: true // swap the GIF extension for PNG extension for the larger image... , source: function(i){ return this.src.replace(/gif$/,'png'); } }; $('#menu').jqDock(opts);</pre> <ul class='optionsList'> <li><div><strong>align</strong> : string, default = 'bottom', values = 'top', 'middle', 'bottom', left', center', 'right'</div> <div>Fixes the horizontal/vertical main axis, and direction of expansion. <br /><br />For a horizontal menu: <ul> <li>'top' : fixes the <strong>top</strong> edge of the dock, so that images expand <strong>down</strong></li> <li>'middle' : fixes the <strong>middle</strong> of the images, so that images expand <strong>up</strong> and <strong>down</strong> equally</li> <li>'bottom' : fixes the <strong>bottom</strong> edge of the dock, so that images expand <strong>up</strong></li> </ul> For a vertical menu: <ul> <li>'left' : fixes the <strong>left</strong> edge of the dock, so that images expand <strong>right</strong></li> <li>'center' : fixes the <strong>center</strong> of the images, so that images expand <strong>left</strong> and <strong>right</strong> equally</li> <li>'right' : fixes the <strong>right</strong> edge of the dock, so that images expand <strong>left</strong></li> </ul> </div></li> <li><div><strong>coefficient</strong> : number, default = 1.5</div> <div>Attenuation coefficient. This controls the relationship between the <em>distance</em> from the cursor and the amount of expansion of any affected image within that <em>distance</em>. A coefficient of 1 makes the expansion linear with respect to distance from cursor; a larger coefficient gives a greater degree of expansion the closer to the cursor the affected image is (within <em>distance</em>).</div></li> <li><div><strong>distance</strong> : integer, default = 72</div> <div>Attenuation distance from cursor, ie the distance (in pixels) from the cursor that an image has to be within in order to have any expansion applied. <br /><br />Note that attenuation is always calculated as if the Dock was 'at rest' (no images expanded), even though there may be expanded images at the time.</div></li> <li><div><strong>duration</strong> : integer, default = 300</div> <div>The duration (in milliseconds) of the initial 'on-Dock' expansion, and the 'off-Dock' shrinkage.</div></li> <li><div><strong>fadeIn</strong> : integer, default = 0</div> <div>The amount of time (in milliseconds) for the initial fade-in of the Dock after initialisation. By default this is set to 0 (zero), which means that the Dock is displayed in full as soon as it can be ( = show() ). <br />There may be occasions when a 'softer' presentation of the Dock is desirable, and setting fadeIn to, for example, 400 would fade the Dock in over that period. <br /><br />Note that the A-B-C-D menu in my examples has been set to fade in over a period of 1 second (1000 millisecoonds); all other examples have the fadeIn option disabled (set to zero).</div></li> <li><div><strong>fadeLayer</strong> : string, default = ''</div> <div>By default the fade-in effect (see fadeIn above) is applied to the original target menu element. By specifying either 'wrap' or 'dock' here, the fade-in element can be switched to the child or grand-child (ie. div.jqDockWrap or div.jqDock, respectively) of the original target menu element. This option only has any effect if fadeIn is set, and is really only useful for cases where, for example, background colours have been styled on the original menu element or div.jqDock, and you don't want them to be faded in.</div></li> <li><div><strong>inactivity</strong> : integer, default = 0</div> <div>The period of time (in milliseconds) after which the Dock will shrink if there has been no movement of the mouse while it is over an expanded Dock. <br /><br />Note that the rightmost of the demo page examples - the one with a camera, floppy disk, etc - is set to a 4 second inactivity period; the other six menus have the inactivity option disabled (defaulted to zero).</div></li> <li><div><strong>labels</strong> : boolean or string, default = false, values = true, 'tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'</div> <div>This enables/disables display of a label on the current image. <br />Allowed string values are 2 characters in length: the first character indicates horizontal position (t=top, m=middle, b=bottom) and the second indicates vertical position (l=left, c=center, r=right). So 'br' means <em>bottom-right</em>! <br />If simply set to <strong>true</strong>, jqDock will use its default positioning for the label, which is 'tl' (<em>top-left</em>) for any <strong>align</strong> setting <em>other than</em> 'top' or 'left'. The defaults for 'top' and 'left' alignment are 'br' (<em>bottom-right</em>) and 'tr' (<em>top-right</em>) respectively. <br />To determine the text for the label, jqDock looks firstly for text in the image's 'title' attribute; if not found, it will then look for text in the 'title' attribute of the parent link - if there is one - and use that if found. <br /><br />Please be aware that enabling this option with one of the middle/center label positions (eg. 'ml', 'bc', etc) <em>may</em> have a slight effect on the performance of the Dock, simply due to the additional processing required to position the label correctly. </div></li> <li><div><strong>loader</strong> : string, default = null, values = 'image', 'jquery'</div> <div>This overrides the default image loader used by jqDock. Depending on the browser, jqDock uses an image loader based on either "new Image()", or the jQuery HTML constructor "jQuery('<img />')...". If your Dock is not being displayed, and you have triple checked all your image paths, try setting this option to 'image' or 'jquery' to override the default loader.</div></li> <li><div><strong>size</strong> : integer, default = 48</div> <div>This is the maximum value (in pixels) of the <strong>minor</strong> axis dimension for the 'at rest' images. For example, an image of natural dimensions 90x120 (width x height), placed in a horizontal Dock (say, 'align' = 'bottom') would, by default, be sized down to 36x48. This is because height is the minor axis in a horizontal Dock, and to keep the presentation of the 'at rest' images neat and tidy it is the height that is governed by the <em>size</em> option. Conversely, in a vertical Dock it would be the width that was capped at the <em>size</em> value, with height being set proportionately.</div></li> <li><div><strong>source</strong> : function, default = false</div> <div>Function for providing an alternate large image source path. For instances where you are either unable, or do not want to put the large image's path in the IMG's 'alt' attribute, but you still want to have a small and large image for clarity, this function may be useful. <br /><br />If provided, it is called once per image during setup, and is given the scope of the image element and passed the index of the image within the current Dock; it is expected to return a valid image path, or false/null to continue using the defaults ('alt' or 'src'). (See example above)</div></li> <li><div><strong>step</strong> : integer, default = 50</div> <div>The timer interval (in milliseconds) between each animation step of the 'on-Dock' expansion, and the 'off-Dock' shrinkage.</div></li> </ul> <h3>Alternate Options</h3> <p>When passed a selection of elements that consists solely of IMG elements that are already part of a jqDock menu, jqDock() will accept 2 options, that effect a change of an image's source path.</p> <ul class='optionsList'> <li><div><strong>src</strong> : string or function</div> <div>The new source path for the 'at-rest' image.</div></li> <li><div><strong>altsrc</strong> : string or function</div> <div>The new source path for the expanded image.</div></li> </ul> Example (strings): <pre class='dgrey'>$('#menu img').eq(0).jqDock({src:'imageAlpha.gif', altsrc:'imageAlpha.png'});</pre> Example (functions): <pre class='dgrey'>var fnChangePath = function(current, type){ //always change altsrc, but only change src if image has a class of 'changeExpanded'... return type == 'altsrc' || $(this).hasClass('changeExpanded') ? current.replace(/old\.png$/, 'new.png') : current; }; $('#menu img').jqDock({src:fnChangePath, altsrc:fnChangePath});</pre> <div>If you provide a function, that function will be called for each image in the jQuery selection object; it will be given the scope (this) of the relevant IMG element, and it will be passed 2 arguments: the current value of the relevant image path, and the type of path (ie. 'src' or or 'altsrc'). It is expected to return a string of the new (or possibly current?) image path. <br />This means that providing the same function for both 'src' and altsrc', for a selection object containing 5 images, will result in 10 calls in total to the function (5 images, once each for 'src' and altsrc' types).</div> <p>[ You can specify a string for one property and a function for the other, eg 'src' as a string and 'altsrc' as a function. ]</p> <p>I have provided one example that uses these alternate options - <a href='' onclick="return Spook.open('#alternateOptionsExample');"><em>Change image source</em></a> - on the <a class='inPageLink' href='' title='Examples'>Examples</a> page.</p> <p><span class='red'><strong>Important!</strong></span> Even though you may not have initialised the dock with alternate larger images (see the <strong>source</strong> option above), jqDock will still have 2 separate internal variables: one for the 'at-rest' image path, and one for the expanding image path. This means that if you change one of the paths, it is highly likely (but not inevitable!) that you should be changing both.</p> </div></div> <div id='dockstyling' class='docpage'><div class='docpagepad'> <h2>HTML Transform</h2> <p>The HTML transform is the same, regardless of the vertical/horizontal orientation of the Dock, with only slight differences in inline styling between the two. The inline styles applied by jqDock are not show below, but they do get applied to both the new and the existing elements, and can vary depending on the browser, the containing page's html, and the options chosen for jqDock. <br />As an example, this...</p> <pre class='dgrey'><div id='menu'> <img src='image1.gif' alt='image1.png' title='Label text' /> ... <a href='page.html' title='Label text'> <img src='imageN.png' alt='' title='' /> </a> ... </div></pre> <p>...transforms to this...</p> <pre class='dgrey'><div id='menu' <span class='transformAdd'>class='jqDocked'</span>> <span class='transformAdd'><div class='jqDockWrap'></span> <span class='transformAdd'><div class='jqDock' id='jqDock0'></span> <span class='transformAdd'><div <span class='transformAdd'>class='jqDockMouse0'</span>></span> <span class='transformAdd'><div></span> <img <span class='transformAdd'>class='jqDockMouse0'</span> src='image1.gif' alt='<span class='transformRemove'>image1.png</span>' <span class='transformRemove'>title='Label text'</span> /> <span class='transformAdd'><div class='jqDockLabel jqDockMouse0 jqDockLabelImage'></span> <span class='transformAdd'>Label Text</span> <span class='transformAdd'></div></span> <span class='transformAdd'></div></span> <span class='transformAdd'></div></span> ... <span class='transformAdd'><div <span class='transformAdd'>class='jqDockMouseN'</span>></span> <span class='transformAdd'><div></span> <a href='page.html' <span class='transformRemove'>title='Label text'</span>> <img <span class='transformAdd'>class='jqDockMouseN'</span> src='imageN.png' alt='' <span class='transformRemove'>title=''</span> /> <span class='transformAdd'><div class='jqDockLabel jqDockMouseN jqDockLabelLink)'></span> <span class='transformAdd'>Label Text</span> <span class='transformAdd'></div></span> </a> <span class='transformAdd'></div></span> <span class='transformAdd'></div></span> ... <span class='transformAdd'></div></span> <span class='transformAdd'></div></span> </div></pre> <span class='dgrey'>Grey</span> : <em>Original HTML</em> <br /><span class='transformAdd'>Blue</span> : <em>Added by jqDock()</em> <br /><span class='transformRemove'>Red</span> : <em>Removed by jqDock()</em> <h2>CSS Styling</h2> <p>Using the <strong>jqDocked</strong>, <strong>jqDock</strong> and <strong>jqDockLabel</strong> classes, you can apply CSS styles to modify the presentation of the Dock and labels (if enabled). The <strong>jqDockWrap</strong> class also enables some positioning (such as centering) that was not possible in earlier versions. For examples, I suggest looking at the later part of the style.css stylesheet used by these pages (<a class='inPageLink' href='' title='jqDock : Demo CSS'>Demo CSS</a>) - it is fully commented and, given the number of demo Docks, should provide all the hints you need. There are also a number of single-Dock examples on the <a class='inPageLink' href='' title='Examples'>Examples</a> page.</p> <p>The <strong>jqDockMouseN</strong> classes are used internally by the mouse events handler to determine the menu item (N) being targeted. The <strong>jqDock0</strong> id is also used internally, to determine which Dock is being targeted when there are multiple Docks on a page. (Additional Docks would have equivalent ids of <strong>jqDock1</strong>, <strong>jqDock2</strong>, etc.)</p> <p>The Dock's label has an additional class - <strong>jqDockLabelLink</strong> or <strong>jqDockLabelImage</strong> - which indicates whether the current image is an image within a link, or just an image, respectively. You can use this class to, for example, set the cursor for the label to be the same as the image it relates to.</p> </div></div> <div id='dockfaqs' class='docpage'><div class='docpagepad'> <h2>Tested Browsers</h2> <p>I have tested the demo page and <a class='inPageLink' href='' title='Examples'>examples</a> in the following browsers:</p> <ul> <li>Internet Explorer (6 and later)</li> <li>Firefox</li> <li>Opera</li> <li>Safari</li> <li>Chrome</li> </ul> <p>If anyone can confirm that jqDock works - or doesn't! - in other browsers (and/or operating systems), please let me know.</p> <h2>Known Issues</h2> <ol class='issuesList'> <li>You can space menu items out by applying padding to the images, <strong>but</strong> the padded area is not expanded in the minor axis. This means that when your cursor is off the main axis area there is a gap between adjacent expanded images that will trigger a 'mouseleave' event and cause the dock to return to 'at rest'. <br /><a class='floatSnapshot' href=''>Snapshot...<img src='images/issue1.gif' alt='' /></a></li> </ol> <div class='faqsqall'>All</div> <h2>Other Questions</h2> <ol class='faqsList'> <li><div class='faqsq'>What files do I need in order to run jqDock?</div> <div><ul> <li>Just the script file - jquery.jqDock.js or jquery.jqDock.min.js (compressed version). Oh, and jQuery itself, of course!</li> </ul></div> </li> <li><div class='faqsq'>I haven't used jQuery before, so where do I get it and how do I use it?</div> <div><ul> <li>You can get your own copy of the latest version of jQuery from <a href='http://jquery.com/'>http://jquery.com</a>.</li> <li>Alternatively, you can load jQuery from a CDN (Content Delivery Network) host, and <a href='http://docs.jquery.com/Downloading_jQuery'>http://docs.jquery.com/Downloading_jQuery</a> has a list of CDNs for you to choose from. <br />As an example, this could go in the <strong>head</strong> section of your page... <pre><script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script></pre></li> <li>As for using jQuery, well there is substantial documentation, including a number of tutorials, available on the <a href='http://jquery.com/'>jQuery site</a>. <br />But to simply get jqDock working, I would suggest looking at the source code of the examples on the <a class='inPageLink' href='' title='Examples'>Examples</a> page, particularly the <a href='' onclick="return Spook.open('#simplestExample');"><em>Images within links, labelled</em></a> one (just don't include my <em>example.js</em> file on any page you create, or clicking on your links will simply produce an alert!).</li> <li>Using images within links (anchors) is probably the easiest way to implement jqDock because then you simply put the menu option's target url into the link's <em>href</em> attribute. This avoids having to get into things like click handlers if you've never used jQuery before.</li> </ul></div> </li> <li><div class='faqsq'>Why isn't the Dock being displayed?</div> <div><ul> <li>Check that all your image paths are correct, because if jqDock fails to load any image the Dock will not be shown.</li> <li>See if the Dock diplays correctly in another browser - there is always the possibility that jqDock doesn't work for your browser/operating system combination.</li> <li>Try changing the image loader (options.loader = 'image' or 'jquery'). jqDock uses 2 types of image loader, and it could be that the default for your browser is incorrect.</li> <li>Check for any elements other than images or link-wrapped images (IMG or A>IMG) in the menu that you are attempting to turn into a Dock.</li> </ul></div> </li> <li><div class='faqsq'>Why is nothing happening when I move my mouse over the images?</div> <div><ul> <li>Check that jqDock() is being called after the document has loaded. (Ref. the jQuery tutorial : <a class='targetBlank' href='http://docs.jquery.com/Tutorials:How_jQuery_Works#Launching_Code_on_Document_Ready'>Launching Code on Document Ready</a>).</li> <li>Check that some other element of your page is not obscuring the Dock, and thereby intercepting the events (this may seem unlikely but I can assure you that, having accidentally done it myself, it is very easy to do!).</li> </ul></div> </li> <li><div class='faqsq'>Why is the text of my links not being displayed?</div> <div><ul> <li>jqDock removes <strong>all</strong> text nodes within the scope of the menu element, including link text. Not doing so would cause variations in the presentation of the Dock between browsers and DOCTYPE'd pages; it would also make the width/height calculations almost impossible.</li> </ul></div> </li> <li><div class='faqsq'>Why am I not seeing labels on the Dock images?</div> <div><ul> <li>The <em>labels</em> option is off by default.</li> <li>Labels only appear on expanded images, and then only on the image currently beneath the cursor.</li> <li>The text for a label is taken firstly from the <em>title</em> attribute of the menu image; if that is not available, and the image is wrapped in a link, then the <em>title</em> attribute of the link will be used. If neither of these are available, then no label will be displayed.</li> </ul></div> </li> <li><div class='faqsq'>Can I change the position of the label?</div> <div><ul> <li>As of v1.1, yes (see <a class='inPageLink' href='' title='jqDock() Options'>Options</a>).</li> <li>The positions can be 'tweaked' by css styling of div.jqDockLabel, eg. adding padding to the label (see the <a class='inPageLink' href='' title='jqDock : Demo CSS'>Demo CSS</a>, and <a class='inPageLink' href='' title='Examples'>Examples</a>).</li> </ul></div> </li> <li><div class='faqsq'>How do I change the style of the labels?</div> <div><ul> <li>Add a CSS style for div.jqDockLabel, setting font, color, etc, as required. See the examples at the bottom of <a class='inPageLink' href='' title='jqDock : Demo CSS'>Demo CSS</a>, and on <a class='inPageLink' href='' title='Examples'>Examples</a>.</li> </ul></div> </li> <li><div class='faqsq'>How do I stop the image expansion being 'jerky'?</div> <div><ul> <li>There is actually very little you can do. Different browsers, different operating systems, and different machines, all make for a varied experience. I have reduced the processing overhead in the events handler as much as possible, and about the only thing you can try is turning off labels (if they are enabled), or placing them in a corner rather than using middle/center, and possibly reducing the <em>distance</em> option (the fewer images that are in an expansion state at any time, the less the processing involved). Sorry.</li> </ul></div> </li> <li><div class='faqsq'>Why can't I use an earlier version of jQuery than v1.2.3?</div> <div><ul> <li>The jqDock plugin utilises some of the API features introduced in v1.2.3.</li> <li>If it doesn't break any of your existing code, I would highly recommend upgrading to the most current version of jQuery, for speed and efficiency.</li> </ul></div> </li> <li><div class='faqsq'>Why is the Dock disappearing under other element(s) on the page?</div> <div><ul> <li>Because the target menu element (and its surrounding elements?) have not been correctly positioned in order to avoid just such a situation.</li> <li>jqDock does not move or delete any elements from the page's original HTML, and any inserted elements or wrappers are within the target menu element's scope. The position of the Dock is totally dependent on the original styling applied to the target menu element, plus any additional styling you apply to div.jqDock.</li> </ul></div> </li> <li><div class='faqsq'>How do I change the appearance of the Dock?</div> <div><ul> <li>Apply css styling to div.jqDockWrap or div.jqDock, that are inserted within the target menu element's scope. See the <a class='inPageLink' href='' title='jqDock() Styling'>Styling</a> documentation, and the examples in the <a class='inPageLink' href='' title='jqDock : Demo CSS'>Demo CSS</a> and the <a class='inPageLink' href='' title='Examples'>Examples</a> page.</li> </ul></div> </li> <li><div class='faqsq'>Can I dynamically add/remove images on an existing Dock?</div> <div><ul> <li>Yes, of course, with jQuery you can do almost anything you like ... <strong>but</strong> you will corrupt the Dock's layout and positioning, so I suggest you don't!</li> </ul></div> </li> <li><div class='faqsq'>Can I dynamically change images on an existing Dock?</div> <div><ul> <li>Since v1.3, yes. See the Alternate Options on the <a class='inPageLink' href='' title='jqDock() Options'>Options</a> page. There is also an example of switching images on the <a class='inPageLink' href='' title='Examples'>Examples</a> page. <br /><span class='red'><strong>Important!</strong></span> Only replace existing images with images of the same size, otherwise you will corrupt the Dock's layout and positioning!</li> </ul></div> </li> <li><div class='faqsq'>Can I disable elements of the Dock?</div> <div><ul> <li>You can enable/disable clicks in the same manner that you would any other element.</li> <li>jqDock does not control what happens when/if an element is clicked - you do. If your menu has any pure images (not wrapped in links) then you will have to bind any required click events to them. If there are linked images in the Dock then what happens when the link (the image) is clicked is down to you.</li> </ul></div> </li> <li><div class='faqsq'>Why do I need a large and a small image?</div> <div><ul> <li>You don't, you can just use the larger image. However, some images do not retain good clarity when reduced by a browser, so you therefore have the option of providing two purpose-built images: one for when the dock is not being expanded ('at rest'), and one for when it is expanding.</li> </ul></div> </li> <li><div class='faqsq'>Can I remove jqDock from a menu element?</div> <div><ul> <li>No, sorry, there is no 'un-jqDock' facility.</li> </ul></div> </li> <li><div class='faqsq'>Can a Dock be given a 'fixed' position?</div> <div><ul> <li>Yes. However, as with any other use of fixed position, you are going to have to be careful and meticulous with your HTML and CSS if you want it to work in all browsers. There is an example of a fixed position Dock (that even works for IE6, and IE7 in quirks mode!) on the <a class='inPageLink' href='' title='Examples'>Examples</a> page.</li> </ul></div> </li> <li><div class='faqsq'>Why does nothing happen when I click on a label?</div> <div><ul> <li>Regardless of whether an image is contained within a link or not, clicking on its associated label will always trigger the 'click' event for the image.</li> <li>Since v1.3, if the related image <em>is</em> contained within a link, then the label is also within that link, and should therefore activate the link in the same manner as clicking on the image itself.</li> <li>[ Prior to v1.3, clicking on the label of an image within a link required that you provide a click handler for the label itself, which could trigger a handler on the relevant link. ]</li> </ul></div> </li> <li><div class='faqsq'>Why are the examples on the demo page so slow to load?</div> <div><ul> <li>Because there are 7 of them on a single page!</li> <li>I can think of no real-life scenario where anyone would want/need that many separate jqDock menus on one page. I would expect normal usage to be one jqDock, or possibly two, so the load times of the examples on the <a class='inPageLink' href='' title='Examples'>Examples</a> page might be a more realistic indicator?</li> </ul></div> </li> <li><div class='faqsq'>Can I upgrade from a previous version of jqDock simply by swapping in the new version of the script?</div> <div><ul> <li>From v1.3 to v1.4, yes.</li> <li>From a lower version, in principle, yes, <strong>however</strong> you may need to be aware of the changes to some of the options defaults (see the <strong>Change Log</strong> section on the <a class='inPageLink' href='' title='Introduction, Change Log, Credits'>Introduction</a> page)...</li> <li>If you have styled (ie. positioned) a menu based on a previous default size of 36, the new default size of 48 <em>may</em> cause expanded menu items to encroach on other elements on your page (you may need to add <strong><em>size:36</em></strong> to your options).</li> <li>The other setting that might affect the presentation of your menu is a change to the default label position (from 'tc' to 'tl'), if you have just set <strong><em>labels:true</em></strong> in your options.</li> </ul></div> </li> </ol> </div></div> <div id='dockexamples' class='docpage'><div class='docpagepad'> <div style='padding-bottom:10px;'> The examples provided below all have a doctype of XHTML 1.0 Transitional, and are coded to be valid for that doctype. Unless otherwise indicated, the examples use a menu consisting of images only (less code to type!). <br />CSS, Javascript and HTML snippets are provided on the pages themselves, but only the bits directly relevant to the example are displayed; if you wish to see the entire code, open an example up in a new browser tab and inspect it at your leisure. <br />Please bear in mind that these examples are literally just that ... <em>examples!</em> It is extremely unlikely that they will even come close to matching any real-life scenarios you may have, but they are merely intended to illustrate some of the options available, and provide hints for their use. <br /><em class='dgrey'>Warning : Some of the examples have been specifically styled for a 700x400 display frame ('page'), so displaying them in a full size browser window may not position the menu exactly where expected.</em></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytl' href='http://www.wizzud.com/jqDock/examples/example.no_options.html'><b><span class='examplesTitle'>No options, no styling</span> <br />Call jqDock() with no overriding options at all, ie. options all have their default values.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytc' href='http://www.wizzud.com/jqDock/examples/example.centre_top.html'><b><span class='examplesTitle'>Horizontal, top of page, centred, labelled</span> <br />Horizontal menu placed at the top edge of the page, with align set to 'top', and labels enabled (at the default position).</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytr' href='http://www.wizzud.com/jqDock/examples/example.centre_bottom.html'><b><span class='examplesTitle'>Horizontal, bottom of page, centred, labelled</span> <br />Horizontal menu at the bottom edge of the page, with align set to 'bottom', and labels enabled (at the default position).</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xyml' href='http://www.wizzud.com/jqDock/examples/example.lh_edge.html'><b><span class='examplesTitle'>Vertical, left-hand edge, larger size</span> <br />Vertical menu against the left-hand edge of the page, with align set to 'left', and size set to 60.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xymc' href='http://www.wizzud.com/jqDock/examples/example.rh_edge.html'><b><span class='examplesTitle'>Vertical, right-hand edge, labelled</span> <br />Vertical menu against the right-hand edge of the page, with align set to 'right', and labels enabled (at the default position).</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xymr' href='http://www.wizzud.com/jqDock/examples/example.centre_middle.html'><b><span class='examplesTitle'>Horizontal, middle alignment, labelled, smaller size</span> <br />Horizontal menu, with align set to 'middle', size reduced to 36, and labels enabled - positioned at top-left ('tl'), and styled with color and background.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xybl' href='http://www.wizzud.com/jqDock/examples/example.vertical_center.html'><b><span class='examplesTitle'>Vertical, center alignment, labelled, inactivity</span> <br />Vertical menu, with align set to 'center', labels enabled - positioned at bottom-right ('br') - and an inactivity timeout of 4 seconds.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xybc' href='http://www.wizzud.com/jqDock/examples/example.alts.html'><b><span class='examplesTitle'>Alternative expanded images</span> <br />Horizontal menu with 'middle' alignment. The images' 'alt' attributes are used to provide alternative images for the expansion.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xybr' href='http://www.wizzud.com/jqDock/examples/example.scripted_alts.html'><b><span class='examplesTitle'>Alternative expanded images using script</span> <br />Horizontal menu with 'middle' alignment. Alternative images for the expansion are provided via a javascript function.</b></a></div> <div class='clearL' style='height:10px;'><!-- spacer --></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytl' href='http://www.wizzud.com/jqDock/examples/example.fadein.html'><b><span class='examplesTitle'>Fade in</span> <br />Horizontal menu with 'middle' alignment. Instead of an immediate 'show' the menu is set to fade in over 2 seconds.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytc' href='http://www.wizzud.com/jqDock/examples/example.anchors.html' id='simplestExample'><b><span class='examplesTitle'>Images within links, labelled</span> <br />Horizontal menu consisting of linked images (images within anchors), with 'middle' alignment, and labels enabled ('tr').</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytr' href='http://www.wizzud.com/jqDock/examples/example.fixed.html'><b><span class='examplesTitle'>Vertical, left-hand edge, fixed position</span> <br />Vertical menu in a 'fixed' position against the left-hand edge of the page, with 'left' alignment.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xyml' href='http://www.wizzud.com/jqDock/examples/example.extend_distance.html'><b><span class='examplesTitle'>Extended distance option</span> <br />Horizontal menu with 'middle' alignment. The distance option is extended to be half the width of the 'at rest' menu.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xymc' href='http://www.wizzud.com/jqDock/examples/example.mixed_padded.html'><b><span class='examplesTitle'>Mixed links/images, with extra padding</span> <br />Horizontal menu of mixed link and images, with 'middle' alignment, and labels enabled ('tr'). Images are given extra padding.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xymr' href='http://www.wizzud.com/jqDock/examples/example.padded_distance.html'><b><span class='examplesTitle'>Mixed links/images, extra padding and distance</span> <br />Horizontal mixed menu, with 'middle' alignment, and labels enabled ('tr'). Images are padded, and distance is extended to compensate.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xybl' href='http://www.wizzud.com/jqDock/examples/example.switch.html' id='alternateOptionsExample'><b><span class='examplesTitle'>Change image source</span> <br />A more complex example, demonstrating the facility to change a menu item's image post-initialisation (in this case, by clicking the buttons).</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xybc' href='http://www.wizzud.com/jqDock/examples/example.border.html'><b><span class='examplesTitle'>Horizontal with border</span> <br />Horizontal menu with 'middle' alignment. The dock has a full border, using images with a transparent background.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xybr' href='http://www.wizzud.com/jqDock/examples/example.background.html'><b><span class='examplesTitle'>Horizontal with bordered background</span> <br />Horizontal menu with 'top' alignment. The dock is styled with a background and partial border.</b></a></div> <div class='clearL' style='height:10px;'><!-- spacer --></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytl' href='http://www.wizzud.com/jqDock/examples/example.wrap_background.html'><b><span class='examplesTitle'>Horizontal with styled static wrapper</span> <br />Horizontal menu with background and border styling applied to the dock's wrapper - which provides a static background instead of a moving one.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytc' href='http://www.wizzud.com/jqDock/examples/example.menu_background.html'><b><span class='examplesTitle'>Horizontal with styled menu</span> <br />Horizontal menu with a background and bottom border applied to the original menu element instead of elements added by jqDock. </b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xytr' href='http://www.wizzud.com/jqDock/examples/example.wrap_background_fade.html'><b><span class='examplesTitle'>Fade in, but not the styled static wrapper</span> <br />Horizontal menu with background and border styling applied to the dock's wrapper, fadeLayer set to 'dock', and fade in over 2 seconds.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xyml' href='http://www.wizzud.com/jqDock/examples/example.menu_background_fade.html'><b><span class='examplesTitle'>Fade in, but not the styled original menu</span> <br />Horizontal menu with a background and bottom border applied to the original menu element, fadeLayer set to 'wrap, and fade in over 2 seconds.</b></a></div> <div class='docexample'><a class='moreExamples spook_gexamples_xymc' href='http://www.wizzud.com/jqDock/examples/example.menu_background_fadefull.html'><b><span class='examplesTitle'>Fade in the entire styled original menu</span> <br />Horizontal menu with a background and bottom border applied to the original menu element, faded in over 2 seconds with fadeLayer left at its default.</b></a></div> <div class='clearL'><!-- clear #examples --></div> </div></div> </div> </div> </body> </html> <!-- This document saved from http://www.wizzud.com/jqDock/ -->
Create an account or sign in to comment