Jump to content
GreenSock

grimey

draggable concepts

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi--

 

I have a very vertical map (2300px tall) and want to drag that within a window that fits the browser window 100%, so it scales when the window scales.

 

To add another level of complexity, I need to add other divs that scroll with the map -- map labels. These labels will be controlled with other JS functions so they can't be images.

 

Is this doable? I'm not even sure how I'd layout the containers for this.

 

Any help is appreciated.

 

Thank you!

 

 

Link to comment
Share on other sites

Hello grimey, and Welcome to the GreenSock Forums!

 

I don't have access to your big 2300px map image.. but ..

 

1) Regarding your first sentence...

 

Here is an codepen example of using GSAP Draggable to drag an image within a div. This is much smaller version of that concept, since codepen would not let me upload a large image to test with. But it will get you started:

 

Example #1 (simple smaller concept):

See the Pen tFokL by jonathan (@jonathan) on CodePen

 

To get the div to fit with the browser window 100%, here is another example. Note that I'm making that small image fill the div which is filling the browser window:

 

Example #2 (fit with browser window 100%):

See the Pen bKAqn by jonathan (@jonathan) on CodePen

 

I commented in the CSS to see how to make the image resize with the browser. So try forking the examples, and add your big 2300px map image to test with.

 

2) Regarding your second sentence...

 

I'm kind of confused what your asking for.. Are you talking about adding markers and lables?

 

Also feel free to checkout the Draggable Docs

 

Hope this helps? :)

  • Like 1
Link to comment
Share on other sites

Thank you! Love the example. That's really the jumpstart I needed.

 

For the labels, I'll be placing dots on the map with the names of locations. Users will click on them to open more info. Also, the label text will change based on user preferences, so they'll be very dynamic.

 

My thought was to add the map as the background image of the draggable div and add absolute positioned divs for the labels inside.

 

I don't have all the images and content yet, just trying to get a headstart on this project. I'm sure they'll arrive hours before it all needs to be online. :)

 

Thank you again!

Link to comment
Share on other sites

No worries .. glad to help!

 

If you need a google map type marker done in pure CSS .. here is another codepen example I made of a Google Map Marker Re-created in CSS:

 

See the Pen xCign by jonathan (@jonathan) on CodePen

 

:)

  • Like 1
Link to comment
Share on other sites

Ack. Please ignore this for a moment. I'm coding without caffeine. :)

Link to comment
Share on other sites

Is there a way to make this work by dragging on a div instead of an img? I need to drag more than just an image, unfortunately.

 

EDIT: Okay, again, coding without caffeine. I've got it now.

 

Thank you!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×