Control Positioning

Setting CSS position using Javascript

Note that if you’re trying to center content in a box, you’ll need to post more HTML. This isn’t nearly as trivial as the error Alex points out below.

2 Answers 2

You have to set them individually.

I made a variable to point to the style object, because we are modifying more than one property and because with() < . >is considered harmful.

Also, I set the 50% to both properties because of right to left assignment, and because assignment of this string to the two properties isn’t a problem (make sure you understand how this works, e.g. var a = b = [] will set a and b to the same Array object, often not desired).

var elementStyle = document.getElementById("id").style; elementStyle.position = "relative"; elementStyle.top = elementStyle.left = "50%"; 

I do the following to center an element in its parent — which could be the body or another division.

document.getElementById(«elementId»).style.marginLeft = «auto»; document.getElementById(«elementId»).style.marginRight= «auto»;

The position property determines how the element is placed in relation to the other elements on the page.

I just did a search to see if the position property can take values like the 50% you show in your question — it can’t.

I checked to make sure something new had been added to CSS that allowed setting position to something other than those I show below. I thought that maybe I was wrong about the values that position can take (and do anything — you can always code any values for various properties, than they are intended to have, but they won’t do anything). I see nothing that says position can have values like 50% and actually do something.

The possible values of the position property are:

or you can leave it off the element. From what I’ve seen position: static behaves the same as if you had not coded the position property for the element or class.

The position property can be confusing until you see the effects of the different values on the position of the element — and even then it is not always clear.

By the way — you can also change style.left and style.top but they will have no effect unless position is set to one of the possible values.

I know that sounds strange but it is how things currently work (and I doubt it will ever be changed) and we have to live with.

So, if you set the top and/or left and nothing happens, look at the position properties value,

You can «play» with property values with the «Inspect Element» facility of your browser. I think all of the major browsers have such a facility. Go read this page about «inspecting»

It allows you to change CSS properties, delete, and add new ones, to the elements as you look at the page in your browser. You can do such things as changing the margin-left to auto and the margin-right to auto and see how the element is positioned. You can change, add, or delete any CSS properties you want.

You can also change the position to one of it several values (static, relative, absolute, or fixed) to see how the element is display in relationship to the other elements on the page.

If you want to remove a property you can highlight its value and press delete and enter — that will remove the property from the element or class, if you are looking at class CSS.

This facility allows you to play «what if» with any element’s properties without actually changing the HTML or CSS and reloading the page.

I strongly suggest that you have a pencil and pad of paper and make notes every time you change anything, If you don’t you may wind up getting things the way you want them and not be able to remember everything that you changed.

To recap — to center an element within its parent, code the what follows — replaced elementid with the id of your element.

document.getElementById(«elementId»).style.marginLeft = «auto»; document.getElementById(«elementId»).style.marginRight= «auto»;

As for the position value, try them all out with the element inspector in your browser. That is a quick way to begin to understand the effects of the possible values of the position property.

Источник

Set scroll position

I’m trying to set the scroll position on a page so the scroller is scrolled all the way to the top. I think I need something like this but it’s not working:

5 Answers 5

window.scrollTo(0, 0); // values are x,y-offset 

Also worth noting window.scrollBy(dx,dy) (ref)

Note that if you want to scroll an element instead of the full window, elements don’t have the scrollTo and scrollBy methods. You should:

var el = document.getElementById("myel"); // Or whatever method to get the element // To set the scroll el.scrollTop = 0; el.scrollLeft = 0; // To increment the scroll el.scrollTop += 100; el.scrollLeft += 100; 

You can also mimic the window.scrollTo and window.scrollBy functions to all the existant HTML elements in the webpage on browsers that don’t support it natively:

Object.defineProperty(HTMLElement.prototype, "scrollTo", < value: function(x, y) < el.scrollTop = y; el.scrollLeft = x; >, enumerable: false >); Object.defineProperty(HTMLElement.prototype, "scrollBy", < value: function(x, y) < el.scrollTop += y; el.scrollLeft += x; >, enumerable: false >); 

var el = document.getElementById("myel"); // Or whatever method to get the element, again // To set the scroll el.scrollTo(0, 0); // To increment the scroll el.scrollBy(100, 100); 

NOTE: Object.defineProperty is encouraged, as directly adding properties to the prototype is a breaking bad habit (When you see it :-).

Источник

Control Positioning

This example demontrates custom positioning of the map controls. The zoom control options are placed on the left of the map and the map type controls are placed along the top of the map.

TypeScript

JavaScript

CSS

HTML

       
  
index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

git clone -b sample-control-positioning https://github.com/googlemaps/js-samples.git cd js-samples npm i npm start 

Other samples can be tried by switching to any branch beginning with sample- SAMPLE_NAME .

git checkout sample-SAMPLE_NAME npm i npm start 

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-07-28 UTC.

Источник