0

I've managed to get my matchmedia query partially working ie it works on window load but can't get to work on resize. Im really new to this (hence the crappy question) so take it easy and speak slow. I'm trying to make it fire when ever the screen changes or the page is loaded.

http://codepen.io/anon/pen/XJZOMw

function mediaqueryresponse(screencheck){

    if (screencheck.matches){

        function introHeight(){

            var introheight = document.getElementById("bottom").offsetHeight;


            document.getElementById("introtext").style.top =(180 - introheight) + "px";
            //document.write (introheight);
            }

        //document.onresize = introHeight;
        window.onresize = introHeight;
        }

}       
var screencheck = window.matchMedia("all and (max-width: 419px)");
mediaqueryresponse(screencheck); // call listener function explicitly at run time
screencheck.addListener(mediaqueryresponse); // attach listener function to listen in on state changes

Thanks and Sorry if this a duplicate or just crap programming and/or poorly written or in the wrong place.

slavoo
  • 5,798
  • 64
  • 37
  • 39
awwhocares
  • 3
  • 1
  • You are only checking if the media query matches _once_ – you need to call `matchMedia` again after a resize if you want an updated result. – CBroe Feb 16 '15 at 13:57
  • Thanks for explaining makes sense but no idea where to put the call and the syntax in a function (if thats important). Thanks for looking though. – awwhocares Feb 16 '15 at 14:41
  • Well you have a function that gets called when the window is resized, so naturally that call belongs into that function. – CBroe Feb 16 '15 at 14:43
  • ?? you lost me there my friend..."...belongs into that function..." – awwhocares Feb 16 '15 at 15:07
  • You want to perform a check every time the window gets resized, and you have an event handler function set up that is called when such a resize happens. So your check that you want to perform, should be placed inside that function … – CBroe Feb 16 '15 at 15:26
  • Hmmm head scratching I thought that the innerHeight() function was doing that... – awwhocares Feb 16 '15 at 16:21
  • You said initially that you wanted to get “matchmedia working on resize” … maybe you should be clearer in what you actually want to achieve here. – CBroe Feb 16 '15 at 16:29

0 Answers0