I could find tutorial and code for bubble effect with CSS and static images: http://aext.net/example/bubble-css
I have also put together various sharing buttons to make a sharing bar:
http://pollwidget.org/test.html
My question is, how do I create a sharing bar with bubble effect? Because all these working buttons are got from embedding a javascript code from twitter etc, while the bubble effect is with static images.
I am not looking for complete source code, but some hints and tips to get me started would be appreciated.
I'm not sure it would be possible or wise considering they aren't images, they're individual widgets from various external sources built in HTML/CSS/JS.
You might be able to achieve something along the lines of a bubble effect if you customise an AddThis toolbox - http://www.addthis.com/help/toolbox
Related
I want to know the process taken to make menu page with a 3d logo like on this website: activetheory.net
Here's the screenshot of the menu page:
And also how the logo is moving according to the pointer location.
There are several ways to accomplish that effect, or similar to it: HTML5, JavaScript or Adobe Flash, to mention a few.
I believe that in the case of that page in specific, JavaScript was utilized.
You might want start here: https://www.w3schools.com/js/js_htmldom_animate.asp
Once you master that, and basic JavaScript in general, you can start looking into Unity (https://unity3d.com)
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.
Let's say that we have the following image:
I'm thinking of drawing this image with all the possible connections and then position some labels on their correspondent arrow... but this may not be the best approach, because the position of each label would be different depending on screen resolution. What do you think about this approach?
My question is: anyone knows any JavaScript library, jQuery plugin capable of drawing something like the image above? I mean, capable of doing multiple connections and that could be implemented with AngularJS ?
Here are some new details:
After I make some tests with JointJS, I think it is what I need, but...
the following link is an example of JointJS with a demo of connections/links between sources and targets that I would have on this project... The thing is: as you can see on this demo has alot of links and it's hard to interpret. Can anyone help me on how to make this look better? There's a better way of representing this? (on this example the link's are static but they would be done on a dynamically way).
You can check out below urls:
JSPlumb provides a means for a developer to visually connect elements on their web page
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://jsplumbtoolkit.com/demo/home/jquery.html
Wirekit looks good for creating custom wired flows:
http://neyric.github.com/wireit/
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
http://www.jointjs.com/
Here is a nice angular library
https://github.com/codecapers/AngularJS-FlowChart
and an example of it in action
https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html
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.
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.