0
189
VistasHow to make my javascript code responsive?
how to tell my simple jquery code to activate the click on my .filter_btn
only when I'm on a mobile or tablet (max-width: 768px)
and not on a desktop ?
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.filter_btn').click(function(event){
$('.content_filter').slideToggle('250','swing','hide');
});
});
});
</script>
<style>
@media all and (max-width: 768px)
{
.content_filter {
display:none;
}
}
</style>
as you can see here i can click in desktop mode
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
You could validate the width of the window by using the window.innerWidth property. Something like:
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.filter_btn').click(function(event){
//Here we validate the size of the window, I've had this act wonky
//before, so you may have to adjust the value
if(window.innerWidth <= 768) {
$('.content_filter').slideToggle('250','swing','hide');
}
});
});
});
</script>
·
Juan Pablo Isaza
Denunciar
0
You already have a media query set up to hide content over the specified screensize, but you are hiding the .content-filter. If you don't want the .filter_btn to be clicked, then hide it.
If you still want the header to be visible, then have two versions of the header: one that is displayed for small screens that IS clickable, and one that displays on large screens and is not clickable.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta