Detect if browser content has been resized

Hi,

I have an accordion style navigation bar which works fine, except when the user enlarges the screen with, for example, Ctrl and Plus.

Is there any way using JavaScript to detect when the user enlarges the screen?
Is it even good style to do this?

I’ve found the offending css rule which makes the menu slow to a crawl in anything but its original resolution, but as this is a template that I have to use, there is not much scope to change things.
Should I still maybe head over to the css forum.

Would be grateful for any advice whatsoever, as if I can’t resolve this problem, my nav bar is all but useless.

Hi Pullo,

Here is a link that teaches about using javascript for detecting text resizing. I think you maybe able to use this technique to achieve your purpose.

And here is the link to demo that they have created. You can get to this page from the above link as well.

http://www.alistapart.com/d/fontresizing/fontResizeSwitchDemo.html

Hope this helps.

Hi,

Thanks for the link.
I’ve just read through the article which was very interesting.
It also provides some great links to other pages (like Cameron Adam’s resolution dependent layout).

I have made some progress with my problem since posting. By tweaking the layout I have eliminated the problem entirely in Firefox, but in IE the animation is still very juddery when the screen is resized to above a certain resolution.

Interestingly this only occurs when resizing the resolution from within the browser (eg. with Ctrl and plus). When I change my screen resolution via the desktop, then the problem doesn’t exist.

I will continue to experiment with the ideas presented in the article, however, in the meantime does anyone else have any idea why this might be happening in IE and not in FF?

How does IE resize the screen compared with FF?

Am grateful for any help.

That’s because when you use [CTRL]+, you’re not changing the screen size. You’re only changing the size of the content. There’s a huge difference between the two.

That’s because when you use [CTRL]+, you’re not changing the screen size. You’re only changing the size of the content.

Yeah, you’re completely right. Thanks for that. This is what I have been trying (unsuccessfully) to express all along.

So, to put another way, is it possible to detect when the size of the content has been altered using JavaScript?

I am still working through the example provided by johnny_dipin, but am finding it quite heavy going.

Hi Pullo,

Is [CTRL]+ the only way to enlarge a screen. If so maybe we can detect the key press to determine if the screen has been enlarged or not. Hope this helps.

Hi Pullo,

Here is another link that I found.

.http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Even though the title is a bit misleading maybe the information here will be usefull. Hope this helps

Hi Johnny,

Thanks very much for your help and the great links.
Sorry about the delay in responding, but have been snowed under with work. You know how it goes :slight_smile:

Is [CTRL]+ the only way to enlarge a screen. If so maybe we can detect the key press to determine if the screen has been enlarged or not.

Unfortunately not. You can do this in FF via “View -> Zoom -> Enlarge”, so nothing to do with Ctrl. Shame!

However, since my original post, by experimenting with the frame rate and the duration of the animation I have managed to make a solution that is quite acceptable in all browsers.

I will continue to experiment with the ideas from the link (making an invisible span element and catching when that is resized) and post back here if i have any further questions.

Thanks again for your help.

Hi Pullo,

Sorry I couldnt be of much help. I was trying to return a favor to sitepoint when I got stuck I posted my question and luckily for me someone was able to give me a good solution. So I thought I might return the favor as well. Please do share your solution it will be a good lesson for me.

The size of fonts can also be overridden by the user using the web developer toolbar (FireFox).

Hi,

I managed to solve the issue in the end, it turns out that for whatever reason the background image on the page was slowing the navigation down when the page was resized.
I did a complete rework of the css (thereby applying shortened background images to the respective divs as opposed to the body) and that sorted things out!

Thanks again for the links. Although it didn’t help me solve my problem directly I have read through all of them and have learnt a lot.