Listed here are some methods that may be useful:-
confirm(text)
Displays a confirmation box, allowing you to ask the user 'OK' or 'Cancel'
prompt(text, defaultText)
Similar to 'confirm()' but allows you to enter some text.
window.print()
Prints the current page
window.scrollBy(x, y)
Scrolls the current page (up and/or down) by a number of pixels.
window.scrollTo(x, y)
Scrolls the current page (left/right and...or up/down) to a specific position (in pixels).
window.matchMedia(x, y)
The window.matchMedia() method returns a MediaQueryList object representing the results of the
specified CSS media query string.
The value of the matchMedia() method can be any of the media features of the CSS @media rule, like
min-height, min-width, orientation, etc.
When you click the 'Confirm' button it will pop up a box asking if it's okay to continue or not
When you click the 'Prompt' button it will pop up a box asking you for your name
When you click the 'Scroll' button it will scroll along by 50px and down by 25px
(if your window can scroll that is...if all the info is on screen then it can't scroll)
Listed here are some methods that may be useful:-
ALSO see
@media rule
With this you can apply different styles for different media types/devices, eg...
Change the layout if the screen size/page width drops below a given size
or check if the tablet/phone is in landscape/portrait mode
and more.
(I use this on the forms dingbats.html & dingbatsNoB.html to check if the screen
is small and if so it adjusts the details displayed on the Navigation Banner ...
BUT in the box on the right I use window.matchMedia)
Basically You use @media to change the styles
and you can use @matchMedia to change styles and/or run code/functions
Below shows information using the @matchMedia command but ONLY when
this page is FIRST run. Resize the screen and the number does NOT change...
BUT...
when you resize the screen the next box will change colour if the screen size goes larger/smaller than 700px;
The code used is...
if (window.matchMedia("(min-width:301px) and (max-width:599px)").matches) {
displayMedia("With of screen is between 301px and 599px");
} else if (window.matchMedia("(min-width:600px)").matches) {
displayMedia("With of screen is more than 600px");
} else {
displayMedia("With of screen is less than 300px");
};
When you click the 'matchMedia1' button it will let you know if the current window is <= or> than 700px
it will also tell you the current width too (uses
window.innerWidth for that)
AND... this also uses a matchMedia EventListener (so it check continuously) to change the background colour of this <div> box
when you resize the webpage to be <=700px and will put the colour back to normal when you resize>700px
Listed here are some properties that may be useful:-
document.
Clicking on the link (above) for document. will take you to the w3schools.com page that lists a
lot of the commands that can be used...eg...
.getElementById() .addEventListener() .createEvent() .hasFocus() etc, etc
.innerHeight & .innerWidth
Get the current frame's (webpage content area) height and width (excluding toolbars)
.outerHeight & .outerWidth
Get the browser window's height and width (including toolbars)
When you click the 'Size' button it will let you know the current window inner & outer width/height