CODEWITHSUNDEEP
javascriptjquery
Ashish Poudyal
Ashish Poudyal

Reputation: 39

changing the width of the element according to screen size

I have provided a defined width for the parent here i.e '30%' and that parent is a sidenav of a jquery library. I want to change its width according to the screen size of device with onClick event using javascript like '100%' on less than 600px width and '30%' on above 600px width. I already tried using css media query but the css property are overridden by javascript. Please help how to do it.

 $('.menu-list a').click(function (e) {
     e.preventDefault();
     var hide = $(this).data("hide");

     if (hide == true) {
         $(this).parent().parent().animate({
             width: '30%'
         }, 800);
         $('#mobile li').css('display', 'none');
         $('#mobile .close').css('display', 'block');
         $('#mobile .user-logo').css('display', 'none');
     } else {
         $(this).parent().parent().animate({
             width: '30%'
         }, 800);
         $('#mobile li').css('display', 'none');
         $('#mobile .close').css('display', 'block');
         $('#mobile .user-logo').css('display', 'block');
         $('#mobile .user-logo #edit-btn').css('display', 'inline-block');
     }

     var url = $(this).attr('href');
     $.ajax({
         url: url,
         beforeSend: function (data) {
             $('#content-here').html(loader);
         },
         dataType: 'html',
         success: function (data) {
             setTimeout(function () {
                 $('#content-here').html(data);
             }, 1000);
         }
     });

     $('#mobile #content-here').css('display', 'block');
 });

Upvotes: 1

Views: 1357

Answers (2)

Pujan Adhikary
Pujan Adhikary

Reputation: 36

Simply you can find windows width by using this jquery function: $(window).width(); and your code be like:

if($(window).width() > 600){ 
//make sidenav 30% 
}
if($(window).width() < 600){
//make sidenav 100%
}

and simply you can paste this code inside click event. first you have to cache the width inside click event,so that width will be calculated each time you click the button. Hope you understand the logic.

Upvotes: 2

nicael
nicael

Reputation: 19024

CSS media queries would be an easier solution there.

element{
  width:30%;
}
@media (max-width: 600px) {
  element {
    width:100%
  }
}

If you still want to use the jQuery:

$("yourElement").css({"width":"30%"});
if(screen.width<"600") $("yourElement").css({"width":"100%"});

Upvotes: 4

Related Questions