I am trying to create a mechanism which enables me to switch between a screen CSS (where every piece of content is shown) and a print css where images are not displayed.
At the moment any new php pages I create are generated using a Dreamweaver template which has in it an editable region

My standard CSS file is like so:


body {
	font: 14px/1.3 Arial, Helvetica, sans-serif;
	color: #000000;
}
stresstext {
	font: 14px/1.3 Arial, Helvetica, sans-serif;
	color: #003399;
}
extract {
	font: italic 14px/1.3 Arial, Helvetica, sans-serif;
	color: #333333;
}
h1 {
	font-size:1.3em;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
}
a:link {
	color:#33c;
	text-decoration: underline;
}	
a:visited { color:#006633}	
ul li {
	margin-top: 0.4em;
}

/* hide from incapable browsers */
#sizer { display:none } 
.style1 {font-size: 11px}

and my print CSS is supposed to remove unneccessary font colours and all images (the logo and navigation panels) trouble is it doesn't remove them!!

body {
	font: 14px/1.3 Arial, Helvetica, sans-serif;

}
stresstext {
	font: 14px/1.3 Arial, Helvetica, sans-serif;

}
extract {
	font: italic 14px/1.3 Arial, Helvetica, sans-serif;

}
h1 {
	font-size:1.3em;
	font-family: Arial, Helvetica, sans-serif;

}
a:link {
	color:#33c;
	text-decoration: underline;
}	
a:visited { color:#006633}	
ul li {
	margin-top: 0.4em;
}

/* hide from incapable browsers */
#sizer { display:none } 
.style1 {font-size: 11px}

img {
display: none
}

here is my CSS switch handler

<?php
	//process any new request
	if ($newstyle){
	$csstyle=$newstyle;
	setcookie("print", $csstyle, time()+360000, "/", "http://www.mindseyemidlands.co.uk", 0);
	}

//set to default if not specified
if ( !isset ($csstyle)){
$csstyle="screen";
}
header("Location: $HTTP_REFERER");
?>

and here is an example of a page ive created using the template which has the control in it that switches the CSS file. Like I said at the moment the images are not removed from the screen- why is this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/qualityquest_template_081106.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Quality Quest</title>
<link rel="stylesheet" type="text/css" 
	media="screen" title="User 
Defined Style" href="<?php echo 
(!$sitestyle)?'defaultstyle':$sitestyle ?>.css" />

<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

<script src="js/dw_cookies.js" type="text/javascript"></script>
<script src="js/dw_sizerdx.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>


<table width="935" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="185" colspan="3" valign="top"><img src="logo_v2.gif" width="935" height="165" border="0" usemap="#Map">
      <div id="sizer" style="position:absolute; width:164; height:29px; z-index:4; left: 278px; top: 141px;"><a href="" onclick="dw_fontSizerDX.adjust(2); return false" title="Increase font-size"
    ><img src="images/plus.gif" width="20" height="20" alt="" border="0"></a>
        <a href="" onclick="dw_fontSizerDX.adjust(-2); return false" title="Decrease font-size"
    ><img src="images/minus.gif" width="20" height="20" alt="" border="0"></a>
  <a href="" onclick="dw_fontSizerDX.reset(); return false" title="Restore default font-sizes"
    ><img src="images/reset.gif" width="20" height="20" alt="" border="0"></a></div></td>
  </tr>


  <tr>
    <td width="216" rowspan="2" valign="top"><div align="left">
      <p><img src="buttonsall.gif" width="216" height="526" border="0" usemap="#MapMap"> <br>     

            <map name="MapMap">
              <area shape="rect" coords="28,25,190,54" href="why_look.php" alt="Why look at quality?">
              <area shape="rect" coords="29,58,190,90" href="what_cover.php" alt="Why does quality cover?">
              <area shape="rect" coords="30,92,191,124" href="where_at.php" alt="Where are you now?">
              <area shape="rect" coords="31,128,189,158" href="what_you_want.php">
              <area shape="rect" coords="31,162,189,192" href="what_they_want.php" alt="Stakeholder needs">
              <area shape="rect" coords="29,196,191,227" href="whats_best.php">
              <area shape="rect" coords="32,230,189,258" href="what_approaches.php" alt="Choice of systems">
              <area shape="rect" coords="30,260,191,293" href="sources_of_help.php" alt="Sources of help">
              <area shape="rect" coords="30,296,190,327" href="faq_categories.php" alt="FAQ's">
              <area shape="rect" coords="29,332,190,363" href="jargon_choose_letter.php" alt="Jargon buster">
              <area shape="rect" coords="31,366,189,395" href="contact_us.php" alt="Contact us">
              <area shape="rect" coords="29,398,190,428" href="feedback.php" alt="Feedback">
              <area shape="rect" coords="28,432,187,459" href="download_categories.php" alt="Downloads">
              <area shape="rect" coords="30,467,191,496" href="http://qualityquest.blogspot.com" alt="News &amp; chat">
            </map> 
              <span class="style1"><a id="dw_link" href="http://www.dyn-web.com">dyn-web.com</a>
              <script src="js/sizer_inf.js" type="text/javascript"></script>
              </span>
          <!-- end required link components -->
              <a href="disclaimer.php" class="style1">disclaimer</a> <br>
              <br>
      </p>
      <p>&nbsp;</p>

</div></td>
<td width="20" height="149">&nbsp;</td>
<td valign="top"><!-- InstanceBeginEditable name="EditRegion1" -->
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
      <td width="554" height="38">&nbsp;</td>
      <td width="145" valign="top"><form action="styleswitch.php" method="post">
<select name="set">
<option value="screen" ยป
	selected>screen</option>
<option value="print">print</option>
</select>
<input type="submit" value="Change Style">
</form>

	            *</td>
    </tr>
    <tr>
      <td height="139">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
<!-- InstanceEndEditable --></td>
  </tr>
  <tr>
    <td height="452">&nbsp;</td>
    <td width="699">&nbsp;</td>
  </tr>
</table>
<div align="left"><map name="Map">
    <area shape="rect" coords="20,127,118,152" href="index.php">
    <area shape="rect" coords="440,123,598,154" href="site_map.php">

<area shape="rect" coords="634,125,748,153" href="search.php">
  </map>
  <!-- link for free use -->
  <script type="text/javascript">
/*************************************************************************
    This code is from Dynamic Web Coding at dyn-web.com
    Copyright 2004-5 by Sharon Paine 
    See Terms of Use at www.dyn-web.com/bus/terms.html
    regarding conditions under which you may use this code.
    This notice must be retained in the code as is!
*************************************************************************/

// setDefaults arguments: size unit, default size, minimum, maximum
// optional array of elements or selectors to apply these defaults to
//dw_fontSizerDX.setDefaults("px", 14, 9, 32, ['div#content'] );

// set arguments: default size, minimum, maximum
// array of elements or selectors to apply these settings to
//dw_fontSizerDX.set(12, 9, 18, ['div.sidebar'] );

dw_fontSizerDX.init();
  </script>
  <script type="text/javascript">
		Element.cleanWhitespace('content');
		init();
	</script>
</div>
</body>
<!-- InstanceEnd --></html>

check out the results:

http://www.mindseyemidlands.co.uk/notts_quality/info_resource/print_testv2.php

    It may not be this, but just in case you might want to close your css style declaration correctly.

    img { 
display: none 
}

    Should be:

    img { 
display: none;
}

      thankyou for pointing that out. unfortunately nothing has changed. i tried to print out and the images on the screen do not print out but when i choose screen- they still do not print out

        Hi again,

        I've been playing with your code and think that there are a number of reasons why it might not be working.

        So, I created a working model with a different approach. I've omitted the cookie function for now, so the user's choice of css will not persist from page to page and I've also eliminated the whole styleswitch.php page from the process.

        Instead, I've created a PHP snippet above the HTML for the page which checks to see if the request contains a POST and if so, changes the css accordingly, otherwise it specifies the screen.css.

        I've also changed the form so that its action points to itself, eliminating the need for a second page and then relocating the header as you were doing.

        Have a look and I think this may help you get this working.

        This is the top of the page:

        <?php 
if (!$_POST['submit']) { 
    $csstyle="screen"; 
	} else { 
      $csstyle = $_POST['set'];
      } 

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<title>Quality Quest</title> 
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="<?php echo ($csstyle); ?>.css" /> 

<script src="js/dw_cookies.js" type="text/javascript"></script> 
<script src="js/dw_sizerdx.js" type="text/javascript"></script>

        And this is your change style form:

        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> 
<select name="set"> 
<option value="screen" selected>screen</option> 
<option value="print">print</option> 
</select> 
<input type="submit" name="submit" value="Change Style"> 
</form>

        If you still want to add a cookie, you'd need to do that in the first PHP snippet and also create a cookie check function so the visitor's choice can persist.

        I hope this helps.

          I forgot to point out that I also changed the way you were linking to your css stylesheets.

          I removed the separate <link> tags for the two distinct stylesheets and left just one and then I modified the PHP within the tag to use whichever value had been set for $csstyle

          Regards.

            spiderbait wrote:

            I forgot to point out that I also changed the way you were linking to your css stylesheets.

            I removed the separate <link> tags for the two distinct stylesheets and left just one and then I modified the PHP within the tag to use whichever value had been set for $csstyle

            Regards.

            This is working now as the images are removed!. I was wondering though- I have noticed that my settings for screen.css are not that same as they appear.
            For instance the font should be Arial but it appears as Times New Roman. Check it out:

            http://www.mindseyemidlands.co.uk/notts_quality/info_resource/print_testv3.php
            Where you say you have removed the <link> tags for the two distinct stylesheets it now appears that my settings in screen.css haven't been retained. Is there a workaround?

              my apologies- just noticed I haven't uploaded the screen.css file... whoops!

                One more thing- as you can see the images are removed in 'print' mode but the body text stays in the same place. Ive tried alignment in the CSS editing tool but cannot get the text to move to the left of the screen where the navigation image was nor move the text upwards to where the logo once was.

                  Tezread wrote:

                  One more thing- as you can see the images are removed in 'print' mode but the body text stays in the same place. Ive tried alignment in the CSS editing tool but cannot get the text to move to the left of the screen where the navigation image was nor move the text upwards to where the logo once was.

                  Hi there,

                  I'm glad it's working for you.

                  As for the layout, you'd need to produce a much more complex print.css in order to change the actual layout for the pages when viewed with the print version stylesheet.

                  Because, what's happening is that the images are still being downloaded and their places are still being mapped out when the page is drawn to the screen. The print.css is simply telling them not to be visible.

                  If you look at the source code, you'll see this is true and that all of the image widths and heights are still being allocated which is why your layout doesn't change.

                  I've never done one as complex as that, but if you want to work on it, I'd suggest that you start by applying IDs to any areas of the page that have a specified width and then removing the width instruction from the HTML and putting it into the css. Then you can create a second version of the css with the widths and heights marked to zero which would be the print version.

                  However, this can produce unpredictable results, so you'll definitely need to experiment with it.

                  An alternative is to use css positioning for those IDs and to have those positions overlap in the print.css version.

                  Either way, it's not an easy task, but should be do-able. I'll be happy to review your css if you get something working and post it again.

                  Regards
                  Jade

                    Write a Reply...