I have a requirement to have a universe type menu, where there is a main item in the center, and "X" amount of items around it. (ie: sun with planets).
I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.
How can I create a menu like this where I can dynamically add items?
I am sure there is some jQuery / javascript example somewhere
Did you try searching for pie menus? There are a couple of jQuery Plugins:
jQuery - Pie Menu
jQuery Canvas Pie Menu
check out jQuery Radmenu - http://tikku.com/jquery-radmenu-plugin
I've just done a hell of lot of googling for you - but couldn't find anything either.
So, the answer must be - write it for yourself (see, that's fun!).
I found this great resource to help out. It's not JavaScript, but the code could easily be rewritten to help drawing the invisible circle needed to do the trick.
Some sin/cos stuff will probably also be needed - to determine where on the circle your menu points should be, dynamically. It's unfortunately not just as simple as saying 360/numberOfMenus ;-)
I hope this helps you out. Sometimes, the answer is that you have to do it yourself :D
I found this thread too late, because I also built one. You can find it here: http://www.pritaeas.net/public/jquery/hp/circulate/index.html
It is a jQuery plugin, very small, that positions li items in a circle.
Related
it's difficult to describe in the title,but what I'm thinking of are those sites like some of the Tumblrs or some other fancy webpages where the parts (for example the images) when they appear they move in next to the existing ones, you can move them and all the others move along and rearrange themselves. Same when some of the middle disappear and all the others rearrange and move into the space of the one that disappeard.
My question is : how to do that? is there a plugin for that? if not, what would be the code for that ? I presume it's not that easy...
An example would be :
I have some images (1)--(2)--(3)--(4)
I check a box that make the (2) disappear and the 3 and 4 move along (1)--<-(3)-<-(4)
And by "move" I don't mean "appear/disappear" but litteraly animate the position, fade in/out and this should apply to any divs on multiple lines or anything!
Thank's for your help in advance
possibly you could adapt jquery sortable to your needs ?
I think I found exactly what you are looking for here!.
The author has explained how to go about what you require in quite some detail with examples and a near walk-through using jQuery.
In order to move content as you've described - (1)--<-(3)-<-(4), you can 'cheat' by inheriting the CSS styling of the containers from 2-3 and 3-4 respectively so it seems 2 has been removed and 3, 4 have moved to take its place without using elaborate JS.
Hope this helps.
This looks to be the answer !
http://masonry.desandro.com/#getting-started
I need to calculate the distance on the canvas dynamically (something like shown in fig.). I need to drag the highlighted joints so that calculating span can be increased / decreased.
Does there exists any plugin for this? If not, can you give me some suggestions to do it effectively. Thanks
I use Google closure, and it has a distance function:
http://closure-library.googlecode.com/svn/docs/class_goog_math_Coordinate.html
Not sure if that is an option for you, I personally recommend it if you have a complex drawing app.
If you can't just look at the code provided "Source Code" link at top, it can help you do something similar in your code.
I am looking for a plugin for spinning wheel in jquery. I came across the site
http://www.professorcloud.com/mainsite/carousel.htm . There is a beautiful demonstration of spinning wheel here but I need the images to be controlled on mouse-drag and also I want the same rotation to happen vertically as well. please help
I believe what you are looking for is commonly referred to as a 'Developer'. When you come to Stackoverflow (in general) you provide a source code that we look through to find out where your mistake(s) is/are. Then we tell you why the mistake(s) happen/ed, and steer you through correcting the mistake(s). If what you are you looking for is the type(s) of tool(s) that a common jQuery developer would use to achieve this then that's completely different.
For starters, it looks like you have found a carousel that you want to use to create the rotating effect. That's fine. You'll need to go through their API and instructions to get a grasp on how to integrate your next step:
Drag & Drop in jQuery
My favorite plugin for this is jQuery UI. It's a complete suite for jQuery that provides an array of different enhancements, including the 'Drag & Drop' effect you want.
http://jqueryui.com/demos/droppable/
You'll have to (once again) work with the API and instructions, and create events to control how the carousel should be affected by the Drag & Drop plugin.
Vertical Carousel
Some quick digging regarding the need for Vertical implementation lead me to a Stackoverflow question regarding the same exact needs.
JQuery Cloud Carousel that scrolls vertically
He also discussed what changes you need to make to the script in order to account for the change in axis. That's a huge +.
You can see a working version of it below -
http://www.inspiritandintruth.com/ (look at the right hand side)
All of this combined should get you what you want. With a bit of work and adjusting, you'll be able to get your end result.
Best of luck.
I am looking for a straightforward jQuery tooltip script. I have been having troubles finding one that has a fixed position and doesn't move with the user's cursor. If anyone knows of one let me know :) Thanks!
I always use this one here:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It has the option to both follow the cursor AND keep it's position, along with a few other helpful options. The css is also very minimal and therfore easy to change.
See there's this thing here called a search engine...
Okay, okay... I'll be more constructive...
My favorite is qTip 2. It does everything you want it to do. and you don't have to leave money on the table...
I use qTip2 from http://craigsworks.com/projects/qtip2.
By default, it does not move with the cursor. There are a bunch of options and some themes. The best part is that the developer answers all questions in his forum within a day or less.
Also here are some good ones meeting your requirement that it not follow the mouse cursor:
http://plugins.learningjquery.com/cluetip/
http://edgarverle.com/BetterTip/default.cfm
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://labs.dmlogica.com/dmltip/#more-53
http://www.ajaxdaddy.com/javascript-tooltip-jtip.html
http://plugins.jquery.com/project/bt
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
http://code.drewwilson.com/entry/tiptip-jquery-plugin
http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/
http://gdakram.github.com/JQuery-Tooltip-Plugin/
As a side note, I'd stay away from the tool tip plugin that's part of jQuery Tools by Flowplayer. IMHO, jQ Tools is poorly implemented, out of date and not supported very well by the developer or his community.
100 various solutions on this page (however, some are not jQuery):
http://www.webdesignshock.com/showcase/best-tooltip-scripts-plugins/
The one I always use is: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
It's three short CSS lines to customize colors and easy to work with!
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)