css jquery doesn't work

Question

First apologize for my English. I have a popup when I do click in triggerPop this one it appears, I'm trying to show this one to the right but the css doesn't work. What am I doing wrong? Thank you in advance.

var monscreen = $(window).width();
var mondoc = $(document).width();

if (mondoc > monscreen) {
    var dif = mondoc - monscreen;
    $("div#Navigation_Popup").css({
        'right': dif + 'px'
    });
}

$(function() {
    $('#triggerPop').bind('click', function(e) {
        $("#Navigation_Popup").slideFadeToggle(function() {});
        return false;
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({
            opacity: 'toggle',
            height: 'toggle'
        }, "fast", easing, callback);
    }
});

Explain "doesn't work" (or show it). It's hard to give an answer if you don't know the exact problem. — user2428118
– user2428118, Commented Oct 11, 2012 at 13:31
What position is #Navigation_Popup set to? It would require absolute, relative or fixed for the right property to have any effect. — Jared
– Jared, Commented Oct 11, 2012 at 13:36

Kyle · Accepted Answer · 2012-10-11 13:35:32Z

1

I'm going off of the limited information. You mentioned css...

I would move all of this code:

var monscreen = $(window).width();
var mondoc = $(document).width();

if (mondoc > monscreen) {
  var dif = mondoc - monscreen;
  $("div#Navigation_Popup").css({
    'right': dif + 'px'
  });
}

Inside of

$(function(){
  .
  .
  .
});

As it is now, the if (mondoc > monscreen) code block is getting executed before the document is ready.

answered Oct 11, 2012 at 13:35

Kyle

22.3k2 gold badges63 silver badges63 bronze badges

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

Comments

Toping · Accepted Answer · 2012-10-11 13:36:12Z

0

Not sure how jquery treat these values but, isnt var monscreen = $(window).width(); var mondoc = $(document).width(); returning strings? How about an alert to check this?

answered Oct 11, 2012 at 13:36

Toping

7555 silver badges16 bronze badges

2 Comments

Barmar Over a year ago

- will coerce them to numbers if necessary.

user1738101 Over a year ago

Thank you for his answers, I find my mistake :) the div, was inside an updatepanel and the ajax change the css

Barmar · Accepted Answer · 2012-10-11 15:27:57Z

0

Bind is deprecated, try on instead. I also think everything should be inside $(function()) handler, so, try this:

$(function() {
    var monscreen = $(window).width();
     var mondoc = $(document).width();

    if (mondoc > monscreen) {
        var dif = mondoc - monscreen;
        $("div#Navigation_Popup").css({
           'right': dif + 'px'
        });
    }
    $('#triggerPop').on('click', function(e) {
        $("#Navigation_Popup").slideFadeToggle(function() {});
        return false;
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({
            opacity: 'toggle',
            height: 'toggle'
        }, "fast", easing, callback);
    }
});

edited Oct 11, 2012 at 15:27

Barmar

789k57 gold badges554 silver badges669 bronze badges

answered Oct 11, 2012 at 13:40

eloycm

4142 silver badges12 bronze badges

Collectives™ on Stack Overflow

css jquery doesn't work

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related