Cassandra Hegazy Cassandra Hegazy - 4 months ago 36
CSS Question

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

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;
}

Answer

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.

Comments