CODEWITHSUNDEEP
javascriptjquery
Mike Otharan
Mike Otharan

Reputation: 953

How to disable a function in Mobile with Jquery

My site has a fixed menu at the top, I used the sticky plugin however I want to disable this function in mobile.

Is it possible to hide or disable the function with Jquery? To da to do only with the javascript

This is my html code

 <div id="fixed-search" class="fixed-search">
                        <div class="col s12 m6 l2 center-align">
                            <select id="localizacao" multiple class="dropdown-select">
                                <option value="" disabled selected>Finalidade</option>
                                <option value="1">Venda</option>
                                <option value="2">Aluguel</option>
                                <option value="3">Aluguel Temporada</option>
                            </select>
                        </div>
                        <div class="col s12 m6 l2 center-align">
                            <select id="localizacao" multiple class="dropdown-select">
                                <option value="" disabled selected>Localização</option>
                                <option value="1">Capão da Canoa</option>
                                <option value="2">Torres</option>
                                <option value="3">Tramandaí</option>
                            </select>
                        </div>
                        <div class="col s12 m6 l2 center-align">
                            <select id="bairro" multiple class="dropdown-select">
                                <option value="" disabled selected>Bairro</option>
                                <option value="1">Centro</option>
                                <option value="2">Zona nova</option>
                                <option value="3">Guarani</option>
                            </select>
                        </div>
                        <div class="col s12 m6 l2 center-align">
                            <select multiple class="dropdown-select">
                                <option value="" disabled selected>Dormitórios</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4 ou +</option>
                            </select>
                        </div>

                        <div class="col s12 m6 l2 center-align">
                            <select multiple class="dropdown-select">
                                <option value="" disabled selected>Dormitórios</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4 ou +</option>
                            </select>
                        </div>

                        <div class="col s12 m6 l2 center-align">
                            <select multiple class="dropdown-select">
                                <option value="" disabled selected>Dormitórios</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4 ou +</option>
                            </select>
                        </div>
                    </div>

And this is my Jquery

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  $("#fixed-search").sticky();
}

$("#fixed-search").sticky({topSpacing:10});

Example

In this image you can see the fixed menu above the other items

I solved the issue with

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

}else{
  $("#fixed-search").sticky({topSpacing:10});

}

Upvotes: 2

Views: 983

Answers (2)

Mr.Pandya
Mr.Pandya

Reputation: 2038

Use BOM object to find the with of device based on the device with apply what changes you want to implement Write below code in js

if(window.innerWidth < 767) {
   $("#fixed-search").sticky();
} else {
   $("#fixed-search").sticky({topSpacing:10});
}

Upvotes: 3

marcel.js
marcel.js

Reputation: 313

I wouldn't use the user agent. You can use Media Queries. https://www.w3schools.com/howto/howto_js_media_queries.asp

Upvotes: 3

Related Questions