jqDock Demonstrator

 

Use the demonstrator on the right to set/change any of jqdock’s options, and then apply them to the example below; the javascript used, with options, is shown at the bottom of the Controller.
(Using jqDock v? with jQuery v?)

http://www.wizzud.com/wp-content/uploads/2011/12/DVD-Player.pnghttp://www.wizzud.com/wp-content/uploads/2011/12/eMail.pnghttp://www.wizzud.com/wp-content/uploads/2011/12/Instant_Messaging.pnghttp://www.wizzud.com/wp-content/uploads/2011/12/Safari.png
Share
 Posted by at 5:23 pm

  30 Responses to “jqDock Demonstrator”

Comments (30)
  1. One word: Fantastic!!!!

    thanks 4 ur great work

  2. Totally great

  3. great work but I would like to see the labels repositioned so they do not show over the image itself. Makes them hard to read. Is there a way to fix this?

    • Yes. If you look at the Examples page and select to highlight by tag ‘styled labels’, you should get 7 or so examples, of which the 3rd one shifts its labels off the images, and others style the labels so that they are not so hard to read.

  4. Hi,

    good work… i need coding for this

  5. This is absolutely fantastic! Well done πŸ™‚

  6. Well done!

  7. how should i write the code in dreamweaver ?

    • Since I haven’t used Dreamweaver for a good number of years now, it’s a bit difficult to answer … but I seem to recall that when I did use it I tended to use the Code editor (view?) for inputting javascript. However, the version of Dreamweaver I was using is now well out of date, so I would advise seeking guidance from a “How to use Dreamweaver” type of website?

      • thank you . i can use this code in dreamweaver ? i copy it from your page in styling sub link

        • Similar, yes. Obviously the triple-dots are not part of the HTML, and you would replace any attribute values with whatever suits your required usage. Please bear in mind that what I have provided is intended only as an example.

  8. Non funziona con l’ipad, purtroppo

  9. Great work..

  10. How i can make my own Click Freze?

  11. Hello, I’m sure this is extremely simple but its 3am and I haven’t been able to figure it out. Where do I insert the code from the Demo Controller (in my case $(‘#jqdockDemo’).jqDock({size:70}); ) in my code.

    Thanks for the great tool!

    • On the http://www.wizzud.com/jqdock/usage/ page, under the heading jQuery, it gives examples of script inclusions required to run jqDock, and the actual javascript command to initialise jqDock : this is where code similar to that produced by the Demonstrator would go. (I use the word similar because it is quite probable that your menu container does not have the same id as my Demonstrator, and so the command would be slightly different.)

      • Thanks, that helped a lot, I had missed it yesterday in all my excitement. For all you people at my stage of learning, place data-jqdock-size=’##” in your ul if you are using a list. The word “size” can be interchanged for any attribute of the jqDock.

        Thanks again for the great tool! It looks awesome on my page.

  12. Excellent Work !!!!!!!!!!
    It helped me a lot…
    Keep it up.. all the best.

  13. data-jqdock-permanentLabels=”1″ / data-jqdock-permanentLabels=”true” is not working for me.
    And even $(“#some_id”).jqDock( { permanentLabels: 1 } ) is not working.
    I must use non-minimized version of plugin and change “permanentLabels: 1” -> this worked for me.
    I use jquery v1.9.1…any known issues like that?
    Thanks for answer.

    • I’m sorry. That is a lack of explanation on my part (which I have now corrected on the Usage page). The name of the data attribute should be data-jqdock-permanent-labels. Any camel-cased option name – such as permanentLabels or fadeIn – needs to be converted to its hyphenated form when it’s used as a data attribute.
      I apologise for not being clearer in the documentation.

  14. Thank You…now everything seems clear to me…next time I will reconstruct solution by looking directly into the plugin, because I began to study it now…very interesting code πŸ˜‰

  15. Hi,
    When I add the
    I get the following error.
    ” $ is not a function “

    • This could be either:
      a. You have not included jQuery, or jQuery has failed to load – check that you have included jQuery, and that it exists at the path you are trying to load it from
      b. jQuery has loaded but you are running it in noConflict mode, which means that “$” is not recognised – use “jQuery” in place of “$”.

      Note that jQuery should be loaded before jqDock.

  16. Hi guys
    can anyone tell me that where will i find source code ?

    • If you mean the source for jqDock then it’s included in the download.
      If you mean the source code for my Demonstrator on this page then it’s not been released because it was only ever intended to be for this site. If you really want it you will have to scrape the HTML using Firebug (or similar); the controlling script is in jqdock-docs.js, and the CSS is in jqdock-docs.css (both of which you can find via Firebug).

  17. Hi there

    Thanks this is great!

    Is there anyway to add / remove menu items using javascript?

    Basically depending on user security I want to only show certain menu items…

  18. Looks good, thanks!

    Couple quick questions:

    1. If you could add the “touch” interface style (i.e., for iPads, etc) — that would be fantastic!
    A code example of something that works (for swiping motions) is here: hxxp://jssor.com/
    And also on this site: hxxp://plugins.jquery.com/?s=swipe

    (I have an iPad & tested them in that, & it works a-ok in the Safari browser).

    Basically a swiping motion similar to how you mouseover – but instead just measure the distance travelled
    with a swipe and simulate ‘mouse’ motion. I wouldn’t mind making a donation for that! πŸ™‚

    2. Can you add a ‘sound’ effect? (So as I shift menu items, I can say play a sound, like a .wav file)
    Two events – mouseover sound play (as each item expands to the full size), and then a mouseclick sound play.

    3. Relatively brand new to jQuery (extensive experience in other languages) — is there an easy way of adding
    custom attributes to the images, to process later as links, etc?
    i.e.,

    Thanks!

 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)