I was wondering if it's possible to have different levels of zoom which can shows differents levels of information.
It's probably not really clear so the idea is that :
At normal zoom : only images
Maximum zoom : caption of the images
Minimum zoom : symbols corresponding to images (like pictogram)
And it could be really great if these layers can mix themselves with an idea of transparency.
Zoom between minimum and normal would show images at 50% of opacity and their symbols at the same level of opacity.
Thanks you in advance,
JJulien
If you want to add a zoom feature to only some parts of your website: This can be done in JavaScript; You can set a different class on your body-element for each zoom level, and then define which contents are displayed in a style sheet.
Look at this JSFiddle for a rough concept.
If you want to implement a zoom for all of your website, not just parts, check out this question.
Related
I have discovered chart.JS for a while and I wanted to implement it in my website. I wrote the simplest code available on their webpage and the tooltips do appear indeed, but when I use the zoom property on the html tag in my CSS (cause I want to make the whole page smaller) , the tooltips seem to go crazy. Some of them do not appear anymore and others appear only when hovering certain areas of the chart. Is there any fix to this ?
The CSS zoom property is not advised for this use. It is mostly for image zoom, and has very bad support in different browsers. I would advise making content smaller by setting widths of containers, and reducing font sizes.
There is no telling how css zoom will affect the canvas used by ChartJS in different browsers.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
My site is a clothing store, and my partner has complained about the following issue.
The pictures of clothing with more complex patterns (checkerboard for example) displays like this: instead of this:
I assume the other pictures are also displaying weirdly, but it's just less noticeable. As far as I can tell, it happens most often on Macs.
If anyone has any information about this phenomenon it would be much appreciated.
It's called a Moire Pattern: http://en.wikipedia.org/wiki/Moir%C3%A9_pattern
The best solution is to not resize images, to ensure they're displayed at 1:1 scaling. If not, make differently-sized images using a tool like Photoshop that has better image-resize algorithms that avoid this problem and then use HTML5's srcset attribute so the right image is loaded for the right DPI, see here: http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
This is called the Moiré effect. From a Wikipedia article:
In physics, mathematics, and art, a moiré pattern (/mwɑrˈeɪ/; French:
[mwaˈʁe]) is a secondary and visually evident superimposed pattern
created, for example, when two identical (usually transparent)
patterns on a flat or curved surface (such as closely spaced straight
lines drawn radiating from a point or taking the form of a grid) are
overlaid while displaced or rotated a small amount from one another.
In context of images the overlaying comes from anti-aliased (in case of upsampling) or averaged pixels (for downsampling).
To resize them properly use high-quality resizing such as bi-cubic interpolation based resampling. Most browser has built-in support for this but certain conditions are affecting which stratgey is selected (bi-cubic or bi-linear), for example for performance reason. The latter is more prone to this effect.
It can be reduced using a canvas to scale down the image. I have an article here on this topic and an SO answer here showing a concrete example on how to.
I'm developing a visualization for certain parts of a Warehouse with Flex 3. In this visualization there are lot of blocks where 1 to x pallets can be placed where x is between 9 and 15. I need to represent each pallet with a black square, each place which is already assigned to a pallet but not physically taken with a grey square and each free place with a white square. I first thought to just use a canvas for each place on a block and change their color if the state changes. But the hundreds of canvases which are there as a result of this approach are not updated quickly enough for my purposes (screen freezes for a few seconds).
I don't want to use embedded images because of the great amount of images I had to embed in the application (those Images appear in 4 orientations).
My idea was to create background images which reflect the state of the whole block only when needed for that certain state and cache them, so that the computation time is spread over the whole runtime.
My problem now is I don't know how to create them in a way that I can use them as "backgroundImages". As far as I understand I would need them as a class object but I don't know how to achieve that, when not embedding the images.
I'm of course open to better approaches to solve my problem. Thanks for your support.
I would suggest using Graphics property of a Sprite for example. It provides basic drawing API, like drawing lines, circles and rectangles.
Besides, you can draw bitmap images on the Graphics to produce more advances results.
I'm trying to implement a zoom to component option where the user presses the 'e' key and it zooms right onto the component. I only want there to be one zoom level for this, since I am doing a zoom slider for when the user wants to zoom the entire svg at an incremental pace.
Here are some screenshots of examples
http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom.png
http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom2.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom2.png
For each of the above examples, I'm selecting the component with the text "testing" and zooming in on it.
Here is the jsfiddle of what I have so far
http://jsfiddle.net/6Jg2A/3/
By component, I mean a within the svg. Which contains an image, text, and rect.
It isn't fully working yet. For example, if you select the pink component and press e to zoom you can see that it doesn't really zoom to it correctly.
I think that I need to translate the components as well, I'm just trying to wrap my head around how to do that.
Wondering if anyone could help. Thanks.
Edit: Also, the zoom factor should be dynamic based on component size I think. In other words, when zooming in on a component the end result should be a zoomed component that isn't dependent on the actual size of itself. (I hope this makes sense)
It will be easier to zoom the entire svg canvas, not each element separately. You'll also want to grab the transform from the element you're zooming to and adjust the translate property of the canvas as well.
I've updated your JSFiddle to show a quick and dirty alternative that works: http://jsfiddle.net/6Jg2A/5/
When I search in Google, instead of their main page, when I look at their logo, and copy the image path, it shows that:
http://www.google.com/images/nav_logo91.png
Well, it is not a logo only, it have many icon as well. Is there any reason why Google use this way to do so? any results or just for showcasing their technique skill? Also, how can only show a part of a image only? Thanks.
It's a sprite. Doing this can reduce file size and load time.
You can splice the image using JavaScript or using CSS (CSS being the more popular choice). You can make the element with a div tag, then set the background-image property to the URL you've specified. Then use the background-position property to align it appropriately. Lastly, set the expected width and height of the div.
Its called CSS sprites. A lot of websites use this technique, where in all (decorative) images on the site are contained in a single image.
This single image tends to be smaller in size than the sum of all the individual images (each image holds its own color table). Also, fetching a single image from the server means lesser HTTP server requests.
The large image is then placed as backgrounds in div's and manipulated using background-position and other CSS properties to ensure only the portion of the sprite shows that is required.
It's like animuson has already explained, they're called CSS sprites, to expand a little they are used to prevent excess HTTP Requests.
By having just one image to load, it is cached and then the website can use that one image for multiple backgrounds but only make certain areas viewable by using background-position.
A good explanation is here: http://css-tricks.com/158-css-sprites/