Using Javascript to move elements positioned using CSS Top Bottom Left Right

Lets say the style specifies a bottom and left position, and I update the top and left properties using javascript, the top and left properties get set, but the style specifies a bottom property. It might be fun to have a range of buttons that move the element different amounts, perhaps by adding data attributes to the buttons: We can then process that amount using the attribute in the function.

Using Javascript to move elements positioned using CSS Top Bottom Left Right

I have a container that does not have any set dimensions. I want the size of the container to be driven by it’s contents. Like so:

 #containerTL < position:absolute; bottom: 0px; right: 0px; margin: 5px; border: 1px solid black; cursor: default; >#content < position:relative; background: gray; margin: 0px; top: 0px; height: 100px; width: 120px; cursor: default; > I also want to move the position of the container and have it's contents come along for the ride. Setting the position by modifying the containers style.top & style.left is easy, the problem I have is that the elements may be positioned using "bottom" or "right". Without set dimensions, the container grows, rather than move when I set the top and left properties.

I think I understand the problem. Lets say the style specifies a bottom and left position, and I update the top and left properties using javascript, the top and left properties get set, but the style specifies a bottom property.

I suppose I could always set the bottom and right properties to «auto» once I update top and left. but what if I wanted to be able to send each element back to it’s original position, generically, without writing a special case for each element.

Here’s a fiddle to illustrate the problem: fiddle

this.style.right = ''; this.style.left = ''; this.style.top = ''; this.style.bottom = ''; 

and it will unset anything you set via .style and revert back to what you defined in the stylesheet.

See this fiddle for an example. Clicking once moves it, clicking again should move it back to the original position.

Demo

You need the following code for the other two sides

this.style.bottom = "auto"; this.style.right = "auto"; 

Move Element Position in JavaScript, We can use the element.style property to move the element up, down, right, or left using keyboard arrow keys. Use Arrow Keys to Move Element Position in JavaScript

Using CSS, how do I move a DIV to the left of the centre position?

A fairly standard way to horizontally centre a DIV is to set the left and right margins to auto .

However, I have a DIV that I want to be mostly horizontally centred, but I want to nudge it a little toward the left.

I tried setting the margins like so:

. but both resulted in the DIV being positioned further to the right.

I tried adding padding to the DIV , but that also only moves it to the right.

In short, it seems no matter what I do, the DIV moves to the right, not to the left as desired.

How do I nudge a DIV a little to the left of centre?

A different way of handling this is making a parent wrapper div. Where you set that to auto so that parent is centered, but the child div is then starts at the center but moves to the right. See fiddle http://jsfiddle.net/4H26W/1/

Then if you wanted to further optimize the position of the child div, you could just add some left styles to it

position: relative; /* has to be position relative for left to work, or you could just do margin-left: -50px; too */ left: -50px; 

Since you tagged css3 for your question so you can use it :

margin: auto; -webkit-transform: translateX(10px); /* 10px to left */ -moz-transform: translateX(10px); /* 10px to left */ -ms-transform: translateX(10px); /* 10px to left */ transform: translateX(10px); /* 10px to left */ 

Turns out I was able to do what I needed to do with floating the DIVs.

there is an option with text-align, display and negative margin .

Using Javascript to move elements positioned using, You can do: this.style.right = »; this.style.left = »; this.style.top = »; this.style.bottom = »; and it will unset anything you set via .style and revert back to what you defined in the stylesheet. See this fiddle for an example. Clicking once moves it, clicking again should move it back to the original position. Share. Code samplethis.style.right = »;this.style.left = »;this.style.top = »;this.style.bottom = »;Feedback

How to move a div from left to right using javascript

I have div named movingImage that I want to move to the right 50px every time I click a button.

The element you want to move, needs to have the CSS property position: relative; :

I also changed .style.left to .style.right , you will see why:

var imageOffset = 0 function moving_Image()

If you don’t understand something else, please feel free to ask in the comments.

  function movingImage() 
Move Image!
 

I think CodeiSir has it covered, but I wanted to share a few notes that I made playing around with the code about some general JavaScripty things, as well as a couple of new things I learned today.

1) Separate your JS from your HTML.

document.querySelector('button').onclick = moving_Image; 

2) There’s an element called offsetLeft (also offsetRight , obvs) which is a read-only attribute that shows by how much the upper left corner of the current element is offset to the left. So we can, for example, write:

div.style.left = (div.offsetLeft + amount) + 'px'; 

3) It might be fun to have a range of buttons that move the element different amounts, perhaps by adding data attributes to the buttons:

We can then process that amount using the dataset attribute in the function.

The code in full. Note I’m also passing in the div element with the click event.

function movingImage(el, e) < // adding a preceding + coerces the string to an integer var amount = +e.target.dataset.amount; el.style.left = (el.offsetLeft + amount) + 'px'; >var div = document.getElementById("movingImage"); var buttons = document.querySelectorAll('button'); // [].slice.call basically makes the nodelist an array // so that you can use the native array functions on it. [].slice.call(buttons).forEach(function (button) < // here were just binding the div element to the click // event. We could just have easily written // button.onclick = movingImage; // and then referred to div instead of el in the function button.onclick = movingImage.bind(this, div); >); 

This is My Version to move a div left to right using javascript:

    #myDIV  
Click the "Try it" button to position the DIV element 100 pixels from the right edge:
 
Note: If the position property is set to "static", the right property has no effect.
 Try it 
    

src: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_left https://www.w3schools.com/jsref/jsref_if.asp

Javascript — How to move an image/div from right to left, 3 Answers. Try setting , animating left property using values of window.innerWidth , container element width. Try this out, this truck div repeatedly goes from right to left. Try this out, it calculates the exact width of object and window — should always work no matter the screen size.

Move element right and left while scrolling issue

I’m trying to move an element to left and right while scrolling up and down in this example FIDDLE the problem is the div will keep moving to reach out of the page and doesn’t return to its original position. This is the example I’m trying to simulate Original Example

var lastScrollTop = 0; $(window).scroll(function(event) < var st = $(this).scrollTop(); if (st >lastScrollTop) < var offset = $(".inner").offset(); var w = $(window); var x = offset.left; console.log(x); $(".inner").css("left",x+50); >else < var offset = $(".inner").offset(); var w = $(window); var y = offset.left; console.log(y); $(".inner").css("left",y-50); >lastScrollTop = st; >); 

You need to offset it by the scrolled amount, not move it by an amount each time. You are queuing up multiple moves and adding 50px each time.

var offset = $(".inner").offset(); $(window).scroll(function(event) < var st = $(this).scrollTop(); $(".inner").css("left", st + offset.left); >); 

JSFiddle: https://jsfiddle.net/TrueBlueAussie/x0vtopzv/1/

Once it is locked to the scrolling, you can adjust the position using a multiplier on the st value.

Note: JSFiddle has an 8px margin on the body . That throws out the offset position and needs to be removed or taken into account.

Html — Make element move by using Javascript, block.style.left will return a string that includes «px» — it won’t be a number. You can do: x = Number(x); //or x = parseInt(x, 10); When you set the position, remember to add the «px»: block.style.left = xPos[index] + «px»; EDIT: Ok, the key problem is ‘style.left’ is not reading because it was set with CSS and not …

Источник

Свойство position

Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

 
Без позиционирования ("position: static"). 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

В этом документе сейчас все элементы отпозиционированы статически, то есть никак.

Элемент с position: static ещё называют не позиционированным.

position: relative

Относительное позиционирование сдвигает элемент относительно его обычного положения.

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

position: relative; top: 10px;

 h2 
Заголовок сдвинут на 10px вниз. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Координаты

Для сдвига можно использовать координаты:

• top – сдвиг от «обычной» верхней границы
• bottom – сдвиг от нижней границы
• left – сдвиг слева
• right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

 h2 
Заголовок сдвинут на 10% влево. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Свойства left/top не будут работать для position:static . Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

Абсолютное позиционирование делает две вещи:

1. Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
2. Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.

• Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
• Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

 h2 
Заголовок в правом-верхнем углу документа. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

Браузер растянет такой элемент до границ.

Источник