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
Related
I have troubles regarding a slider I have on my website.
Currently it's a slider with the <img> element. Problem I encounter now is that on mobile the large images get loaded as well. Now I want to load specific (smaller) images for mobile so that my website is faster on these devices.
A solution I had was using the media queries in combination with CSS background image. This is perfect to use because I can load the images with CSS and thus can use media queries to select the image based on screen size.
But the problem is is that I want to add the images to the SEO, they are essential for my website and I read everywhere that if you have such images, you need to use the <img> element. So that the SEO can work and include these images in the content. Also I cannot add ALT tags to background-image.
Another solution is rendering two sliders, one for mobile and one for desktop, and hiding the slider you don't want to see. Problem I have with this solution is that both of the sliders need to render, thus decreasing performance.
Is there a solution that I'm missing here? In my understanding you cannot change images in a <img> element with CSS media queries.
You can use the picture element. As the Mozilla Developer Network says, "[This element] serves as a container for zero or more elements and one element to provide versions of an image for different display device scenarios". I think it does the trick. Here you are another good article that explains how to use this element to achieve the result you need with your responsive images.
The picture element is a really nice modern solution. But if you want something more cross-browser, consider an approach with JavaScript. My solution for some websites was using sets of images with regular suffixes, for example image.jmg, image-medium.jpg, image-small.jpg, and a script checking the screen resolution. In the HTML only small images are included, but if the script finds the screen is big enough, it updates their src with corresponding suffixes.
I found a solution to scaling my web page down here. However, I noticed that this solution messes with jqplot's highlighter and zoom functions. Is there a solution that doesn't interfere with these functions?
The only way I can think of with out seeing your code, and without using the solutions provided by the other question, is to add separate size percentages to each element on the page. For example, adding font-size: 30%; will decrease the font size of all text in the element, so you could put this into the body styling’s. I don’t think there is a way to change all div's by a persent of their current size, without using zoom functions in css (I presume you have considered these as they are in the answer for the question you linked) but there is probably a way to do this in JS, by collecting the dimensions and timesing by an amount. You can just change individual sizes for each div though.
Hope this helps :)
Unfortunately, scaling and zooming is part of the function of the browser. This is necessary for screen readers and people with eyesight issues to zoom in.
When you try to take control with zoom, you will always be playing with compatibility and browser issues.
A suggestion? It sounds like your requirements are bogus in light of current internet-enabled mobile devices. A liquid layout is the current best practices for a reason.
EDIT: Have a look at http://alistapart.com/article/responsive-web-design
I am in the final stages of developing a website for a client and am having much difficulty figuring out how to prevent a small flower image from inheriting the transparency of it's parent element.
I first tried making the image independent, using absolute positioning in the css. This worked; however, it introduced an alignment issue depending on the size of the browser window and size the the monitor and also the operating system. I was able to eliminate (somewhat) the browser issue by adding in browser selection javascript and adding the requisite css code to check for each browser, but I was still running into the alignment issue depending on the size of the browser window and size of the monitor screen.
To view the page with the independent floating (flower image), please see the following url:
mauisunsetb122.com/index5.html
I then decided to tie the image to the adjoining text so that no matter the size of the browser window or monitor, the image will always be anchored to the text. this is where the transparency issue occurred. To see an example of this please see the following url:
mauisunsetb122.com/index5_8.html
I tried resolving the issue by following the example found at the following url, but it didn't work:
http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack
Thanks in advance for your assistance!
If you wish to make the background transparent and not have the child elements inherit this then you have several options:
Use a small PNG with transarency as the background image.
Set the background color using rgba 'background-color: rgba(255,255,255,0.5);'
Use horrible css hacks
Generaly 1 seems to be the most used and supported.
I'm wondering if anyone knows a way that you can prevent browser zooming of specific page elements.
This is for the mobile version of a site I'm developing. I have a fixed menu bar that runs full width of the site and remains at the top of the page at all times to provide navigation. I've optimised the button/text sizes to work for touch screens and don't really want it to be affected if a user zooms the page content text.
The only thing I've come across is the following CSS, but this doesn't seem to work when I've tried it:
-webkit-text-size-adjust: none;
I'm do not wish to disable resizing of the whole page via the Viewport meta tag, I just want to target the menu bar html elements.
The zoom mechanism varies across browsers and is not standardized, nor is it scriptable. Any solution would be pretty convoluted in order to work across browsers. There is no easy way to do this.
I wrote a modal dialog based on a similar question, you can find it here.
In essence, the logic is about getting the page scale ratio based on window.innerWidth and maximum page width, applying it as a CSS transform to the element and then repositioning it on screen. If there is interest, I will rewrite it into a library that just takes a position: fixed element as an input and does all this magic to it when the user zooms the page.
This is FF plugin
http://www.pixelperfectplugin.com/
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
Read more: http://pixelperfectplugin.com/how-to-use/walkthrough/#ixzz0eOfezx1N
How to get mockup image behind all div like this plugin does.? this tool only shows design behind layout only on firefox and i want to see on all browser.
I found the way here
http://aloestudios.com/2008/08/pixel-precision-with-diagnostic-css/
Well if you want it behind then simply setting it to the background image of body or html would work. If they need to be styled with bgimages or colors as part of the design then i suppose you could throw another div in the dom with position absolute and set the z-index to 0 or -1 depending. IF you want it to overlay the dom then you could do same thing only using an insanely high z-index and then setting the opacity. That would interfere with direct point and click inspection on the layout i think but you could still get to the elements form the html pane.
Obvoiously no method short of developing in pure js somehow is going to give you the features of a browser plugin.