Jump to content

Dynamic Layout Based On Zoom


glopal
 Share

Recommended Posts

Hello.I'm nearing completion of this website I'm doing for a personal care home. Although I like web development, I'm a programmer at heart... so that is why I went so far with this javascript system.What it doesIt applies 2 fixes. Applies them onload of body, and window.onresize.Fix 1: All of my sub headings have backgrounds. The problem was that if a heading was beside a floating image, the background of the heading went behind the image and popped out on the other side, looked horrible. This fix puts either a left or right margin to the headers that are beside an image.Fix 2: If you zoom in too much, the text beside floating images get squeezed, and headers get messed up. So if the container is a certain size, this fix sets the float of all images to none.Both of the fixes work in reverse if you zoom out... for the most part. The only thing I gotta do still is find a way to retain whether an image was floated left or right, so the proper direction can be reapplied. Right now, if you zoom out enough, a left float is applied to all images.What I want from youI would like you to go to my test page with this script running, and zoom in and out and observe what happens. It doesn't work in ie7 or less because they don't support scaling when zooming.Then I want your opinion on the system. It's usability, performance (it lags slightly), does it improve accessibility, does it work in your browser, and whether or not I should use this on the site.The test page: http://www.goldenlinks.mb.ca/jstest.htmlUsername: userPassword: qw3rtii7My theorySince older people are my target audience, accessibility was a must. I looked at some of the text size changers out there, but I wasn't impressed. Then I got thinking. Modern browsers have fantastic, build in zoom capabilities, why not just make my site super fluid so it can adjust to any zoom level. I started out with the container, and then the banner (see if you can spot what the banner does when you zoom), and then went from there.

Link to comment
Share on other sites

I guess technically it's ok, but I seriously doubt anyone is going to use or notice it. If someone has problems reading text because they're old or whatever, they're just going to set their screen resolution low, they aren't going to go around changing the zoom levels.

Link to comment
Share on other sites

I guess technically it's ok, but I seriously doubt anyone is going to use or notice it. If someone has problems reading text because they're old or whatever, they're just going to set their screen resolution low, they aren't going to go around changing the zoom levels.
Even still, since the container takes up 80% of the viewport, the page will still technically be zoomed due to the low res, and all of the javascript/css still applies. That is actually part of the reason I'm doing this, the site looks great at 800x600, try it, on my computer it removes the floats at 800x600.
Link to comment
Share on other sites

The only problem I find is based on two factors:The images take a long time to load, and the subheadings stay behind them until they've loaded.If you want the script to act immediately, you should place it before the closind </body> tag.The other alternative is to mix the DOMContentLoaded event with some other methods to make a crossbrowser "load" event that doesn't have to wait for all the images to load.

Link to comment
Share on other sites

The only problem I find is based on two factors:The images take a long time to load, and the subheadings stay behind them until they've loaded.If you want the script to act immediately, you should place it before the closind </body> tag.The other alternative is to mix the DOMContentLoaded event with some other methods to make a crossbrowser "load" event that doesn't have to wait for all the images to load.
Hmm, I'll look into that DOMContentLoaded. How long approx. did it take for the images to load? The problem is that those images are actually 2080x1544 on the server. I know thats really frowned upon, but I have my reasons, and unless its taking a ridiculously long time for them to load I'm going to leave em, and see about the DOMContentLoaded event.Is this what your talking about?
Link to comment
Share on other sites

You should definitely resize those images, that page requires nearly 2MB to download. That's a lot for a little page like that, I have entire applications that are smaller than that. That's going to take a while if someone is on dialup. 1.7MB of the 1.89 total is from that one image.

Link to comment
Share on other sites

You should definitely resize those images, that page requires nearly 2MB to download. That's a lot for a little page like that, I have entire applications that are smaller than that. That's going to take a while if someone is on dialup. 1.7MB of the 1.89 total is from that one image.
Yaaaa... I know. I'll scale em and do a 95% jpeg quality export. Its easy for ME to do, but now I have to leave documentation on how to scale images for my clients. Or find/write a program that automatically does it.Anyways, Ingolme, would this work: http://docs.jquery.com/Events/ready#fn
Link to comment
Share on other sites

Hmm, I'll look into that DOMContentLoaded. How long approx. did it take for the images to load? The problem is that those images are actually 2080x1544 on the server. I know thats really frowned upon, but I have my reasons, and unless its taking a ridiculously long time for them to load I'm going to leave em, and see about the DOMContentLoaded event.Is this what your talking about?
Yes, but it only works for certain browsers. There are alternative methods for the browsers that don't support it, such as checking for the readyState of the document.2080x1544 is extremely large. You should resize the image and just leave a link to the larger version. That's the most common practise. You don't have to just drop the large images, you have to give the user the choice before loading such large images.The images took between 15 and 20 seconds to load.
Link to comment
Share on other sites

Yes, but it only works for certain browsers. There are alternative methods for the browsers that don't support it, such as checking for the readyState of the document.2080x1544 is extremely large. You should resize the image and just leave a link to the larger version. That's the most common practise. You don't have to just drop the large images, you have to give the user the choice before loading such large images.The images took between 15 and 20 seconds to load.
:) Wow...ya, okay, too big, waaaay too big.I've never used jquery, so I don't know... but it says on the home page that jquery is cross-browser? Does that not apply to all queries?
Link to comment
Share on other sites

:) Wow...ya, okay, too big, waaaay too big.I've never used jquery, so I don't know... but it says on the home page that jquery is cross-browser? Does that not apply to all queries?
jQuery should work just fine. I've never used it myself, but I know that it works and it's cross-browser.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...