FORUMS: list search recent posts

Javascript to kill overlay background

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Stefan van Mourik
Javascript to kill overlay background
on Mar 8, 2013 at 7:38:03 pm

Hey there,

I'm fairly new to javascript and I'm working on a responsive website.
I would like to kill my overlay background if the resolution width of the browser is less than 940 px.

Anyone knows how this works?

Thanks in advanced,

Have a great day!

Return to posts index

demetri tashie
Re: Javascript to kill overlay background
on Mar 9, 2013 at 9:24:43 pm

you could use javascript, and you would probably want to access the documents window.innerWidth and window.innerHeight and manipulate it from there. it is not as straight forward as you might think.

if you are new to javascript and wanting to do it as a learning experience, great. if you are actually trying to get a browser to be responsive to size, there are other, easier ways*.

some people really like, and others don't like, the use of media queries for responsive sites. this uses straight CSS without the need for javascript ( because what if javascript is disablaed, or not present?)

a simple media query like this in your CSS would work. place it at the end, after the properties you want to change are aalready declared.

here i use a class of 'visible' assigned to anything i want changed. 940px and above it/they will show, below that , they will not

.visible {display:in-line;}
@media only screen and (max-width: 939px) {
.visible {display:none;}

use visiblity property to hold the space for the hidden item, if that is necessary.

*JQuery can make the scripting of the javascript easier ( depending on your point of view)

hope that helps

Return to posts index

Stefan van Mourik
Re: Javascript to kill overlay background
on Mar 11, 2013 at 7:08:08 pm

Wauw, Thanks for putting in the time to reply with a great answer. I will definitely start experimenting with those media Queries. Thanks again!

Have a great day

Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved