In a dialog, I resize some images and then force the window to sizeToContent. Then, I want the dialog to center itself to the screen. How can I do this?
I also searched around and looked to the MDC for anything which would center it but found nothing so I created this! This will work both on window and dialog.
var w=(screen.availWidth/2)-(document.getElementById('windowID').width/2);
var h=(screen.availHeight/2)-(document.getElementById('windowID').height/2);
window.moveTo(w,h);
The only thing you must change is windowID to the ID value of your window.
It will work on all screen resolutions as it takes the total screen width and height then divides it in half thus giving the center of the screen then it subtracts your width and height settings to take them into account but divides them by half as well to offset the window as without the offset it will not be centered.
I hope this has helped!
The end result would be a window that moves itself? Please don't make it too annoying :)
Anyway, you'll have to do it manually using window.moveTo and various screen properties (see https://developer.mozilla.org/en/DOM/window)
Here's an interesting example, although it doesn't center the window, it ensures it's visible:
http://www.koders.com/javascript/fid3F51B87DFD457428278627805CCA8D39ADC13455.aspx?s=window#L3
A <dialog> element defines the moveToAlertPosition() and centerWindowOnScreen() convenience methods for you, and also copies them to the global scope so you don't have to scope them with document.documentElement.
Related
Let's see if someone comes up with something. I have the following problem:
I need to know, with javascript or jquery, when an element has finished displaying on the screen.
It is a table that is displayed on the screen as a modal popup window. It has a main container div with the size of the entire viwport, with a z-index of 10000 and display flex so that the div that acts as a popup window is centered. What I need to know is the clientWidth and offsetWidth properties of the body of the table to determine the width of the scroll bar which is equal to offsetWidth - clientWidth, and apply this width to the right margin of another div.
When the table is finished filling in a javascript function, the d-flex class is added to the main container so that the popup modal window is displayed.
The problem is that until the popup is not physically seen on the screen it gives me that both properties are the same, that is, there is no scroll bar visible. Only when popup appears on the screen is that they are different because there is a scroll bar. The scroll bar only appears when the popup has been physically displayed on the screen.
If I ask for any visibility properties they tell me that everything is visible but it hasn't really been shown on the screen yet.
I've even tried with a jQuery extension of the show function, but it doesn't give me the results I need either.
Thank you very much for your collaboration.
Greetings
You could do a work around IF you never desire the two property values to be the same. You could implement a setInterval to keep checking the property values:
let x = setInterval(function(){
if (propertyValue1 !== propertyValue2){
clearInterval(x);
//do or trigger any code that you need to here
}
},100)
beginner programmer so apologies if this is really obvious!
How can i get my website to open at a specific point on the page (in HTML)?
I can't find what this is called anywhere! Not Anchor etc. The website will be wider and longer than most screens. I want the screen/viewport to open at the very centre of a 2500x2500 pixel background.
I am working in DreamWeaver CC on Mac OS X 10
Thanks in advance!!
p.s no code to post, this is my first port of call in putting this together
You can get the client's screen with $(window).width() & $(window).height() , it's jQuery code so you'll have to add a balise script to the jQuery lib on your web page. Can you tell me more about what you want to do ? I have trouble understanding. You don't want any anchor but you want ? Apoligies for not understanding.
Try this bit of Javascript to fire when the page loads
window.onload = function(){
window.scrollTo(1250, 1250);
}
The window.scrollTo(x-coord,y-coord) function takes two parameters, x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left and y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.
I picked 1250, because that's 2500 divided by 2, but you may have to tweak that a little if you want that spot in the middle of the screen. You will have to get the screen's viewport and do some math.
(hint: window.innerWidth & window.innerHeight gives you the dimensions including the scroll bar; document.documentElement.clientWidth and document.documentElement.clientHeight is without the scrollbar)
The documentation for window.scrollTo() is here: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Some info about the viewport dimensions can be found here: http://ryanve.com/lab/dimensions/
As bryguy said, you can calculate the center of your screen and use scrollTo(). Alternatively, if you have a particular element that you want to scroll to, give the element an id and use the scrollIntoView() function. You can also center an invisible div positioning the div absolutely and setting the top and left values to 50%:
HTML
<div id="scrollToMe" style="position: absolute; top: 50%; left: 50%;"></div>
JS
window.onload = function() {
document.getElementById('scrollToMe').scrollIntoView();
};
You can do this without jQuery. You can use the native JavaScript function window.scrollTo() to scroll to the center.
To calculate the center of the screen all you have to do is:
For vertical center
Determine the height of the viewport: The height of the viewport is stored at document.documentElement.clientHeight.
Determine the height of the entire document: You can use document.documentElement.offsetHeight or document.body.scrollHeight to get the height of the entire document.
Calculate: Now simply subtract the viewport height from the document height and divide it by two like this:
(document.documentElement.offsetHeight - document.documentElement.clientHeight)/2
For horizontal center
Determine the width of the viewport: The width of the viewport is stored at document.documentElement.clientWidth.
Determine the width of the entire document: You can use document.body.scrollWidth to accomplish this.
Calculate: Now simply subtract the viewport width from the document width and divide it by two like this:
(document.body.scrollWidth - document.documentElement.clientWidth)/2
Now time to scroll
Finally, you'll want to make the window scroll to the calculated point.
window.scrollTo(centerWidth, centerHeight);
If you want to do all of it in one step, you'd do:
window.scrollTo( (document.body.scrollWidth - document.documentElement.clientWidth)/2, (document.body.scrollHeight - document.documentElement.clientHeight)/2 );
Please note that we've used document.documentElement.clientHeight (and clientWidth) and they give you the viewport size without the scrollbars. If you wish to include the scrollbars you'll have to use other variables. You can find examples of how to get those measurements on the internet.
For more information: Center a one page horizontally scrolling site in browser (not centering a div)
Is it possible to have text fill the page depending on the window dimensions?
For example, I would like to have something like the following:
The text of the left of the screen fills the div that is it in. If I were to re-size the window the number of lines of "ExampleText" should change.
Unfortunately I don't have any code to show since I have no idea how to start this. I imagine that I'll have to use JS for some of it, but I'm not sure how to get JS to gather the dimensions of the window.
Many thanks.
You can get the height of the window in javascript with:
var h = window.innerHeight;
If you know the line-height of "ExampleText" (you may have already set it in the CSS or you can try getting it with document.getElementById('div_name').style.lineHeight), then divide the the window height by the line-height. That should give you the number of lines that'll fit in the window.
Alternatively, in CSS, you can set a div to height: 100% (assuming all parent elements have a 100% height) and then set an inner div to position:absolute;bottom:0; so the text starts counting from the bottom to the top. You'll have to deal with choosing to show scrollbars or not, since the text will inevitably be larger than the containing div.
I created two maps, one is shown and one is hidden. I have an option to choose the other map, which will hide the current one and show the other.
Here is the page load:
http://imgur.com/4MJnrZH
Here is how it looks if I change my window size even a pixel:
http://imgur.com/jzrli79
If I don't change the window size, switching between the two is fine.
When changing window size, the one currently in view will scale with the window (I put its width/height as a percentage of its parent) and will will as expected.
Thanks in advance.
Edit: If I resize the window when it's tiny, it will scale itself back to fit.
I'm not sure how jvectormap works with % sizing but I decided to go about another way to do this.
Instead of the hiding/showing from jquery, I changed the z-index to move the map of interest to the top (higher z-index), essentially emulating the jquery hide/show behaviour. Doing this, I had to change their positioning to absolute and put them into a container so that they can be layered on top of each other.
Hope this helps someone.
I change some code in "wordl-map.js" and my same problem has been resolved. in line 91:
when this.container has been created, you must set you width instead of '100%' value. I write this.params.container.width() and this.params.container.height() instead of '100%' value. Because I want to set container`s width to the map.
I have this up and running and was wondering if you can start the image in the center rather than to the left. Seems if I manipulate the css it doesn't center it so wondered if it needs something within the javascript. Or in fact even to select a specific starting point within the image. My javascript knowledge is not the greatest though...
here's what I'm talking about
http://jsfiddle.net/ARTsinn/MvRdD/890/
You can use the jQuery scrollLeft() function onload to scroll the container to the center. Try this:
var center = $('#content').width()/2 - scrollWrapper.width()/2
scrollWrapper.scrollLeft(center);
Demo: http://jsfiddle.net/MvRdD/922/
The following will center the image, with no scrollbars visible:
newleft =$('body').width()/2 - $('#content').width()/2;
$('#content').offset({left: newleft});
Unfortunately it's not perfect as it doesn't let you scroll to leftest part by pressing your 'Left' button, I'm trying to see if this can be improved but nonetheless this can be useful for your as fiddling upon it.
See demo