How can I get jQuery.css() to trump a stylesheet?

Question

I have been working on a page and I would like to programmatically set CSS properties on a cover slideshow according to how much screen real estate there is. If the page is less than one boundary number, I don't want to activate the slideshow. If the page has width greater than that boundary number, but less than another threshold, I want to have the slideshow shrink, and shrink more for smaller sizes. Finally, if it is greater than both, I would like to horizontally center the slideshow in its logical container.

The source at http://JonathansCorner.com/blacksmiths-forge/experimental.html has:

<iframe id="slideshow" border="0" frameborder="0" frameborder="no"
style="display: none;" width="318" height="424" src="/book_covers.cgi?width=318" />

The CSS at http://JonathansCorner.com/css/combined.css has:

#slideshow
    {
    height: 424px;
    position: fixed;
    top: 240px;
    right: 190px;
    width: 318px;
    }

And the JavaScript, at http://JonathansCorner.com/js/combined.js :

if (jQuery(window).width() > 1200)
    {
    if (jQuery(window).width() > 1300)
        {
        var width = min(jQuery(window).width() - 1200, 318);
        document.getElementById('slideshow').src = "/book_covers.cgi?width=" +  width;
        document.getElementById('slideshow').width = width + 'px';
        document.getElementById('slideshow').width = width;
        jQuery('#slideshow').css('right', jQuery(window).width() - 1200 - 318);
        jQuery('#slideshow').css('display', 'block');
        }
    }

The mental model I walked in with was that jQuery.css() would be a trump card, and in the permutations I've tried so far, I've never been aware that a change has been made with jQuery.css.

I also tried using eg jQuery('#slideshow').css('display', 'block !important') .

Is there any way I could use jQuery (or JavaScript alone) to set properties in a way that they will stick?

(What is wrong with my initial understanding, and what is the truth about what can and can't be done with programmatic setting of DOM node styles and properties?)

Answer 1

You haven't closed your iframe tag, combined.js is never loaded. iframe's aren't self-closing tags, they require an opening and a closing tag.

<iframe></iframe>