I'm trying to get javascript to scroll the page to a target position, something like:
scrollbarxpos += (targetscrollbarxpos - scrollbarxpos) / 100.0f;
And basically keep calling that line of code until scrollbarxpos = targetscrollbarxpos.
Any idea how I can go about doing this?
Have you looked at the scrollTo function? It allows you to scroll to a position on a page with x- or y- coordinates. If you want to animate the scroll, you could use some combination of setInterval and clearInterval to call scrollTo until you've reached your desire y-position.
You can always use jQuery:
http://jsfiddle.net/jtbowden/vJmcK/
Related
I'm creating a context menu for certain elements using a PopupPanel; the menu itself is going to be fairly large and complex. What I'm looking to do is to have a list of buttons, plus an image and some text, related to the element clicked.
My problem is that I'd like the buttons to always display directly under the clicked element, because that's convenient for the user; the issue is that when PopupPanel is near the edges of the screen, it automatically changes position to be fully visible, not aligning its left side to the element as usual. I like this behavior, but it moves the position of the buttons away.
So what I'd like to happen is: normally the buttons are on the left of the panel, the other stuff is to the right. When the panel is close to the right of the screen, I'd like the buttons to instead be on the right (and thus under the clicked element) and the other stuff on the left.
Is there a clever way to do this, either in GWT or better yet, using only CSS? PopupPanel itself doesn't seem to tell you when it's going to get flipped, sadly. The only solution I currently have is to manually check the position and width of the popup before showing it and adjust accordingly, but I'm hoping there's a better solution.
Here is what I suggest (based on my own implementation of a similar use case):
Have the position callback implementation accept references (in constructor) on:
PopupPanel element
element on which user right cliked
the content you put in the PopupPanel
Replicate (I know this not DRY but implementation is package private) the code from default position callback
When opening to the right invoke a method that changes the layout of your content (CSS based or otherwise)
I hope it helps. If you find something better let me know.
I want a circle object to change position, I would imagine that I do the same as I do with markers -
marker.setPosition(latlng);
So -
circle.setPosition(latlng);
But this doesn't work. The marker changes position, but the circle doesn't. All I can find is this link - https://developers.google.com/maps/articles/mvcfun
Would that seem like the best way to go about this? I've not had a proper ready through it, so I'm going to try implement the above.
You need to change the center property of the circle to move it (it doesn't have a position property)
circle.setCenter(latlng)
https://developers.google.com/maps/documentation/javascript/reference#Circle
Just an extension for above answer
MyLocationCircle.setCenter(new google.maps.LatLng(latitude, longitude));
I am using jQuery UI to drag a clone of an object onto a droppable space. However, I need the droppable space to have the position: relative property because the droppable space scrolls and I want the dropped elements to scroll with it. However, when I drop the clone it jumps down and to the right instead of staying where I dropped it. How would I combat this?
Here is a fiddle that demonstrates my problem: http://jsfiddle.net/nEN7h/42/
EDIT: Updated based on my comment.
try this
$(".canvas").droppable({
accept: '.to_drag',
drop: function(event, ui) {
var clone = $(ui.helper).clone();
var parent = $('.canvas.ui-droppable');
$(this).append(clone);
var leftAdjust = clone.position().left - parent.offset().left;
var topAdjust = clone.position().top - parent.offset().top;
clone.css({left: leftAdjust, top: topAdjust});
}
});
basically the idea is that when you enclose the droppable inside a div that is relative.. any element enclosed within droppable gets the offset position of the parent unnecessarily added to it.. so you simply remove the extra offset at the drop call back function.
Please pay close attention to difference between .offset() and .position().. that is key to understanding the above code.
note:
I tried using jsfiddle.. but jsfiddle fiddles a bit with the positioning.. try it on your browser alone and it should work
Here is a solution but I'm not sure, if it is that, what you're looking for.
Replace this line:
$(this).append($(ui.helper).clone());
with this one:
$('<div class="to_drag"></div>').appendTo(this);
If you don't use the ui.helper it works.
I'm working on Flex component which can be resized using handles on the right and left (that is, if you click and drag the left side, the component will grow to the left, if you click and drag on the right, it will grow to the right).
Right now I am using:
var oldX:Number = this.x;
this.x = event.stageX + (initial.x - initial.stageX); // Move the left edge to the left
this.width += oldX - this.x; // Increase the width to compensate for the move to the left
But that makes the right side jump around, and generally looks ugly.
What is the "right" to do this? Is there something fundamental I've gotten wrong?
Thanks!
Edit: The jitter occurs on the right side of the component. When I set this.x, the component moves to the left, the screen redraws, then the width is updated, and the screen redraws again.
I'm not a Flex guy, but I imagine your jitter is something to do with the Flex framework internally using Stage.invalidate() or some such thing to cause redraws during frame execution.
I imagine there's probably a "framework" way to deal with the problem, but for a workaround to make your change into one atomic operation you could update the object's transform directly, along these lines:
var dx:Number = // however you're finding this
var m:Matrix = new Matrix();
m.scale( scaleX*(width-dx)/width, scaleY );
m.translate( x+dx, y );
transform.matrix = m;
That should work for a simple graphic, but I'm not sure if it would work with a component that probably needs to catch events that the dimensions have changed and redraw itself. I think that's the only way to make your update atomic though, so if something along those lines doesn't help then you'll need an answer from someone more up on the framework.
Had the same problem.
The problem is that the stage isn't refreshing enough.
Just add stage.invalidate(); after your 2 assignments ...
Depending on how you have the listeners for the handles set up, the problem could be that the resize code is called over and over again because when you set the new x position for the component the handle will go under the mouse cursor effectively calling the resize code again and so on.
I am applying hb.horizontalScrollPosition = value and it does not work with horizonalScrollPolicy = on/off. Is there any other way to achieve this?
Thanks.
When exactly are you setting the scroll position relative to loading the content? Perhaps the content isn't measured yet. Try using callLater to wait a frame before setting the scroll position.