This is a tricky one. Basically, I scale up a div and there are images in it. It seems the browser can re-paint or re-render the images properly that are in the viewport or visible, but for other images, if I make them visible after the scale-up, they still look blurry.
Here is an example https://ezyevents.australianclubs.com.au/wp-content/plugins/EzyCashKing/test.php
so it scales up and flips if you click on any of them, and the flipped image looks blurry.
I have been doing the search and trying different ways and none of them works.
Is this possible, or it is a browser thing and I have to try a different approach?
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.
So I have a large jpg, 12000px wide by 1000px height. I am looking to make a site the has the image at 50% size on page load, but when the user clicks on the image once, it zooms in to 100%, then on a second click, it zooms back out to original size.
Since the size of the image is so large, it would need to be draggable at both page load and during zoom state.
I have been playing around with this, but the code is not exactly what I am looking to do.
http://designshack.net/tutorialexamples/jQueryZoom/ZoomTest.html
Instead, I am looking to basically do the same thing as the zoomed in state of this site, minus the step of the click into the zoom state.
http://yogasmoga.com/women/run-jump-n-play-crop-462
If anyone has a plugin they have used, please let me know.
Don't. Easiest -especially if it's for a presentation- is to just use two images. image1.onclick -> show image2; image2.onclick -> show image1. Saves coding, does what you want.
I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck
I'm displaying a background picture with some semi-opaque div over it, so that it appears somewhat darker than it actually is. On top if it, I have a number of smaller, draggable divs.
I'd like the image to be completely visible, or revealed under these divs. These smaller divs should be like looking through windows to the below image.
One way to do it, is to set the background of each "window div" be a version of the larger image, and adjust the position to compensate for the div location. This works okay, but is kind of slow/jerky and very clunky.
Is there a better way?
Thanks!
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.