Spinning wheel in jquery with mouse-drag option - javascript

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.

Related

How to make a Javascript/jQuery/HTML animated stack of images

I want to make a javascript/jQuery/HTML based image viewer which is sort of a cross between a book page flip and an iTunes coverflow interface without the left side of either, which would work on mobile device browsers.
I've been looking for tutorials which I can use as a starting point, but I haven't been able to find anything yet. Can anybody offer some advice on how to get started on this project? I would like to be able to come up with a rough mock up pretty quickly so it would be helpful to be able to re-use code from a tutorial or existing open-source project.
What about pagePiling.js plugin?
It creates a stack of pages and on it you can add images if you want, just like in this example.
And of course, you can use it horizontally if you prefer.

Responsive filterable portfolio

I am attempting to program a portfolio section very similar to: http://www.nouvehmedia.com/#3_columns_projects.html
However, it seems that with my zero knowledge of jquery/javascript, I am not able to recreate the results.
Ideally I was attempting to put my own 'touch' on it. It would function in its entirety like portrayed on the website above, but clicking on them would actually open a modal instead.
My trouble areas are:
* filtering the results
* applying the mouse overlay effect (I can only seem to effect the bottom text when my mouse is over that, but it does not transition if it is over the image)
Here is my code, I am using foundation framework and so it looks quite off when I import the code into jsfiddle to show my work: jsfiddle.net/feF43/1/
Here is what it looks like on my end:
Is what I'm trying to do possible in CSS, or should I be looking into finding a similar effect on github or such to implement with my code?
Oh that's a shame, I actually looked at this yesterday as I'm looking to use it in my next site. I'm more of a Bootstrap framework fan than Foundation though.
There is a plugin called quicksand.js which does what I think you're trying to do above. And I stumbled across a tutorial for using that with Bootstrap just last night:
http://untame.net/2013/05/how-to-build-a-sortable-image-gallery-with-bootstrap-jquery/
Unfortunately I had a look into this for you and it seems the way that Foundation applies its grids means that quicksand doesn't work very well with it:
https://groups.google.com/forum/#!topic/foundation-framework-/0M-H3kWiChY
So, perhaps suggesting you change frameworks is a little bit of a drastic solution :) but looking at your fiddle it seems the markup is very similar between the two frameworks.
I just had a look at the quicksand source code as well and its really not that long. So even if you stick with zurb you can see the inner logic of quicksand here:
http://mode87.com/untame/demo/filteredgallery/js/jquery.quicksand.js
Hope this helps.

What HTML/CSS/JS libraries can/should I use to get similar XAML functionality?

So in Silverlight I've seen an app that had 4 windows together in a box shape. When you click on a window, the windows will rotate to the upper right corner and enlarge while the other 3 shrunk. Then if you click on the enlarged window again, all the windows would go back to their normal size. Now I know all of that can be done in Silverlight (w/XAML and Expression Blend). But what would I use in the HTML/CSS/JS libraries to get the same effect.
Another way of putting it is: if you wanted to have a website with heavy UI razzle-dazzle efects what HTML/CSS/JS libraries would you use or recommend?
You should be able to get a fair approximation of this type of functionality using the jquery UI layout plugin. You will have to write some of your own javascript to get it to do exactly what you mention above, but the framework is definitely there
http://layout.jquery-dev.net/
They have a great page with a lot of good demos to look at.
Take a look at jQuery/jQueryUI. It is commonly used to manipulate DOM and has lots of adding. One of them be what you're looking for.

jQuery Tooltip Script

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!

Rotating images + content - jQuery or MooTools?

I've found a feature on two different websites that I'd like to include on one of my web projects, but I can't figure out how they're doing it. I think they're using either jQuery or mootools, but I'm not sure.
http://www.x-plane.com/index_desktop.html
I'm new here so I don't have the reputation to post the other link, but if you do a Google search for "Andrews Institute of Orthopaedics" its the top result. I'll see if I can answer a few questions to earn my keep.
The thing that I like about these is that the images and text (including links) are all rotated together. I've done a few web searches related to cycle, rotate and slide but it's not coming together for me. Can anyone give me a nudge in the right direction?
The page you linked is using prototype for this (usually because that's what the author knew, as with most libraries), and it is custom script they've written. However, jQuery has a lot of plugins with various styles, just see what one fits your taste best. I'd suggest taking a look here and a look here.
Anything you find can be automated on a timer like the site you linked, or use buttons, or both. These are all pretty flexible, I'd start by finding the plugin you want, try and get it going, then asking a question here if you have problems getting it to behave exactly how you want.

Categories