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
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.
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.
I have a webpage which is visible nicely at a given width. I want it to remain at that width only. It can zoom in and out but I want the content to remain fixed with respect to that width.
The content of the webpage can be responsive also. Thats why I want it to remain fixed. Because I dont want the layout of the webpage to change with changing viewports of desktop or mobiles.
Red frame is viewport and green frame is webpage. Now image 1 shows a webpage with the given width. Images 2 shows webpage which has been scaled down to fit in the viewport but still has its content intact. Or it can be image 3 where the viewport is small and shows the same webpage with scrollbars.
I actually need this concept so that I can leave some markings(some points with fixed coordinates) on the page. And the markings remain fixed at their position despite of changing viewports.
I tried doing
<meta name="viewport" content="width=1286"> //1286 is the given fixed width here.
It solved the problem a bit but not totally.
Is this thing possible?
EDIT:
I think I was not clear enough. Let me explain it a bit further.
Actually the content inside is not in my control. I am trying to make a bookmark application. A static copy of the webpage of a specified URL will be saved with some modifications. Modifications will be addition of some markings as I explained before.
So the content inside can be anything.
Refer to this framework which is most widely used for Resposive Design CLICK HERE
I am trying to create a web page. It has two regions left and right content. Till now i am testing it on a particular window size where it is lying in center and size is exact fit. But as soon as i minimise it or open it on monitor of different size it is not getting resized based on it. How can i do it. here is the web link i am working on.
http://jsfiddle.net/efyJF/.
If you see, right now the content in side is fixed size. So, i need to scroll all the way to the right to see the end of right content border.
I feel like this is not the way the normal web pages work. How can i fix this.
Thanks
You can define your css value using percentage like width: 20% instead using fixed value. Or try to use css framework like Blueprint or 960 Grid System.
If I understand right, you are looking for something like this
The container has a property of margin: 0 auto; which puts it in the centre, and then the children divs take up a percentage of that parent div. The parent (#container) can be resized and the children will fill it up appropriately.
The mistake you made was using absolute positioning, this will perfectly align it for your screen, but other screens won't look the same.
Is it possible to show any part of image in img tag (with pixels) via JavaScript?
I would have a prepared big image (e.g. 32x320 pixels) and defined starting position (X,Y , e.g. 0,32) and width/height (e.g. 32,32), and would want the script to show second (32x32 pixel) part of main image.
You could use CSS properties for this and change them via JS. Set the image as a background for an element with your desired size and adjust its position with background-position so that the correct part of it is visible. Some people call it CSS sprites.
For the sake of giving you multiple options, you could always use an HTML5 canvas and redraw the image as necessary. You can find a nice tutorial about how to do this here : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
The CSS sprite method would be preferable nonetheless as IE doesn't support canvas yet.