Styling

 

HTML Transform

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.
As an example, this…

…transforms to this…

Note:
  • Image and anchor (IMG and A) elements have their title attributes removed
  • Image elements have their alt attributes cleared (set to an empty string)
  • All alt and title attributes are restored when a Dock is ‘destroyed’1.6
  • Any text nodes within the top element (ie. below #menu or any of its descendants) are removed … permanently!

CSS Styling

Using the jqDocked, jqDock, jqDockLabel and jqDockLabelText1.5 classes, you can apply CSS styles to modify the presentation of the Dock and labels. The jqDockWrap1.3 class also enables some positioning (such as centering) that was not possible in earlier versions. I would strongly recommend looking through some of my Examples, which should provide enough clues/tips to at least get you started.

Prior to v2.0, the jqDockMouseN classes were used internally by the mouse events handler to determine the menu item (N) being targeted. The jqDock0 id was also used internally, to determine which Dock was being targeted when there are multiple Docks on a page. (Additional Docks would have equivalent ids of jqDock1, jqDock2, etc.)
As of v2.0, the jqDockItem2.0 class is used by the mouse events handler to determine the menu item being targeted, and the jqDockMouseN classes are maintained merely for consistency. Also, the jqDockN ids are no longer used internally, and, again, are maintained for consistency.

Also new to v2.0 is the transitory jqDockExpand2.0 class on the div.jqDockItem wrapper. This class only gets applied while the item in question (ie. the image) is expanded … by even the smallest amount. While the image is ‘at rest’, the class is removed.

The Dock’s label has an additional class – jqDockLabelLink or jqDockLabelImage – which indicates whether the current menu option 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.

Please be aware that jqDock applies inline styling to anchors and images in order to ensure that everything works correctly, and these inline styles – such as setting padding, margins and borders to zero – may well override your own CSS rules.

Share
 Posted by at 5:41 pm

  4 Responses to “Styling”

Comments (4)
  1. Hey, I want to change (or define in CSS) the “height” value from jqDockWrap. In the jquery.jqdock.js the size value is the same value of height, and in my case I need put size on default (48px) and height on 30px.

    Please help me.
    Congrats for your jqDock.

  2. Hi wizzud

    How can I get the size of icons increased to lets say 100px. does it involve changing the wrapper andcontainer sizes as well?

    I would appreciate your quick response, please. 🙂

    • Assuming that your images are naturally at least 100px, and that you are talking about when they are “at rest”, then just set the size parameter (see Options).

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)