CODEWITHSUNDEEP
jqueryhtmlcss
Damarawy
Damarawy

Reputation: 21

Adding CSS to iframe using jquery

I'm having a problem using iframes, I'm not actually setting a source for the iframe I insert the html I want using jQuery instead which worked fine with me but my actual problem is that I don't know how to include a style sheet to the iframe.

Check the code below:

<button id="print1" onclick="  $('#frame1').contents().find('body').html($('#div1').html() + $('#tabs-4').html() + $('#tabs-5').html()+ $('#tabs-6').html() ); window.frames['frame1'].print();">Print full report</button>
<iframe id="frame1" style="visibility:hidden;" height=1px></iframe>

Upvotes: 0

Views: 731

Answers (3)

federicot
federicot

Reputation: 12341

If you want to style the iframe, use the jQuery's css function.

$('#frame1').css({
   'property1': 'value',
   'property2': 'value',
   .
   .
   .
   'propertyN': 'value',
});

But you cannot attach a stylesheet to a single element. You'd rather link to your stylesheet in the head element and have in it the style you want for your iframe. E.g.:

#frame1 {
    /* Style of the iframe. */
}

Upvotes: 0

CtrlShiftF11
CtrlShiftF11

Reputation: 172

If you're not using a document source with your iFrame then I believe you should just set css rules directly on the iFrame. If you need to do it in code then you could simply use $("#frame1").css('myPropertyName', 'myPropertyValue');

Upvotes: 0

Praveen
Praveen

Reputation: 56509

Inline jQuery, I think wrong. better have like this 

<script type="text/javascript">
$('button').on('click', function() {
  $('#frame1').contents().find('body').html($('#div1').html() + $('#tabs-4').html() + $('#tabs-5').html()+ $('#tabs-6').html() ); 
  window.frames['frame1'].print();
});
</script>

Also change your css like below

<iframe id="frame1" style="visibility:hidden; height:1px"></iframe>

Upvotes: 1

Related Questions