JQUERY CSS "display" "block" does not work even though "display" "none" does work....

Question

Hello guys I'm working on an online comic right now and am struggeling with following jquery code. Jquery is supposed to change my css code from the #compscreen2 image from "display:none" to "display:block" after the other function happens but it doesn't seem to work and I can't figure out why.... any help please? It seems to work for the other image though.... #compscreen display:none does work. Help!

JS :

$(document).ready(function () {

//function for automated top scrolling
$(window).on('scroll', function(e){
  scrollPosY();

  if ($('#panel11').visible(true) && scrolled == 0) {
  $('html, body').stop().animate( { scrollTop: $('.scrollpanel').offset().top }, 500 )
  scrolled = 1;
  $("div.wrap2").remove();
  $("#compscreen2").css("display","block");
  $("#compscreen").css("display", "none"); 
  }
});

$window = $(window);


});

CSS :

#compscreen2 img{
    width: 60%;
    padding-left: 20%;
    position: absolute;
    display: none;
}

Can u post a web inspector screenshot or create a JSBin? Since position: absolute did you check the top position of the element? Maybe its simply off the page... — Kjell
– Kjell, Commented Aug 6, 2016 at 14:12
css selector #compscreen2 img but jQuery selector #compscreen2... — Ivan Karaman
– Ivan Karaman, Commented Aug 6, 2016 at 14:14
Can you provide us with the HTML that this code is manipulating? Maybe you could make a pen at Codepen with the HTML, JS and CSS and then we can inspect it. I can't see anything that essentially could cause the code not to work. — Leonardo Baptista Lopes
– Leonardo Baptista Lopes, Commented Aug 6, 2016 at 14:15
Have you set the by default property of compscreen2 as display:none? or you loading later by using ajax? — Afshan Shujat
– Afshan Shujat, Commented Aug 6, 2016 at 14:18

Michał Łazowik · Accepted Answer · 2016-08-06 14:17:25Z

2

The css sets display: none for #compscreen2 img, not #compscreen2 itself. You can either make the css something like this:

#compscreen2 {
    display: none;
}

#compscreen2 img {
    width: 60%;
    padding-left: 20%;
    position: absolute;
}

or change the js to:

$("#compscreen2 img").css("display","block");

You can also use helper functions show and hide to make the code a bit more readable.

answered Aug 6, 2016 at 14:17

Michał Łazowik

3554 silver badges10 bronze badges

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

1 Comment

Cassandra Hegazy Over a year ago

thank you so much!! it worked. Also thanks for the advice :) yayy!!

Collectives™ on Stack Overflow

JQUERY CSS "display" "block" does not work even though "display" "none" does work....

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related