The Designspace: March 2008 Archives

March 26, 2008

TNF in asthma - a new pathway for treatment

Tumor Necrosis Factor is a type of signaling molecule (cytokine) involved in inflammation. It has been found to be an important factor in a variety of disease processes, because it promotes the inflammatory response which, although necessary in fighting infection, can be deadly in the case of overreaction, as in asthma. Finding this association has been a breakthrough in treating treatment-resistant asthma (refractory asthma).

In 2005, an article was published in the journal Thorax suggesting that severe, refractory asthma could be treated by blocking TNF alpha production using the drug etancercept. After a pilot study significant improvement was experienced by the 15 patients who had poor response to other treatments.

Since 2005, there have been other studies confirming this link. A study published in Expert Opinion on Therapeutic Patents in 2008 discusses a successful method of treating asthma, COPD, pulmonary fibrosis and lupus using a combination of a TNF-alpha antagonist and a CXCL13 antagonist (another cytokine).

An article published in Allergy in 2008 shows an reaction to steroids (a common treatment for asthma which may actually promote TNF-alpha mediated inflammation in some cases.

An article in Current Allergy and Asthma Reports in 2007 summarizes recent research which "provides support for the concept that blocking TNF-alpha activity represents a new approach in asthma therapy. "

Other research has shown that although genetic variation that affects production of TNF alpha and TNF beta have been associated with asthma susceptibility, parental smoking and childhood exposure to ozone can overwhelm such differences because of the strong influence secondhand smoke and ozone can have on TNF expression. (Envrionmental Health Perspectives, 2007)

Potential New Treatment Approach For Severe Asthma (Science Daily News)

The CXCR5 receptor, a new target in inflammation? Expert Opinion on Therapeutic Patents, 2008;18(10):1209-1210

New findings in asthma described by A. Matsuda and co-researchers.(Report)
Biotech week [1045-1404]
yr:2009 pg:346

Tumor necrosis factor inhibitors for the treatment of asthma
Journal Current Allergy and Asthma Reports
10.1007/s11882-007-0013-3

Parental Smoking Modifies the Relation between Genetic Variation in Tumor Necrosis Factor-α (TNF) and Childhood Asthma
Environ Health Perspect. 2007 April; 115(4): 616-622.
Published online 2007 January 16. doi: 10.1289/ehp.9740.

Posted by ellen at 7:23 PM

March 21, 2008

Use ASP to create a fast-loading site

A recent project involved creating a site that was easy to maintain and did not require complicated code or a database to run. The people that will be keeping the content up-to-date have varying levels of web skills, so it needed to be simple enough for the least experienced web developer but flexible enough to support the many functions people wanted to be able to add on in the future.

This template makes use of "includes" to load template pieces, such as the header, footer, navbar and tab bars, and an asp instruction to load the content so quickly that in some cases, it rivals Flash. (For some reason this speed gain does not show up in Safari on the Mac).

A typical page is shown here.

Although there is a fair bit of code and complicated stylesheets underlying the site structure, all content is entered on very simple-to-edit HTML pages, stripped of most of the site-wide and section-wide navigational features which might prove distracting to a beginning web-editor.

The home page, index.asp is the central hub of the entire site. You might even say it is the only page. Content is loaded dynamically into the middle of the index page based on parameters in the URL. For example, "?param=develop01" loads the first page in the course development section.

HTML source for index.htm:



<%@LANGUAGE="VBSCRIPT"%>

  <!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>

  <title>Site name</title>

  <link rel="stylesheet" type="text/css" href="css/portal.css"/>


<link rel="stylesheet" type="text/css" href="css/userStyles.css" />

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


<!--special styles to take into account IE 6's differences-->

  <!--[if IE]>

  <link rel="stylesheet" type="text/css" href="css/portalIE.css">

  <![endif]-->



<!--[if IE 6]>

  <link rel="stylesheet" type="text/css" href="css/portalIE6.css">

  <![endif]-->

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

  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 


<style type="text/css">

  <!--

  .test {

  font-family: Arial, Helvetica, sans-serif;

  }

  -->

  </style>

  </head>

  <body>

  

  <div align="center" id="outerContainer">

  <!--#include file="includes/header.asp"-->

  <!--main content table begins here-->

  <table border="0"  id="layoutTable" cellpadding="0" cellspacing="0">

  <tr valign="top" >

  <!--leftColumn begins here-->

  <td valign="top" id="leftCol" >

  <!--#include file="includes/leftNav.asp"-->

  </td>

  <!--leftColumn ends here-->

  

  <!--middle Column begins here-->

  <td id="midCol" align="left" >

  <% Dim zPage 

  zPage =Request.QueryString("param")

  If zPage="" Then 

  ' Server.Execute("pages/login01.asp") 

  Server.Execute("pages/do4u00.asp") 

  Else 

  Server.Execute("pages/"&zPage&".asp")

  End If %>

  </td> <!--middle Column ends here-->

  

  </tr>

  <tr id="footer">

  <td id="ftrLftCol"><img src="images/corners/corner_blueBotLft.jpg" width="11" height="16" /></td>

  <!--<td id="ftrMiddle"></td>-->

  <td id="ftrRtCorner"></td>

  </tr>

  </table>

  </div><!--end outerContainer div-->

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


</body>

  </html>

A series of include files create the navigation. navbar.asp creates the global left-side navbar, and each of the section-level tab bars are created by their own include files: tab_do4u.asp, tab_develop.asp, etc. The header and footer areas of the page are created by header.asp and footer.asp respectively. In the image below, all these areas are highlighted in red.

The folder structure of the site is shown below.

The only file that is at the root of the site is index.asp.

The css folder contains several master stylesheets which control the global styles and compensate for browser idiosyncrasies. These files are off-limits to changes by the content editors. This is because it is very easy to break the tabs or column width relationships in one browser or another without realizing it.

However the editors are free to make additions as needed to a globally included "user-styles.css" stylesheet, also in the css folder, or may add their own styles or stylesheet links to the content pages on a per-section or per-page basis.

The downloads folder contains all the downloadable pdfs and word documents available to site visitors.

Images and media folders
Images used in the global look and feel of the site are stored in the images folder, and again, are off-limits to content editors. All media required by the content are stored in the media folder.

The includes folder contains the source files for the navbar, header, and tabs. The content editors are allowed to edit and add tab files as needed. The tab files are very simple, styled lists. A typical tab file is shown here:

<tr>
<td colspan="2"><h2>What can MLearning do <span class="emphasis">for you?</span></h2></td></tr>
<tr>
<td id="secondaryTabs" class="tabBar" nowrap="nowrap" style="width:100%">
<ul>
<li id="tb_do4u00" class="tb_up"><a href="./?param=do4u00">Home</a></li> 
<li id="tb_do4u01" class="tb_up"><a href="./?param=do4u01">Our Services</a></li>
<li id="tb_do4u02" class="tb_up"><a href="./?param=do4u02">Mission</a></li>
<li id="tb_do4u04" class="tb_up"><a href="./?param=do4u04">Success Stories</a></li>
<li id="tb_do4u05" class="tb_up" style=" "><a href="./?param=do4u05">Continued Quality<br />Improvement</a></li>
</ul> 
</td> 
<td>&nbsp;</td>
</tr>

The js folder contains scripts needed for the framework of the site, but also some that will just come in handy for the content editors. Standard ActiveX scripts are included in the js folder so flash and other types of media can be readily added. There are also a variety of scripts useful for toggling properties on and off, and assigning functions to mouse events.


function hasClassName(el, name) {

  var i, list;

  // Return true if the given element currently has the given class

  // name.

  list = el.className.split(" ");

  for (i = 0; i < list.length; i++)

    if (list[i] == name)

      return true;

  return false;

}

function removeClassName(el, name) {

  var i, curList, newList;

  if (el.className == null)

    return;

  // Remove the given class name from the element's className property.

  newList = new Array();

 // document.write(el.id+' '+el.className+'
');

  curList = el.className.split(" ");

  for (i = 0; i < curList.length; i++)

    if (curList[i] != name)

      newList.push(curList[i]);

  el.className = newList.join(" ");

}



function getElementsByClass(node,searchClass,tag) {

var classElements = new Array();

var els = node.getElementsByTagName(tag); // use "*" for all elements

var elsLen = els.length;

var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

for (i = 0, j = 0; i < elsLen; i++) {

if ( pattern.test(els[i].className) ) {

classElements[j] = els[i];

j++;

}

}

return classElements;

}



function makeActive(selectedItem){ 

       var div = getElementsByClass(document, 'menu', '*');

        for(var i=0; i
		  //document.write('afterRemove '+div[i].id+' '+div[i].className+'
');

		 } //take "active off all other elements

        document.getElementById(selectedItem).className += '_act'; //make this one active

		//alert(selectedItem+' '+ document.getElementById(selectedItem).className);

       }

 

function iOut(itemID){	

	document.getElementById(itemID).className.replace('_up','_ovr');

}

function iOvr(itemID){

	 document.getElementById(itemID).className.replace('_ovr','_up');

}

 

 // This code can be reused as long as the following notice is maintained

// Copyright 1999 InsideDHTML.com, LLC

// For more information, see www.siteexperts.com

function doOver() {

  // Destination is the window - update status

  if (this.dest==window) {

    window.status = this.overValue

    return true

  }

  // Destination is the input element - update value

  else if ((this.dest.type!=null) && ((this.dest.type=="text") 

    || (this.dest.type=="textarea")))

    this.dest.value = this.overValue

  // Destination is an image - update src

  else if (this.dest.src!=null) 

    this.dest.src = this.overValue

  return true

}

function doOut() {

  // Destination is the window, clear status

  if (this.dest==window)

    window.status=""

  // Destination is the input element, set default value

  else if (this.dest.type!=null)

    this.dest.value=this.dest.defaultValue

  // Destination is an image, reset original image

  else if (this.dest.src)

    this.dest.src = this.dest.osrc

}

function OverEffect(src,dest,overValue) {

  // Assign onmouseover handler

  src.onmouseover = doOver

  // Assign onmouseout handler

  src.onmouseout = doOut

  // Store the destination element on the src

  src.dest = dest

  // Store the overValue on the src

  src.overValue= overValue

  // If an image, start downloading

  if (dest.src!=null) {

    dest.osrc = dest.src

    var i = new Image()

    i.src = src.overValue

  }

}

function InitOverEffect(src,dest,overValue) {

  // Setup over effect

  OverEffect(src,dest,overValue)

  // Make sure first rollover is applied

  return src.onmouseover()

}

function doLoad() {

//Can also setup from script

//OverEffect(document.links[0],window,"Hello World")

}

The pages folder contains all the content pages. Source code for a typical content page is shown below:

 <html><title>MLearning Home</title>
  <script>document.title='MLearning Home';</script>
  <style type="text/css">
  <!--
  .style6 {font-size: 10px}
  .style2 {color: #000000}
  #contentContainerTable {padding-right: 8px;}
  -->
  </style>
  <body>

 <table  id="contentContainerTable" border="0" cellpadding="0" cellspacing="0">
  <!--#include virtual="/home/includes/tab_do4u.asp" -->
  <tr id="bodyTR">
  <td valign="top" id="bodyTD" style="background-color:#F7F3EC;padding:0px;"><img src="media/home/banner.jpg" alt="MLearning" width="552" height="163"><br>
  <table border="0" cellpadding="8" cellspacing="0" bgcolor="#D2E3F2">
  <tr>
  <td colspan="4" valign="top">&nbsp;</td>
  </tr>
  <tr>
  <td width="10%" valign="top"><a href="http://mlearning.med.umich.edu/home/?param=mandatories04"><img src="media/home/noticed.jpg" alt="Have you noticed?" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">Have you noticed?</span><br>
  </strong>You can now complete your mandatories in fewer steps. <a href="http://mlearning.med.umich.edu/home/?param=mandatories04" class="style6">Learn more  &gt;</a></td>
  <td width="10%" valign="top"><a href="http://mlearning.med.umich.edu/home/?param=develop03"><img src="media/home/alp.jpg" alt="10 learning principles" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">Course Developers</span><br>
  </strong>Here are 10 learning principles for getting it right. <a href="http://mlearning.med.umich.edu/home/?param=develop03" class="style6">Start here &gt;</a></td>
  </tr>
  <tr>
  <td width="10%" valign="top"><a href="http://mlearning.med.umich.edu/home/?param=roles01"><img src="media/home/roles.jpg" alt="How roles are defined" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">How roles are defined</span><br>
  </strong>Your role determines what you can do in MLearning. <a href="http://mlearning.med.umich.edu/home/?param=roles01"><span class="style6">Learn more &gt;</span></a></td>
  <td width="10%" valign="top"><a href="http://mlearning.med.umich.edu/home/?param=do4u04"><img src="media/home/swipe.jpg" alt="Swipe your way to a faster Blitz" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">Swipe your way to a faster Blitz</span><br>
  </strong>A better way to track and record attendance at your events. <a href="http://mlearning.med.umich.edu/home/?param=do4u04#story3" class="style6">Learn more &gt;</a></td>
  </tr>
  <tr>
  <td width="10%" valign="top"><a href="//mlearning.med.umich.edu/home/?param=develop01"><img src="media/home/ingredients.jpg" alt="A recipe for success" width="90" height="66" border="0"></a></td>
  <td width="40%" valign="top"><strong><span class="style2">A recipe for success</span><br>
  </strong>What are the 12 required ingredients for developing a course in MLearning? <a href="http://mlearning.med.umich.edu/home/?param=develop01" class="style6">Start here &gt;</a></td>
  </tr>
  <tr>
  <td colspan="4" valign="top">&nbsp;</td>
  </tr>
  </table>
  <br></td>
  </tr>
  </table>
  
  <script>
  makeActive('mnu_do4u');
  makeActive('tb_do4u00');
  </script>

  </body>

  </html>

Searching the content
The site is inaccessible to all other search engines, so it must be searched by a local instance of Microsoft Indexing server. We've set up the results page so that although the index server is actually indexing "includes" pages, when the user clicks on a result, they see the complete page with all headers, footers, and navigation, not just the "naked" include. For more on how to set up this kind of search engine, see this article on implementing search using Microsoft Indexing Server

The search functions are based on a script written by C. Maunder, found on the site http:codeproject.com. The search functionality has been added to the header file, shown below:

<% 'option explicit 
' Search scripts
  ' Written by C Maunder (cmaunder@mail.com)
  ' www.codeproject.com
  %>
  <%
  '/////////////////////////////////////////////////////////////////////////////////
  '// Initialisation
' Declare variables.
'Response.Write Request.ServerVariables("PATH_TRANSLATED")
dim target, firstRow, rowCount
' Get the request parameters.
  target	 = Request("target")	' The search request
  firstRow = Request("fr")		' First row of results to display
  rowCount = Request("rc")		' Record Count - number of rows to show
  
  ' Set default values if none found
  if firstRow = "" or not IsNumeric(firstRow) Then 
  firstRow = 1
  else
  firstRow = CInt(firstRow)
  End If
  if rowCount = "" or not IsNumeric(rowCount) Then 
  rowCount = 30
  else
  rowCount = CInt(rowCount)
  End If
Dim ScriptName, ServerName
  ScriptName = Request.ServerVariables("SCRIPT_NAME")
  ServerName = Request.ServerVariables("SERVER_NAME")
' Construct base URL for navigation buttons
  dim URL
  URL = ScriptName & "?target=" & Server.URLEncode(target)
  URL = URL & "&rc=" & Server.URLEncode(rowCount)
'/////////////////////////////////////////////////////////////////////////////////
  '// The search form
%>

<!--header starts here-->
    
  <div id="hdrUtilityLinks">
  <a href="./?param=do4u00" id="Home" >Home</a> | <a href="http://mlearning.med.umich.edu">MLearning Login</a> | <a href="index.asp?param=contact01" id="contactLnk" >Contact Us</a>
  </div><div id="header">
  
  <div id="hdrLftCorner" onclick="javascript:document.location='./?param=do4u00'">&nbsp;</div> 
  <div id="hdrMiddle"></div>
  <div id="hdrMiddleCorner">&nbsp;</div>
  <div id="hdrRt">
  <!--search form starts here-->
  <form name="searchForm" method="get" id="searchForm" action="./" >
  <table border="0" id="searchTbl">
  <tr><td>
  <div id="searchText"><label for="txt">Search</label></div><input type="hidden" name="param" value="search" /></td>
  <td valign="middle">
  <input type="text" name="target" size="8" maxlength="100" value="<%=target%>" id="txt" onclick="this.focus();" onmouseover="this.focus();" onmousedown="this.focus();"style="margin-top:0px;cursor:text;"/ ></td>
  <td><input name="Submit" type="image" value="Go" src="images/searchGo_btn.jpg" alt="Go" /> 
  </td></tr></table></form>
  </div>
  <div id="hdrRtEdge"></div>
  </div>
  <!--header ends here-->
<!--primary tabs start here-->
  <div id="primaryTabs" class="tabBar">
  <div id="leftColTop">
  <!--<a href="./?param=login01" onmouseover="document.getElementById('loginBtn').src='images/header/headerLoginBtn_over.jpg'" onmouseout="document.getElementById('loginBtn').src='images/menu/up/headerLoginBtn_up.jpg'">-->
  <img src="images/spacer.gif" width="173" height="15" border="0" name="spacer" id="spaceHolder"/>
  <!-- </a>-->
  </div>
  <!--<ul>
  <li id="tb_do4u" class="tb_up"><a href="./?param=do4u01" >What can we do <b>for you?</b></a></li>
  <li id="tb_eduplan" class="tb_up"><a href="./?param=eduplan01">What is an educational plan?</a></li>
  <li id="tb_success" class="tb_up"><a href="./?param=do4u04">Success Stories</a></li>
  </ul>-->
  </div>
  <!--primary tabs end here-->
  <div id="announcements">&nbsp;</div>

Source for the remaining files footer.asp

  <!--footer starts here--> 
  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="footer">
  <tr>
  <td id="ftrLftCorner"></td>
  <td id="ftrMiddle"></td>
  <td id="ftrRtCorner"></td>
  </tr>

navbar.asp

<div id="navBar">
<div class="section">
<div class="mnu_top_up" id="mn_topsect" style="border-bottom:none;padding-bottom:1px;"> </div>
<div class="mnu_mid_up" id="mnu_log" style="border-top:none;padding-top:0px;"><a href="http://mlearning.med.umich.edu">Login LMS</a></div>
<div class="mnu_bot_up"  onmouseover="iOvr('mnu_do4u')" onmouseout="iOut('mnu_do4u')" id="mnu_do4u"><a href="./?param=do4u00" id="mnu_do4u_a">Home</a></div>
</div>

<div class="section">

<div class="mnu_top_up" id="mnu_instruction">INSTRUCTIONS FOR</div>

<div class="mnu_mid_up"  onmouseover="iOvr('mnu_cdv')" onmouseout="iOut('mnu_cdv')" id="mnu_cdv"><a href="./?param=cdv01" id="mnu_cdv_a">Course Developers</a></div>

<div class="mnu_mid_up"  onmouseover="iOvr('mnu_fac')" onmouseout="iOut('mnu_fac')" id="mnu_fac"><a href="./?param=facilitator01" id="mnu_fac_a">Facilitators</a></div>

<div class="mnu_mid_up"  onmouseover="iOvr('mnu_mgr')" onmouseout="iOut('mnu_mgr')" id="mnu_mgr"><a href="./?param=mgr01" id="mmnu_mgr_a">Managers</a></div>

<div class="mnu_bot_up"  onmouseover="iOvr('mnu_ins')" onmouseout="iOut('mnu_ins')" id="mnu_ins"><a href="./?param=instructor01" id="mnu_ins_a">Instructors</a></div>

</div>

<div class="section">

<div class="mnu_top_up" id="mnu_helpctr">FORMS</div>

<div class="mnu_bot_up" onmouseover="iOvr('mnu_frm')" onmouseout="iOut('mnu_frm')" id="mnu_frm"><a href="./?param=forms01" id="mnu_dev_a">Add/edit instructor-led courses</a></div>

</div>

<div class="section">

<div class="mnu_top_up" id="mnu_helpctr">HELP CENTER</div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_faq')" onmouseout="iOut('mnu_faq')" id="mnu_faq"><a href="./?param=faq01" id="mnu_faq_a">Frequently asked questions</a></div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_man')" onmouseout="iOut('mnu_man')" id="mnu_man"><a href="./?param=mandatories04" id="mnu_man_a">How to complete mandatories</a></div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_dev')" onmouseout="iOut('mnu_dev')" id="mnu_dev"><a href="./?param=develop00" id="mnu_dev_a">How to develop a course</a></div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_prs')" onmouseout="iOut('mnu_prs')" id="mnu_prs"><a href="./?param=pi01" id="mnu_prs_a">How to edit personal information&nbsp;</a></div>

<div class="mnu_bot_up" onmouseover="iOvr('mnu_rle')" onmouseout="iOut('mnu_rle')" id="mnu_rle"><a href="./?param=roles01" id="mnu_rle_a">How MLearning defines roles</a></div>

<!--    <div class="mnu_bot_up" onmouseover="iOvr('mnu_mor')" onmouseout="iOut('mnu_mor')" id="mnu_mor"><a href="./?param=more01" id="mnu_mor_a">Additional resources</a></div>-->

</div>

<div class="section">

<div class="mnu_top_up" id="mnu_training">TRAINING &amp; IN-SERVICES</div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_trn')" onmouseout="iOut('mnu_trn')" id="mnu_trn"><a href="./?param=trainCal01" id="mnu_trn_a">Calendar</a></div>

<div class="mnu_bot_up"  onmouseover="iOvr('mnu_req')" onmouseout="iOut('mnu_req')" id="mnu_req"><a href="./?param=reqTr01" id="mnu_req_a">Request training</a></div>

</div>

<!-- edit -->

<div class="section"> 

<div class="mnu_top_up" id="mnu_resources">ADDITIONAL RESOURCES</div>

<div class="mnu_mid_up" onmouseover="iOvr('mnu_prt')" onmouseout="iOut('mnu_prt')" id="mnu_prt"><a href="./?param=more01" id="mnu_prt_a">Printable Instructions</a></div>

<div class="mnu_mid_up"  onmouseover="iOvr('mnu_pap')" onmouseout="iOut('mnu_pap')" id="mnu_pap"><a href="./?param=more02" id="mnu_pap_a">Policies and Procedures</a></div>

<!-- comment out below line to remove list of mandatories. then change above line mnu_mid_up to mnu_bot_up -->

<div class="mnu_bot_up"  onmouseover="iOvr('mnu_mdl')" onmouseout="iOut('mnu_mdl')" id="mnu_mdl"><a href="./?param=mandatoriesList" id="mnu_mdl_a">List of Mandatories</a></div>

</div>

<!-- end -->



<div id="contactInfo">

<a href="index.asp?param=contact01" style="font-weight:bold;">CONTACT US / FEEDBACK</a>

<p>

</p>

</div>

</div><!--end navBar-->

portal.css, the master styles for the entire site



/* CSS Document */

/*this is to keep page from shifting to left on load in safari and firefox*/

html { min-height: 100%; margin-bottom: 1px; }

html { overflow: -moz-scrollbars-vertical !important; }

body {

	background-color: #5081B4;

	background:url(../images/bg_tile.jpg);

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	position:relative;

	height:100%;    

}

#outerContainer {

	position:relative;

	display:block;

	width:750px;

	background:#FFFFFF;

	margin:0px auto 0px auto;

	height:100%;

}

#header, #tabs {

	display:block;

	width:750px;

	height:70px;

	position:relative;

	z-index:1;

}

 

h1{}

h2{font:normal 24px Myriad Pro, Tahoma, Verdana, Trebuchet, Arial, Helvetica, sans-serif;

color:#4E67AC;

letter-spacing:-.03em;}

h2 .emphasis{

color:#329F95;

font-weight:900;}

h3{font:bold 13px Arial, Helvetica, sans-serif;

color:#4E67AC;

margin-top:12px;

}

.pageTitle{font:bold 13px Arial, Helvetica, sans-serif;

color:#666;

margin-top:30px;

margin-bottom: -10px;

}

#requestTitle{font:bold 13px Arial, Helvetica, sans-serif;

color:#666;

margin-top:30px;

}

a, a:link, a:visited {text-decoration:underline;color:#0000F0;}

a:hover{color:#33CCFF;}

/**********************header area*********************/

/*top of page links: Contact Us, etc.*/

#hdrUtilityLinks{

width:50%;

height:20px;

position:absolute;

left:200px;

top:10px;

z-index:5;/*safari needs this or the links hide despite the pos. absolute*/

margin:12px 6px 12px 6px;

} 

#hdrUtilityLinks a,#hdrUtilityLinks a:link, #searchText{

text-decoration:none;

color:#0C3168;

font:bold 11px Trebuchet, Arial, Helvetica, sans-serif;

}

#hdrUtilityLinks a:hover { color:#669966; }

#searchText{  }

#hdrLftCorner, #hdrMiddle,#hdrMiddleCorner, #hdrRt, #hdrRtEdge{

	float:left;

	height:70px;

	display:block;	

    overflow:hidden;

}

#hdrLftCorner{

    background:url(../images/header/headerLCorner.jpg) top left no-repeat;

    width:170px;

	cursor:pointer;}

#hdrMiddle{

	background:#000;

	width:344px;

	background:url(../images/header/headerWhitePatch.jpg) right repeat-x;}

#hdrMiddleCorner{

	background:#000;

	width:82px;

	background:url(../images/header/headerContactLink.jpg) right bottom no-repeat;}

#hdrRt{

	background:url(../images/LtBlueBGtile.jpg) repeat;

	width:141px;

	overflow:visible;

	 position:relative;

		 }

		 #searchTbl{ position:absolute;

		 left:0px;

		 top:20px;}

#hdrRt input#txt {margin-top:12px;}

#hdrRtEdge{

 

   background: url(../images/header/hdrRtCorner.jpg);

   width:13px;}

   

   input#searchBtn {

   border:1px solid black;

   background:#0066FF;

   color:#FFF;

   font:11px Arial, Helvetica, sans-serif;

   }

/**********************end header area*********************/

/**********************footer area*********************/

#footer{ }

#ftrLftCol {height:16px;background:url(../images/LtBlueBGtile.jpg) repeat; text-align:left; }

/*#ftrMiddle{  }*/

#ftrRtCorner{ width:11px;height:16px;background:url(../images/corners/corner_blueBotRt.jpg) no-repeat right; }

/**********************end header area*********************/

/***********************menu******************************/

.section {/*defines one menu section like "TRAINING", "EVENTS", etc.*/

  display:block;

  width:169px;

  margin-top:0px;

  overflow:hidden;

}

 

.mnu_mid_up, .mnu_mid_ovr, .mnu_mid_up_act, .mnu_top_up, .mnu_bot_up, .mnu_bot_up_act, .mnu_bot_ovr   {

	display:block;

	border-bottom:1px solid #9fc0dd;

	width:156px; 

	padding:0px 6px 0px 6px;

	  padding:3px 0px 6px 6px; 

	}

	

#navBar div a, #navBar div a:visited  {

display:block;

width:156px; 

	font: 11px normal Tahoma, Arial, Helvetica, sans-serif;

	text-decoration:none;	

	color:#094279;

}



/*---middle items---*/

.mnu_mid_up {

  background: url(../images/menu/up/menuSectionBG.jpg) repeat-y;

  padding:3px 0px 6px 6px;

 }

.mnu_mid_ovr{

  background:none;

 }

 .mnu_mid_up_act { 

 background-image:url(../images/menu/active/menuSectionBG.jpg);

 width:169px;

 } 

/*---top Items----*/

.mnu_top_up { /*top items aren't clickable*/

 background: url(../images/menu/up/menuSectionTop.jpg) top no-repeat;

 font:bold  12px Tahoma, Arial, Helvetica, sans-serif;

 color:#000000;

 padding:6px 0px 6px 6px;

 }

 

/*---bottom Items----*/

.mnu_bot_up {

 background: url(../images/menu/up/menuSectionBtm.jpg) bottom no-repeat;

 border-bottom:none;

 padding:3px 0px 6px 6px; 

   }

.mnu_bot_ovr { background:blue;  }

.mnu_bot_up_act  {

  background: url(../images/menu/active/menuSectionBtm.jpg) bottom no-repeat;

   width:169px; }  

.mnu_bot_ovr{ background: url(../images/menu/over/menuSectionBtm.jpg) bottom no-repeat; }



#contactInfo { 

font: 11px normal Tahoma, Arial, Helvetica, sans-serif;

color:#094279;

padding:6px;

  }

/***********************end menu******************************/

 

 #announcements {

	 height:42px;

	 width:100%;

	 display:none;

	 background:url(../images/announce/message.jpg) top no-repeat;

	 position:relative;

 }

 

 

/*************main content layout table*************/

#layoutTable {position:absolute;

/*top:99px;*/

top:80px;

left:0px;

background-color:#FFF; }

	 

/*********main layout table: left column and left menuBar************/

#leftCol{

font: 11px normal Tahoma, Arial, Helvetica, sans-serif;

	 width:169px;	  

	 background:#cce1f3 url(../images/LtBlueBGtile.jpg) repeat; 

	 text-align:left;

	 padding:6px 0px 6px 5px;

	 overflow:hidden;

	 }

 

 td#midCol {/*big white area in middle*/

 width:564px;

 padding:12px 0px 12px 12px;

 position:relative;

 /*this is the tiny corner image at top left of white content area*/

 background: url(../images/topLftCrnr.jpg) top left no-repeat;

 }

  td#midCol.active{

 /*this is the tiny corner image at top left of white content area*/

 background: url(../images/tabs/blue/active/topLftCrnr.jpg) top left no-repeat;

 }

 

 /**************content table on all content pages************/

 

 #contentContainerTable {	 

	 font:normal 12px Verdana, Arial, Helvetica, sans-serif;

	 color:#666;

	 position:relative;

	 width:540px; 

}  

#contentTR{}

td.contentLftCol{

 

 padding:6px; 

background:#E0D6BB url(../images/beige_BG_tile.jpg) repeat;}

td.contentRtCol{

width:169px;

padding:6px;

background:#FFF;

}

/**********************end main content layout table*********************/



/****************TABS - general definition for all tabs*******/

 .tabBar {

	background:#cce1f3 url(../images/LtBlueBGtile.jpg) repeat; 

	position:relative;

	/*display:block;*/ /*removed to fix Safari 3 issue*/

	height:10px;

	padding-top:0px;

}

.tabBar #leftColTop, .tabBar li, .tabBar li a {

float:left;

display:block;

height:10px;

} 

 

.tabBar #leftColTop{  

	width:174px;

	background:url(../images/LtBlueBGtile.jpg) repeat;

	}

	

.tabBar #leftColTop img{margin-top:2px;} 	

.tabBar ul {

margin:0px;

padding:0px;

list-style:none;

}

.tabBar li {

   padding:0px 0px 6px 7px;

   margin-right:3px;/*this provides separation between tabs*/

   height:23px; 

   

  }

  

.tabBar li a, .tabBar li a:visited, .tabBar li a:link  { 

    font: normal 11px Verdana, "Arial Narrow", Arial, Helvetica, sans-serif; 

    text-decoration:none;

	padding:6px 15px 9px 9px;

	width:auto;

	height:22px; 

	   line-height:90%;

	   

	  }

	

.tabBar li.tb_up { /*this holds the left side background of each tab*/

   background:url(../images/tabs/blue/up/tab_lftSide.jpg) left 1px no-repeat ;  

    }

	

.tabBar li.tb_up a, .tabBar li .tb_up a { /*this holds the text of the tab and the right side background*/

	color:#FFF;

	background:url(../images/tabs/blue/up/tab_rtSide.jpg) right 1px  no-repeat;		

}

.tabBar li.tb_up a:hover { text-decoration:underline; }

.tabBar li.tb_up_act, .tabBar li .tb_up_act{

  text-decoration:none;

  background: url(../images/tabs/blue/active/tab_lftSide.jpg) left 1px no-repeat ;}

  

.tabBar li.tb_up_act a, .tabBar li .tb_up_act a:link {

  background:url(../images/tabs/blue/active/tab_rtSide.jpg) right 1px no-repeat; 

  color:#003366;

  }



td.tabBar#secondaryTabs{ /*this is the tab bar that contains secondary tabs*/

background:#FFF;  

 padding-left:0px;

 width:390px;

 text-align:left;

 height:27px;

 

}

 

#secondaryTabs.tabBar li.tb_up { /*tan secondary tabs*/

  background: url('../images/tabs/tan/up/tab_lftSide.jpg') left 2px no-repeat ;

 height:23px;

 

}

 

#secondaryTabs.tabBar li.tb_up a, #secondaryTabs.tabBar li .tb_up a:link {

   background: url('../images/tabs/tan/up/tab_rtSide.jpg') right 2px no-repeat ;

   color:#3366CC;

 padding:6px 12px 12px 6px;

    font-size:10px;

	

 

     }

#secondaryTabs.tabBar li.tb_up_act, #secondaryTabs.tabBar li .tb_up_act{

 background: url('../images/tabs/tan/active/tab_lftSide.jpg') left 2px no-repeat;

 

 }

#secondaryTabs.tabBar li.tb_up_act a, #secondaryTabs.tabBar li .tb_up_act a:link{

 background: url('../images/tabs/tan/active/tab_rtSide.jpg') right 2px no-repeat ;

/* padding-top:6px;*/

 padding:6px 12px 12px 6px;

  font-size:10px;

}

/**************end tabs styles**************/



/****************************Login Form in center column**************************/



/*.loginFormText { } */

form { margin:0px;}



/***********************************************************************/

.clear {clear:both;height:0px;width:0px;}

/********for training schedule**************/

.noClasses {

color:#CC0000;

font-weight:bold;

}

.scheduleTbl{ line-height:100%;border-right:1px solid #CCC;border-bottom:1px solid #CCC;

font-size:9px;width:100%;background-color:#FFF;}

.hdTR{background:#CCC;

text-transform:uppercase;}

#submitbtn {background: #ccc0a6; background:url('../images/submitbtn.gif'); border: none; width: 136px;}

#resetbtn {background: #ccc0a6; background:url('../images/resetbtn.gif'); border: none; width: 75px;}

 

/*******/

h4 {font:bold 12px Arial, Helvetica, sans-serif;

color:#003366;

margin-top:12px;

display:inline;}

.inlineH {display:inline;

margin-top:12px;}

Print.css, used to print the content on the
page without navigation or header



/* Print CSS Document */

body, table, tr, td {

	font: 12pt georgia,serif;

}

body, table, tr, td, h1, h2, h3, h4{

	background-color: #fff;

	color: #000;    

}

#outerContainer {width:auto;}

#leftCol, #hdrUtilityLinks, #header, #footer{

    display:none;

}

#hdrUtilityLinks {position:relative;display:none;}

td.contentLftCol, #contentContainerTable, #bodyTR td {width:100%;}

td.contentRtCol, .tabBar, #leftColTop, #primaryTabs { display:none;}

h2 {font: 24pt georgia,serif;}

h2 .emphasis{color:#000;}

h3 {font: 13pt georgia,serif;}

portalIE6.css



#outerContainer{ background:none;} 

#header{background-color:#FFF;}

 /**********************header area*********************/

/*top of page links: Contact Us, etc.*/

#hdrUtilityLinks{

display:block;

width:500px;

height:20px;

position:absolute;

left:300px;

z-index:5;/*safari needs this or the links hide despite the pos. absolute*/

margin:12px 6px 12px 6px;

} 

/****************TABS - general definition for all tabs*******/

/*IE6 has diff. box model, thus height doesn't take into account padding 

 .tabBar {height:23px;}

  .tabBar #leftColTop img{

  margin-top:3px;

  margin-bottom:-10px; had to add for IE6: this image appears to be pushing down the content table

  } */

 .tabBar li.tb_up { /*this holds the left side background of each tab*/

   background: url(../images/tabs/blue/up/tab_lftSide.jpg) no-repeat left 2px;  

   padding:1px 0px 0px 7px;

   margin-right:3px;/*this provides separation between tabs*/

    }

.tabBar li.tb_up a { /*this holds the text of the tab and the right side background*/

	padding:7px 15px 0px 9px;

} 

td.tabBar#secondaryTabs{ /*this is the tab bar that contains secondary tabs*/  

 padding-left:0px;

 width:420px;

 text-align:left;

 width:100%; /*ellen is testing this for preventing float drop in IE6*/

}

 

#secondaryTabs.tabBar li.tb_up { /*tan secondary tabs*/

  background: url('../images/tabs/tan/up/tab_lftSide.jpg') left 2px no-repeat ;

   padding:0px 0px 0px 7px;

 }

 

#secondaryTabs.tabBar li.tb_up a, #secondaryTabs.tabBar li .tb_up a:link {

   background: url('../images/tabs/tan/up/tab_rtSide.jpg') right 2px no-repeat ;

   color:#3366CC;

   padding:6px 15px 0px 9px;

     }

#secondaryTabs.tabBar li.tb_up_act, #secondaryTabs.tabBar li .tb_up_act{

 background:url('../images/tabs/tan/active/tab_lftSide.jpg') left 2px no-repeat;

 padding:0px 0px 0px 9px;

 }

#secondaryTabs.tabBar li.tb_up_act a, #secondaryTabs.tabBar li .tb_up_act a:link{

 background: url('../images/tabs/tan/active/tab_rtSide.jpg') right 2px no-repeat ;

 padding:6px 15px 0px 9px;

 margin-right:0px;

}



/**************end tabs styles**************/



/**************menu styles**************/

   .menuItem .up {

  background: url(../images/menu/up/menuSectionBG.jpg) repeat-y;

 padding:3px 0px 6px 6px;

 }

  .menu.over.menuItem{

  background:url(../images/menu/up/menuSectionBG.jpg) repeat-y;

 }

  .menu.up.menuItem.active { 

 background-image:url(../images/menu/active/menuSectionBG.jpg);

 width:169px;

 }

portalIE.css

#outerContainer{
	padding:0px;
	text-align:left;
}
#layoutTable{	 
	width:540px;
	margin-left:0px;
	padding:0px;
	 }
	 
#midCol{padding-right:0px;}	
#contentContainerTable{ 
	width:564px;
	 margin-right:0px;
	 }
/*td.contentLftCol{width:408px;padding:6px;}
td.contentRtCol{
width:157px;padding:6px 12px 6px 6px;}
 */

Posted by ellen at 11:28 AM

March 19, 2008

International calling: the big weak spot in iPhone service

In planning for a trip to Europe a few months ago, I found that one of the biggest weak points in the iPhone package is the cost of international calling and data services on the AT&T network partners.

If you don't do a little pre-trip planning, as soon as you get off the plane in another country and start using the phone, you will start ringing up enormous charges.

Voice: At the moment, there is no way to get really good per-minute rates for calling with an iPhone, until someone comes up with an iPhone application that really does SKYPE well. Even with AT&T's "World Traveler" package (not to be confused with "World Connect"), you only save 20-30 cents/minute, and the per minute charge can remain quite high - often a dollar or more per minute. Still, it is worth the $5.99/month.

Be sure to wade through AT&T's rate chart to find your destination's international roaming rate: Click here to view

Data: Ever since the first iPhone users were shocked by data roaming charges in the thousands, Apple has shipped the iPhone with data roaming OFF. Don't turn it on! The data roaming charges for internet use abroad are prohibitive. You can sign up for various sized discount data packages, but figure out realistically how much you are likely to use before purchasing one.

Opening an email with a 5 megapixel picture in it, or downloading a 3 minute video on YouTube, each takes about 2MB of data, which would cost about $40.00 at normal data-roaming rates, according to Apple.
This puts AT&T's data plans into perspective - normal use could still bankrupt you with overage charges:

$24.99/month: 20MB Data Global Add-On gives you 20MB of usage within over 65 countries

$59.99/month: 50MB Data Global Add-On gives you 50MB of usage within over 65 countries

$119.99/month: 100 MB Data Global Add-On1 gives you 100MB of usage within over 65 countries

$199.99/month: 200 MB Data Global Add-On1 gives you 200MB of usage within over 65 countries

Apple suggests turning off automatic email checking and checking it manually as an additional savings - and you may not want to check whichever accounts get the most junk mail.

So, if you want to use the internet features of the iPhone, (which, let's face it, are most of the fun) it's best to stick to wifi hotspots while overseas. However don't assume wifi will be working well in the hotels, so have a backup. Sometimes the wifi signal can be poor or nonexistent, so you may need to fall back on a laptop with ethernet cable.

More information:

ATT's iPhone Travel Tips

iPhone: Calling to and from other countries

Posted by ellen at 11:07 PM

March 17, 2008

Internet Explorer 7 blocks cross-domain iframe to parent communication

A new security setting in Microsoft Internet Explorer 7 has been causing problems with requests between iframe and parent. There is a security setting in the Internet options called "Navigate sub-frames across different domains", which in IE6 was set to "Enabled" under Medium security, but is set to "Disabled" in IE7 by default.

An example of the type of communication that is blocked is shown here:

The container page sends a message to Page 1, in Domain A: "Change your location to Page 2". In IE6, this is not a problem. But in IE 7, it is allowed.

According to Microsoft:

This option controls whether readers of a Web page can navigate the sub-frame of a window with a top-level document that resides in a different domain. This option has the following settings:
Disable, which allows users to navigate only between Web page sub-frames that reside in the same domain.
Enable, which allows users to navigate between all Web page sub-frames, regardless of the domain, without being prompted.
Prompt, which prompts users to choose whether to navigate between Web page sub-frames that reside in different domains.

This new setting causes problems for a lot of sites that use communication across domains.

Sites that use a page in one domain to display the data, where the authentication is handled by a site in a different domain, displayed in an iframe would be affected. Many ajax sites use "fragment identifiers" for communication across domains.

According to the Tagneto blog:

A page is served from a different domain than the URL for an iframe in that page. Normally cross domain, cross frame communication is prohibited for security reasons. However, the two frames can communicate with each other by using fragment identifiers (the hash part of an URL, like http://some.domain.com/path/to/page.html#fragmentIdentifier)."

A site that I run uses cross iframe/cross-domain communication to launch and track a quizzing application which runs on one server from within an elearning application in another domain. I may have a partial solution to this issue.

My site is located in Domain "A". Several pages within the site contain quizzes embedded in iframes. the quizzing application is located in Domain B.

The final page of each quiz transmits the user's score back to the main site by communicating up the frame tree to the parent page of the iframe, and across domains.

Normally, clicking the final "Transmit Score" link at the end of the quiz sends a URL like this:

http://www.domainA.com?score=50&max=100

to the parent page of the iframe. The parent page receives the score and max score at the end and processes that information as required. What happens in IE7, though, is that the browser ignores the targeting to the parent page and opens the requested URL in a new window. This breaks communication because the new window is not in the correct spot in the frame tree.

My solution is, instead of communicating directly up to the parent page from Domain B, to instead redirect the Domain B page to a "redirector" page in Domain A. Then use THAT page to relay the data up the frame tree, to the parent page in Domain A. (Fortunately navigating between two pages in the same domain is still legal!)

All the redirector page contains is some javascript that parses the URL and sends it on up to the correct page:



<script>

 

//this provides a function to parse the query string for various parameters. 

    var qsParm = new Array();

    function qs(){

		var query = document.location.search.substring(1);

		var parms = query.split('&');

		for (var i=0; i<parms.length; i++) {

			 var pos = parms[i].indexOf('=');	 

		    if (pos > 0) {

				var key = parms[i].substring(0,pos);

				var val = parms[i].substring(pos+1);

				qsParm[key] = val;	 

					  }//end if

                        }//end for

             }//end function	

                        

             qsParm['home'] = null;

             qs();

      if (qsParm['home'] != null ){  parent.location.href=qsParm['home']+"&Max="+qsParm['Max'];    }

       else alert("some kind of warning goes here");

</script>

Working demo of 2 iframes communicating across domains is here: iframe test Download the files here: Download file

More Resources:

Posted by ellen at 6:53 PM

March 12, 2008

Getting the value of a variable on the opener page from a popup window

How do you use javascript to get the value of a variable on the opener page, from a popup window? Use "window.opener.variablename". This will work as long as the pages are in the same domain.

A working example can be seen here (click to view)

It consists of 2 pages. On the first page, a variable "timer" has been defined, and it automatically increments upward every 5 seconds. The current value is displayed in a div on the opener page.

Click the link that opens the popup page. Once opened, clicking a link on the popup page page starts up the function that repeatedly gets the current value of "timer" every 5 seconds. The values will be listed in a div on the popup page.

Download the files for both pages here (click to download)

Posted by ellen at 6:54 PM

March 11, 2008

Exporting high resolution Graphics from Microsoft Word 2003

In Word 2003, it is not immediately obvious how to export pictures that have been inserted into a Word document. Even if you select "File: Save As..." and select the format "Web Page" in the "Save As" dialog, the images that get saved along with the web page are usually low resolution.

The solution to this is a menu selection "Compress Pictures" which is hidden in the "Tools" menu in the "Save As" dialog.

The Compress Pictures dialog gives you options for adjusting the resolution of your exported images.

In Word 2003 for Macintosh, it's much easier to save images from a Word file. Simply right-click the image, and select Save As Picture.

Posted by ellen at 4:06 PM

March 6, 2008

Use ABCpdf to generate pdfs of multi-paged html documents

I maintain a library of learning modules which are constantly under development and revision. Our users often want PDFs to print out or view off-line, but we can't maintain up-to-date PDF's of each module manually. We needed a way to make on-demand PDFs of whatever the current state of the module is when the pdf is requested.

After looking at many pdf solutions I settled on "ABCpdf ASP 6.0" by WebSuperGoo.com.

ABCpdf has the advantages of fairly low cost (about $400.00 for one server, or FREE if you link back to them), a better HTML-rendering engine than most, and an easy to learn API, so you can write custom dynamic PDF applications.

To dynamically generate our frameset-based modules, I needed a way to send the current page-list to the ASP script that would do the interfacing with ABCpdf.

A typical module is shown below.

In the toolbar at the top of each module, there is a PDF button.

Picture%2017.jpg

Clicking the button submits a form with fields containing a list of all the pages in the module, and the path to the module. ABCpdf uses this information to generate an image for every page. It does a very good job of rendering the HTML, complete with all the styles.

The HTML for the form containing the PDF button is shown below. The form field containing the list of pages is populated by a javascript that runs when the page loads so that it always contains the most current list, since the list can change while the module is being read depending on user interactions.

<form id="pdfForm" action="http://myserver.com/abcpdf.asp" method="post" target="_blank" name="pdfForm">

<a id="headerPDF" title="Create a printable PDF of this entire module. (takes time, please wait)" onclick="document.pdfForm.submit();" href="#">

<img id="pdfBtn" width="46" height="44" border="0" onmouseover="MM_swapImage('pdfBtn','','images/header/over/pdf_btn.jpg',1)" onmouseout="MM_swapImgRestore()" name="pdfBtn" alt="Download a Printable PDF of this module" src="http://thedesignspace.net/master/template/images/header/up/pdf_btn.jpg"/>

</a>

<input type="hidden" value="http://myserver.com/learningmodule/page01.htm" name="uPath"/>

<input type="hidden" value="page01.htm;page02.htm;page03.htm;page04.htm;page05.htm;page06.htm;page07.htm;page08.htm;page09.htm;page10.htm;page11.htm;page12.htm;page13.htm;page14.htm;page15.htm;page16.htm;page17.htm;page18.htm;page19.htm;page20.htm;page21.htm;scorePage.htm;" name="uUrl"/>

</form>

The code for the receiving page "abcpdf.asp" is shown below.

<% @Language="VBScript" %>
  <% Option Explicit
  Server.ScriptTimeout =500
  %>
  <html>
  <body>
<%
  'function to randomize a number
  Function RandomNumber(intHighestNumber)
  Randomize
  RandomNumber = Int(Rnd * intHighestNumber) + 1
  End Function

Dim theDoc, i, theID, theData
  Dim theURLs() 
  Dim inti
  Dim x, w, h, l, b
  Dim strPath
  Dim strValue
  dim intFind
  dim id
  
  Set theDoc = Server.CreateObject("ABCpdf6.Doc")
  theDoc.HtmlOptions.BrowserWidth = 1300
  
  ' apply a rotation transform
  w = theDoc.MediaBox.Width
  h = theDoc.MediaBox.Height
  l = theDoc.MediaBox.Left
  b = theDoc.MediaBox.Bottom 
  theDoc.Transform.Rotate 90, l, b
  theDoc.Transform.Translate w, 0
' rotate our rectangle
  theDoc.Rect.Width = h
  theDoc.Rect.Height = w 
inti=0
  i=1
  'loop thru' the form elements and assign the url to the array elements and increment array each time
  for each x in request.form
  'look for the field with the url in it concatenated
  if left(x, 4) = "uUrl" then
  strValue=request.form(x)
  intfind = instr(strValue,";") 'each url is separated by a ; look for that
  while intfind>0 'parse each item in the url
  redim preserve theURLs(i+1)'save the array
  theURLs(i) = strPath & left(strValue,intfind-1) & "?lll=" & RandomNumber(10)
  strValue=right(strValue,len(strValue)-intfind) 'new string is old string cut off
  intfind = instr(strValue,";")
  i=i+1 'increment array index
  wend
  elseif x="uPath" then
  strPath=request.form(x)
  intFind = instrrev(strPath,"/") 'look backwords..from end of string
  strPath=left(strpath,intFind)
  end if
  next

 
For i = (LBound(theURLs)+1) To (UBound(theURLs)-1)
      theDoc.Page = theDoc.AddPage()
       id = theDoc.AddImageUrl(theURLs(i))
  Do While theDoc.Chainable(id)
       theDoc.Page = theDoc.AddPage()
  
       id = theDoc.AddImageToChain(id)

     Loop

  Next

  

      theID = theDoc.GetInfo(theDoc.Root, "Pages")

      theDoc.SetInfo theID, "/Rotate", "90"


For i = 1 To theDoc.PageCount

           theDoc.PageNumber = i

           theDoc.Flatten

      Next


theData = theDoc.GetData()

       Response.Clear

       Response.ContentType = "application/pdf"

       Response.AddHeader "content-length", UBound(theData) - LBound(theData) + 1

  Response.AddHeader "content-disposition", "attachment; filename=MLearning.PDF"

  Response.BinaryWrite theData

  theDoc.Clear

  %>


</body>

  </html>

The resulting PDF of the module looks like this.

We chose to have ABCpdf render the HTML pages into landscape orientation (11" wide), since webpages can be a little wider than 8-1/2 x 11, and we got better results from this size.

Posted by ellen at 10:19 PM