Develop Reference

Move to center a selected object with scrollableWidth and scrollToHorizontalOffset

I am having a number (10) of objects which are clickable, but struggling with moving a selected one to the middle of the scroll view. You can see on the image below that number four is selected but not in the middle.
I tried to use:
myScrollView.scrollToHorizontalOffset(myScrollView.scrollableWidth / 2, true)
But it always bring the whole scroll view into the middle. Can anyone help with making it working? Thank you in advance.

Since You didn't put the Angular tag, I am assuming you are using the Typescript flavor of Nativescript.
In order to do this, you'd have to find a way keep track of your base (starting point) and your target (the one that the user just clicked) so that you can get there x offsets and animate the scroll from one to another.
Here's an example in your code behind:
export function() {
const base = page.getViewById('label1') as Label;
const target = page.getViewById('label2') as Label;
myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x, true);
}
Now, the code above will just do a minimum scroll to get to your target element (and you can use a different element other than the example label). But if you want to make it center, you can add an additional offset depending on how wide your scroll container is.
eg.
myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x + (myScrollView.width / 2), true);
Note that this is my hypothesis from something similar I've done before (just not needing to be center). So might need to play with the additional offset.
EDIT: (This is how to make it work specifically according to the OPs need)
myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x - (myScrollView.scrollableWidth / 2)), true);

HTML Element Divided in Half by Horizontal Line (at its waist)

Long-time lurker here. This is my first post (and I'm an electrical engineer, not a programmer).
I would like to have an element in HTML for which I can detect a click on its upper-half and its lower-half. Specifically, suppose I have a large numeric digit, and if you click above its "waist" it increments, and if you click below its waist it decrements. I then need to put several of these next to one another, like a "split-flap display" at a train station.
I already have all the javascript working for increment-only, but I want to make it easier to decrement instead of having to wrap all the way around with many clicks. I have so far avoided using jquery, so if you can think of an HTML-only way to do this I would love to hear about it.
I realize I will probably have to wrap two smaller containers (an upper and a lower one) into a larger container, but how do I get the text to cover the height of both internal containers? I probably want to avoid cutting a font in half and updating upper and lower separately.
Thanks,
Paul

This should work:
element.addEventListener('click',function(e){
//here's the bounding rect
var bound=element.getBoundingClientRect();
var height=bound.height;
var mid=bound.bottom-(height/2);
//if we're above the middle increment, below decrement
if(e.clientY<mid)
;//we're above the middle, so put some code here that increments
else
;//we're below the middle, so put some code here that decrements
},false);
element is the element that you wish to apply this effect on

Jquery slide out menu

http://jsfiddle.net/HfdXY/368/
That is my Jfiddle, I have a few questions.
Why do my buttons only slide out on the first click, then stay stationary from there on after?
How can I put the code in a single function instead of having two instances with the only difference being the CSS for button B is moved 40 pixels to the left.

Change the 'right' animation to 'left'. http://jsfiddle.net/73qaC/2/
You only want to change the left pixel positions from 0 to xx and back again.
Updated the jFiddle above to use 1 method. This should give you an idea of how to achive this using one method.

For your second one this is my solution
$("#openMenu,#openMenu2").click(function() {})
put like this and give the following code of your at once.and then you can seperatly create its css inside it like
$("#openMenu").css();
$("#openMenu2").css();

Jquery draggable inside-out containment

instead of having the containment of the draggable element around it, how can I have it inside it? So you can drag the element anywhere as long as the edges of it do not collide with the element inside of it?

One approach is to use the drag event and update the ui.position or ui.offset fields, to manually constrain the item.
Here is a jsfiddle to illustrate the concept, although this doesn't fully implement what you describe.

You could fake it by making a real containing component that restricts your draggable element as if it is constrained by the smaller element. You would just have to make the dimensions of the real container like this:
Container.height = (Draggable.height - Restrict.height) + Draggable.height
Container.width = (Draggable.width - Restrict.width) + Draggable.width
Then, you would also need to counter the dragging motion so that the contained restriction element doesn't seem to move when the draggable element moves. Either that or the immobile section could be a floating div.

Building upon #RustyTheBoyRobot's answer you could also accomplish in CSS alone if you have known dimensions of your draggable.
Live Example - jsbin.com/agovex
The obvious downside of this is if you want to reuse this in multiple situations it's not going to work because the values are hardcoded in CSS. But if you only need it for one thing with known dimensions I find the CSS only approach simple and elegant. There's only one line of JavaScript to create the draggable.

If anyone else is interested in this, using Rusty's code and logic here's a JSfiddle link.

jQuery - Placing a div with offset, then placing it again = different results

I'm placing a div, by using another div id as a reference on the page (to make sure that it appears where I want it to). The code is as follows:-
$('#' + contentDiv).offset({top:($('#' + placementID).offset().top), left: ($('#' + placementID).offset().left)});
The problem is, that though the placementID offset figures are the same each time. Whenever I call this again, it seems to double and put a new left offset that is the the same amount on-top of the previous offset.
E.g. I call a function on a click and say, place this div next to this placement div please. It does it. User then exits and then does another click and the same function is used to place another div next to the same placement div. It does it, but instead of placing it in the same position as last time, seems to reference the position of last time as the 0 point and adds the left amount to that. Meaning the div is placed double distance away now.
Please note; I have consoled out the placement box top and left dimensions and it hasn't changed after each time.
Not sure what's going on.

If someone runs into this, I've managed to solve the problem very simply... by using css instead of offset. I.e.
$('#contentDiv').css({top:placeTop,left:placeLeft});

Im guessing that when you change the offset of $('#' + contentDiv) it affects the offset of your $('#' + placementID) that you subsequently call.
Say you have 3 placement Id's #1,#2 and #3.
With offsets #1: 0,0 #2: 0,100 and #3: 0,200.
Then you set #contentDiv's offest to #1's offset.
Now, #contentDiv's offset is 0,100. This makes your placement offsets #1: 0,100 #2: 0,200 and #3: 0,300 respectively now. Which is probably what is throwing you off.

According to
http://bugs.jqueryui.com/ticket/6868
The element must be visible before calling .position().
after changing my code to show the element before calling offet() it worked like a charm.

Reset your properties before setting the desired offset-value with (e. g.)
$(this).css('top', '').offset({top: desiredTopOffset});