Breakpoint für mobile menu mit jQuery ?
Guten Tag,
auf meiner Seite wird das Menü mit einer jQuery(function($) aufgerufen.
Ich möchte vorher abfragen, ob: @media only screen and ( max-width: 768px )
> dann soll eine andere funktion aufgerufen werden.
Wie kann ich das schreiben ?
Der hier verwendete Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>offsetWidth offsetHeight</h3>
<p id="w"></p>
<p id="h"></p>
<hr>
<h3>screen.availHeight screen.availWidth</h3>
<p id="aw"></p>
<p id="ah"></p>
<hr>
<h3>clientX clientY</h3>
<p id="mw"></p>
<p id="mh"></p>
<hr>
<h3>pageX pageY</h3>
<p id="pw"></p>
<p id="ph"></p>
<script>
$(window).ready(function() {
var sio=$('#slide-in-open');
var simc=$('.slide-in-menu-container');
if($(window).width()<=768){
sio.addClass('open');
simc.addClass('slide-in-menu');
}else{}
sio.click(function(){
sio.toggleClass('open');
simc.toggleClass('slide-in-menu');
});
});
window.addEventListener('resize',re)
function re(){
w.innerHTML="Breite: " +
document.body.offsetWidth+" Pixel";
h.innerHTML=" avail Höhe: "+document.body.offsetHeight + " Pixel";
aw.innerHTML="Breite: " +
window.screen.availHeight+" Pixel";
ah.innerHTML=" avail Höhe: "+window.screen.availWidth + " Pixel";
}
re();
window.addEventListener('mousemove',mo)
function mo(e){
mw.innerHTML="Breite Client: " +
e.clientX+" Pixel";
mh.innerHTML=" Höhe Client: "+e.clientY + " Pixel";
pw.innerHTML="Page X " +
e.pageX+" Pixel";
ph.innerHTML="Page Y "+e.pageY + " Pixel";
}
mo();
</script>