1

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?

Community
  • 1
  • 1
Matt Cremeens
  • 4,951
  • 7
  • 38
  • 67
  • To better clarify, I have a fixed width site and I have been asked to make everything fit on one page without the need to scroll. I wish now that I had attempted to make it a liquid layout, but it feels too late for that now. This css zoom option works great, but, like I said, jqplot can't seem to recognize where the cursor is anymore. – Matt Cremeens Jun 21 '14 at 11:25
  • if possible give us fiddle link – Pandiyan Cool Jun 22 '14 at 18:39
  • What I have is a lot of code and I've never used fiddle before. Imagine I have a number of html elements (mostly divs) that are fixed (height and width). This may have been a mistake because now it has been requested of me to make them all fit on one page without scrolling. % width and height all of the sudden feels more appropriate now, but it seems a little late in the game to make that switch. Anyway, using css zoom and scale features works perfectly for this purpose. However, when I did that, my cursor no longer highlighted my jqplot properly. – Matt Cremeens Jun 22 '14 at 18:53
  • A js fiddle would be helpful here, just go to http://jsfiddle.net, add your code, and copy and paste the address into your question – Sam Denton Jun 26 '14 at 12:29

2 Answers2

3

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 :)

Sam Denton
  • 465
  • 3
  • 18
  • Thank you for wanting to help. I am hopeful that with your help, @Sam Denton, a solution can be found around the corner. I have posted some html and css code [here](http://jsfiddle.net/hoozits/zJ6zf/). Hopefully it will provide some insight. – Matt Cremeens Jun 26 '14 at 23:41
  • Would it be true that reducing the height and width and font of each element by 10% would have the same effect as a 90% zoom? – Matt Cremeens Jun 27 '14 at 10:16
  • I think this is probably the best suggestion. What I ended up doing is effectively not applying the css zoom feature the my graphs and readjusting their size manually. This did the trick, but the whole experience has taught me I have a lot yet to learn – Matt Cremeens Jun 28 '14 at 11:31
  • Sorry i have not answered, i have been away. i am glad i could help. I believe that resucing the element by 10% is the same as a 90% zoom, although you would have to try to make sure. – Sam Denton Jun 30 '14 at 09:09
2

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

cmroanirgo
  • 7,297
  • 4
  • 32
  • 38
  • Now you have taught me something new. I did not realize that a liquid layout was current best practice. Thank you for that. I have noticed, however, that using the css zoom feature actually doesn't change the browser's zoom level, it just mimics it. But still, doing so seems to have unintended implications for the jqplot library. – Matt Cremeens Jun 27 '14 at 09:43
  • Locking things down to fixed height/width, was 90's and early 00's thing aiming at cross browser compatibility. These days you need to think multiple resolution and multiple devices. Will it look good (& be readable and usable) on 320x480 (iPhone 3gs) or a 24" screen running 2048x1024. Just a 'zooming' solution is generally pretty poor. Have a look at http://alistapart.com/article/responsive-web-design – cmroanirgo Jun 28 '14 at 01:21
  • I appreciate this. I am sort of new on the web development scene, largely self-taught, and I could use a good mentor. I don't do this as a day job, though I wish I did. That all said, I am not aware of best practices and am doing the best I can. I appreciate this advice and will consider it in my future projects. – Matt Cremeens Jun 28 '14 at 11:29