Two different print - One is with Ad and one is without Ad to print

HTML & CSS
1

I did develop two different css one with ad (printAd.css) and one without ad (print3.css) and the rest are #header, #footer, #sidebar {display:none;}. The print won’t print without Ad or with Ad since I have 7 different css.

<link rel=“stylesheet” type=“text/css” href=“http://code.aia.org/c/reset.css” media=“screen” />
<link rel=“stylesheet” type=“text/css” href=“http://code.aia.org/c/960.css” media=“screen” />
<link rel=“stylesheet” type=“text/css” href=“http://code.aia.org/c/style.css” media=“screen” />
<link rel=“stylesheet” media=“screen” type=“text/css” href=“http://code.aia.org/c/structure.css” />
<link rel=“stylesheet” media=“screen” type=“text/css” href=“http://code.aia.org/c/form.css” />

<!—test to print–>
<link rel=“stylesheet” media=“print” type=“text/css” href=“printAd.css” />
<link rel=“stylesheet” type=“text/css” id=“myStyle” href=“print3.css” media=“print” />

<script src=“//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”></script>

<script>
var switchStyle = function(param) {
$obj = $(‘#myStyle’);
var style = (param == “ad” ? ‘printAd.css’ : ‘print3.css’);
$obj.attr(‘href’,style);
window.print();
};
</script>

<ul>
<li id=“print ad”><a class=“first” href=“javascript:switchStyle(ad);” id=“switchStyle”>Print with Ads</a></li>
<li id=“print”><a href=“javascript:switchStyle(noAd);” id=“switchStyle”>Print without Ads</a>
<li id=“email”><a href=“mailto:” title=“E-Mail”>E-Mail</a></li>
<li id=“share”><a class=“last” href=“#” style=“text-decoration: none;”><span class=“st_sharethis” displayText=“ShareThis”></span> </a></li>
</ul>

I tested and nothing success. I need help from someone who can help me with that.

2

This is a JS question rather than a CSS one so if this isn’t the right answer I’ll get the thread moved over to JS.

It looks like your JS should be this:


<script src="[B]http:[/B]//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var switchStyle = function(param) {
$obj = $('#myStyle');
var myStyle = (param == "ad" ? 'printAd.css' : 'print3.css');
$obj.attr('href',myStyle);
window.print();
};
</script>

The inline parameter should be in quotes.


href="javascript:switchStyle('ad');"

Altogether it should be this I think:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/style.css" media="screen" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/structure.css" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/form.css" />

<link rel="stylesheet" type="text/css" id="myStyle" href="print3.css" media="print" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var switchStyle = function(param) {
$obj = $('#myStyle');
var myStyle = (param == "ad" ? 'printAd.css' : 'print3.css');
$obj.attr('href',myStyle);
window.print();
};
</script>
</head>

<body>
<ul>
		<li id="print-ad"><a class="first" href="javascript:switchStyle('ad');" id="switchStyle">Print with Ads</a></li>
		<li id="print"><a href="javascript:switchStyle('noAd');" id="switchStyle2">Print without Ads</a>
		<li id="email"><a href="mailto:" title="E-Mail">E-Mail</a></li>
		<li id="share"><a class="last" href="#" style="text-decoration: none;"><span class="st_sharethis" displayText="ShareThis"></span> </a></li>
</ul>
</body>
</html>

Remember ids mmst be unique and you can’t have multiple ids on the same element unlike classes.

You should also remove the inline javascript and do it with the jquery that you are using.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/style.css" media="screen" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/structure.css" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/form.css" />

<link rel="stylesheet" type="text/css" id="myStyle" href="print3.css" media="print" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	
	var switchStyle = function(param) {
	$obj = $('#myStyle');
	var myStyle = (param == "ad" ? 'printAd.css' : 'print3.css');
	$obj.attr('href',myStyle);
	window.print();
	};

	$("#switchStyle").click(function() {switchStyle('ad');return false;});
	$("#switchStyle2").click(function() {switchStyle('noAd');return false;});
});

</script>
</head>

<body>
<ul>
		<li id="print-ad"><a class="first" href="#" id="switchStyle">Print with Ads</a></li>
		<li id="print"><a href="#" id="switchStyle2">Print without Ads</a>
		<li id="email"><a href="mailto:" title="E-Mail">E-Mail</a></li>
		<li id="share"><a class="last" href="#" style="text-decoration: none;"><span class="st_sharethis" displayText="ShareThis"></span> </a></li>
</ul>
</body>
</html>
3

It still not show Ad on the print which I tested. One should show with Ad on the print and other one will not show Ad. But I don’t see where is the Ad on the paper.

4

Hi,

The code I gave above is working and tested n IE9 and Firefox.

I tested with this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/style.css" media="screen" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/structure.css" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/form.css" />

<style type="text/css">
#ad{
	width:600px;
	background:red;
	margin:auto;
	border:1px solid #000;	
}
</style>
<link rel="stylesheet" type="text/css" id="myStyle" href="print3.css" media="print" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	
	var switchStyle = function(param) {
	$obj = $('#myStyle');
	var myStyle = (param == "ad" ? 'printAd.css' : 'print3.css');
	$obj.attr('href',myStyle);
	window.print();
	};

	$("#switchStyle").click(function() {switchStyle('ad');return false;});
	$("#switchStyle2").click(function() {switchStyle('noAd');return false;});
});

</script>
</head>

<body>
<ul>
		<li id="print-ad"><a class="first" href="#" id="switchStyle">Print with Ads</a></li>
		<li id="print"><a href="#" id="switchStyle2">Print without Ads</a>
		<li id="email"><a href="mailto:" title="E-Mail">E-Mail</a></li>
		<li id="share"><a class="last" href="#" style="text-decoration: none;"><span class="st_sharethis" displayText="ShareThis"></span> </a></li>
</ul>
<div id="ad">This is the ad</div>

</body>
</html>

and printAd.css:


#ad{display:block;background:blue}

print3.css


#ad{display:none;}

If the ad is not displaying for you then it is either your CSS/html that is wrong or you are trying to show a background image which is up to the user to allow from their browser settings. You can’t control that.

You’ll need to provide a link for further debugging but the code above is switching the stylesheets ok.

5

Here is print3.css code here:


/*Remove Menus/links*/
#primaryNav{
display:none;
}

#footerNav{
display:none;
}


#universalNav{
display:none;
}

#footerNav{
display:none;
}

#universalNav{
display:none;
}

#searchNav{
display:none;
}

#universalWrapper{
display:none;
}

#identityNav{
display:none;
}

#memberNav{
display:none;
}

#searchNav{
display:none;
}

#secondaryNav{
display:none;
}



#directoryContainer{
display:none;
}

#footerWrapper{
display:none;
}

#footerContainer {
display:none;
}

/*Remove Advertising*/
#sideBarContainer{
display:none;
}


#directoryNav.home #dnColumnA,#directoryNav.home #dnColumnB,#directoryNav.home #dnColumnC,#directoryNav.home #dnColumnD,#directoryNav.home #dnColumnE,#directoryNav.home #dnColumnF {display:none;}


/*Remove Icons*/

#socialBar{
display:none;
}

#rssContainer { 
display:none;
}

#rssExplained { 
display:none; 
}

#facebookIcon  { 
display:none; 
}

#twitterIcon  { 
display:none; 
}

#linkedinIcon { 
display:none; 
}

#youtubeIcon  { 
display:none; 
}

#flickrIcon  { 
display:none; 
}

#rssIcon  { 
display:none; 
}

#knowledgenetIcon  { 
display:none; 
}

#foursquareIcon  { 
display:none; 
}

#pinterestIcon  { 
display:none; 
}



/*BODY DEFAULTS*/
body {
background:url(../i/grey_gradient_bg.jpg) repeat-x scroll 0 0 #fff;
color:#555;
font-family:"Lucida Grande","Lucida Sans",Arial,Helvetica,Sans-Serif;
font-size:75%;
line-height:1.5em;
}

/*HEADER DEFAULTS*/
h1,h2,h3,h4,h5,h6 {color:#3d3d3d;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;}
h1 {font-size:21px;margin-bottom:30px;}
h2 {font-size:21px;margin-bottom:12px;}
h3 {font-size:18px;margin-bottom:6px;}
h4 {font-size:15px;margin-bottom:6px;}
h5 {font-size:12px;margin-bottom:6px;}
h6 {font-size:11px;margin-bottom:6px;}

/*HEADER DETAILS*/
h1#L1 {/*see headerLogo h1*/}
h1#L2,h1#L3 {border-bottom:1px solid #ccc;color:#BE342C;padding-bottom:6px;}
h1#L3 span {border-left:1px solid #ccc;color:#8c8c8c;font-weight:normal;margin-left:9px;padding-left:9px;}

/*HEADER IMAGE DEFAULTS*/
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

/*IMAGE DEFAULTS*/
img, a img{
	border:none;
	-ms-interpolation-mode: bicubic;
}

/*PARAGRAPH DEFAULTS*/
p {margin-bottom:18px;}
p img {margin:0 12px 12px 0;}
p img.left {float:left;margin:0 12px 12px 0;}
p img.right {float:right;margin:0 0 12px 12px;}

/*PARAGRAPH SPECIFICS*/
#pageIntro {margin-bottom:21px;margin-top:-15px;}
#pageIntro p {color:#444;font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:21px;margin-bottom:0;}


/*LINK DEFAULTS*/
a {color:#000;}
a:link, a:visited {text-decoration:none;}

For printAd.css



/*Show Advertising Image*/
#sideBarContainer .adContainer img {
display:block;
}




/*Remove Menus/links*/
#primaryNav{
display:none;
}

#footerNav{
display:none;
}

#universalNav{
display:none;
}

#footerNav{
display:none;
}

#universalNav{
display:none;
}

#searchNav{
display:none;
}

#universalWrapper{
display:none;
}

#identityNav{
display:none;
}

#memberNav{
display:none;
}

#searchNav{
display:none;
}

#secondaryNav{
display:none;
}


#directoryContainer{
display:none;
}

#footerWrapper{
display:none;
}

#footerContainer {
display:none;
}


#directoryNav.home #dnColumnA,#directoryNav.home #dnColumnB,#directoryNav.home #dnColumnC,#directoryNav.home #dnColumnD,#directoryNav.home #dnColumnE,#directoryNav.home #dnColumnF {display:none;}


/*Remove Icons*/

#socialBar{
display:none;
}

#rssContainer { 
display:none;
}

#rssExplained { 
display:none; 
}

#facebookIcon  { 
display:none; 
}

#twitterIcon  { 
display:none; 
}

#linkedinIcon { 
display:none; 
}

#youtubeIcon  { 
display:none; 
}

#flickrIcon  { 
display:none; 
}

#rssIcon  { 
display:none; 
}

#knowledgenetIcon  { 
display:none; 
}

#foursquareIcon  { 
display:none; 
}

#pinterestIcon  { 
display:none; 
}



/*BODY DEFAULTS*/
body {
background:url(../i/grey_gradient_bg.jpg) repeat-x scroll 0 0 #fff;
color:#555;
font-family:"Lucida Grande","Lucida Sans",Arial,Helvetica,Sans-Serif;
font-size:12px;
line-height:1.5em;
}

/*HEADER DEFAULTS*/
h1,h2,h3,h4,h5,h6 {color:#3d3d3d;font-family:Arial,Helvetica,Sans-Serif;line-height:1em;word-spacing:-1px;}
h1 {font-size:21px;margin-bottom:15px;}
h2 {font-size:21px;margin-bottom:12px;}
h3 {font-size:18px;margin-bottom:6px;}
h4 {font-size:15px;margin-bottom:6px;}
h5 {font-size:12px;margin-bottom:6px;}
h6 {font-size:11px;margin-bottom:6px;}

/*HEADER DETAILS*/
h1#L1 {/*see headerLogo h1*/}
h1#L2,h1#L3 {border-bottom:1px solid #ccc;color:#BE342C;padding-bottom:6px;}
h1#L3 span {border-left:1px solid #ccc;color:#8c8c8c;font-weight:normal;margin-left:9px;padding-left:9px;}

/*HEADER IMAGE DEFAULTS*/
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

/*IMAGE DEFAULTS*/
img, a img{
	border:none;
	-ms-interpolation-mode: bicubic;
}

/*PARAGRAPH DEFAULTS*/
p {margin-bottom:18px;}
p img {margin:0 12px 12px 0;}
p img.left {float:left;margin:0 12px 12px 0;}
p img.right {float:right;margin:0 0 12px 12px;}

/*PARAGRAPH SPECIFICS*/
#pageIntro {margin-bottom:21px;margin-top:-15px;}
#pageIntro p {color:#444;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:21px;margin-bottom:0;}


/*LINK DEFAULTS*/
a {color:#000;}
a:link, a:visited {text-decoration:none;}
6

Hi,

You have hidden this element:


#sideBarContainer { display:none; }

But you never show it again and it seems to be the element that is holding your ad.

You can’t just turn on a child of a display:none parent (unlike visibility).


#sideBarContainer .adContainer img { display:block; }

You need to turn on the #sideBarContainer {display;block} before the image will be visible.

7

Now it does work. I want to thank you for your big help and learn from you too. I do appreciate this very much.

Cheers,
Melinda

8

Oh I forget to ask you. I know it is impossible or possible to add other javascript for input type=“radio” but I assume if I am right.

on HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test print with radio checked - The American Institute of Architects</title>

<!--BEGIN DEFAULT STYLES-->
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/style.css" media="screen" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/structure.css" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/form.css" />



<style type="text/css">
<!--ad image-->
.ad300x250 a img {height:250px;margin:0 0 20px 0;width:300px;}
.ad300x100 a img {height:100px;margin:0 0 20px 0;width:300px;}
.ad220x183 a img {height:183px;margin:0 0 20px 0;width:220px;}
.ad220x100 a img {height:183px;margin:0 0 20px 0;width:220px;}

.adContainer img {display:block;}

<!--Promo ad-->
.promoContainer img {display:block;}	

</style>

<link rel="stylesheet" type="text/css" id="myStyle" href="print.css" media="print" />


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script>
var switchStyle = function(param) {
$obj = $('#myStyle');
var myStyle = (param == "ad" ? 'printAd.css' : 'print.css');
$obj.attr('href',myStyle);
window.print();
};
</script>

</head>
<form name="printform">
<input type="radio" name="switchStyle" value="javascript:switchStyle('noAd');" 
checked="checked" onclick="noAd"> No Ad<br>
<input type="radio" name="switchStyle" value="javascript:switchStyle('ad');" onclick="ad"> With Ad<br>
</form>
</html>
</body>

Second add second JavaScript with radio code:


<script type="text/javascript">

function get_radio_value()
{
for (var i=0; i < document.printform.switchStyle.length; i++)
   {
   if (document.printform.switchStyle[i].checked)
      {
      var rad_val = document.printform.switchStyle[i].value;
      }
   }
}
</script>

Once somebody pick No Ad or With Ad will automatic directly to print. You are welcome to correct me. I tried to find some tutorial for radio with inside link but could not find it.

9

It is almost too close!

Here is HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test print with radio checked - The American Institute of Architects</title>

<!--BEGIN DEFAULT STYLES-->
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://code.aia.org/c/style.css" media="screen" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/structure.css" />
<link rel="stylesheet" media="screen" type="text/css" href="http://code.aia.org/c/form.css" />



<style type="text/css">
<!--ad image-->
.ad300x250 a img {height:250px;margin:0 0 20px 0;width:300px;}
.ad300x100 a img {height:100px;margin:0 0 20px 0;width:300px;}
.ad220x183 a img {height:183px;margin:0 0 20px 0;width:220px;}
.ad220x100 a img {height:183px;margin:0 0 20px 0;width:220px;}

.adContainer img {display:block;}

<!--Promo ad-->
.promoContainer img {display:block;}	

</style>

<link rel="stylesheet" type="text/css" id="myStyle" href="print.css" media="print" />


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script>
var switchStyle = function(param) {
$obj = $('#myStyle');
var myStyle = (param == "ad" ? 'printAd.css' : 'print.css');
$obj.attr('href',myStyle);
window.print();
};
</script>

</head>

          <div id="pageToolsNav">
            <h2>Page Tools</h2>
			
         <ul>
		 
		<li id="print-ad"><input type="radio" name="print" id="switchStyle" checked="checked" a class="first" href="javascript:switchStyle('ad');" id="switchStyle"/><label for="With Ad">Print with Ads</label></li>
		<li id="print"><input type="radio" name="print" id="switchStyle2" a href="javascript:switchStyle('noAd');" id="switchStyle2" /><label for="no Ad">Print no Ads</label></li>
		<li id="email"><a href="mailto:" title="E-Mail">E-Mail</a></li>
		<li id="share"><a class="last" href="#" style="text-decoration: none;"><span class="st_sharethis" displayText="ShareThis"></span></a></li>
        </ul>
          </div>

</html>
</body>

Maybe I forget add something, did I??

10

Hi,

I’m not sure what you are trying to do there but if you want to use radio buttons to print then you could just attach the event handler to the radios instead.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#ad {
	width:400px;
	background:red;
	margin:auto;
	border:1px solid #000;
}
.ads{float:right;}
.ads ul{
	margin:0;
	padding:0;
	list-style:none;
	float:right;
}
.ads li {
	float:left;
	clear:none
}
ul.ads li:after { display:none }
</style>
<link rel="stylesheet" type="text/css" id="myStyle" href="print3.css" media="print" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	
	var switchStyle = function(param) {
	$obj = $('#myStyle');
	var myStyle = (param == "ad" ? 'printAd.css' : 'print3.css');
	$obj.attr('href',myStyle);
	window.print();
	};

	$("#switchStyle").click(function() {switchStyle('ad');return false;});
	$("#switchStyle2").click(function() {switchStyle('noAd');return false;});
});

</script>
</head>

<body>
<form  class="ads" name="form1" method="post" action="">
		<ul>
				<li id="print-ad">
						<input name="radio" type="radio" id="switchStyle" value="switchStyle" >
						<label for="switchStyle">Print with Ads</label>
				| </li>
				<li id="print">
						<input type="radio" name="radio" id="switchStyle2" value="switchStyle2">
						<label for="switchStyle2">Print without Ads</label>
				| </li>
				<li id="email"><a href="mailto:" title="E-Mail">E-Mail</a></li>
		</ul>
</form>
<div id="ad">This is the ad</div>
</body>
</html>

However you could just as easy have added background images to the anchors and swapped their class if all you wanted was the visual clue.

It doesn’t seem to make much sense to have the radio button checked as most people would then look for a submit button to complete the action.