Hi i need get the page size without scrolls.
What´s the minimum and maximum width and height size www.google.com page without scrolls?
I trying document.body.scrollHeight document.body.scrollWidth, but the size depends of size of window of navigator...
What´s the fixed size of page using a javascript function?
Show me an example please.
Modern web design resigned from staticly defined sizing of elements in favor of relative positioning and sizing. If you really need to know the size at a given viewport (i can't thnik of possible use-case for that, perhabs you could clarify what are u trying to achieve) I would recommend parsing the sites' DOM and CSS using PHP f.e. and then design a script that finds proper sizes (absolute are easy, relative can be converted to absolute knowing relative size and viewport dimensions).
As for the scrolls I'm guessing you think about elements with overflow rather than the actual page scrolls - in this case you will have just as many answers as the number of viewers since both browser font-size and type, scaling factor (the zoom that doesn't change the viewport) and things like that make every element relatively sized even despite of one's effort to make it staticly defined.
Related
We used to have a silverlight page that used canvas to scale the page, this resulted in a page that would always be the size of the window it was on, making the whole page smaller if the window was smaller (it does preserve aspect ratio), as if the page was a single png but it isn't, it has dynamic elements. Also when one tries to zoom in or out, it does nothing, it just makes a scroll appear to the right and bottom without affecting the page.
We are migrating the page to HTML 5 with CSS, and we haven't been able to replicate this behavior. It is a page that has 10 small tables and each has 10 "messages" that can appear. When zooming in stuff starts to overlap in addition to change size, when resizing the window,stuff overlaps too but without changing size. Most of the positions are absolute but have % in their position onscreen. However we don't want it to be responsive, we want the behavior of the silverlight version. At least that's what the bosses want.
We have been researching how to do this but so far haven't really found a good solution, especially with messing the zoom functionality of browsers. most pages/forums say this shouldn't be done.
Edit:
For now I have added a bunch of max-width and max-height in the html style and body style, as well as added a media query for switching % left to px left for an absolutely positioned group of objects. However this is by no means whay I seek to accomplish. We need the whole page to behave like an bgimage, scaling every element with the size of the window.
I am currently building a portfolio website for myself. I have an array of projects that are flex and change size as the window changes size, once they get to a min-width they wrap over to the next line. My problem is that when the website is loaded for the first time without a cache, the images haven't loaded yet and the height of their container doesn't fit them. This causes a lot of overlap, but when the page is refreshed and there is a cache it fixes itself. An example is shown here:
The cache problem.
My idea to fix this was to make a min-height, but since its responsive and the size of the container changes, I don't know how to set the min-height. I was thinking of setting it to a mathematical relation to the width of the view port window, but wasn't sure if I had the skills to make that work. I will happily attach the code if needed.
If you want to preserve space for an existing image you can wrap it into a div and adjust this div's dimensions any way you like. For example, you can set min-height. Or if the image height varies you can use loading indicators (gif loading animations) with their own dimensions, and when your images finally load, you can replace the gifs with the actual images using js onload event
To make space for images before they load you need to give each image a corresponding value(*) of its height and width.
( * - in good coding practices, this is actually a requirement ! )
For example ::
<img src=[url] width=180px height=300px>
If you want a fast, stable, responsive, robust and absolutely solid page - Never leave images, tables and table-cell columns without a 1. width and 2.height specs.
Even if they are flexy, you are highly encouraged to at least use relative size (%).
<img src=[url] width=60% height=100%> /*relative::Let's say this set of images is in a
div who's css height is 300px. The images width given as 60% matches exactly its pixel
width, which is 180px.*/
You will immediately notice a tremendous improvement of your page performance and have away better experience working with them. Depending on the complexity of elements a ten fold improvement of the render speed may be achieved.
My website has a bunch of iframes that need sizing. I have been using:
x=window.innerWidth;
y=window.innerHeight;
Thus I know how many pixels I have to work with and things work great. However, now I'm creating a page that scrolls. I need to know the height of the page in pixels (as in how tall the window would need to be so that the content wouldn't scroll). What would be the simplest way to write this using javascript?
document.body.scrollHeight should work...
I have added image map on my map based web page.
Since it is supposed to work on different resolutions, hot-spots defined in the image map have to be dynamically changed when browser viewport size changes.
ex: when I initially place a hot-spot in India and change the browser size it should still
placed on India not in somewhere else.
I saw that there is a property called "coords" containing 3 parameters.
Does these properties dynamically change when it changes the browser viweport size?
Or can I make them dynamically changing?
Or going to javascript is recommended?
(As far as I tested they are fixed to absolute locations.)
I did some research on imagemaps and found that;
They do not dynamically change their position when it changes the browser viewport size
I didn't tried to change'em dynamically. Hopefully you may able to do it with javascript
javascript was the solution for my problem
with the use of javascript ;
Browser viewport width and height can be taken
And relative to that width or height you can position the elements
imagemaps in dreamviewer is not a solution for this matter
It seems like I could create an empty DOM element containing the string, set the opacity to zero, display it, and get then measure the width of the element, but that seems really hack-y. I'm wondering if there's a better way. Any ideas?
EDIT: I need the width in pixels when rendered to the screen, not the number of characters :)
Do you mean the pixel width? No, there's no easy way to predict that in Javascript without having the browser render it. It depends so much on what font the browser has chosen, font size (which could be affected by inheritance if set with percentage or em), letter spacing, element padding, etc ad nauseum.
Your proposed solution of rendering it in the browser, even with zero opacity or visibility:hidden (thanks commenters) is the best way I think.