So I am fairly new to JS/jQuery. Recently found enquire.js as I wanted to load different JS styles to affect my collapsing header at different screen widths. I have a scroll event listener, listening for if scroll past 250 execute, else go back to normal.
JS here:
var header, banner, nav, headertxt, pagetop, yPos;
function yScroll() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
yPos = window.pageYOffset;
if (yPos > 250) {
header.style.height = "50px";
//banner.style.top = "50px";
//banner.style.height = "800px";
nav.style.top = "45%";
headertxt.style.top = "23%";
pagetop.style.top = "140px";
} else {
header.style.height = "100px";
//banner.style.top = "100px";
//banner.style.height = "800px";
nav.style.top = "75%";
headertxt.style.top = "32%";
pagetop.style.top = "107px";
}
}
window.addEventListener("scroll", yScroll);
What was happening I was getting the desired effect although an obvious major problem. The JS was only executing after I scrolled on the page. So if I resized nothing would happen. I want the styles to change on the fly then listen whether I scroll then use my code above. I am sure there is a more efficient way of doing this. Just with my knowledge and experience I tried this....
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
var header, banner, nav, headertxt, pagetop, yPos, iwidth;
function Resize() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
iwidth = window.innerWidth;
if (iwidth < 899) {
header.style.height = "75px";
nav.style.top = "72%";
headertxt.style.top = "32%";
headertxt.style.fontSize ="21px";
pagetop.style.top = "107px";
}
}
window.addEventListener("onresize", Resize);
function yScroll() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
yPos = window.pageYOffset;
if (yPos > 250) {
header.style.height = "35px";
//banner.style.top = "50px";
//banner.style.height = "800px";
nav.style.top = "45%";
headertxt.style.top = "20%";
headertxt.style.fontSize = "17px";
pagetop.style.top = "140px";
} else {
header.style.height = "75px";
//banner.style.top = "100px";
//banner.style.height = "800px";
nav.style.top = "72%";
headertxt.style.top = "32%";
headertxt.style.fontSize = "21px";
pagetop.style.top = "107px";
}
}
window.addEventListener("scroll", yScroll);
}
});
enquire.register("screen and (min-width: 900px)", {
match : function() {
var header, banner, nav, headertxt, pagetop, yPos, iwidth;
function Resize() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
iwidth = window.innerWidth;
if (iwidth > 899) {
header.style.height = "100px";
nav.style.top = "75%";
headertxt.style.top = "32%";
headertxt.style.fontSize ="21px";
pagetop.style.top = "107px";
}
}
window.addEventListener("onresize", Resize);
function yScroll() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
yPos = window.pageYOffset;
if (yPos > 250) {
header.style.height = "50px";
//banner.style.top = "50px";
//banner.style.height = "800px";
nav.style.top = "45%";
headertxt.style.top = "23%";
headertxt.style.fontSize ="21px";
pagetop.style.top = "140px";
} else {
header.style.height = "100px";
//banner.style.top = "100px";
//banner.style.height = "800px";
nav.style.top = "75%";
headertxt.style.top = "32%";
headertxt.style.fontSize ="21px";
pagetop.style.top = "107px";
}
}
window.addEventListener("scroll", yScroll);
}
});
So as you can see I tried listening for resize and executing the styles when the innerwidth was < 899 for example. The resize function does not seem to be working at all. My scroll function is still working as normal with nothing happening when I resize the window. Now I will be wanting to change and add to the style.height .top etc in the future as this project still in fairly early stages.
I also thought of just coding the styles in my CSS breakpoints but the scroll listener overrides the CSS? Or just take the else out of my scroll function so the CSS will be the else part instead of the JS? I am really just thinking out loud here.
Again still learning. Also just to mention I have used JS on purpose as I am building my portfolio and want to show JS skills as none of my other projects have much JS that I can show. Thanks in advance for any guidance.SOLVED
The event string is 'resize', not 'onresize'. :P