LanceH

@OSUblake Thank you for replying. I figured it out with the help of your example. Especially the map function. In action: https://map.polycode.co.nz/map Here's the code I used. I removed some parts to simplify it. If there's a more efficient/better way I could improve it let me know. var viewportWidth; var viewportHeight; var mapWidth; var mapHeight; var miniMapWidth; var miniMapHeight; var mapMarkerWidth; var mapMarkerHeight; var $viewport; var $map; var $draggable; var $miniMap; var $mapMarker; var pos; $(function() { $viewport = $('#viewport'); $map = $('#map'); $draggable = $('#draggable'); $miniMap = $('#miniMap'); $mapMarker = $('#mapMarker'); function loadMap() { // Code removed setMapDimensions(); } // Loader in front of this loadMap(); function setMapDimensions() { mapWidth = $map.outerWidth(); mapHeight = $map.outerHeight(); initDraggable(); } function setMiniMapDimensions() { miniMapWidth = $miniMap.outerWidth(); miniMapHeight = $miniMap.outerHeight(); $mapMarker.css({ width: ((viewportWidth / mapWidth) * 100)+'%', height: ((viewportHeight / mapHeight) * 100)+'%', }); mapMarkerWidth = $mapMarker.outerWidth(); mapMarkerHeight = $mapMarker.outerHeight(); } function initDraggable() { setDraggable(); var start_x = -(mapWidth - viewportWidth) / 2; var start_y = -(mapHeight - viewportHeight) / 2; pos = $draggable[0]._gsTransform; TweenLite.set($draggable, { x: start_x, y: start_y, force3D: true, transformOrigin: "left top" }); TweenLite.set($mapMarker, { x: (miniMapWidth - mapMarkerWidth) / 2, y: (miniMapHeight - mapMarkerHeight) / 2, force3D: true, transformOrigin: "left top" }); } function setDraggable() { viewportWidth = $viewport.outerWidth(); viewportHeight = $viewport.outerHeight(); Map = new Draggable($draggable, { type: "x, y", throwProps: true, trigger: "#viewport", bounds:{ top: 0, left: -(mapWidth-viewportWidth), width: mapWidth, height: viewportHeight }, onDrag: update, onThrowUpdate: update }); setMiniMapDimensions(); } function update() { TweenLite.set($mapMarker, { x: clamp(pos.x, 0, -mapWidth, 0, miniMapWidth), y: clamp(pos.y, 0, -mapHeight, 0, miniMapHeight), force3D: true, transformOrigin: "left top" }); } $(window).resize(function(){ setDraggable(); }); }); function clamp(x, a, b, c, d) { return c + (d - c) * ((x - a) / (b - a)) || 0; }

Hello, I have a div with a large background image that I'm using draggable and ThrowPos on for users to drag around a map. I now need to have a small scaled down version of the map so people can see where they are currently in the context of the entire map. It's common to see but I can't put a name to it making it difficult to get a start. The map to date is here: https://map.polycode.co.nz/map What I think I need is: A scaled view of the map as the background for the small version. The width and height presumably a percentage of the original map. A div over that representing the current window size and position. With some scaling factor. Some code in the Draggable drag event(?) to move 2 above around inside 1 above I'd appreciate any thoughts on 1-3 and any tips to get me started. The simplified version of the Draggable code is: Map = new Draggable($draggable, { type: "x, y", throwProps: true, trigger: "#viewport", bounds:{ top: 0, left: -(mapWidth-viewportWidth), width: mapWidth, height: viewportHeight } });

Sigh, always figure it out after posting... I got it to work with top: 0 and height: vh (viewport height). I don't fully understand why that works yet but there it is. So it's not a total waste, code that seems to work: var $container = $('#scroll'); var iw = 5100; var ih = 3560; var vw = $container.outerWidth(); var vh = $container.outerHeight(); Draggable.create("#test", { type:"x,y", bounds:{ top: 0, left: -(iw-vw), width: iw, height: vh } }); // Centre it in the viewport to start var start_x = -(iw - vw) / 2; var start_y = -(ih - vh) / 2; TweenLite.set("#test", {x: start_x, y: start_y});

Hi, I'm struggling to get the bounds setting right using draggable. I have an image that is 5100 x 3560 and I have it inside a div that takes up the viewport. I want to be able to drag the image around x and y until the top edge is level with the top of the viewport, bottom is level with the bottom etc. Using an element as the bounds will let the images bottom edge go all the way to the top of the view port - not what I need. I have gotten close with: var iw = 5100; var ih = 3560; var vw = $('#scroll').outerWidth(); var vh = $('#scroll').outerHeight(); Draggable.create("#test", { type:"x,y", bounds:{top: -(ih-vh), left: -(iw-vw), width: 5100, height: 3560} }); That seems to work perfectly horizontally but vertically, it barely moves. If I remove the height: 3560 from the above, the image can be dragged up the right distance so it's bottom edge is inline with the bottom of the viewport but I can drag it down way past the top edge being inline with the top of the viewport. Feels like I missing something simple? I did have this working fine with scrollLeft and scrollRight using movemove but touch screen devices didn't work at all.. so greensock to the rescue.

Ah man, I missed that.. Made a pen then updated the three files I'm using to 1.19.0 and the setting on page load is working as expected. Thanks for the comment. I've fixed the other issue by using a data attribute instead of a settable value.

Hello and thank you for the warm welcome. I did try the onload wrapper with no luck. The real deal might be more helpful than a codepen? http://dev.smartwater.org.nz/quiz/length (drag.js) Rotate the dial and click next. Now click back. The "length" debug on the screen is where I'd like it to go to. I've hard coded it currently to 90 as I've got another problem with it.. the liveSnap method seems to run four times on page load which resets the hidden input.

Hello, I need to set the rotation to a previous value when the user returns to a page. So they've interacted with the rotary dial, I've saved where they rotated to, they've navigated away then come back to the page. I'd like to display the dial back to where they left it. I searched here and the answers provided didn't seem to work. No movement, no errors in console either. My code: var rotationSnap = 22.5; var maxRotation = 270; var $length = $('#length'); var length_val = $length.val(); var draggable = Draggable.create('#knob', { type: "rotation", bounds: {maxRotation:270, minRotation:0}, liveSnap: function(endValue) { spot = Math.round(endValue / rotationSnap) * rotationSnap; $length.val(spot); return spot; } }); if (length_val) { TweenLite.set("#knob", {rotation: length_val}); draggable[0].update(); } I tried setting the rotation to a fixed value just to test and still no joy.