How do I use jQuery to retract dojotype="dijit.layout.TabContainer" when the media=print?

Question

So I use the following code to create a TabContainer with 3 tabs. However, when I print the page, I would like the page to look as if there is no call to dojotype="dijit.layout.TabContainer". What should I do to achieve this?

<div id="holdtabscript">
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</div>

<div dojotype="dijit.layout.TabContainer" id="tabfunct">
<div dojotype="dijit.layout.ContentPane" title="pane1" selected="selected"> content1</div>
<div dojotype="dijit.layout.ContentPane" title="pane2"> content2</div>
<div dojotype="dijit.layout.ContentPane" title="pane3"> contents</div>
</div>

looks like you should read this: http://stackoverflow.com/questions/4927025/can-jquery-modify-the-css-for-a-specific-media-type — GnrlBzik, Mar 08 '12 at 19:37

score 2 · Answer 1 · answered Mar 08 '12 at 19:34

2

I'd recommend using CSS to do it, if you have access to the page content. Include a print stylesheet that hides the div...

In the head...

<link rel="stylesheet" tyle="text/css" media="print" href="print-stylesheet.css">

The css...

#tabfunct { display: none; }

Much easier than using javascript for something like this.

answered Mar 08 '12 at 19:34

Reinstate Monica Cellio

25,975
6
51
67

But I cannot get rid of the div by using CSS. I'm not trying to hide the div, but trying to remove the attr dojotype="dijit.layout.TabContainer" of that div. – user110 Mar 08 '12 at 19:37
2

You need to edit your question then, because it says "How do I use jQuery to remove the following div when the media is print" and all 3 posters have now answered that question. – Reinstate Monica Cellio Mar 08 '12 at 19:38
Edited. Apologize for being vague. – user110 Mar 08 '12 at 19:50
1

No worries mate - it's your loss if you ask the question badly. I just want you to get the help you need :) – Reinstate Monica Cellio Mar 08 '12 at 20:05

score 0 · Answer 2 · answered Mar 08 '12 at 19:36

0

<style type="text/css">
    @media print {
      #tabfunct  { display:none }
    }
</style>

answered Mar 08 '12 at 19:36

powtac

40,542
28
115
170

I'm not trying to hide the div, but trying to remove the attr dojotype="dijit.layout.TabContainer" of that div. – user110 Mar 08 '12 at 19:39
Thanks @powtac - I've not seen that method before. I've only used the one I posted. Yours is much nicer for small changes. (I'm not gonna vote it up though, because the poster has asked the wrong question so both our answers are actually wrong!) – Reinstate Monica Cellio Mar 08 '12 at 19:40

score 0 · Answer 3 · answered Mar 08 '12 at 19:56

0

You could use the following library: http://cssmedia.pemor.pl/

Then just:

$(function() {
   if(IsMediaType('print') > 0) {
      $('#tabfunct').removeAttr('dojotype');
   }
});

Should probably do the trick.

answered Mar 08 '12 at 19:56

Leonard Garvey

1,517
12
8

How do I use jQuery to retract dojotype="dijit.layout.TabContainer" when the media=print?

3 Answers3