Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

sash_007

Privileged
  • Joined

  • Last visited

Everything posted by sash_007

  1. Hello friends, I have just downlaoded adownload tracking script but if i want to use it with my wordpress then according to installation manual it says to make some changes in init.php files, but my query is do i need to give the same database username and password that i used for my blog or i need to create a new one?
  2. ok one thing i have noticed about dropbox it lets u create a folder on ur local pc but if u copy files in the dropbox folder in ur local pc that doesnt ensure that all ur files get copied in the dropbox folder u have to manually upload it from the website??
  3. hello are there any ways i can know as my host enables it PHP info?
  4. Hello friends, i have been trying to install zencart with ftp on my server but as i install i see this messsage does it mean gzip is not enabled on my server?
  5. Hello friends, Just want to know how many of u use dropbox and how safe is it?
  6. ok now background image is showing right but what happened to the banner? z-index got it solved thanks
  7. but now u can see what problemi am facing the part of the sprite that i dont want to show is also showing to the left the width of my sprite image is 980 where as my wrapper div is 970 is it casuing the problem?
  8. i guess u were talking about this?
  9. so i can use sprites for the icons i used on every page like this it makes sense?
  10. Hello friends, Just checked my site with yslow which shows i should use css sprite for my images so i have decided to use my sprite like this my query is should i keep the background image and the banner image seperate and keep others in one i have used this code for background image but its creating a mess can i repeat images with sprite? here is thelink the code i used body { font : normal 62.8%/1.3 Georgia, 'Times New Roman', Times, serif; background : #006699 url('../images/bg-body.jpg') repeat-x; left: 0;top:310px; width: 400px;height:310px; background: url("../images/mastersprite.jpg") repeat-x; color : #585c5e; padding : 70px 0; }
  11. have u heard of virtual credit card? entropay offers this service
  12. add this to your css .clear{clear:both;} and add this <div class="clear"></div> to ur html i have already added it u can copy paste the code <!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>Home</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css"> body { background-image:url('images/website_background.png'); background-repeat: repeat; } </style> <link / rel="stylesheet" href="css/home.css" type="text/css" media="screen"> </head> <body> <div id="wrapper"> <div id="header">Tel: 01782 818097 | Email: <a href="mailto:support@andys-motorcycles.com" title="email_andys_motorcycles">support@andys-motorcycles.com</a></div> <div id="content_head"><h1 align="center">Motorcycle, scooter & motocross spare parts & accessories available to order online now.</h1></div> <div id="content"><p>Do you need to buy motorbike, scooter or motocross parts fast? If so then you're in the right place. With over 30 years experience in the bike trade we are able to quickly and easily deal with any problems our customers may encounter with their bikes. With full workshop facilities & experienced mechanics on site, any mechanical or electrical repair is swiftly dealt with avoiding high garage costs that many other dealers will charge. A Local recovery service is also in operation during normal business hours for breakdown recoveries across the Stoke on Trent area.<p> <p>In stock: Piston kits, Tyres, Clutch Plates & Springs, Inner Tubes, Gaskets, Oil, Indicators, Bulbs, Seals, Filters, Reeds, Levers, Cables, Brake Pads & Shoes, Performance Parts, Ignition Coils, Brake Discs, Exhausts, CDI Units, Grips, Stickers, Cosmetics, Headlights, Handlebars, Stainless Hoses, Drive Chains & Belts, Sprockets, Generators and much, much more...<p> <p>Head on over to our fully operational online store where you can browse for the parts you require and make an immediate purchase. We send all orders made before 2pm out on the same working day and aim to get orders with their customers within 3 working days. Do not worry if you cannot find the parts you require online as we have far too much stock to list and will still be able to help. Get in touch with us and one of our staff will be more than happy to supply you with what you are looking for.<p> </div> <div class="clear"></div> <div id="sidebar_text"><p>We stock spare parts and accessories for most major Japanese, Italian, French, Spanish and even Chinese motorcycle and scooter brands.<p> <p>Aprilia, Derbi, Baotian, Gilera, Kawasaki, Superbyke, Yamaha, Piaggio, Suzuki, Peugeot, Honda, PGO, KTM, Haotian, Skyjet, Malaguti, CPI, Cagiva, Mini Moto's & Pit Bikes are just some of the makes & models we stock spares for.</p><p>Established at our store in Stoke-on-Trent for over 30 years we have the best local stock of new and used spares for a wide variety of bikes & scooters. For enquiries on how to buy used parts contact the shop during business hours on 01782 818097.</p> <div id="adsense"><script type="text/javascript"> google_ad_client = "pub-5431799335873325"; google_ad_slot = "1322372698"; google_ad_width = 300; google_ad_height = 250; </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </div> </body> </html> Clear both tutorial
  13. 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/ -->
  14. hello i changed to this #menu4 div.jqDock {background-color:#000000; border:1px solid #000000;padding-right:35px;width:800px;} but nothing happened
  15. 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
  16. you mean like this <script src="http://www.webdesigncut.com/javascript/FBjqRY.js"></script> <script src="http://www.webdesigncut.com/javascript/FBjqRY.min.js"></script> <script src="http://www.webdesigncut.com/javascript/Utility.js"></script> <STYLE TYPE="text/css"> <!-- .main, .main TD, .main TH { background-color:#f7f7f7; color:black; } .main .inner TD{ background-color:white; color:black; } .footer, .footer TD, .footer TH { background-color:#023865; color:#ffffff; } --> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } </STYLE> <script> $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); </script> <table width="625" height="30" border="0" cellpadding="0" class="main"> <tr> <td colspan="2"><img src="http://i849.photobucket.com/albums/ab59/sash_007/facebookpage-header.jpg" width="625" height="100"</td> </tr> <tr> <td class="inner"><p> </p> <p>Webdesigncut is a promising, web design agency with a passion for website design,website hosting,graphic design and search engine optimisation. .</p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> <p>ny with the focus and expertise to translate your business objectives into a success</p> </div> <div id="tab2" class="tab_content"> <!--Content--><p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development comp</p> </div> </div> <p> </p></td> <td><p> </p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p> </p></td> </tr> <tr> <td><p> </p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p> </p></td> </tr> </table> </td> </tr> </table> <table width="625" height="100" border="0" cellpadding="0" class="footer"> <tr><td><p> </p> <p>This is a test</p> <p> </p> </td> </tr> </table>
  17. Hello friends, I just installed buddypress on a freehost but its not working when u click other links here is the link http://webdesigncut.freeiz.com/ when from the admin i tried to setup the forum on existing bb install they are asking for the path of bb-config.php but i cant find it in the root
  18. you mean i have to change this to contact ? $subject = "My subject"; what do you mean by setting the mail? i rename the file as contact.php? i want it to be quote form so i would put in a quote folder and name it index.php
  19. ya its in the spam folder that means every time i have to check my spam folder are there any ways to fix it
  20. Hello i removed as you said but it still dint worked ,i mean i dint got any mail although the mail was sent */ if (mail($your_email,$mail_subject, $message, $headers)) { //UNSET ALL VARIABLES unset ($name, $email, $subject, $reason, $comment, $ip, $_REQUEST); //JAVASCRIPT SUCCESS MESSAGE
  21. All right i referred to this tutorialfor embedding js in fbml and also downloaded the fbjquery fromhere and also referred to thisthread and here is my code <STYLE TYPE="text/css"> <!-- .main, .main TD, .main TH { background-color:#f7f7f7; color:black; } .main .inner TD{ background-color:white; color:black; } .footer, .footer TD, .footer TH { background-color:#023865; color:#ffffff; } --> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } </STYLE> <script> $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); </script> <script src="http://www.webdesigncut.com/javascript/FBjqRY.js"></script> <script src="http://www.webdesigncut.com/javascript/FBjqRY.min.js"></script> <script src="http://www.webdesigncut.com/javascript/Utility.js"></script> <table width="625" height="30" border="0" cellpadding="0" class="main"> <tr> <td colspan="2"><img src="http://i849.photobucket.com/albums/ab59/sash_007/facebookpage-header.jpg" width="625" height="100"</td> </tr> <tr> <td class="inner"><p> </p> <p>Webdesigncut is a promising, web design agency with a passion for website design,website hosting,graphic design and search engine optimisation. .</p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> <p>ny with the focus and expertise to translate your business objectives into a success</p> </div> <div id="tab2" class="tab_content"> <!--Content--><p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development comp</p> </div> </div> <p> </p></td> <td><p> </p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p> </p></td> </tr> <tr> <td><p> </p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p> </p></td> </tr> </table> </td> </tr> </table> <table width="625" height="100" border="0" cellpadding="0" class="footer"> <tr><td><p> </p> <p>This is a test</p> <p> </p> </td> </tr> </table> but it still didnt worked
  22. its always recommended not to use buggy editors like dream weaver to set up a web page , instead try to learn html css and edit the code with notepad++ because these editors are not always visually right
  23. Hello friends, I have been trying to install magneto on a freehost for but after i downloaded the sample data and made the databse and tables with it i downlaoded magneto auto installer from here http://www.magentocommerce.com/download then i upload the files with ftp after that i chmod of the files to 777 and then started the installation but the installation halts giving this error attached
  24. Hello friends Iwas trying to customize myfacebook page and tried to add jquery but its not working here is the code <STYLE TYPE="text/css"> <!-- .main, .main TD, .main TH { background-color:#f7f7f7; color:black; } .main .inner TD{ background-color:white; color:black; } .footer, .footer TD, .footer TH { background-color:#023865; color:#ffffff; } --> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } </STYLE> <script type="text/javascript"> $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> <table width="625" height="30" border="0" cellpadding="0" class="main"> <tr> <td colspan="2"><img src="http://i849.photobucket.com/albums/ab59/sash_007/facebookpage-header.jpg" width="625" height="100"</td> </tr> <tr> <td class="inner"><p> </p> <p>Webdesigncut is a promising, web design agency with a passion for website design,website hosting,graphic design and search engine optimisation. .</p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> <p>ny with the focus and expertise to translate your business objectives into a success</p> </div> <div id="tab2" class="tab_content"> <!--Content--><p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development comp</p> </div> </div> <p> </p></td> <td><p> </p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p> </p></td> </tr> <tr> <td><p> </p> <p>With Webdesigncut, getting your business website online has never been easier. We are a specialist web design and web development company with the focus and expertise to translate your business objectives into a successful web solution..</p> <p> </p></td> </tr> </table> </td> </tr> </table> <table width="625" height="100" border="0" cellpadding="0" class="footer"> <tr><td><p> </p> <p>This is a test</p> <p> </p> </td> </tr> </table>

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.