Implementing the 9.1 Web Page Release Changes

Print Friendly and PDF Follow

After the release of the 9.1 default web pages, several web page changes have been added to the default set of pages. To implement these changes, you can either:

  • Download the 9.1 web pages and replace your existing pages.
  • If you have customizations, find and replace the following code changes mentioned below. Any code highlighted in yellow/red needs to be removed and any code highlighted in blue needs to be added. 

09 April 2020 Web Page Changes

Input Tag for the Request Type

To use the new tag, please overwrite your default LendingGenericRequestArticle.html and EditLendingGenericRequestArticle.html files with the updated files or make the following changes:

LendingGenericRequestArticle.html

Add the line highlighted in blue (default lines 13-21):

<div id="content" class="container" role="heading" aria-label="Content">
<form action="ILLiadLending.dll" method="post" name="LendingGenericRequestArticle">
<input type="hidden" name="ILLiadForm" value="LendingGenericRequestArticle">
<input type="hidden" name="RequestType" value="Article">
<input type="hidden" name="Username" value="<#PARAM name='Username'>">
<input type="hidden" name="SessionID" value="<#PARAM name='SessionID'>">
<input type="hidden" name="CallNumber" value="<#PARAM name='CallNumber'>">
<input type="hidden" name="ESPNumber" value="<#PARAM name='ESPNumber'>">
<input type="hidden" name="NotWantedAfter" value="<#PARAM name='NotWantedAfter'>"
 

And change this (default lines 21-24):

<input type="hidden" name="NotWantedAfter" 
value="<#PARAM name='NotWantedAfter'>">
<#FORMSTATE>
-
<fieldset>

 

To this:

<input type="hidden" name="NotWantedAfter" 
value="<#PARAM name='NotWantedAfter'>">
<#FORMSTATE>
   
<fieldset>

EditLendingGenericRequestArticle.html 

Add the line highlighted in blue (default lines 13-22):

<div id="content" class="container" role="heading" aria-label="Content">
<form action="illiadlending.dll" method="post" name="EditLendingGenericRequestArticle">
<input type="hidden" name="ILLiadForm" value="EditLendingGenericRequestArticle">
<input type="hidden" name="RequestType" value="<#PARAM name='RequestType'>">
<input type="hidden" name="Username" value="<#PARAM name='Username'>">
<input type="hidden" name="SessionID" value="<#PARAM name='SessionID'>">
<input type="hidden" name="TransactionNumber" value="<#PARAM name='TransactionNumber'>">
<input type="hidden" name="ESPNumber" value="<#PARAM name='ESPNumber'>">
<input type="hidden" name="CallNumber" value="<#PARAM name='CallNumber'>">
<input type="hidden" name="NotWantedAfter" value="<#PARAM name='NotWantedAfter'>">
 

 And change this (default lines 23-27):

<#FORMSTATE>

<fieldset>
<h2 class="page-header">Article Request</h2> 
<section name="article-info">

 

To this: 

<#FORMSTATE>

<fieldset>
<h2 class="page-header">Edit Article Request</h2> 
<section name="article-info">

 

Stop Duplication of Requests After Editing the Original 

To stop the duplication of requests after editing the original request, the name in the form tag has been updated to EditLendingGenericRequestArticle.html, and the value in the input tag has been updated to EditLendingGenericRequestLoan.html.To use these default changes, please overwrite your default EditLendingGenericRequestArticle.html and EditLendingGenericRequestLoan.html files with the updated files or make the following changes:

EditLendingGenericRequestArticle.html

Change this (default lines 13-18):

<div id="content" class="container" role="heading" 
aria-label="Content">
<form action="ILLiadLending.dll" method="post"
name="EditArticleRequest">
<input type="hidden" name="ILLiadForm"
value="WebRequestForm">

<input type="hidden" name="RequestType"
value="<#PARAM name='RequestType'>">
<input type="hidden" name="Username"
value="<#PARAM name='Username'>">
<input type="hidden" name="SessionID"
value="<#PARAM name='SessionID'>">

 

To this:

<div id="content" class="container" role="heading" 
aria-label="Content">
<form action="ILLiadLending.dll" method="post"
name="EditLendingGenericRequestArticle">
<input type="hidden" name="ILLiadForm"
value="EditLendingGenericRequestArticle">
<input type="hidden" name="RequestType"
value="<#PARAM name='RequestType'>">
<input type="hidden" name="Username"
value="<#PARAM name='Username'>">
<input type="hidden" name="SessionID"
value="<#PARAM name='SessionID'>">

EditLendingGenericRequestLoan.html 

Change this (default lines 13-17):

<div id="content" class="container" role="heading" 
aria-label="Content">
<form action="illiadlending.dll" method="post"
name="EditLoanRequest">
<input type="hidden" name="ILLiadForm"
value="WebRequestForm">

<input type="hidden" name="Username"
value="<#PARAM name='Username'>">
<input type="hidden" name="SessionID"
value="<#PARAM name='SessionID'>">

 

To this:

<div id="content" class="container" role="heading" 
aria-label="Content">
<form action="illiadlending.dll" method="post"
name="EditLendingGenericRequestLoan">
<input type="hidden" name="ILLiadForm"
value="EditLendingGenericRequestLoan">

<input type="hidden" name="Username"
value="<#PARAM name='Username'>">
<input type="hidden" name="SessionID"
value="<#PARAM name='SessionID'>">

 

Password and Re-enter IDs 

To use the new password IDs instead of password and re-enter password, please overwrite your default NewUserRegistration.html file with the updated file or make the following changes: 

NewUserRegistration.html

Change this (default lines 249-255):

<span class="req">(required)</span>
</span>
</label>
<input type="password" class="form-control" name=
"Password1" id="CurrentPassword" autocomplete="off">
<div class="small-notes">
Passwords must be at least eight characters long and
contain a lowercase letter, an uppercase letter, and
a number.
</div>
 

To this:

<span class="req">(required)</span>
</span>
</label>
<input type="password" class="form-control" name=
"Password1" id="Password1" autocomplete="off">
<div class="small-notes">
Passwords must be at least eight characters long and
contain a lowercase letter, an uppercase letter, and
a number.
</div>
 

And change this (default lines 259-266):

<label for="Password2">
<span class="<#ERROR name='ERRORPassword2'>">
Re-enter Password
<span class="req">(required)</span>
</span>
</label>
<input type="password" class="form-control" name=
"Password2" id="CurrentPassword" autocomplete="off">

</div>
 

To this:

<label for="Password2">
<span class="<#ERROR name='ERRORPassword2'>">
Re-enter Password
<span class="req">(required)</span>
</span>
</label>
<input type="password" class="form-control" name=
"Password2" id="Password2" autocomplete="off">

</div> 

 

Radio Button Orientation

To align the radio buttons vertically for viewed search results for both lending and borrowing, please overwrite your default ViewSearchResults.html and illiad.css files with the updated files or make the following changes:

ViewSearchResults.html 

Change this (lines 31-40):

<!--Radio control for search filtering-->
   
<div id="searchType">
<input checked name="SearchType" type="radio"
id="SearchTypeActive" value="Active">
<label for="SearchTypeActive">
<span class="new-line">Search <u>only</u> active requests</span>

</label>
<input name="SearchType" type="radio" id="SearchTypeAll"
value="All">
<label for="SearchTypeAll"> Search all
requests</label>

</div>

 

To this:

<!--Radio control for search filtering-->
<br>
<div id="searchType">
<input checked name="SearchType" type="radio"
id="SearchTypeActive" value="Active">
<label id="searchType" for="SearchTypeActive">
<span>Search <u>only</u> active requests</span>

</label>
<input name="SearchType" type="radio" id="SearchTypeAll"
value="All">
<label for="SearchTypeAll" id="SearchTypeAll">Search all
requests</label>

</div>

Illiad.css 

Add the lines highlighted in blue to the end of the CSS file:

.btn-outline-primary:hover{
background-color:#52b3d9;
color: #000;
border-color: #52b3d9;
}

#searchType, #SearchTypeAll {
display: inline !important;
}
 

 

Removed Redundant Target="_self" 

This fix is used to clean up the code and remove unnecessary redundancy of the target="_self" tag. The targets will still open within the same window as usual. To set the new defaults, please overwrite your default FAQ.html, FirstTime.html, and LendingFAQ.html files with the updated files or make the following changes:

FAQ.html

Change this (default lines 18-32):

<div id="faq-toc">
<ul>
<li><a href="#what" target=_"self">What is
ILLiad?</a></li>

<li><a href="#better" target=_"self">How is
ILLiad better than traditonal ILL systems?</a></li>

<li><a href="#disadvantage" target=_"self">Are
there any disadvantages to the electronic system?
</a></li>

<li><a href="#userid" target=_"self">Why do I need a
username and password to use ILLiad?</a></li>

<li><a href="#password">What if I forget my password?
</a></li>
<li><a href="#webbrowser" target=_"self">What Web browser
should I use?</a></li>

<li><a href="#security">Is security a problem if I use a
public workstation?</a></li>
<li><a href="#history">Why don't I see all my older requests
when I look at my request history?</a></li>
<li><a href="#electronic">What is Electronic Delivery?</a></li>
<li><a href="#who" target=_"self">Who do I contact if I have
problems with or questions about ILLiad?</></li>

<li><a href="#cookie">Why does my browser say that you're
sending a cookie? What's in it?</a></li>
</ul>
</div>
 

To this:

<div id="faq-toc">
<ul>
<li><a href="#what">What is
ILLiad?</a></li>

<li><a href="#better">How is
ILLiad better than traditonal ILL systems?</a></li>

<li><a href="#disadvantage">Are
there any disadvantages to the electronic system?
</a></li>

<li><a href="#userid">Why do I need a
username and password to use ILLiad?</a></li>

<li><a href="#password">What if I forget my password?
</a></li>
<li><a href="#webbrowser">What Web browser
should I use?</a></li>

<li><a href="#security">Is security a problem if I use a
public workstation?</a></li>
<li><a href="#history">Why don't I see all my older requests
when I look at my request history?</a></li>
<li><a href="#electronic">What is Electronic Delivery?</a></li>
<li><a href="#who">Who do I contact if I have
problems with or questions about ILLiad?</></li>

<li><a href="#cookie">Why does my browser say that you're
sending a cookie? What's in it?</a></li>
</ul>
</div>

FirstTime.html 

Change this (default lines 84-87):

<h2 class="page-header">ILLiad FAQ (Frequently Asked 
Questions)</h2>
<p>Before registering, you may wish to read the ILLiad
<a href="<#ACTION action='10' form='12'>"target="_self">FAQ</a>.
The FAQ may answer other questions you have about the
ILLiad interlibrary loan system.

</p>
 

To this:

<h2 class="page-header">ILLiad FAQ (Frequently Asked 
Questions)</h2>
<p>Before registering, you may wish to read the ILLiad
<a href="<#ACTION action='10' form='12'>">FAQ</a>.
The FAQ may answer other questions you have about the
ILLiad interlibrary loan system.

</p>

LendingFAQ.html

Change this (default lines 18-29):

<div id="faq-toc">
<ul>
<li><a href="#what" target="_self">What is ILLiad?</a></li>
<li><a href="#better" target="_self">How is ILLiad better
than traditional ILL systems?</a></li>
<li><a href="#disadvantage" target="_self">Are there any
disadvantages to the electronic system?</a></li>
<li><a href="#userid" target="_self">Why do I need a username
and password to use ILLiad?</a></li>
<li><a href="#password">What if I forget my password?</a></li>
<li><a href="#webbrowser" target="_self">What Web browser should I use?</a></li>
<li><a href="#security">Is security a problem if I use a public
workstation?</a></li>
<li><a href="#history">Why don't I see all my older requests when
I look at my request history?</a></li>
<li><a href="#electronic">What is Electronic Delivery?</a></li>
<li><a href="#who" target="_self">Who do I contact if I have problems with or
questions about ILLiad?</a></li>
<li><a href="#cookie">Why does my browser say that you're sending
a cookie? What's in it?</a></li>
 

To this:

<div id="faq-toc">
<ul>
<li><a href="#what" >What is ILLiad?</a></li>
<li><a href="#better" >How is ILLiad better
than traditional ILL systems?</a></li>
<li><a href="#disadvantage" >Are there any
disadvantages to the electronic system?</a></li>
<li><a href="#userid" >Why do I need a username
and password to use ILLiad?</a></li>
<li><a href="#password">What if I forget my password?</a></li>
<li><a href="#webbrowser" >What Web browser should I use?</a></li>
<li><a href="#security">Is security a problem if I use a public
workstation?</a></li>
<li><a href="#history">Why don't I see all my older requests when
I look at my request history?</a></li>

<li><a href="#who" >Who do I contact if I have problems with or
questions about ILLiad?</a></li>
<li><a href="#cookie">Why does my browser say that you're sending
a cookie? What's in it?</a></li>

Change this (default lines 18-29):

<div class="info-block">
<a name="electronic"></a>
<div class="faq-item">
<div class="faq-item-box">
<h3>What is electronic delivery?</h3>
 
<p>Many libraries ship photocopies of articles to us
in electronic format. In the past we

printed these articles before delivering them to you.
Now, through ILLiad, we are able to

offer you the option of electronic delivery of these
articles in PDF format (Adobe's

Portable Document Format). You can read more about
electronic delivery on the <a href="
<#ACTION action'10' form='13'>">Electronic Delivery

Information</a> page. </p>
</div>
</div>
</div>
 
<div class="info-block">
<a name="who"></a>
<div class="faq-item">
<div class="faq-item-box">
 

To this:

<div class="info-block">
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 

 
 
<a name="who"></a>
<div class="faq-item">
<div class="faq-item-box">

 

LendingFirstTime.html

Change this (default lines 111-115):

<h2 class="page-header">ILLiad FAQ (Frequently Asked 
Questions)</h2>
<p>
Before registering, you may wish to read the ILLiad
<a href="illiadlending.dll?Action=10&Form=12" target="_self">FAQ</a>.
The FAQ may answer other questions you have about the ILLiad
interlibrary loan system.
</p>
 

To this:

<h2 class="page-header">ILLiad FAQ (Frequently Asked 
Questions)</h2>
<p>
Before registering, you may wish to read the ILLiad
<a href="illiadlending.dll?Action=10&Form=12" >FAQ</a>.
The FAQ may answer other questions you have about the ILLiad
interlibrary loan system.
</p>

 

Cookie Consent

The cookie consent pages have been updated to resolve the returning cookie consent banner in the lending pages. To use the new default, please overwrite your default cookieconsent.min.js file with the updated file and overwrite your default atlasCookieConsent.js with the updated file or make the following changes:

AtlasCookieConsent.js

Change this (default lines 1-6):

window.addEventListener("load", function() {
if (document.cookie != "iliadlending_cookieconsent=dismiss") {
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#333333"
},
 

To this:

window.addEventListener("load", function() {
  
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#333333"
},

And change this (default lines 11-18):

   "showLink": false,
    "theme": "edgeless",
cookie:{
name: "illiadlending_cookieconsent",
domain: window.location.host
}
  })}
});
 

To this:

   "showLink": false,
    "theme": "edgeless",
cookie:{
name: "lendingilliad_cookieconsent",
domain: window.location.host
}
  })
});

Cookieconsent.min.js

The changes to this file are extensive. Please overwrite this file with the updated file.

 

Spans

Both borrowing and lending pages, required spans have been correct to be consistently within the ERROR spans. To use the new spans, please overwrite your default ChangeUserInformation.html with the updated files or make the following changes:

ChangeUserInformation.html

Change this (default lines 48-55):

<span class="field">
<span class="<#ERROR name='ERRORSSN'>">
ID Number
</span>
<span class="req">(required)</span>
</span>
 
</label>
<input type="text" class="form-control"
name="SSN" id="SSN" value="<#PARAM name='SSN'>">
 

To this:

<span class="field">
<span class="<#ERROR name='ERRORSSN'>">
ID Number
 
<span class="req">(required)</span>
</span>
</span>
</label>
<input type="text" class="form-control"
name="SSN" id="SSN" value="<#PARAM name='SSN'>">

And change this (default lines 60-67):

<span class="field">
<span class="<#ERROR name='ERROREMailAddress'>">
E-Mail Address
 
</span>
<span class="req">(required)</span>
</span>
</label>
<input type="text" class="form-control" name=
"EMailAddress" id="EMailAddress" value="
<#PARAM name='EMailAddress'>">
 

To this:

<span class="field">
<span class="<#ERROR name='ERROREMailAddress'>">
E-Mail Address
<span class="req">(required)</span>
</span>
 
</span>
</label>
<input type="text" class="form-control" name=
"EMailAddress" id="EMailAddress" value="
<#PARAM name='EMailAddress'>">

And change this (default lines 72-79):

<span class="field">
<span class="<#ERROR name='ERRORPhone'>">
Daytime Phone
 
</span>
<span class="req">(required)</span>
</span>
</label>
<input type="text" class="form-control" name="Phone"
id="Phone" value="<#PARAM name='Phone'>">
 

To this:

<span class="field">
<span class="<#ERROR name='ERRORPhone'>">
Daytime Phone
<span class="req">(required)</span>
</span>
 
</span>
</label>
<input type="text" class="form-control" name="Phone"
id="Phone" value="<#PARAM name='Phone'>">

And change this (default lines 108-116):

<span class="field">
<span class="<#ERROR name='ERRORStatus'>">
Status
 
</span>
<span class="req">
(required)

</span>
</span>
</label>
<select id="StatusGroup" name="StatusGroup"
size="1" class="custom-select mr-sm-2">
 

To this:

<span class="field">
<span class="<#ERROR name='ERRORStatus'>">
Status
<span class="req">(required)</span>
</span>
 
 
</span>
 
</label>
<select id="StatusGroup" name="StatusGroup"
size="1" class="custom-select mr-sm-2">

 

No Results

In both borrowing and lending pages for ILLiad, the script has been updated to properly show "no results". To use the new default, please overwrite your default ViewSearchResults.html or LendingViewSearchResults.html files with the updated files or make the following changes:

ViewSearchResults.html 

Change this (lines 56-69):

<script>
$(document).ready(function () {
var saveState="<#PARAM name='searchType'>"
-
$("input[name='searchType'][value='"+ saveState
+"']").prop("checked", true)
 
 
 
 
 
 
 
 
});
</script>
</body>
 

To this:

<script>
$(document).ready(function () {
var saveState="<#PARAM name='SearchType'>"
 
$("input[name='SearchType'][value='"+ saveState
+"']").prop("checked", true)
if (($('#searchResults .requestResult').length ==
0) && ($('#searchTerm').text() != '')) {
$('#no-results-message').show();
}
else
{
('#no-results-message').hide();
}
});
</script>
</body>

LendingViewSearchResults.html

Change this (lines 55-68):

<script>
$(document).ready(function () {
var saveState="<#PARAM name='searchType'>"
-
$("input[name='searchType'][value='"+ saveState
+"']").prop("checked", true)
 
 
 
 
 
 
 
 
});
</script>
</body>
 

To this:

<script>
$(document).ready(function () {
var saveState="<#PARAM name='SearchType'>"
 
$("input[name='SearchType'][value='"+ saveState
+"']").prop("checked", true)
if (($('#searchResults .requestResult').length ==
0) && ($('#searchTerm').text() != '')) {
$('#no-results-message').show();
}
else
{
('#no-results-message').hide();
}
});
</script>
</body>

 

Special Collections References

A thorough review of the pages has been performed and corrected for keywords like "special collections" in ILLiad. To use the new default verbiage, please overwrite your default LendingFirstTime.html and FirstTime.html files with the updated files or make the following changes:

LendingFirstTime.html 

Change this (default lines 111-115):

<h2 class="page-header">ILLiad FAQ (Frequently 
Asked Questions)</h2>
<p>
Before registering, you may wish to read the ILLiad
<a href="illiadlending.dll?Action=10&Form=12"target="self">FAQ</a>.
The FAQ may answer other questions you have about the
ILLiad Special Collections Management System.
</p>
 

To this:

<h2 class="page-header">ILLiad FAQ (Frequently 
Asked Questions)</h2>
<p>
Before registering, you may wish to read the ILLiad
<a href="illiadlending.dll?Action=10&Form=12" >FAQ</a>.
The FAQ may answer other questions you have about the
ILLiad interlibrary loan system.
</p>

FirstTime.html 

Change this (default lines 35-39):

<ul>
<li>Entering your personal information into the
ILLiad system means you will not have to supply the
information again when making future requests.</li>
<li>Having your email and regular mail addresses on
file with Special Collections enables us to notify you
promptly and deliver materials accurately.</li>
 

To this:

<ul>
<li>Entering your personal information into the
ILLiad system means you will not have to supply the
information again when making future requests.</li>
<li>Having your email and regular mail addresses on
file with ILLiad enables us to notify you
promptly and deliver materials accurately.</li>

Change this (default lines 84-87):

<h2 class="page-header">ILLiad FAQ (Frequently Asked 
Questions)</h2>
<p>Before registering, you may wish to read the ILLiad
<a href="<#ACTION action='10' form='12'>">FAQ</a>. The
FAQ may answer other questions you have about the ILLiad
Special Collections Management System.
</p>
 

To this:

<h2 class="page-header">ILLiad FAQ (Frequently Asked 
Questions)</h2>
<p>Before registering, you may wish to read the ILLiad
<a href="<#ACTION action='10' form='12'>">FAQ</a>. The
FAQ may answer other questions you have about the ILLiad
interlibrary loan system.
</p>
 

 

Lending Search NavBar Notice

Resolved 404 error by updating the search form to point illiad.dll to illiadlending.dll. To use the new Search NavBar notice, please overwrite your default include_nav_search.html file with the updated files or make the following changes:

Include_nav_search.html

Change this (default lines 70-72):

<form action="illiad.dll" name="Search" method="post" 
class="form-inline my-2 my-lg-0">
<input type="hidden" name="ILLiadForm" value="Search">
<input type="hidden" name="SearchType" value="Active">
 

To this:

<form action="illiadlending.dll" name="Search" method="post" 
class="form-inline my-2 my-lg-0">
<input type="hidden" name="ILLiadForm" value="Search">
<input type="hidden" name="SearchType" value="Active">

Lending Logon and Logon2 Icons

Fixed the inconsistency between icons for the Lending Long and Logon2 pages. To implement the consistent icons, please overwrite your default LendingLogon.html and LendingLogon2.html files with the updated files or make the following changes:

LendingLogon.html

Change this (default lines 65-85):

</div>
<button class="btn btn-primary btn-md" type="submit"
name="SubmitButton" value="Logon to Lending ILLiad">
Logon to ILLiad</button>
</form>
<div role="heading" class="container" aria-label=
"Account creation and password reset">
<div class="forgot-password-link">
<a href="illiadlending.dll?Action=10&Form=84">
Forgot Password?</a><br />
<a href="Lending FirstTime.html">First Time Users</a>
 
 
 
 
 
 
 
 
 
 
<footer class="foot">
 

To this:

</div>
<button class="btn btn-primary btn-md" type="submit"
name="SubmitButton" value="Logon to ILLiad">
Logon to ILLiad</button>
</form>
<div role="heading" class="container" aria-label=
"Account creation and password reset">

<div class="forgot-password-link">
<a href="illiadlending.dll?Action=10&Form=84">
<span aria-hidden="true" class="fas fa-question-circle">
</span> Forgot Password?
</a><br />
</div>

<div class="first-time-link">
<a href="LendingFirstTime.html">
<span aria-hidden="true" class="fas fa-user-plus">
</span> First Time Users
</a>
</div>
</div>

<footer class="foot">

 LendingLogon2.html

Change this (default lines 44-60):

</form>
<div role="heading" class="container" aria-label=
"Account creation and password reset">
<form action="illiadlending.dll?Action=10&Form=79"
method="post name="RegisterForn" id="RegisterForm">
<#FORMSTATE>
<div class="forgot-password-link">
<a href="#ACTION action='10' form'84'>">
<span aria-hidden="true" class="fas fa-question
-circle"></span> Forgot Password?
</a><br />
</div>
 
<div class="first-time-link">
<a href="#" onclick="RegisterForm.submit(); return false;">
<span aria-hidden="true" class="fas fa-user-plus">
</span> First Time Users
</a>
</div>
</form>
</div>
<#INCLUDE filename="include_footer.html">
 

To this:

<</form>
<div role="heading" class="container" aria-label=
"Account creation and password reset">
 
 
 
<div class="forgot-password-link">
<a href="illiadlending.dll?Action=10&Form=84">
<span aria-hidden="true" class="fas fa-question
-circle"></span> Forgot Password?
</a><br />
</div>
 
<div class="first-time-link">
<a href="LendingFirstTime.html">
<span aria-hidden="true" class="fas fa-user-plus">
</span> First Time Users
</a>
</div>
 
</div>
<#INCLUDE filename="include_footer.html">

 

03 February 2021 Web Page Changes

Ampersands

Change all '&' to '&amp;'. See example below:

Change this:

<a href="<#ACTION action='10' form='72'>
&Value=<#DATAROW field='TransactionNumber'>">
<#DATAROW field='Title'></a>
 

To this:

<a href="<#ACTION action='10' form='72'>&amp;Value=<#DATAROW 
field='TransactionNumber'>"><#DATAROW field='Title'></a>

In the DataRow_DefaultRequest.html page change default lines 7, 14, 21, 22, 24, 26-27, and 29-31.

In the DataRow_CheckedOutItems.html page change default lines 7, 14, 21, 22, 24, 26-27, and 29-31.

In the DataRow_ElectronicDelivery.html page change default lines 8, 15, 22-24, 26, 28-29, and 31.

In the DataRow_ElectronicDeliveryUndelete.html page change default lines 8, 16, and 28-31.

In the Lending_DataRowDefaultRequest.html page change default lines 7, 14, 21-22, 24, and 26-27.

In the LendingLogon.html page change default lines 73, 79, 86, and 91. 

 

Non-Breaking Space

Change all '&bsp;' to ' '. See example below:

Change this:

<<div class="field text-muted">Transaction Number&nbsp; 
<span class="field-value font-weight-bold"><#DATAROW field
='TransactionNumber'></span></div>
 

To this:

<div class="field text-muted">
Transaction Number <span class
="field-value font-weight-bold"><#DATAROW field='
TransactionNumber'></span></div>

In the DataRow_DefaultRequest.html page change default lines 14, 45, and 58.

In the DataRow_CheckedOutItems.html page change default lines 45 and 58.

In the DataRow_ElectronicDelivery.html page change default lines 22 and 42.

In the DataRow_ElectronicDeliveryUndelete.html page change default line 28.

In the Lending_DataRowDefaultRequest.html page change default lines 14, 21-22, 27, and 36.

Class Attributes

Change all class attributes to the new format:

  • Change '" class="menuEdit"' to 'menuEdit'.
  • Change '" class="menuRenew"' to 'menuRenew'.
  • Change '" class="menuResubmit"' to 'menuResubmit'.
  • Change '" class="menuCancel"' to 'menuCancel'.
  • Change '" class="menuClone"' to 'menuClone'.
  • Change '" class="menuDeletePDF"' to 'menuDeletePDF'.
  • Change '" class="menuViewPDF"' to 'menuViewPDF'.
  • Change '" class="menuUndo"' to 'menuUndo.

See example below:

Change this:

<a class="dropdown-item btn btn-light 
<#DATAROW field='RequestActionAllowed'
name='Renew' disabledValue='disabled'>
" href="<#ACTION action='11' form='67'>
&Value=<#DATAROW field=
'TransactionNumber'>" class="menuRenew">
<span aria-hidden="true"
class="fas fa-calendar-alt"></span>  Renew</a>
 

To this:

<a class="dropdown-item btn btn-light 
<#DATAROW field='RequestActionAllowed'
name='Renew' disabledValue='disabled'>
" href="<#ACTION action='11' form='67'>
&Value=<#DATAROW field=
'TransactionNumber'>menuRenew >
<span aria-hidden="true"
class="fas fa-calendar-alt"></span>  Renew</a>

In the DataRow_CheckedOutItems.html page change default lines 21-22, 24, 26-27, and 29-31.

In the DataRow_DefaultRequest.html page change default lines 21-22, 24, 26-27, and 29-31.

In the DataRow_ElectronicDelivery.html page change default lines 23-24, 26, and 28-29.

In the DataRow_ElectronicDeliveryUndelete.html page change default lines 29-31.

In the Lending_DataRowDefaultRequest.html page change default lines 21-22, 24, and 26-27.

 

Notes

Move <#PARAM name='Notes'> from the value attribute of the textarea element to the innerHTML. See the example from LendingGenericRequestArticle.html below:

Change this (default line 197):

<textarea id="Notes" name="Notes" rows="2" cols="40" 
class="form-control" value="<#PARAM name='Notes'>">
</textarea><br>
 

To this:

<textarea id="Notes" name="Notes" rows="2" cols="40" 
class="form-control" ><#PARAM name='Notes'>
</textarea><br>

This change should be made for textarea elements on the following pages:

  • EditLendingGenericRequestArticle.html
  • EditLendingGenericRequestLoan.html
  • LendingGenericRequestArticle.html
  • LendingGenericRequestLoan.html
  • ArticleRequest.html
  • BookChapterRequest.html
  • ConferencePaperRequest.html
  • EditArticleRequest.html
  • EditBookChapterRequest.html
  • EditConferencePaperRequest.html
  • EditGenericRequestTesting.html
  • EditLoanRequest.html
  • EditPatentRequest.html
  • EditReportRequest.html
  • EditStandardsDocumentRequest.html
  • EditThesisRequest.html
  • GenericRequestTesting.html
  • LoanRequest.html
  • PatentRequest.html
  • StandardsDocumentRequest.html
  • ThesisRequest.html

31 August 2021 Web Page Changes

Add "required" Attribute | Add "formnovalidate" Attribute | Thesis Request Pages | Fix Cancel Button on NewAuthRegistration.html | ExpiredUsers.html | Removed "new-line" Class | Custom Javascript File | Custom CSS File | Value Attributes for Dropdown Options | Remove Duplicate Class Attributes | Remove Non-Breaking Space | Add "mr-1" Class to DataRow Pages

Add "required" Attribute

Adding the "required" attribute will also add some additional browser validation to your web forms. To learn more about these changes and to find information on an alternative "aria-required" attribute that you can implement instead to meet accessibility requirements, see Required Field Validation Options for Web Forms.

To add the new "required" attribute to all required fields on the web pages, please overwrite your web pages with the new default files or make the change manually on each file following the example below:

Change this:

<input type="text" class="form-control" 
name="PhotoJournalTitle" id="PhotoJournalTitle"
value="<#PARAM name='PhotoJournalTitle'>"  >
 

To this:

<input type="text" class="form-control" 
name="PhotoJournalTitle" id="PhotoJournalTitle"
value="<#PARAM name='PhotoJournalTitle'>" required>

On the following web pages at the specified default lines:

Please review each file and also make the change for any additional required fields you have added to your web pages.
  • Lending/EditLendingGenericRequestArticle.html
    • 43, 55
  • Lending/EditLendingGenericRequestLoan.html
    • 44, 58
  • Lending/LendingGenericRequestArticle.html
    • 42, 54
  • Lending/LendingGenericRequestLoan.html
    • 41, 53
  • Lending/LendingNewUserRegistration.html
    • 32, 123, 133, 167, 178, 191
  • Lending/LendingUpdateAddressInformation
    • 31, 113, 123
  • ArticleRequest.html
    • 43, 55
  • BookChapterRequest.html
    • 42
  • ChangeUserInformation.html
    • 38, 48, 60, 72, 84, 150, 173, 199
  • ConferencePaperRequest.html
    • 42
  • EditArticleRequest.html
    • 43, 55
  • EditBookChapterRequest.html
    • 45
  • EditConferencePaperRequest.html
    • 46
  • EditGenericRequestTesting.html
    • 41, 53
  • EditLoanRequest.html
    • 42, 54
  • EditMultimediaRequest.html
    • 40, 52
  • EditPatentRequest.html
    • 41
  • EditReportRequest.html
    • 41, 53
  • EditStandardsDocumentRequest.html
    • 42
  • EditThesisRequest.html
    • 42
  • GenericRequestTesting.html
    • 42, 54
  • LoanRequest.html
    • 41, 53
  • MultimediaRequest.html
    • 39, 51
  • NewAuthRegistration.html
    • 39, 49, 59, 69, 81, 116, 150, 169, 191
  • NewUserRegistration.html
    • 37, 47, 57, 67, 79, 145, 164, 186, 253, 263, 276
  • PatentRequest.html
    • 41
  • ReportRequest.html
    • 41, 53
  • StandardsDocumentRequest.html
    • 41
  • ThesisRequest.html
    • 41

Add "formnovalidate" Attribute

To add the "formnovalidate" attribute to all Cancel buttons on the web pages, please overwrite your web pages with the new default files or make the change manually on each file following the example below:

Change this:

<button class="btn btn-secondary btn-md" type="submit" 
role="button" id="buttonCancel" name="SubmitButton"
value="Cancel - Return to Main Menu" >
Cancel - Return to Main Menu</button>
 

To this:

<button class="btn btn-secondary btn-md" type="submit" 
role="button" id="buttonCancel" name="SubmitButton"
value="Cancel - Return to Main Menu" formnovalidate>
Cancel - Return to Main Menu</button>

On the following web pages at the specified default lines:

  • Lending/include_request_buttons.html (default line 4)

  • Lending/LendingNewUserRegistration.html (default line 198)

  • Lending/LendingUpdateAddressInformation (default line 146)

  • ChangeUserInformation.html (default line 261)

  • include_request_buttons.html (default line 4)

  • NewAuthRegistration.html (default line 249)

  • NewUserRegistration.html (default line 282)

Thesis Request Pages 

To fix an issue where Thesis requests are submitted with the Article request type but populate Loan Info fields in the ILLiad Client and to fix issues with the tagging for required fields, please overwrite your ThesisRequest.html and EditThesisRequest.html files with the updated files or make the following changes:

After implementing this change, the default entries for ThesisRequest and EditThesisRequest in the Customization Manager's WebValidation table should be changed from validating against LoanTitle to instead validate against the PhotoJournalTitle field. If you had manually marked any other fields as required, please check your WebValidation entries to make sure they match the new fields used on these pages.

ThesisRequest.html

Change this (default lines 28-87):

<div class="form-group col-md-9">
<label for="ThesisTitle">
<span class="field">
<span class="<#ERROR name='ERRORLoanTitle'>"  >
Title
<span class="req">(required)</span>
</span>
<br/>
<span class="small-notes">
Please do not abbreviate unless your citation is abbreviated
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanTitle" id="LoanTitle"
value="<#PARAM name='LoanTitle'>">
</div>

<div class="form-group col-md-9">
<label for="LoanAuthor">
<span class="field">
<span class="<#ERROR name='ERRORLoanAuthor'>">
Author/Editors
<span class="req">(required)</span>
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanAuthor" id="LoanAuthor"
value="<#PARAM name='LoanAuthor'>">
</div>

<div class="form-group col-md-9">
<label for="LoanPublisher">
<span class="field">
<span class="<#ERROR name='ERRORLoanPublisher'>">
School
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanPublisher" id="LoanPublisher"
value="<#PARAM name='LoanPublisher'>">
</div>

<div class="form-group col-md-9">
<label for="LoanDate">
<span class="field">
<span class="<#ERROR name='ERRORLoanDate'>">
Date of Publication
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanDate" id="LoanDate"
value="<#PARAM name='LoanDate'>">
</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="form-group col-md-9">
<label for="LoanEdition">
<span class="field">
<span class="<#ERROR name='ERRORLoanEdition'>">
Degree
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanEdition" id="LoanEdition"
value="<#PARAM name='LoanEdition'>">
</div>
 

To this:

<div class="form-group col-md-9">
<label for="PhotoJournalTitle">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalTitle'>" required>
Title
<span class="req">(required)</span>
</span>
<br/>
<span class="small-notes">
Please do not abbreviate unless your citation is abbreviated
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoJournalTitle" id="PhotoJournalTitle"
value="<#PARAM name='PhotoJournalTitle'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoArticleAuthor">
<span class="field">
<span class="<#ERROR name='ERRORPhotoArticleAuthor'>">
Author/Editors
 
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoArticleAuthor" id="PhotoArticleAuthor"
value="<#PARAM name='PhotoArticleAuthor'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoItemPublisher">
<span class="field">
<span class="<#ERROR name='ERRORPhotoItemPublisher'>">
School
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoItemPublisher" id="PhotoItemPublisher"
value="<#PARAM name='PhotoItemPublisher'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoJournalMonth">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalMonth'>">
Month of Publication
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoJournalMonth" id="PhotoJournalMonth"
value="<#PARAM name='PhotoJournalMonth'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoJournalYear">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalYear'>">
Year of Publication
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoJournalYear" id="PhotoJournalYear"
value="<#PARAM name='PhotoJournalYear'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoItemEdition">
<span class="field">
<span class="<#ERROR name='ERRORPhotoItemEdition'>">
Degree
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoItemEdition" id="PhotoItemEdition"
value="<#PARAM name='PhotoItemEdition'>">
</div>

EditThesisRequest.html

Change this (default line 16):

<input type="hidden" name="RequestType" value="Loan">
 

To this:

<input type="hidden" name="RequestType" value="Article">

And change this (default lines 29-88):

<div class="form-group col-md-9">
<label for="ThesisTitle">
<span class="field">
<span class="<#ERROR name='ERRORLoanTitle'>"  >
Title
<span class="req">(required)</span>
</span>
<br/>
<span class="small-notes">
Please do not abbreviate unless your citation is abbreviated
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanTitle" id="LoanTitle"
value="<#PARAM name='LoanTitle'>">
</div>

<div class="form-group col-md-9">
<label for="LoanAuthor">
<span class="field">
<span class="<#ERROR name='ERRORLoanAuthor'>">
Author/Editors
<span class="req">(required)</span>
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanAuthor" id="LoanAuthor"
value="<#PARAM name='LoanAuthor'>">
</div>

<div class="form-group col-md-9">
<label for="LoanPublisher">
<span class="field">
<span class="<#ERROR name='ERRORLoanPublisher'>">
School
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanPublisher" id="LoanPublisher"
value="<#PARAM name='LoanPublisher'>">
</div>

<div class="form-group col-md-9">
<label for="LoanDate">
<span class="field">
<span class="<#ERROR name='ERRORLoanDate'>">
Date of Publication
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanDate" id="LoanDate"
value="<#PARAM name='LoanDate'>">
</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="form-group col-md-9">
<label for="LoanEdition">
<span class="field">
<span class="<#ERROR name='ERRORLoanEdition'>">
Degree
</span>
</span>
</label>
<input type="text" class="form-control"
name="LoanEdition" id="LoanEdition"
value="<#PARAM name='LoanEdition'>">
</div>
 

To this:

<div class="form-group col-md-9">
<label for="PhotoJournalTitle">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalTitle'>" required>
Title
<span class="req">(required)</span>
</span>
<br/>
<span class="small-notes">
Please do not abbreviate unless your citation is abbreviated
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoJournalTitle" id="PhotoJournalTitle"
value="<#PARAM name='PhotoJournalTitle'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoArticleAuthor">
<span class="field">
<span class="<#ERROR name='ERRORPhotoArticleAuthor'>">
Author/Editors
 
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoArticleAuthor" id="PhotoArticleAuthor"
value="<#PARAM name='PhotoArticleAuthor'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoItemPublisher">
<span class="field">
<span class="<#ERROR name='ERRORPhotoItemPublisher'>">
School
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoItemPublisher" id="PhotoItemPublisher"
value="<#PARAM name='PhotoItemPublisher'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoJournalMonth">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalMonth'>">
Month of Publication
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoJournalMonth" id="PhotoJournalMonth"
value="<#PARAM name='PhotoJournalMonth'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoJournalYear">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalYear'>">
Year of Publication
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoJournalYear" id="PhotoJournalYear"
value="<#PARAM name='PhotoJournalYear'>">
</div>

<div class="form-group col-md-9">
<label for="PhotoItemEdition">
<span class="field">
<span class="<#ERROR name='ERRORPhotoItemEdition'>">
Degree
</span>
</span>
</label>
<input type="text" class="form-control"
name="PhotoItemEdition" id="PhotoItemEdition"
value="<#PARAM name='PhotoItemEdition'>">
</div>

Fix Cancel Button on NewAuthRegistration.html

To fix an issue where clicking the Cancel button on NewAuthRegistration.html will send an unregistered user back to the same page instead of exiting the ILLiad system, please overwrite your default NewAuthRegistration.html file with the updated file or make the following change:

This change will send the user to the location specified in the RemoteAuthWebLogoutURL customization key when Cancel is clicked. Please ensure that this key contains the correct value in the ILLiad Customization Manager before implementing this change.

NewAuthRegistration.html

Change this (default line 249):

<button class="btn btn-secondary btn-md" 
type="submit" name="SubmitButton"
value="Cancel - Return to Logon page">
Cancel - Return to Logon page</button>
 

To this:

<button class="btn btn-secondary btn-md" 
type="submit" name="SubmitButton"
value="Cancel - Exit ILLiad System" formnovalidate>
Cancel - Exit ILLiad System</button>

Expired Users Page

If your institution also maintains an Expired Users page (ExpiredUsers.html), the same changes to the Cancel button should be applied as follows:

Note: This page is not included by default in the ILLiad default web pages download.

ExpiredUsers.html

Change this (default lines 263-264 ):

<input class="btn btn-primary btn-md" 
type="submit" name="SubmitButton" value="Submit Information">
 
<input class="btn btn-secondary btn-md" type="submit"
name="SubmitButton" value="Cancel - Exit to Main Menu">
 
 

To this:

<button class="btn btn-primary btn-md" 
type="submit" name="SubmitButton" value="Submit Information">
Submit Information</button>
<button class="btn btn-secondary btn-md" type="submit"
name="SubmitButton" value="Cancel - Exit ILLiad System" formnovalidate>
Cancel - Exit ILLiad System</button>

Removed "new-line" Class

The "new-line" class was removed from the illiad.css file in the css and Lending/css folders, and all <span> elements using the "new-line" class attribute were replaced with <div> elements. To implement this change, please overwrite the default web pages listed below with the updated files, or make the following changes manually to each page:

Remove the "new-line" class on css/illiad.css and Lending/css/illiad.css:

illiad.css

Change this (default lines 144-147):

 padding: 1rem 0;
}
.new-line {
display: block;
}
.bold {
font-weight: bold;
}
 

To this:

 padding: 1rem 0;
}
 
 
 
.bold {
font-weight: bold;
}

Replace <span class="new-line"> with <div> tags following the example below:

include_footer.html

Change this (default lines 1-13):

<footer class="foot">
<span class="new-line">
Powered by
<a href="<#ACTION action='10' form='1'>">
ILLiad </a>
</span>
<span class="new-line">
&copy; 2021
<a href="http://www.atlas-sys.com">
Atlas Systems, Inc.</a> All Rights Reserved.
</span>
<span class="new-line">
<a href="<#ACTION action='10' form='3'>">Site Map </a>
</span>
</footer>
 

To this:

<footer class="foot">
<div>
Powered by
<a href="<#ACTION action='10' form='1'>">
ILLiad </a>
</div>
<div>
&copy; 2021
<a href="http://www.atlas-sys.com">
Atlas Systems, Inc.</a> All Rights Reserved.
</div>
<div>
<a href="<#ACTION action='10' form='3'>">Site Map </a>
</div>
</footer>

Please follow the example above to make this change on these web pages:

  • Lending/LendingLogon.html (default lines 45-50; 86-92)
  • Lending/LendingLogon2.html(default lines 26-27)
  • Lending/include_footer.html (default lines 1-13)
  • include_footer.html (default lines 1-13)
  • Logon.html (default lines 42-47; 80-86)
  • Logon2.html (default lines 27-28)

Replace the "new-line" class with <div> tags AND remove additional formatting on these pages:

Lending/LendingFirstTime.html and FirstTime.html

Change this on:

  • LendingFirstTime.html (default lines 32-38)
  • FirstTime.html (default lines 27-33)
<p>
<span class="new-line">
To request an item, you must first identify
yourself to the library's ILLiad system.
To do this you fill out a registration
form using your Web browser.
</span>
<span class="new-line">Registration has three
purposes:</span>
</p>
 

 

 

To this:

 
<div>
To request an item, you must first identify
yourself to the library's ILLiad system.
To do this you fill out a registration
form using your Web browser.
</div>
<div>Registration has three
purposes:</div>
 

Change this on:

  • LendingFirstTime.html (default lines 55-69)
  • FirstTime.html (default lines 50-64)
<p>
<strong class="new-line">Username</strong>
<span class="new-line">
Choose anything you like, such as your
name, abbreviations, or an alphanumeric code.
</span>

<strong class="new-line">Password</strong>
<span class="new-line">
Choose anything you like. We recommend that you
follow good security practice and choose a password
that is different from those you use to access
other systems.
</span>
<span class="new-line">
ILLiad will encrypt your password, so it will remain
secure. Only you will know your password.
</span>
</p>
 

 

 

To this:

 
<div><strong>Username</strong></div>
<div>
Choose anything you like, such as your
name, abbreviations, or an alphanumeric code.
</div>

<div><strong>Password</strong></div>
<div>
Choose anything you like. We recommend that you
follow good security practice and choose a password
that is different from those you use to access
other systems.
</div>
<div>
ILLiad will encrypt your password, so it will remain
secure. Only you will know your password.
</div>
 

Custom JavaScript File

A blank custom.js file was added to the default web pages for site-specific custom JavaScript changes. To use the new file for your custom JavaScript changes, please add custom.js to your web directory in the js and Lending/js folders, and overwrite your default include_head.html and Lending/include_head.html file with the updated file or make the following changes:

Lending/include_head.html and include_head.html

Add this to:

  • Lending/include_head.html (default line 18)
  • include_head.html (default line 17)
<script src="js/atlasUtility.js"></script>
<script src="js/custom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"
integrity="sha256-VrmtNHAdGzjNsUNtWYG55xxE9xDTz4gF63x/prKXKH0=" crossorigin="anonymous"></script>

Custom CSS File

A blank custom.css file was added to the default web pages for site-specific custom CSS changes. To use the new file for your custom CSS changes, please add custom.css to your web directory in the css and Lending/css folders, and overwrite the files listed below with the updated files or add the following line of code manually:

Add this to:

  • Lending/include_head.html (default line 9)
  • Lending/LendingLogon.html (default line 14)
  • include_head.html (default line 11)
  • Logon.html (default line 13)
<link rel="stylesheet" type="text/css" href="css/illiad.css" media="screen"/>
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">

Value Attributes for Dropdown Options

Value attributes have been added to all hardcoded dropdown options (those defined explicitly in the HTML rather than in the CustomDropDown Table) to ensure that ILLiad will remember the user's selection when editing a request or redoing a field after a failed validation. To implement this change, please overwrite your web pages with the new default files or make the change manually on each file following the example below:

Please note that each value attribute should contain the exact text defined for that dropdown option.
The data-persistedValue attribute used in conjunction with the new value attribute is case-sensitive. Please ensure that this attribute follows the exact casing used in "data-persistedValue" to avoid issues with this feature on your web pages.

Change this:

<select id="Rush" name="Rush" size="1" 
class="custom-select mr-sm-2"
data-persistedValue="<#PARAM name='Rush'>">
<option >Regular</option>
<option >Rush</option>
</select>
</div>Cancel - Return to Main Menu</button>
 

To this:

<select id="Rush" name="Rush" size="1" 
class="custom-select mr-sm-2"
data-persistedValue="<#PARAM name='Rush'>">
<option value="Regular">Regular</option>
<option value="Rush">Rush</option>
</select>
</div>

On the following web pages at the specified default lines:

  • Lending/EditLendingGenericRequestArticle.html (default lines 174-175)

  • Lending/EditLendingGenericRequestLoan.html (default lines 151-152, 169-170)

  • Lending/LendingGenericRequestArticle.html (default lines 175-176)

  • Lending/LendingGenericRequestLoan.html (default lines 152-153, 170-171)

  • ChangeUserInformation.html (default lines 219-220, 233-234, 247-248)

  • EditGenericRequestTesting.html (default lines 146-147)

  • EditLoanRequest.html (default lines 147-148)

  • EditMultimediaRequest.html (default lines 97-100)
  • EditReportRequest.html (default lines 131-132)
  • GenericRequestTest.html (default lines 147-148)
  • LoanRequest.html (default lines 146-147)
  • MultimediaRequest.html (default lines 96-99)
  • NewAuthRegistration.html (default lines 212-213, 226-227, 240-241)
  • NewUserRegistration.html (default lines 206-207, 220-221, 234-235)
  • ReportRequest.html (default lines 131-132)

Remove Duplicate Class Attributes

Class attributes on Lending/include_TransactionMenu.html and include_TransactionMenu.html were changed to use the new, single class attribute format. To implement these changes, please overwrite your include_TransactionMenu.html files with the updated files or make the changes manually on each file for each of the following classes on the following default lines:

  • menuEdit, menuCancel, menuRenew, menuResubmit, menuClone, menuViewPdf, menuDeletePdf
    • default lines 4-5, 9-10, 15-16, 21-22, 26-27, 32-33, 37-38

Follow the example below for changing the menuEdit class on include_TransactionMenu.html (default lines 4-7):

Change this:

 <a class="btn btn-light 
<#TRANSACTION field='RequestActionAllowed'
name='Edit' disabledValue='disabled'>"
href="<#ACTION action='20' form='63'>
&Value=<#TRANSACTION field='TransactionNumber'>" class="menuEdit">
<span aria-hidden="true"
class="fas fa-edit text-primary"></span>
Edit Request
</a>
 

To this:

<a class="btn btn-light menuEdit 
<#TRANSACTION field='RequestActionAllowed'
name='Edit' disabledValue='disabled'>"
href="<#ACTION action='20' form='63'>
&Value=<#TRANSACTION field='TransactionNumber'>">
<span aria-hidden="true"
class="fas fa-edit text-primary"></span>
Edit Request
</a>

Remove Non-Breaking Space

The non-breaking space (&nbsp) was removed on Lending/js/lendingWebAlerts.js and js/webAlerts.js and an additional "mr-1" class was added to provide a better format for spacing. To implement these changes, please overwrite your lendingWebAlerts.js and webAlerts.js files with the updated files or make the following changes manually on each file:

lendingWebAlerts.js and webAlerts.js 

Change this (default line 14):

buttonElement = $("<button></button>").addClass('btn btn-link 
btn-alert').attr('data-toggle', 'modal').attr('type',
'button').attr('data-target', '#webAlertContent' + alert.id).html
('<span aria-hidden="true" class="fas fa-info-circle "></span> &nbsp;'
+ alert.alertTitle);
 

To this:

buttonElement = $("<button></button>").addClass('btn btn-link 
btn-alert').attr('data-toggle', 'modal').attr('type',
'button').attr('data-target', '#webAlertContent' + alert.id).html
('<span aria-hidden="true" class="fas fa-info-circle mr-1"></span>'
+ alert.alertTitle);

Add "mr-1" Class to DataRow Pages

The "mr-1" class was added to certain <span> tags on the DataRow template pages and extra spacing removed in order to provide a better format for spacing on these pages. To implement these changes, please overwrite your files with the updated files or make the changes manually on each file following the example below:

Change this:

<div class="field text-muted">Transaction Number <span 
class="field-value font-weight-bold ">
<#DATAROW field='TransactionNumber'></span></div>
 

To this:

<div class="field text-muted">Transaction Number<span 
class="field-value font-weight-bold mr-1">
<#DATAROW field='TransactionNumber'></span></div>

On the following web pages at the specified default lines:

  • Lending/templates/DataRow_DefaultRequest.html (default lines 14, 21, 22, 24, 26, 27, 36)
  • templates/DataRow_CheckedOutItems.html (default lines 45, 58)
  • templates/DataRow_DefaultRequest.html (default lines 14, 45, 58)
  • templates/DataRow_ElectronicDelivery.html (default lines 22, 42)
  • templates/DataRow_ElectronicDeliveryUndelete.html (default line 28)

14 February 2022 Web Page Changes

Accessibility Fixes for Screen Readers

These changes impact a large number of web pages. To implement the changes, please overwrite your default web pages with the updated files and reapply your customizations, or make the changes manually on each page if your customizations are extensive.

The ILLiad default web pages were updated with a number of changes to increase accessibility for screen reader users. Included along with these changes were several additional miscellaneous fixes to improve accessibility and the user experience. The specific changes vary for each file and affect over 80 web pages. Considering the large scope of changes, we are providing a few different resources on this page to assist you with applying the changes to your web page files. 

Code Comparison Files | Description of Changes

Code Comparison Files

To assist you with making these changes manually to your web pages, an HTML file containing the detailed code changes for each web page file is available for download:

After downloading the HTML file, you can double-click the downloaded file to open it up in your default web browser, then follow the instructions below to learn how to use the file to make your web pages changes.

Using the Code Comparision Files

Included in the HTML file, you will see a comparison pane for each web page with the old code displayed on the left and the new code displayed on the right, and the specific code changes highlighted in red font against a red background. Line numbers are also included for each web page file to assist you with making the changes. The HTML file will display the web pages in alphabetical order. You can find the filename at the top of each comparison pane. It is recommended to go through each web page included in the file in order and follow the displayed code comparisons to apply the changes. You can find the complete list of web pages included in the code comparison HTML file underneath the image below.

Code comparison example:

CodeComparison.png

Affected Web Pages

A complete list of the web pages included in each HTML file can be found below:

Click here for the list of affected default web pages
  • css\illiad.css  
  • Lending\css\illiad.css 
  • Lending\templates\DataRow_DefaultRequest.html  
  • Lending\AboutILLiad.html  
  • Lending\EditLendingGenericRequestArticle.html  
  • Lending\EditLendingGenericRequestLoan.html
  • Lending\include_footer.html
  • Lending\include_header.html  
  • Lending\LendingChangePassword.html
  • Lending\LendingFAQ.html  
  • Lending\LendingFirstTime.html  
  • Lending\LendingForgotPassword.html  
  • Lending\LendingGenericRequestArticle.html  
  • Lending\LendingGenericRequestLoan.html  
  • Lending\LendingLogon.html  
  • Lending\LendingLogon2.html
  • Lending\LendingMainMenu.html
  • Lending\LendingNewPassword.html  
  • Lending\LendingNewUserRegistration.html  
  • Lending\LendingUpdateAddressInformation.html  
  • Lending\LendingViewAllRequests.html 
  • Lending\LendingViewDefaultDetailed.html 
  • Lending\LendingViewNotifications.html  
  • Lending\LendingViewNotificationsDetail.html
  • Lending\LendingViewOutstandingRequests.html  
  • Lending\LendingViewRenewCheckedOutItems.html  
  • Lending\LendingViewRequestHistory.html  
  • Lending\LendingViewResubmitCancelledRequests.html 
  • Lending\LendingViewSearchResults.html
  • Lending\SiteMap.html  
  • templates\DataRow_CheckedOutItems.html  
  • templates\DataRow_DefaultRequest.html  
  • templates\DataRow_ElectronicDelivery.html  
  • templates\DataRow_ElectronicDeliveryUndelete.html 
  • AboutILLiad.html 
  • ArticleRequest.html  
  • Blocked.html  
  • BookChapterRequest.html 
  • ChangePassword.html  
  • ChangeUserInformation.html  
  • ConferencePaperRequest.html 
  • DisavowedUsername.html 
  • EditAccountInformation.html  
  • EditArticleRequest.html
  • EditBookChapterRequest.html 
  • EditConferencePaperRequest.html 
  • EditGenericRequestTesting.html  
  • EditLoanRequest.html  
  • EditMultimediaRequest.html  
  • EditPatentRequest.html  
  • EditReportRequest.html  
  • EditStandardsDocumentRequest.html 
  • EditThesisRequest.html  
  • ElectronicDeliveryInformation.html  
  • ElectronicDeliveryUndelete.html 
  • Error.html  
  • FAQ.html  
  • FirstTime.html  
  • ForgotPassword.html 
  • GenericRequestTesting.html  
  • ILLiadMainMenu.html  
  • include_footer.html  
  • include_header.html  
  • LoanRequest.html  
  • Logon.html  
  • Logon2.html  
  • MultimediaRequest.html  
  • NewAuthRegistration.html  
  • NewPassword.html  
  • NewUserRegistration.html  
  • PatentRequest.html  
  • ReportRequest.html  
  • SiteMap.html
  • StandardsDocumentRequest.html  
  • ThesisRequest.html  
  • ViewAllRequests.html 
  • ViewDefaultDetailed.html 
  • ViewNotifications.html  
  • ViewNotificationsDetail.html 
  • ViewOutstandingRequests.html  
  • ViewRenewCheckedOutItems.html  
  • ViewRequestHistory.html 
  • ViewResubmitCancelledRequests.html 
  • ViewSearchResults.html  

Description of Changes

To provide additional clarity, a description of each type of change you will find in the new version of the web pages is provided below with accompanying examples. The list of web pages included in each change is also provided. This list can be used as a supplemental resource to understand the code changes in the HTML file provided above.

Add Header Classes to Default CSS | Increase Color Contrast for Text Classes and Elements | Create <main> Container Within Topmost <div> Container | Remove role="heading" Attribute from Inner <div> Container | Reorder Heading Element Levels Sequentially | Change Incorrect Heading Elements to <div> Elements | Change <div> Elements to <header> Elements | Correct Label in Standards Document Request Pages | Update Copyright Year | Add Web Page Version Information


Add Header Classes to Default CSS

Missing header classes have been added to the illiad.css files:

illiad.css & Lending\css\illiad.css  

Change this (default lines 13-20):

/*These are CSS classes for the headers*/
h1,h2,h3,h4,h5,h6  {
font-family: 'Open Sans', sans-serif;
}

h1,h2,h3,h4,h5  {
color:#08415c;
}
 

To this:

/*These are CSS classes for the headers*/
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
font-family: 'Open Sans', sans-serif;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
color:#08415c;
}

Increase Color Contrast for Text Classes and Elements

Color contrast for the "small-notes" class, "common-note" class, "req" class, <ul> and <p> elements was increased in the default CSS (illiad.css and Lending\illiad.css) to improve readability:

illiad.css

Change this:

p {
color: #868e96;
font-size: 16px;
padding: 10px;

}

[...]

ul {
color: #868e96;
font-size: 16px;
padding: 0 0 0 25px;
word-wrap: normal;
}

.small-notes {
color: #868e96;
font-size: 14px;
padding: 4px 0 0;
}

.common-note {
color: #868e96;
font-size: 16px;
padding: 6px 0px;
}

.req {
color: #c74827;
font-size: 12px;
padding:0 0 0 6px;
text-align: right;
}
 

To this:

p {
color: #5f5e5e;
font-size: 16px;
padding: 10px;

}

[...]

ul {
color: #5f5e5e;
font-size: 16px;
padding: 0 0 0 25px;
word-wrap: normal;
}

.small-notes {
color: #5f5e5e;
font-size: 14px;
padding: 4px 0 0;
}

.common-note {
color: #5f5e5e;
font-size: 16px;
padding: 6px 0px;
}

.req {
color: #b81f18;
font-size: 12px;
padding:0 0 0 6px;
text-align: right;
}

Create <main> Container Within Topmost <div> Container

Click here for the list of affected web pages (excluding the special cases noted below)
  • Lending\EditLendingGenericRequestArticle.html
  • Lending\EditLendingGenericRequestLoan.html
  • Lending\LendingChangePassword.html
  • Lending\LendingFAQ.html
  • Lending\LendingGenericRequestArticle.html
  • Lending\LendingGenericRequestLoan.html
  • Lending\LendingMainMenu.html
  • Lending\LendingNewUserRegistration.html
  • Lending\LendingUpdateAddressInformation.html
  • Lending\LendingViewAllRequests.html
  • Lending\LendingViewDefaultDetailed.html
  • Lending\LendingViewNotifications.html
  • Lending\LendingViewNotificationsDetail.html
  • Lending\LendingViewOutstandingRequests.html
  • Lending\LendingViewRenewCheckedOutItems.html
  • Lending\LendingViewRequestHistory.html
  • Lending\LendingViewResubmitCancelledRequests.html
  • Lending\LendingViewSearchResults.html
  • ArticleRequest.html
  • Blocked.html
  • BookChapterRequest.html
  • ChangePassword.html
  • ChangeUserInformation.html
  • ConferencePaperRequest.html
  • EditAccountInformation.html
  • EditLoanRequest.html
  • EditMultimediaRequest.html
  • EditPatentRequest.html
  • EditReportRequest.html
  • EditStandardsDocumentRequest.html
  • EditThesisRequest.html
  • ElectronicDeliveryInformation.html
  • ElectronicDeliveryUndelete.html
  • Error.html
  • FAQ.html
  • GenericRequestTesting.html
  • ILLiadMainMenu.html
  • LoanRequest.html
  • MultimediaRequest.html
  • NewAuthRegistration.html
  • PatentRequest.html
  • ReportRequest.html
  • StandardsDocumentRequest.html
  • ThesisRequest.html
  • ViewAllRequests.html
  • ViewDefaultDetailed.html
  • ViewNotifications.html
  • ViewNotificationsDetail.html
  • ViewOutstandingRequests.html
  • ViewRenewCheckedOutItems.html
  • ViewRequestHistory.html
  • ViewResubmitCancelledRequests.html
  • ViewSearchResults.html
  •  

Step one:

On many pages, a new <main> container has been created within the topmost <div> container surrounding the content of the page. This change entails:

  • Creating a new <main> tag directly below the topmost <div> container on the web page
  • Moving the id="content" and aria-label="Content" attributes from the <div> container to the new <main> element or adding these attributes to the <main> element if they were not present on the <div> container.
  • Removing role="heading" from the <div> container
  • Closing the <main> element with </main> - see step two below

See example:

Lending\EditLendingGenericRequestArticle.html  

Change this (default lines 9-14):

<body>
<#INCLUDE filename="include_header.html">
<#INCLUDE filename="include_menu.html">

<div id="content" class="container"
role="heading" aria-label="Content">
<form action="illiadlending.dll" method="post"
name="EditLendingGenericRequestArticle">
 

To this:

<body>
<#INCLUDE filename="include_header.html">
<#INCLUDE filename="include_menu.html">

<div class="container">
<main id="content" aria-label="Content">
<form action="illiadlending.dll" method="post"
name="EditLendingGenericRequestArticle">

Step two:

The <main> container should then be closed with a </main> tag just before the footer and the closing </div> tag for the topmost <div> container on the page (this will be the last </div> tag you see on the page ). See example:

Lending\EditLendingGenericRequestArticle.html  

Change this (default lines 203-210):

<#INCLUDE filename="include_request_cited.html"> 
<#INCLUDE filename="include_request_buttons.html">
</fieldset>
</form>
 
<#INCLUDE filename="include_footer.html">
</div>
</body>
</html>
 

To this:

<#INCLUDE filename="include_request_cited.html"> 
<#INCLUDE filename="include_request_buttons.html">
</fieldset>
</form>
</main>
<#INCLUDE filename="include_footer.html">
</div>
</body>
</html>

*Special Cases*

The <main> container will wrap around content a bit differently on the following pages due to differences in the structures of the files. Please follow the example for each page below to implement the changes on these web page files.

Lending\AboutILLiad.html & AboutILLiad.html

The <div> tag directly under the first <div> container should be changed to a <main> container with the closing </div> tag also changing to a closing </main> tag. See example from Lending/AboutILLiad.html:

Change this (default lines 13-24/13-26):

<div class="container">
<div id="content">
<div class="form-group col-md-12">
<div class="mt-5 mb-3">OCLC ILLiad
is a model, implemented in software,
of the interlibrary loan process.</div>

<div class="mt-3 mb-5">Developed in
the ILL Department at Virginia Tech,
it is the only ILL product as a result of
ILL staff review of the entire ILL operation.
The result is a superior product which
encompasses every action in the ILL process,
producing a highly efficient and effective
work environment. This environment enhances
customer service while significantly
reducing costs and staff workload.
</div>
</div>

</div>
 

To this:

<div class="container">
<main id="content" aria-label="Content">
<div class="form-group col-md-12">
<div class="mt-5 mb-3">OCLC ILLiad
is a model, implemented in software,
of the interlibrary loan process.</div>

<div class="mt-3 mb-5">Developed in
the ILL Department at Virginia Tech,
it is the only ILL product as a result of
ILL staff review of the entire ILL operation.
The result is a superior product which
encompasses every action in the ILL process,
producing a highly efficient and effective
work environment. This environment enhances
customer service while significantly
reducing costs and staff workload.
</div>
</div>

</main>

Lending\LendingFirstTime.html  & FirstTime.html

The <main> container will  be placed within the <div> container wrapping around the <form> elements. The </main> tag should then be placed just below the </form> tag and above the footer near the bottom of the page. See example from LendingFirstTime.html:

Change this (default lines 22-24/19-21):

<div id="content" class="container" 
role="heading" aria-label="Content">
<form action="illiadlending.dll"
method="post" name="Logon">
<input type="hidden" name="ILLiadForm"
value="Logon">
 

To this:

<div class="container">
<main id="content" aria-label="Content">
<form action="illiadlending.dll"
method="post" name="Logon">
<input type="hidden" name="ILLiadForm"
value="Logon">

Lending\LendingForgotPassword.html  & ForgotPassword.html

The <main> container will be placed within the <div> container under the <#STATUS> tag. The </main> tag should then be added just below the </form> tag and above the footer at the bottom of the web page. See example from LendingForgotPassword.html:

Change this (default lines 12-17):

<div id="status" class="container">
<#STATUS>
</div>

<div class="container">
 
<form action="illiadlending.dll"
method="post" name="ForgotPassword">
 

To this:

<div id="status" class="container">
<#STATUS>
</div>

<div class="container">
<main id="content" aria-label="Content">
<form action="illiadlending.dll"
method="post" name="ForgotPassword">

Lending\LendingLogon.html & Logon.html

The <main> container will be placed below the <div> container wrapping around the <form> element. The </main> tag should then be added just above the footer near the bottom of the web page. See example from LendingLogon.html:

Change this (default lines 38-40/35-37):

<div class="container">
 
<form action="illiadlending.dll"
method="post" name="Logon">
<input type="hidden" name="ILLiadForm"
value="LendingLogon">
 

To this:

<div class="container">
<main id="content" aria-label="Content">
<form action="illiadlending.dll"
method="post" name="Logon">
<input type="hidden" name="ILLiadForm"
value="LendingLogon">

 Lending\LendingLogon2.html & Logon2.html

The <main> element should be placed just above the <div> element holding the <#STATUS> tag. The </main> tag should then be placed just above the footer near the bottom of the page.

Change this (default lines 15-18/19-22):

<div class="container">
 
<div id="status" class="container">
<#STATUS></div>

<form action="<#DLL>"
method="post" name="Logon">
 

To this:

<div class="container">
<main id="content" aria-label="Content">
<div id="status" class="container">
<#STATUS></div>

<form action="<#DLL>"
method="post" name="Logon">

Lending\LendingNewPassword.html, NewPassword.html & NewUserRegistration.html

The <main> element should be placed within the <div> container just below the <#STATUS> tag. The </main> tag should be added just below the </form> tag at the bottom of the web page. See example from LendingNewPassword.html:

Change this (default lines 12-17/12-17/12-14):

<div id="status" class="container">
<#STATUS></div>

<div id="content" class="container"
role="heading" aria-label="Content">
<form action="illiadlending.dll" method="post"
name="NewPassword">
 

To this:

<div id="status" class="container">
<#STATUS></div>

<div class="container">
<main id="content" aria-label="Content">
<form action="illiadlending.dll" method="post"
name="NewPassword">

Lending\SiteMap.html & SiteMap.html

The <main> element should be placed within the <div> container wrapping around the <div id="site-map> element:

Change this (default lines 18-21):

<div id="content" class="container" 
role="heading" aria-label="Content">
<div id="site-map"></div>
 
<#INCLUDE filename="include_footer.html">
 

To this:

<div class="container">
<main id="content" aria-label="Content">
<div id="site-map"></div>
</main>
<#INCLUDE filename="include_footer.html">

DisavowedUsername.html

The <div> container wrapping around the content of the page under the <#STATUS> tag should be changed to a <main> element:

Change this (default lines 12-19):

<div class="container">
<div id="status" aria-atomic="true">
<#STATUS></div>

<div id="content">
Please contact the Interlibrary Loan office
during normal business hours if you have
any questions.
</div>

<#INCLUDE filename="include_footer.html">
 

To this:

<div class="container">
<div id="status" aria-atomic="true">
<#STATUS></div>

<main id="content" aria-label="Content">
Please contact the Interlibrary Loan office
during normal business hours if you have
any questions.
</main>

<#INCLUDE filename="include_footer.html">

EditArticleRequest.html, EditBookChapterRequest.html & EditConferencePaperRequest.html

The <main> element should be added according to the standard instructions above, but the closing </div> tags should then be rearranged at the bottom of the page after adding the </main> tag. See example from EditArticleRequest.html:

Change this (default lines 174-183/187-196/176-185):

<#INCLUDE filename="include_request_cited.html"> 
<#INCLUDE filename="include_request_buttons.html">
</fieldset>
 
</form>
 
<#INCLUDE filename="include_footer.html">
</div>
</div>
</div>
</body>
</html>
 

To this:

<#INCLUDE filename="include_request_cited.html"> 
<#INCLUDE filename="include_request_buttons.html">
</fieldset>
</div>
</form>
</main>
<#INCLUDE filename="include_footer.html">
</div>
 
 
</body>
</html>

EditGenericRequestTesting.html

The <main> element should be added according to the standard instructions above, and one of the closing </div> tags should then be removed at the bottom of the page after adding the </main> tag:

Change this (default lines 164-172):

<#INCLUDE filename="include_request_cited.html"> 
<#INCLUDE filename="include_request_buttons.html">
</fieldset>
</form>
 
<#INCLUDE filename="include_footer.html">
</div>
</div>
</body>
</html>
 

To this:

<#INCLUDE filename="include_request_cited.html"> 
<#INCLUDE filename="include_request_buttons.html">
</fieldset>
</form>
</main>
<#INCLUDE filename="include_footer.html">
</div>
 
</body>
</html>

Remove role="heading" Attribute from Inner <div> Container

The role="heading" attribute has been removed from an inner <div> container on Lending\LendingLogon.html, Lending\LendingLogon2.html, and Logon2.html:

Change this (default line 65/43/47):

<div role="heading" class="container" 
aria-label="Account creation and password reset">
 

To this:

<div   class="container" 
aria-label="Account creation and password reset">

Reorder Heading Element Levels Sequentially 

Heading elements have been moved up a level (from h3 to h2) in order to present the levels sequentially (starting with h2) on Lending\LendingNewPassword.html, Lending\LendingViewNotificationDetails.html and ViewNotificationsDetail.html:

LendingViewNotificationDetails.html & ViewNotificationDetails.html

Change this (default line 14/15):

<h3 class="header-detailed">
Notification Information</h3>
 

To this:

<h2 class="header-detailed">
Notification Information</h2>

LendingNewPassword.html

Change this (default line 22):

<h3>Reset Password</h3>
 

To this:

<h2>Reset Password</h2>

Change Incorrect Heading Elements to <div> Elements

Click here for the list of affected web pages
  • Lending\templates\DataRow_DefaultRequest.html
  • templates\DataRow_CheckedOutItems.html
  • templates\DataRow_DefaultRequest.html
  • templates\DataRow_ElectronicDelivery.html
  • templates\DataRow_ElectronicDeliveryUndelete.html

Heading elements that were used on non-heading content have been changed to <div> elements on several DataRow template files. The heading element previously used was then added as a class attribute so that the appearance of the page remains the same. Follow the example from DataRow_DefaultRequest.html to make this change:

Change this (default lines 5-10):

<div class="col-lg-8 col-md-12">
<h4 class="card-title">
<a href="<#ACTION action='10' form='72'>
&amp;Value=<#DATAROW field='TransactionNumber'>
"><#DATAROW field='Title'></a>
</h4>
<h5 class="card-subtitle text-muted">
<#DATAROW field='Author'></h5>
</div>
 

To this:

<div class="col-lg-8 col-md-12">
<div class="h4 card-title">
<a href="<#ACTION action='10' form='72'>
&amp;Value=<#DATAROW field='TransactionNumber'>
"><#DATAROW field='Title'></a>
</div>
<div class="h5 card-subtitle text-muted">
<#DATAROW field='Author'></div>
</div>

Change <div> Elements to <header> Elements

The web page header contained in the Lending\include_header.html and include_header.html files has been changed to use an actual <header> element instead of a <div> element in order to provide a header landmark for screen readers. Follow the example from Lending\include_header.html to make this change:

Change this:

<div id="header">
<div>
<a href="#content" accesskey="S"
onclick="$('#content').focus();"
class="offscreen">Skip to Main Content</a>
</div>
<h1>
<a href="<#ACTION action='10' form='10'
class='header'>">ILLiad</a>
</h1>
</div>
 

To this:

<header id="header">
<div>
<a href="#content" accesskey="S"
onclick="$('#content').focus();"
class="offscreen">Skip to Main Content</a>
</div>
<h1>
<a href="<#ACTION action='10' form='10'
class='header'>">ILLiad</a>
</h1>
</header>

Correct Label in Standards Document Request Pages

An incorrect <label> element for the Title field was corrected on StandardsDocumentRequest.html and EditStandardsDocumentRequest.html:

Change this (default line 30):

<label for="StandardsDocumentTitle">
 

To this:

<label for="PhotoJournalTitle">

Update Copyright Year

Click here for the list of affected web pages
  • css\illiad.css  
  • Lending\css\illiad.css
  • Lending\include_footer.html
  • Lending\LendingLogon.html
  • include_footer.html
  • Logon.html

The copyright year was updated to 2022 on all affected web pages:

Lending\css\illiad.css & css\illiad.css

Change this (default line 4):

Copyright 2021 Atlas Systems, Inc. 
http://www.atlas-sys.com
 

To this:

Copyright 2022 Atlas Systems, Inc. 
http://www.atlas-sys.com

Lending\include_footer.html, include_footer.html, Lending\LendingLogon.html, & Logon.html

Change this (default line 3/3/81/75):

<div>&copy; 2021 <a href="http://www.atlas-sys.com"> 
Atlas Systems, Inc.</a> All Rights Reserved.</div>
 

To this:

<div>&copy; 2022 <a href="http://www.atlas-sys.com"> 
Atlas Systems, Inc.</a> All Rights Reserved.</div>

Add Web Page Version Information

Beginning with this release, a WebPageVersion.txt file is included with the ILLiad default web pages download that includes information about the current web page version. This information was also added to Lending\include_head.html and include_head.html (see below). After updating your web pages, this file can be downloaded and added to your web directory and the information can then be added to your include_head.html files as follows:

Lending\include_head.html & include_head.html

Add this (default line 1):

<meta data-name="illiad_wpv" data-bn="20220209.5" 
data-bid="19193" data-cid="d6736e0f654e42d315291225c2fac04d6cd54511" />

15 March 2022 Web Pages Changes

Add Labels to Notification Preference Selection Controls | Make "Skip to Main Content" Link Visible for Keyboard Users | Add "Skip to Main Content" Link to LendingFirstTime.html and Standardize Header | Standardize Header on Lending Logon Pages | Add Missing "head" Class to include_header.html

Add Labels to Notification Preference Selection Controls

Note: This fix is not supported for use in the Internet Explorer web browser. 

To add labels that can be read by screenreaders to the checkboxes and other buttons used by patrons to select their notification preferences, please overwrite your default include_notification_preferences.html file with the updated file or make the following changes:

include_notification_preferences.html

Change this (default lines 10-13):

<div class="row">
<div class="col-3 offset-5
offset-sm-6">
<h4  >Email</h4></div>
<div class="col-3">
<h4  >Text/SMS</h4></div>
</div>
 

To this:

<div class="row">
<div class="col-3 offset-5
offset-sm-6">
<h4 id="Account-Notification-Email-Label">Email</h4></div>
<div class="col-3">
<h4 id="Account-Notification-SMS-Label">Text/SMS</h4></div>
</div>

Change this (default lines 15-24):

<div class="row">
<div class="col-3 offset-6">
<a data-notification-check="Email"
data-notification-action="all"><input
class="btn btn-primary btn-md" type="button"
 
onclick='SelectAll("notification1")' value="All"
disabled/></a>
<a data-notification-check="Email"
data-notification-action="none"><input
class="btn btn-primary btn-md" type="button"
 
onclick='UnSelectAll("notification1")'
value="None" disabled/></a>
</div>
<div class="col-3">
<a data-notification-check="Text"
data-notification-action="all"><input
class="btn btn-primary btn-md" type="button"
 
onclick='SelectAll("notification2")'
value="All"/></a>
<a data-notification-check="Text"
data-notification-action="none"><input
class="btn btn-primary btn-md" type="button"
 
onclick='UnSelectAll("notification2")'
value="None"/></a>
</div>
</div>
 

To this:

<div class="row">
<div class="col-3 offset-6">
<a data-notification-check="Email"
data-notification-action="all"><input
class="btn btn-primary btn-md" type="button"
aria-label="Select all email options for account notifications"
onclick='SelectAll("notification1")' value="All"
disabled/></a>
<a data-notification-check="Email"
data-notification-action="none"><input
class="btn btn-primary btn-md" type="button"
aria-label="Unselect all email options for account notifications"
onclick='UnSelectAll("notification1")'
value="None" disabled/></a>
</div>
<div class="col-3">
<a data-notification-check="Text"
data-notification-action="all"><input
class="btn btn-primary btn-md" type="button"
aria-label="Select all text/sms options for account notifications"
onclick='SelectAll("notification2")'
value="All"/></a>
<a data-notification-check="Text"
data-notification-action="none"><input
class="btn btn-primary btn-md" type="button"
aria-label="Unselect all text/sms options for account notifications"
onclick='UnSelectAll("notification2")'
value="None"/></a>
</div>
</div>

Change this (default lines 26-30):

<div class="row">
<div class="col-6"  >
Notify me when my account has been cleared</div>
<div class="col-3"><input class="notification1"
type="checkbox" id="Placeholder_ClearedUser_Email"
name="Placeholder_ClearedUser_Email"
 
checked="checked" disabled="disabled"></div>
<div class="col-3"><input class="notification2"
type="checkbox" id="Notification_ClearedUser_SMS"
name="Notification_ClearedUser_SMS"
 
value="Yes"
<#CHECKED name='Notification_ClearedUser_SMS'>></div>
</div>
 

To this:

<div class="row">
<div class="col-6" id="ClearedUser-Label">
Notify me when my account has been cleared</div>
<div class="col-3"><input class="notification1"
type="checkbox" id="Placeholder_ClearedUser_Email"
name="Placeholder_ClearedUser_Email"
aria-labelledby="Account-Notification-Email-Label ClearedUser-Label"
checked="checked" disabled="disabled"></div>
<div class="col-3"><input class="notification2"
type="checkbox" id="Notification_ClearedUser_SMS"
name="Notification_ClearedUser_SMS"
aria-labelledby="Account-Notification-SMS-Label ClearedUser-Label"
value="Yes"
<#CHECKED name='Notification_ClearedUser_SMS'>></div>
</div>

Change this (default lines 32-36):

<div class="row">
<div class="col-6"  >
Notify me when I request a password reset</div>
<div class="col-3"><input class="notification1"
type="checkbox" id="Placeholder_PasswordReset_Email"
name="Placeholder_PasswordReset_Email"
 
checked="checked" disabled="disabled"></div>
<div class="col-3"><input class="notification2"
type="checkbox" id="Notification_PasswordReset_SMS"
name="Notification_PasswordReset_SMS"
 
value="Yes"
<#CHECKED name='Notification_PasswordReset_SMS'>></div>
</div>
 

To this:

<div class="row">
<div class="col-6" id="PasswordReset-Label">
Notify me when I request a password reset</div>
<div class="col-3"><input class="notification1"
type="checkbox" id="Placeholder_PasswordReset_Email"
name="Placeholder_PasswordReset_Email"
aria-labelledby="Account-Notification-Email-Label PasswordReset-Label"
checked="checked" disabled="disabled"></div>
<div class="col-3"><input class="notification2"
type="checkbox" id="Notification_PasswordReset_SMS"
name="Notification_PasswordReset_SMS"
aria-labelledby="Account-Notification-SMS-Label PasswordReset-Label"
value="Yes"
<#CHECKED name='Notification_PasswordReset_SMS'>></div>
</div>

Change this (default lines 44-47):

<div class="row">
<div class="col-3 offset-5 offset-sm-6">
<h4  >Email</h4></div>
<div class="col-3">
<h4  >Text/SMS</h4></div>
</div>
 

To this:

<div class="row">
<div class="col-3 offset-5 offset-sm-6">
<h4 id="Request-Notification-Email-Label">Email</h4></div>
<div class="col-3">
<h4 id="Request-Notification-SMS-Label">Text/SMS</h4></div>
</div>

Change this (default lines 49-58):

<div class="row">
<div class="col-3 offset-6">
<a data-notification-check="Email"
data-notification-action="all"><input
class="btn btn-primary btn-md" type="button"
 
onclick='SelectAll("notification3")'
value="All"/></a>
<a data-notification-check="Email"
data-notification-action="none"><input
class="btn btn-primary btn-md" type="button"
 
onclick='UnSelectAll("notification3")'
value="None"/></a>
</div>
<div class="col-3">
<a data-notification-check="Text"
data-notification-action="all"><input
class="btn btn-primary btn-md" type="button"
 
onclick='SelectAll("notification4")'
value="All"/></a>
<a data-notification-check="Text"
data-notification-action="none"><input
class="btn btn-primary btn-md" type="button"
 
onclick='UnSelectAll("notification4")'
value="None"/></a>
</div>
</div>
 

To this:

<div class="row">
<div class="col-3 offset-6">
<a data-notification-check="Email"
data-notification-action="all"><input
class="btn btn-primary btn-md" type="button"
aria-label="Select all email options for request notifications"
onclick='SelectAll("notification3")'
value="All"/></a>
<a data-notification-check="Email"
data-notification-action="none"><input
class="btn btn-primary btn-md" type="button"
aria-label="Unselect all email options for request notifications"
onclick='UnSelectAll("notification3")'
value="None"/></a>
</div>
<div class="col-3">
<a data-notification-check="Text"
data-notification-action="all"><input
class="btn btn-primary btn-md" type="button"
aria-label="Select all text/sms options for request notifications"
onclick='SelectAll("notification4")'
value="All"/></a>
<a data-notification-check="Text"
data-notification-action="none"><input
class="btn btn-primary btn-md" type="button"
aria-label="Unselect all text/sms options for request notifications"
onclick='UnSelectAll("notification4")'
value="None"/></a>
</div>
</div>

Change this (default lines 60-64):

<div class="row">
<div class="col-6"  >
Notify me when my request is ready for pickup</div>
<div class="col-3"><input type="checkbox"
class="notification3" id="Notification_RequestPickup_Email"
name="Notification_RequestPickup_Email"
 
value="Yes"
<#CHECKED name='Notification_RequestPickup_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestPickup_SMS"
name="Notification_RequestPickup_SMS"
 
value="Yes"
<#CHECKED name='Notification_RequestPickup_SMS'
default='True'>></div>
</div>
 

To this:

<div class="row">
<div class="col-6" id="RequestPickup-Label">
Notify me when my request is ready for pickup</div>
<div class="col-3"><input type="checkbox"
class="notification3" id="Notification_RequestPickup_Email"
name="Notification_RequestPickup_Email"
aria-labelledby="Request-Notification-Email-Label RequestPickup-Label
value="Yes"
<#CHECKED name='Notification_RequestPickup_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestPickup_SMS"
name="Notification_RequestPickup_SMS"
aria-labelledby="Request-Notification-SMS-Label RequestPickup-Label"
value="Yes"
<#CHECKED name='Notification_RequestPickup_SMS'
default='True'>></div>
</div>

Change this (default lines 67-71):

<div class="row">
<div class="col-6"  >
Notify me when my request has been shipped</div>
<div class="col-3"><input type="checkbox"
class="notification3" id="Notification_RequestShipped_Email"
name="Notification_RequestShipped_Email"
 
value="Yes"
<#CHECKED name='Notification_RequestShipped_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestShipped_SMS"
name="Notification_RequestShipped_SMS"
 
value="Yes"
<#CHECKED name='Notification_RequestShipped_SMS'
default='True'>></div>
</div>
 

To this:

<div class="row">
<div class="col-6" id="RequestShipped-Label">
Notify me when my request has been shipped</div>
<div class="col-3"><input type="checkbox"
class="notification3" id="Notification_RequestShipped_Email"
name="Notification_RequestShipped_Email"
aria-labelledby="Request-Notification-Email-Label RequestShipped-Label"
value="Yes"
<#CHECKED name='Notification_RequestShipped_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestShipped_SMS"
name="Notification_RequestShipped_SMS"
aria-labelledby="Request-Notification-SMS-Label RequestShipped-Label"
value="Yes"
<#CHECKED name='Notification_RequestShipped_SMS'
default='True'>></div>
</div>

Change this (default lines 74-78):

<div class="row">
<div class="col-6"  >
Notify me when my request has been delivered electronically
</div>
<div class="col-3"><input type="checkbox"
class="notification3"
id="Notification_RequestElectronicDelivery_Email"
name="Notification_RequestElectronicDelivery_Email"
 
value="Yes"
<#CHECKED name='Notification_RequestElectronicDelivery_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4"
id="Notification_RequestElectronicDelivery_SMS"
name="Notification_RequestElectronicDelivery_SMS"
 
value="Yes"
<#CHECKED name='Notification_RequestElectronicDelivery_SMS'
default='True'>></div>
</div>
 

To this:

<div class="row">
<div class="col-6" id="RequestElectronicDelivery-Label">
Notify me when my request has been delivered electronically
</div>
<div class="col-3"><input type="checkbox"
class="notification3"
id="Notification_RequestElectronicDelivery_Email"
name="Notification_RequestElectronicDelivery_Email"
aria-labelledby="Request-Notification-Email-Label RequestElectronicDelivery-Label"
value="Yes"
<#CHECKED name='Notification_RequestElectronicDelivery_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4"
id="Notification_RequestElectronicDelivery_SMS"
name="Notification_RequestElectronicDelivery_SMS"
aria-labelledby="Request-Notification-SMS-Label RequestElectronicDelivery-Label"
value="Yes"
<#CHECKED name='Notification_RequestElectronicDelivery_SMS'
default='True'>></div>
</div>

Change this (default lines 81-85):

<div class="row">
<div class="col-6"  >
Notify me when my checked out material is overdue</div>
<div class="col-3"><input type="checkbox"
class="notification3" id="Notification_RequestOverdue_Email"
name="Notification_RequestOverdue_Email"
 
value="Yes"
<#CHECKED name='Notification_RequestOverdue_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestOverdue_SMS"
name="Notification_RequestOverdue_SMS" value="Yes"
 
<#CHECKED name='Notification_RequestOverdue_SMS'
default='True'>></div>
</div>
 

To this:

<div class="row">
<div class="col-6" id="RequestOverdue-Label">
Notify me when my checked out material is overdue</div>
<div class="col-3"><input type="checkbox"
class="notification3" id="Notification_RequestOverdue_Email"
name="Notification_RequestOverdue_Email"
aria-labelledby="Request-Notification-Email-Label RequestOverdue-Label"
value="Yes"
<#CHECKED name='Notification_RequestOverdue_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestOverdue_SMS"
name="Notification_RequestOverdue_SMS" value="Yes"
aria-labelledby="Request-Notification-SMS-Label RequestOverdue-Label"
<#CHECKED name='Notification_RequestOverdue_SMS'
default='True'>></div>
</div>

Change this (default lines 88-92):

<div class="row">
<div class="col-6"  >
Notify me when my request has been cancelled</div>
<div class="col-3"><input type="checkbox"
class="notification3" id="Notification_RequestCancelled_Email"
name="Notification_RequestCancelled_Email"
 
value="Yes"
<#CHECKED name='Notification_RequestCancelled_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestCancelled_SMS"
name="Notification_RequestCancelled_SMS"
 
value="Yes"
<#CHECKED name='Notification_RequestCancelled_SMS'>></div>
</div>
 

To this:

<div class="row">
<div class="col-6" id="RequestCancelled-Label">
Notify me when my request has been cancelled</div>
<div class="col-3"><input type="checkbox"
class="notification3" id="Notification_RequestCancelled_Email"
name="Notification_RequestCancelled_Email"
aria-labelledby="Request-Notification-Email-Label RequestCancelled-Label"
value="Yes"
<#CHECKED name='Notification_RequestCancelled_Email'
default='True'>></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestCancelled_SMS"
name="Notification_RequestCancelled_SMS"
aria-labelledby="Request-Notification-SMS-Label RequestCancelled-Label"
value="Yes"
<#CHECKED name='Notification_RequestCancelled_SMS'>></div>
</div>

Change this (default lines 95-99):

<div class="row">
<div class="col-6"  >
Notify me when the library has other information about my request
</div>
<div class="col-3"><input type="checkbox"
id="Placeholder_RequestOther_Email"
name="Placeholder_RequestOther_Email"
 
checked="checked" disabled="disabled"></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestOther_SMS"
name="Notification_RequestOther_SMS"
 
value="Yes"
<#CHECKED name='Notification_RequestOther_SMS'>></div>
</div>
 

To this:

<div class="row">
<div class="col-6" id="RequestOther-Label">
Notify me when the library has other information about my request
</div>
<div class="col-3"><input type="checkbox"
id="Placeholder_RequestOther_Email"
name="Placeholder_RequestOther_Email"
aria-labelledby="Request-Notification-Email-Label RequestOther-Label"
checked="checked" disabled="disabled"></div>
<div class="col-3"><input type="checkbox"
class="notification4" id="Notification_RequestOther_SMS"
name="Notification_RequestOther_SMS"
aria-labelledby="Request-Notification-SMS-Label RequestOther-Label"
value="Yes"
<#CHECKED name='Notification_RequestOther_SMS'>></div>
</div>

Make "Skip to Main Content" Link Visible for Keyboard Users

To fix an issue where the "Skip to Main Content" link remains invisible when focused on by a user using keyboard controls, please overwrite your default illiad.css files with the updated files or make the following changes: 

  • Lending\css\illiad.css
  • css\illiad.css

Change this (303-309):

a.offscreen:focus{
position:relative;
clip:auto;
width:auto;
height:auto;
overflow:auto;
 
}
 

To this:

a.offscreen:focus{
position:relative;
clip:auto;
width:auto;
height:auto;
overflow:auto;
clip-path: none;
}

Add "Skip to Main Content" Link to LendingFirstTime.html and Standardize Header

To add the "Skip to Main Content" link to LendingFirstTime.html and to standardize the header on this page to use the <header> element, please overwrite your LendingFirstTime.html file with the updated file or make the following changes:

Lending\LendingFirstTime.html

Change this (default lines 12-14):

<div id="header"  >
 
 
 
<div id="title-name"><h1>ILLiad</h1></div>
</div>
 

To this:

<header id="header" class="head">
<div><a href="#content" accesskey="S"
onclick="$('#content').focus();"
class="offscreen">Skip to Main Content</a></div>
<div id="title-name"><h1>ILLiad</h1></div>
</header>

Standardize Header on Lending Logon Pages

To standardize the header used on the Lending Logon web pages in order to improve the experience for screen readers, please overwrite the following default files with the updated files or make the following changes below:

  • Lending\LendingLogon.html
  • Lending\LendingLogon2.html

Change this (default line 29-32, 10-13):

<div id="header"  >
<div><a href="#content" accesskey="S"
onclick="$('#content').focus();"
class="offscreen">Skip to Main Content</a></div>
<h1>ILLiad</h1>
</div>
 

To this:

<header id="header" class="head">
<div><a href="#content" accesskey="S"
onclick="$('#content').focus();"
class="offscreen">Skip to Main Content</a></div>
<h1>ILLiad</h1>
</header>

Add Missing "head" Class to include_header.html

To add the missing "head" class to the <header> element used in the include_header.html files, please overwrite the following default files with the updated file or make the following changes below:

  • Lending\include_header.html
  • include_header.html

Change this (default line 1):

<header id="header"  >
 

To this:

<header id="header" class="head">

 

Questions?

If this article didn’t resolve your issue, please contact Atlas Support for assistance:

Contact Support