Dynamically moving div, like Yelp's moving map - javascript

I am trying to implement something very similar to Yelp's moving map. See:
http://www.yelp.com/search?find_desc=restaurants&ns=1&find_loc=mountain+view%2C+ca
Basically it starts off somewhere in the middle of the page, but if you scroll down far enough that you wouldn't be able to see it, it moves down as well. What is the best way to do this in javascript? My app is in GWT, but I think I will have to use native js to achieve this effect.
Thanks,
Jean

you need some sort of a scroll event handler. either register body.onscroll yourself or use a pre-existing component in any of a number of javascript frameworks. Google 'javascript scroll event' and you'll find plenty

Related

Advice on how to accomplish background scrolling in all directions

I'm trying to figure out what is the best way to begin creating an effect like (https://howifight.53.com) where the background is scrollable/draggable in all directions.
I know the technology behind this is pixi.js however, I can't seem to dig out how this effect is achieved. Any pointers in a good direction would be awesome.
First, you need to set up the page and styles.
You need a containing element to contain the HTML you're moving around (using overflow:hidden). Then you need an element within that to actually move around with JavaScript.
Then you need to implement some drag/drop functionality. Capture mousedown, then capture mousemove and update on each requestAnimationFrame, then stop dragging with mouseup is triggered.
That's a very basic overview, but I've mocked up an example for you to look at: jsFiddle. Feel free to ask any questions.

HTML drag and drop dashboard with resizable elements

I'm trying to develop a control where one must be able to add elements, move and resize them. The idea is to draw small diagrams by dragging some elements to the dashboard. Here is what I'm trying to accomplish:
The dashboard must have fixed boundaries (left/right/bottom/top). Elements should collide with them and not go beyond.
Elements can be added with a button or dragged from a repository
Elements must be resizable
Elements should collide
Elements must be movable - freestyle, NOT adjust at the top like gridster or gridstack. I need to be able to put an element at the bottom or at the middle of the dashboard and have empty spaces.
I must be able to get all the necessary data from the elements in order to store and recreate the dashboard (save & load).
I started by creating this small test project using the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.
But after a few searches, I still didn't find one plugin/control that behaves the way I need or is easy enough for me to change.
Gridster and gridstack make the elements go at the top.
TinyDraggable looks nice, but is not resizable. I did try to make the div elements .resizable() (adding the jQueryUI) but I wasn't able to make it work. This plugin does not have (I think) collisions, which would be OK if I managed to get everything else needed. I do like the freedom of movement of the draggable items compared to my tiny project where they go from slot to slot.
So, the question is: do you know if there is any suitable plugin (jQuery) for me? Ready to use or easy to configure/change?
Many thanks
Try https://github.com/troolee/gridstack.js with float mode. In this mode widgets do not go to the top of container.
The library is in active developing. So I can implement missing reasonable features.

Creating Drag Drop div layout

I want to create a iGoogle kind of layout in which you can drag and drop different widgets in different places. I have to use javascript or jquery only. I wanted to know how to go about it. Basically how to start and implement this kind of structure.
P.S.: I cant use any specific framework which does this job. I have to create it myself.
You can also use draggable and droppable jquery plugins. See example here
http://jqueryui.com/droppable/#revert
update
You have to write your own dragable function. The trick is you listen to onmousedown event and then redraw the element at current x, y postion.
Look at this example
Note : if you want to learn, then do not copy paste the example. Try to understand and then implement on your own !
Check out jQuery UI's Sortable interaction functionality, should give you a good starting point.
http://jqueryui.com/sortable/#display-grid

Spinning wheel in jquery with mouse-drag option

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.

Best way to rotate content within a DIV using JavaScript?

For example, see the MySQL website. It's only going to be used to rotate through about 3-5 "ads" to noteworthy areas of the site. I'd like to have some kind of link control to backtrack to the other content (again, like the MySQL site). Google gives me a bunch of very easy to implement stuff for the rotation itself, it's the link control that is difficult.
I found the cycle plug-in for jQuery to be very versatile. It can rotate elements in several ways and can add a next / prev control menu.

Categories