Adjust css with jQuery

Question

I need to adjust a tab link location when the browser gets below a certain width. I've looked around and haven't been able to make this work. It never readjusts. Here is the code I'm using

$(window).resize(
  function pageResize() {
  $screenSize = $(window).width();
  if($(screenSize) < 546){
    $("#ce").css("left", "80.5%");
    $("#ce").css("marginLeft", "-70px");
  }
});

In the if statement instead of $(screenSize) use $screenSize. — dowomenfart
– dowomenfart, Commented Apr 9, 2015 at 17:25
Please check if it even runs (as in if your function gets called and your if is stepped into) - you can do it either with breakpoints (in chrome) or by placing alerts or console.log. I think you cannot have a named function as an argument, but maybe I'm wrong. — Octav Zlatior
– Octav Zlatior, Commented Apr 9, 2015 at 17:26

aquinas · Accepted Answer · 2015-04-09 17:25:57Z

2

You have a bug:

$screenSize = $(window).width();
    if($(screenSize) < 546){

You don't want if ($(screenSize)) you want: if ($screenSize).

Edit: and yes. Media queries makes WAAAAAY more sense than doing this with jQuery.

answered Apr 9, 2015 at 17:25

aquinas

23.9k5 gold badges60 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rws10 Over a year ago

I got it. Thanks :) at first it wasn't working, but then I realized that my file wasn't named properly in the html file lol

PGBI · Accepted Answer · 2015-04-09 17:25:58Z

0

Almost :) Try this:

$(window).resize(function () {
    $screenSize = $(window).width();
    if($screenSize < 546){
        $("#ce").css("left", "80.5%");
        $("#ce").css("marginLeft", "-70px");
    }
});

answered Apr 9, 2015 at 17:25

PGBI

7106 silver badges19 bronze badges

Comments

Vim · Accepted Answer · 2015-04-09 17:26:31Z

0

I've also came across similar situation and here is the code I have implemented. I hope it will give you some idea.

$(document).ready(function () {   

        $(window).resize(function () {

            var navHeader = $('.header-container');

            var minHeight = 96;

            if (navHeader.height() > 90)
               minHeight = navHeader.height();

            $('.main-container').css('margin-top', minHeight + 10);
        });  

    });

If you are not seeing the expected result, check what values you are getting in $screenSize.

answered Apr 9, 2015 at 17:26

Vim

5596 silver badges16 bronze badges

Collectives™ on Stack Overflow

Adjust css with jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related