Show/Hide Image with Media Screen

[ftgarcia0618]

Hi All,

I have an image I want to display only when the screen is less than 1024px. I'm able to alter other display elements with @media screen however a standard display:none/inline/block doesn't seem to work. I've also used some javascript as an alternative (below). Does anyone know if this is possible with Cognos? I know of IE's limitations however my users are on Chrome and Safari. The other CSS Media properties are working in the other browsers.

Code Select Expand

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
window.onresize = function(event) {
    if(event.currentTarget.outerWidth > 1024){
        console.info("hiding");
        $("#small-p").hide();
    }else{
        console.info("showing");
        $("#small-p").show();
    }
   
}
});//]]>

</script>

Thanks in Advance!

[bdbits]

If you attach the code to a button and click on it, does it work from there? If you inspect the page after loading, is #small-p actually there, attached to a DOM element? Cognos sometimes mangles names, depending on how you went about defining #small-p.

Or maybe try pure javascript instead of jQuery (just an idea).