Overwriting CSS : Display none property with jquery

Question

For an element defined as display:none in css I am trying to run a function which tries to display the element using .show(), code below:

CSS

.element {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
}

HTML

<div class="element">Some content here</div>
<div class="element">Some content here</div>

jQuery

var c = $('.element');

c.each(function () {
  c.css({
    'left': dleft + 'px'
  });

  c.css({
    'top': dtop + 'px'
  });

  c.setTimeout(function () {
    c.show(1000);
  }, sduration);

All the variables are getting populated I have checked by alerting all of them and given them default values as well, but somehow the element is not being shown after the timeout.

You can't use setTimeout like that.

j08691
– j08691

2012-09-11 15:38:32 +00:00
Commented Sep 11, 2012 at 15:38 — j08691
– j08691, Commented Sep 11, 2012 at 15:38

Sushanth -- · Accepted Answer · 2012-09-11 15:42:27Z

0

There seems to be two problems in the code you have written. you have not closed the .each() loop .. Also setTimeout is a global function.. .. Check this

    var dleft = 40;
var dtop = 40;
var sduration = 1000;
var c = $('.element');

c.each(function() {
    c.css({
        'left': dleft + 'px',
        'top': dtop + 'px'
    });
});
setTimeout(function() {
    c.show(1000);
}, sduration);

Check this FIDDLE

answered Sep 11, 2012 at 15:42

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

Comments

Danil Speransky · Accepted Answer · 2012-09-11 15:39:00Z

0

setTimeout is a global function.

var c = $('.element');

c.each(function () {
  c.css({ 'left': dleft + 'px', 'top': dtop + 'px' });

  setTimeout(function () {
    c.show(1000);
  }, sduration);
});

Demo: http://jsfiddle.net/S7nw3/

answered Sep 11, 2012 at 15:39

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

Comments

Himanshu · Accepted Answer · 2012-09-14 06:28:54Z

0

If you need to delay when the elements are being shown, you can also make use of the jQuery .delay() function.

c.each(function() {
    c.css({
        'left': dleft + 'px',
        'top': dtop + 'px'
    });
});

c.delay(1000).show();

edited Sep 14, 2012 at 6:28

Himanshu

32.8k32 gold badges117 silver badges137 bronze badges

answered Sep 11, 2012 at 15:55

Obbi

362 bronze badges

2 Comments

Obbi Over a year ago

if you're trying to animate the showing of the element, you pass that into the .show() method itself, so instead of the delay, you can use .show('slow')

user1663313 Over a year ago

Thanks, but i got that by using .animate and the callback using complete parameter....

Collectives™ on Stack Overflow

Overwriting CSS : Display none property with jquery

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related