Develop Reference

limit on mouse horizontal scroll with css property translatex

I am writing a code which when a user clicks on premium plan button translateX(-300px) is set for a DIV which has property "overflow-x: scroll;" and the premium column is showing. but the problem is when user drag over the page to the right and left content should be visible, the remaining 300px view of DIV does not appear and show. I mean on mouse horizontal scroll, translateX(-300px) property limits us from scrolling to the left. should I call a function on mouse scrolling to override this property? excuse me because of bad English and Thank you for your response in advance.

Instead of using translateX, you should look into element.scrollLeft if you want to scroll a div.
MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

How to dynamically center a div over another div using offsetWidth and offsetLeft

How do I set left on a div so that it always appears centered over another div despite varying in width?
jsFiddle: http://jsfiddle.net/y04nse5x/
I'm trying to get each label to align perfectly over the dot, without needing a container. I'm sure this is possible withoffsetWidth and offsetLeft, but I just can't get the math right.
The dots are placed in arbitrary locations on the page, and each dot has a mouseover event listener that will place a label over the dot. I can get the label to appear over the dot using offsetLeft but it's not centered, because the label can differ in width due to different text that depends on which dot it is appearing over.
My actual website where I'm having this problem: http://briennakh.me/world-around-you/ (hover on the menu buttons on the top right)

In your CSS, you're setting the left of the description. Let's look at what the left is equal to.
hopefully my diagram made sense, thus:
var leftValue = this.offsetLeft-(description.offsetWidth-this.offsetWidth)/2;
http://jsfiddle.net/y04nse5x/1/

You have to take account on description width and button width.
Here's a fiddle: http://jsfiddle.net/khe8j2ms/
But I would probably use additional container and style:
left: 50%;
transform: translateX(-50%);

Scroll HTML table horizontally using JS

How would I go about scrolling HTML table horizontally to a specified column using JS, I have overflow: scroll; on my table and I want to know if I could do something like:
myTable.scrollToColumn(column_ID_or_something_here);

You can use scrollIntoView
document.getElementById("column_ID_or_something_here").scrollIntoView(true);
If scrollIntoView somehow breaks DOM, use focus() method. Key point here if element don't have tabindex first you need add it.
In your case table column probably don't have tabindex, code will be:
element.setAttribute('tabindex', '999');
element.focus();
If you need this for Selenium here code (Java):
((JavascriptExecutor) driver).executeScript("arguments[0].setAttribute('tabindex', '999'); arguments[0].focus();", seleniumElement);

first of all, take any one element from that column using document.getElementsByClassName("class_name")[n].
Applying getBoundingClientRect() method will give you that elements' left and right properties with respect to their position on screen as follows,
document.getElementsByClassName("class_name")[n].getBoundingClientRect().left
document.getElementsByClassName("class_name")[n].getBoundingClientRect().right
if left is negative then you'll have to scroll on right or else you'll have to scroll on left.
table_Element.scrollBy (x, y) will help you to scroll the table.
Put y as 0 as you dont want to scroll vertically and put x as -1 * (value of left).

Scrolling textarea to specific area with javascript

I have a textarea with a scrollbar. I need to change the position of your cursor in the textarea with javascript AND scroll the textarea so your cursor is visible. I am using elem.selectionStart and elem.selectionEnd to move your cursor, but when I move it to a point that is not visible, the textarea does not scroll so the cursor is visible.
More details (probably TL;DR)
I am creating a slideshow editor and have a preview of the complete slideshow next to an editor (textarea with scrollbar) for the content. As you move your cursor through the textarea, the slideshow changes slides so you are always viewing the slide that you are editing. I need to get it so changing the slide (using buttons) moves your cursor so you can see the code that generated that slide.
// slideBoundries has numbers which are the indexes where the slides begin/end
// eg: [0, 81, 140, 250] for slideshow with 3 slides
if (doc.editor.selectionEnd > slideBoundries[curSlide] &&
doc.editor.selectionEnd < slideBoundries[curSlide + 1]) {
return;
}
doc.editor.selectionStart = slideBoundries[curSlide];
doc.editor.selectionEnd = slideBoundries[curSlide];
I could just count the number of newlines in the file so I know how far to scroll down, but there are many lines that are long and take up multiple lines. I am using a monospaced font so counting the number of newlines and lines that take up multiple lines, but I would like an easier way. Is there a function I could call to mimic what happens when the user moves their cursor as the textarea always scrolls to that point when the user clicks...
EDIT:
Due to popular demand, here is a fiddle: http://jsfiddle.net/tShQ2/
The method I'm going to use to fix this issue is create a phantom textarea that has same width, but autosizes to height. It has to be visible or else it won't work, so make it abs position and move it off screen. Then put the text before the desired cursor position in it. Then scroll the real textarea to the height of the phantom textarea.

Your solution is a good one, but let me suggest a couple of things to make it easier.
Use a phantom div, rather than a textarea, since a div will autosize automatically. Just make sure to match the styles.
To hide your phantom div use:
visibility: hidden;
position: absolute;
This has the same effect as display: none, while allowing the div to have a height.
One more thing. For IE, you can create a range from the selection and scroll to it explicitly:
document.selection.createRange().scrollIntoView();

Custom cursor interaction point - CSS / JQuery

I'm trying to use a custom cursor for an online game, in this case it's a sniper scope.
The problem is when I reference the cursor via CSS, the interaction point is still the top left of the icon, whereas it needs to be dead center of the icon for the cursor to make any sense.
Here's the cursor:
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default;
Here's a demo: http://jsfiddle.net/9kNyF/
If you put the red dot from the cursor over the red dot I created in the demo, it won't fire the click event. You have to attempt to aim the top left corner at it.
If you set the cursor back to cursor:default; you'll see the click event fires just fine, it's just a matter of "aiming" the cursor.
The game is coded in JQuery so if I need to add some logic there for cursor offset or something lame, so be it. Ideally I want this to be a CSS fix.
Thanks!

You just need to provide the hotspot's <x> and <y> position in your CSS:
In your example, the center happens to be 24px in from the top/left (huge ass cursor lol)
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;
http://jsfiddle.net/9kNyF/15/ see?

As far as it not firing the click event try placing this around your event listener.
$(function(){
$('#point').click(function(){
alert('clicked point');
});
});
With the centering of the cross hairs it might be easier to use a div with the background of the image and using jQuery to place the div over your cursor in the correct place.
<div id="crosshairs"></div>
<script>
$(function(){
$("body").mousemove(function(e){
var CrossHairWidth = $('#crosshairs').width();
var CrossHairHeight = $('#crosshairs').height();
$('#crosshairs').css('top', e.pageY - (CrossHairHeight / 2));
$('#crosshairs').css('left', e.pageX - (CrossHairWidth / 2) );
});
});
</script>
You then hide the cursor doing something like so:
cursor: url(http://www.seancannon.com/_test/transparent.png), default;

whatever tool you used to create the cursor, should have an option for managing the click target area. You'd be chasing you tail looking for a javascript/css solution.