dhebert
Posts: 4
Joined: Tue Mar 14, 2017 8:37 pm

HTML Expand not displaying content with multiple instances

I have multiple instances of htmlExpand on a page. One opens fine and displays all content, the remaining two open and display the header text, but do not display any content. Below is my code:

<a href="#" onClick="return hs.htmlExpand(this, { width: 450, headingText: 'Project Types and Definitions', wrapperClassName: 'titlebar' } )"><img src="../../images/ico_infocentre_sm.gif" width="15" height="15" border="0" title="Click for more information"/></a><div class="highslide-maincontent"><span style="text-align:left;font-size:12px;"><table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<th width="31%" height="30"><p align="center"><strong>Project Type</strong></p></th>
<th width="69%" style="padding-left:15px;">Definition</th>
</tr>
<tr class="shade">
<th>New Application / System</th>
<td style="padding-left:15px;">Request to implement a new application, group of interdependent applications and services (system), or operating systems.
</td>
</tr>
<tr>
<th>Upgrade Application / System</th>
<td style="padding-left:15px;">Request to update an existing application, group of interdependent applications and services (system), or operating systems.
</td>
</tr>
<tr class="shade">
<th>Application / System Enhancement</th>
<td style="padding-left:15px;">Request to modify an existing application, group of interdependent applications and services (system), or operating systems to provide new features or services.
</td>
</tr>
<tr>
<th>New Hardware / Infrastructure</th>
<td style="padding-left:15px;">Request to implement new hardware to support an application, group of interdependent applications and services (system), or operating systems.
</td>
</tr>
<tr class="shade">
<th>Upgrade Hardware / Infrastructure</th>
<td style="padding-left:15px;">Request to update or replace existing hardware to support an application, group of interdependent applications and services (system), or operating systems.
</td>
</tr>
<tr>
<th>Facility New Build</th>
<td style="padding-left:15px;">Request for IT to support the build and implementation of all infrastructure, hardware, and software components to support a new facility.
</td>
</tr>
<tr class="shade">
<th>Facility Redesign / Move</th>
<td style="padding-left:15px;">Request for IT to support the build and implementation of all infrastructure, hardware, and software components to support a facility redesign or move.
</td>
</tr>
<tr>
<th>New Service Line / Clinic </th>
<td style="padding-left:15px;">Request for IT to support the build and implementation of all infrastructure, hardware, and software components to support a facility new service line or clinic.
</td>
</tr>
<tr class="shade">
<th>Process Design / Improvement</th>
<td style="padding-left:15px;">Request for IT to support the investigation and design of a new process or new procedures that align with TSRH strategic objectives.
</td>
</tr>
</tbody>
</table></span></div>

<a href="#" onclick="return hs.htmlExpand(this, { width: 350, headingText: 'Shoulder Injuries', wrapperClassName: 'titlebar' } )">click here</a>
<div class="highslide-maincontent"><img src="../../images/ico_infocentre_sm.gif" width="15" height="15" title="Click for more information" border="0"/></div>
<table width="100%" cellpadding="2" cellspacing="0" border="0" bgcolor="#000">

<tr>
<th width="9%" height="30"><p align="center"><strong>Level</strong></p></th>
<th width="91%" style="padding-left:15px;">Definition</th>
</tr>
<tr class="shade">
<th><p align="center"><strong>Low</strong></p></th>
<td><ul>
<li>The project only impacts one department or is purely cosmetic in nature. Little or no decision making is required in the course of the project.</li>
<li>The project involves only one system/module and requires no interfaces.</li>
<li>The project will have minimal impact on patient care or operations.</li>
</ul></td>
</tr>
<tr>
<th><p align="center"><strong>Moderate</strong></p></th>
<td><ul>
<li>The project impacts two or more departments requiring consensus and decision making across stakeholders.</li>
<li>The project may involve multiple applications and/or interfaces.</li>
<li>The project will have some impact on patient care or operations.</li>
</ul></td>
</tr>
<tr class="shade">
<th><p align="center"><strong>High</strong></p></th>
<td><ul>
<li>The project impacts many departments and multiple systems. Decisions are required from multiple stakeholder groups.</li>
<li>The project will have a dramatic impact on patient care or operations.</li>
</ul>
</td>
</tr>

</table></div>
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: HTML Expand not displaying content with multiple instanc

A link to a live page would be more helpful.
dhebert
Posts: 4
Joined: Tue Mar 14, 2017 8:37 pm

Re: HTML Expand not displaying content with multiple instanc

Sorry, but it is on an internal site. Is there any particular line of code that would be helpful? I can include the HTML from the entire page if needed.
dhebert
Posts: 4
Joined: Tue Mar 14, 2017 8:37 pm

Re: HTML Expand not displaying content with multiple instanc

Here is the entire page. The first reference to hs.HTMLExpand works fine, but the second and third are empty.

<%@ Language=VBScript %>
<% option explicit %>
<%Response.Buffer = true%>
<html>
<head>
<title>SDM Request Form</title>
<meta name="robots" content="index,nofollow">
<link rel="stylesheet" type="text/css" href="/intranet/styles/main.css" media="screen">
<link rel="stylesheet" type="text/css" href="/intranet/styles/main_print.css" media="print">
<script type="text/javascript" src="/intranet/scripts/date_picker.js"></script>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function validate1(field) {
var valid = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_-+={}[]|:;<>. ?/\\"
var ok = "yes";
var temp;
for (var i=0; i<field.value.length; i++) {
temp = "" + field.value.substring(i, i+1);
if (valid.indexOf(temp) == "-1") ok = "no";
}
if (ok == "no") {
alert("Invalid entry! Please do not include apostrophes or commas in your filename.");
field.focus();
field.select();
field.outerHTML=field.outerHTML

}

}
// End -->
</script>

<script Language="JavaScript"><!--
function validate(theForm)
{

if (theForm.OwnerFirstName.value == ""||theForm.OwnerFirstName.value == "FIRST")
{
alert("The Owner First Name field is required.");
theForm.OwnerFirstName.focus();
return (false);
}

if (theForm.OwnerLastName.value == ""||theForm.OwnerLastName.value == "LAST")
{
alert("The Owner Last Name field is required.");
theForm.OwnerLastName.focus();
return (false);
}

if (theForm.OwnerEmail.value == "")
{
alert("The owner email address field is required.");
theForm.OwnerEmail.focus();
return (false);
}

if (theForm.Department.value == "")
{
alert("Select a Department from the dropdown menu.");
theForm.Department.focus();
return (false);
}

if (theForm.DeptDirector.value == "")
{
alert("The Department Director field is required.");
theForm.DeptDirector.focus();
return (false);
}

if (theForm.ProjectDescription.value == "")
{
alert("A description of the project is required.");
theForm.ProjectDescription.focus();
return (false);
}

if (theForm.ProjectType.value == "")
{
alert("Select a Project Type from the dropdown menu.");
theForm.ProjectType.focus();
return (false);
}

if (theForm.DepartmentsImpacted.value == "")
{
alert("At least one department must be selected from the Department(s) Impacted dropdown menu.");
theForm.DepartmentsImpacted.focus();
return (false);
}

if (theForm.ProjectComplexity.value == "")
{
alert("Select a Project Complexity from the dropdown menu.");
theForm.ProjectComplexity.focus();
return (false);
}

if (theForm.ProjectSize.value == "")
{
alert("Select a Project Size from the dropdown menu.");
theForm.ProjectSize.focus();
return (false);
}

if (theForm.EstimatedCost.value == "")
{
alert("An esitimated cost is required.");
theForm.EstimatedCost.focus();
return (false);
}

if (theForm.EstimatedNumResources.value == "")
{
alert("An esitimated number of resources is required.");
theForm.EstimatedNumResources.focus();
return (false);
}

if (theForm.BusinessCaseSigned.value == "")
{
alert("Indicate if you have a signed business case.");
theForm.BusinessCaseSigned.focus();
return (false);
}

var InvForm = document.forms.theForm;
var SelBranchVal = "";
var x = 0;

for (x=0; x < InvForm.DepartmentsImpacted.length; x++)
{
if (InvForm.DepartmentsImpacted[x].selected)
{
//alert(InvForm.SelBranch[x].value);
SelBranchVal = SelBranchVal + InvForm.DepartmentsImpacted[x].value+ "," ;
}
}

// alert(SelBranchVal);
InvForm.h_Departments.value=SelBranchVal;
//alert(InvForm.h_Departments.value);

return (true);
}

function xSubmit(form) {
if (validate(form) == true) {
//form.btnSubmit.value = "Please wait...";
disable(form.btnSubmit);
form.submit();
}
}

function disable(btn) {
if (typeof btn.disabled != 'undefined') {
// NS6 and IE return boolean for typeof btn.disabled,
// so we're here if it's NS6 or IE
btn.disabled = true;
// button is now disabled until the page reloads
} else {
// at least NS4 returns 'undefined' for typeof btn.disabled
// other browsers may as well
btn.onfocus = function () { this.blur(); }
btn.onclick = function () { return false; }
// button is now disabled in NS4 until page reloads
}
//btn.value = 'Saving';
btn.value = 'Submitting your file...';
}

//--></script>


<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="/intranet/highslide/highslide.css" />
<script type="text/javascript" src="/intranet/highslide/highslide-with-html.js"></script>
<script type="text/javascript" src="/intranet/highslide/highslidePrint.js"></script>
<script type="text/javascript" src="/intranet/highslide/highslide.config.js" charset="utf-8"></script>
<script type="text/javascript" src="/intranet/highslide/highslide.js" charset="utf-8"></script>
<script type="text/javascript" src="/intranet/highslide/highslide.packed.js"></script>
</head>

<body>


<!--stopindex-->
<!--include virtual="/intranet/include/topnavs/intra_home_clear.asp" -->
<!--#include file="includes/DeptDropDown.asp" -->
<!--#include file="includes/DeptMultiDropDown.asp" -->


<table border="0" cellpadding="2" cellspacing="0" width="650">
<tr>
<td width="134" height="50" class="popuptitle">Project Request Form<br></td>
<td>&nbsp;</td>
</tr>
</table>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<% if request("error") <> "" then %>
<p class="smallfont" style="margin-top: 20px;color:#F00"><strong><% response.write(request("error")) %></strong></p>
<% end if %>
<p style="margin-top:15px;">Use this form to submit your project request....</p>
<form enctype="multipart/form-data" method="post" name="theForm" action="action.asp" onSubmit="return false;">


<table width="100%" border="0" cellspacing="0" cellpadding="2">

<tr>
<td width="10%" align="right" class="smallfont">&nbsp;</td>
<td colspan="3" align="right" class="smallfont"><strong><a href="default.asp">reset form</a></strong></td>
</tr>
<tr>
<th height="25" colspan="4" align="left" class="smallfont" style="padding-left:20px;"><strong>Project Owner Information</strong></th>
</tr>
<tr>
<td height="10" colspan="4" class="smallfont"></td>
</tr>
<tr>
<td align="right" class="smallfont"><strong>Name:&nbsp;</strong></td>
<td width="39%" class="smallfont"><input name="OwnerFirstName" id="OwnerFirstName" type="text" TABINDEX="1" value="<%=strOwnerFirstName%>" size="20" onfocus="this.select();">
<input name="OwnerLastName" type="text" value="<%=strOwnerLastName%>" size="25" TABINDEX="2" onfocus="this.select();"></td>
<td width="18%" align="right" class="smallfont"><strong>Email Address:&nbsp;</strong></td>
<td width="33%" class="smallfont"><input name="OwnerEmail" id="FirstName" type="text" value="<%=strOwnerEmail%>" size="40" TABINDEX="3"></td>
</tr>

<tr>
<td align="right" class="smallfont"><strong>Department:&nbsp;</strong></td>
<td class="smallfont"><% 'print dropdown form element to page
dim strDeptDropdown
strDeptDropdown = buildDeptDropDownOptions(strDepartment) 'puts dropdown options into string %>
<% call buildDeptDropDown(strDeptDropdown,"Department") %></td>
<td width="18%" align="right" class="smallfont"><strong>Department Director:&nbsp;</strong></td>
<td class="smallfont"><input name="DeptDirector" type="text" value="<%=strDeptDirector%>" size="35" TABINDEX="5"></td>
</tr>
<tr>
<td height="10" colspan="4" align="left" class="smallfont" style="padding-left:20px;"></td>
</tr>
<tr>
<th height="25" colspan="4" align="left" class="smallfont" style="padding-left:20px;"><strong>Project Information</strong></th>
</tr>
<tr>
<td height="10" colspan="4" align="left" class="smallfont" style="padding-left:20px;"></td>
</tr>
<tr>
<td colspan="4" align="left" class="smallfont"><strong>Project Request Description</strong><br>
<textarea name="ProjectDescription" cols="77" rows="5" class="smallfont" TABINDEX="6"><%=strProjectDescription%></textarea></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" class="smallfont" style="padding-top:10px;"><strong>Project Type:&nbsp;</strong>
<select name="ProjectType" id="select" TABINDEX="7">
<% if strProjectType="" or strProjectType="Select ->" then %>
<option selected>Select -></option>
<% else %>
<option >Select -></option>
<% end if %>
<% if strProjectType="New Application/System" then %>
<option value="New Application/System" selected>New Application/System</option>
<% else %>
<option value="New Application/System">New Application/System</option>
<% end if %>
<% if strProjectType="Upgrade Application/System" then %>
<option value="Upgrade Application/System" selected>Upgrade Application/System</option>
<% else %>
<option value="Upgrade Application/System">Upgrade Application/System</option>
<% end if %>
<% if strProjectType="Application/System Enhancement" then %>
<option value="Application/System Enhancement" selected>Application/System Enhamcement</option>
<% else %>
<option value="Application/System Enhancement">Application/System Enhamcement</option>
<% end if %>

<% if strProjectType="New Hardware/Infrastructure" then %>
<option value="New Hardware/Infrastructure" selected>New Hardware/Infrastructure</option>
<% else %>
<option value="New Hardware/Infrastructure">New Hardware/Infrastructure</option>
<% end if %>

<% if strProjectType="Upgrade Hardware/Infrastructure" then %>
<option value="Upgrade Hardware/Infrastructure" selected>Upgrade Hardware/Infrastructure</option>
<% else %>
<option value="Upgrade Hardware/Infrastructure">Upgrade Hardware/Infrastructure</option>
<% end if %>

<% if strProjectType="Facility New Build" then %>
<option value="Facility New Build" selected>Facility New Build</option>
<% else %>
<option value="Facility New Build">Facility New Build</option>
<% end if %>

<% if strProjectType="Facility Redesign/Move" then %>
<option value="Facility Redesign/Move" selected>Facility Redesign/Move</option>
<% else %>
<option value="Facility Redesign/Move">Facility Redesign/Move</option>
<% end if %>

<% if strProjectType="New Service Line/Clinic" then %>
<option value="New Service Line/Clinic" selected>New Service Line/Clinic</option>
<% else %>
<option value="New Service Line/Clinic">New Service Line/Clinic</option>
<% end if %>

</select>
<a href="#" onClick="return hs.htmlExpand(this, { width: 450, headingText: 'Project Types and Definitions', wrapperClassName: 'titlebar' } )"><img src="../../images/ico_infocentre_sm.gif" width="15" height="15" border="0" title="Click for more information"/></a><div class="highslide-maincontent"><span style="text-align:left;font-size:12px;"><table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<th width="31%" height="30"><p align="center"><strong>Project Type</strong></p></th>
<th width="69%" style="padding-left:15px;">Definition</th>
</tr>
<tr class="shade">
<th>New Application / System</th>
<td style="padding-left:15px;">Request to implement a new application, group of interdependent applications and services (system), or operating systems.
</td>
</tr>
<tr>
<th>Upgrade Application / System</th>
<td style="padding-left:15px;">Request to update an existing application, group of interdependent applications and services (system), or operating systems.
</td>
</tr>
<tr class="shade">
<th>Application / System Enhancement</th>
<td style="padding-left:15px;">Request to modify an existing application, group of interdependent applications and services (system), or operating systems to provide new features or services.
</td>
</tr>
<tr>
<th>New Hardware / Infrastructure</th>
<td style="padding-left:15px;">Request to implement new hardware to support an application, group of interdependent applications and services (system), or operating systems.
</td>
</tr>
<tr class="shade">
<th>Upgrade Hardware / Infrastructure</th>
<td style="padding-left:15px;">Request to update or replace existing hardware to support an application, group of interdependent applications and services (system), or operating systems.
</td>
</tr>
<tr>
<th>Facility New Build</th>
<td style="padding-left:15px;">Request for IT to support the build and implementation of all infrastructure, hardware, and software components to support a new facility.
</td>
</tr>
<tr class="shade">
<th>Facility Redesign / Move</th>
<td style="padding-left:15px;">Request for IT to support the build and implementation of all infrastructure, hardware, and software components to support a facility redesign or move.
</td>
</tr>
<tr>
<th>New Service Line / Clinic </th>
<td style="padding-left:15px;">Request for IT to support the build and implementation of all infrastructure, hardware, and software components to support a facility new service line or clinic.
</td>
</tr>
<tr class="shade">
<th>Process Design / Improvement</th>
<td style="padding-left:15px;">Request for IT to support the investigation and design of a new process or new procedures that align with TSRH strategic objectives.
</td>
</tr>
</tbody>
</table></span></div></td>
<td colspan="2" rowspan="4" align="left" valign="top" class="smallfont" style="padding-top:10px;padding-left:20px;"><strong>Department(s) Impacted: </strong><br>
(Ctl+click to select multiple departments)<br>
<% strDeptMultiDropdown = buildMultiDeptDropDownOptions(strMultiDept)
call buildDeptMultiDropDown(strDeptMultiDropdown,"DepartmentsImpacted")
%>
<input type="hidden" name="h_Departments">
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" class="smallfont" style="padding-left:10px;padding-top:10px;background-color: #ADADAD;"><p><strong>Project Complexity:&nbsp;</strong><select name="ProjectComplexity" TABINDEX="8">
<% if strProjectComplexity="" or strProjectComplexity="Select ->" then %>
<option selected>Select -></option>
<% else %>
<option>Select -></option>
<% end if %>
<% if strProjectComplexity="Low" then %>
<option value="Low" selected>Low</option>
<% else %>
<option value="Low">Low</option>
<% end if %>

<% if strProjectComplexity="Low" then %>
<option value="Moderate" selected>Moderate</option>
<% else %>
<option value="Moderate">Moderate</option>
<% end if %>

<% if strProjectComplexity="Low" then %>
<option value="High" selected>High</option>
<% else %>
<option value="High">High</option>
<% end if %>

</select>
<a href="#" onclick="return hs.htmlExpand(this, { width: 350, headingText: 'Shoulder Injuries', wrapperClassName: 'titlebar' } )">hello</a><div class="highslide-maincontent">
<table width="100%" cellpadding="2" cellspacing="0" border="0">

<tr>
<th width="9%" height="30"><p align="center"><strong>Level</strong></p></th>
<th width="91%" style="padding-left:15px;">Definition</th>
</tr>
<tr class="shade">
<th><p align="center"><strong>Low</strong></p></th>
<td><ul>
<li>The project only impacts one department or is purely cosmetic in nature. Little or no decision making is required in the course of the project.</li>
<li>The project involves only one system/module and requires no interfaces.</li>
<li>The project will have minimal impact on patient care or operations.</li>
</ul></td>
</tr>
<tr>
<th><p align="center"><strong>Moderate</strong></p></th>
<td><ul>
<li>The project impacts two or more departments requiring consensus and decision making across stakeholders.</li>
<li>The project may involve multiple applications and/or interfaces.</li>
<li>The project will have some impact on patient care or operations.</li>
</ul></td>
</tr>
<tr class="shade">
<th><p align="center"><strong>High</strong></p></th>
<td><ul>
<li>The project impacts many departments and multiple systems. Decisions are required from multiple stakeholder groups.</li>
<li>The project will have a dramatic impact on patient care or operations.</li>
</ul>
</td>
</tr>

</table></div></td></tr>
<tr><td colspan="2" align="left" valign="top" class="smallfont" style="padding-left:10px;padding-top:10px;background-color: #ADADAD;">
<p style="margin-top:25px;margin-left:44px;"><strong>Project Size:&nbsp;</strong><select name="ProjectSize" TABINDEX="9">
<% if strProjectSize="" or strProjectSize="Select ->" then %>
<option selected>Select -></option>
<% else %>
<option>Select -></option>
<% end if %>
<% if strProjectSize="Low" then %>
<option value="Low" selected>Low</option>
<% else %>
<option value="Low">Low</option>
<% end if %>

<% if strProjectSize="Low" then %>
<option value="Moderate" selected>Moderate</option>
<% else %>
<option value="Moderate">Moderate</option>
<% end if %>

<% if strProjectSize="Low" then %>
<option value="High" selected>High</option>
<% else %>
<option value="High">High</option>
<% end if %>
</select> <a href="#" onClick="return hs.htmlExpand(this, { headingText: 'Project Size Matrix', wrapperClassName: 'titlebar' } )"><img src="../../images/ico_infocentre_sm.gif" width="15" height="15" title="Click for more information" border="0"/></a><div class="highslide-maincontent"><span style="text-align:left;font-size:12px;"><table width="100%" border="0" cellpadding="2">
<tbody>
<tr>
<th height="30" width="9%"><p align="center"><strong>Level</strong></p></th>
<th width="91%" style="padding-left:15px;">Definition</th>
</tr>
<tr class="shade">
<th><p align="center"><strong>Low</strong></p></th>
<td><ul>
<li>Resources - less than three to accomplish</li>
<li>Budget is less than or equal to $8,000</li>
<li>Timeline is over 80 hours but less than a month</li>
</ul></td>
</tr>
<tr>
<th><p align="center"><strong>Moderate</strong></p></th>
<td><ul>
<li>Resources - up to 5 at 75% or more</li>
<li>Budget is between $8,000 and $50,000</li>
<li>Timeline is expected to last between one and three months</li>
</ul></td>
</tr>
<tr class="shade">
<th><p align="center"><strong>High</strong></p></th>
<td><ul>
<li>Resources - requires more than 5 at 75% or more</li>
<li>Budget exceeds $50,000</li>
<li>Timeline is longer than three months</li>
</ul></td>
</tr>
</tbody>
</table></span></div></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" class="smallfont" style="padding-left:33px;"><strong>Estimated Cost: &nbsp;$</strong>
<input type="text" name="EstimatedCost" value="<%=strEstimatedCost%>" TABINDEX="10">
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" class="smallfont"><strong>Estimated Number of Required Resources:&nbsp;</strong>
<input name="EstimatedNumResources" type="text" size="4" value="<%=strEstimatedNumResources%>" TABINDEX="11"></td>
</tr>
<tr>
<td height="10" colspan="4" align="left" valign="top" class="smallfont"></td>
</tr>
<tr>
<td colspan="4" align="left" valign="top" class="smallfont"><strong>Project Business Case Signed:
</strong>
<% if strBusinessCaseSigned = "Yes" then %>
<input type="radio" name="BusinessCaseSigned" value="Yes" checked>
<% else %>
<input type="radio" name="BusinessCaseSigned" value="Yes">
<% end if %>

<strong>Yes</strong>

&nbsp;&nbsp;&nbsp;
<% if strBusinessCaseSigned = "No" or isNull(strBusinessCaseSigned) then %>
<input type="radio" name="BusinessCaseSigned" value="No" checked>
<% else %>
<input type="radio" name="BusinessCaseSigned" value="No">
<% end if %>
<strong>No</strong><br>
&nbsp;&nbsp;&nbsp;&nbsp;* Attach a copy of the business case to this request
</td>
</tr>

<tr>
<td colspan="5" align="right" class="smallfont">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr>
<td colspan="2" align="left" valign="top" bgcolor="#BBBBBB" class="smallfont" style="padding:10px;"><b><b><a name="files"></a></b>Upload Signed Business Case:</b> <br>
If you are having difficulties attaching your file, contact the <a href="mailto:[email protected]">TSRHC Webmaster</a>.</td>
</tr>
<tr bgcolor="#BBBBBB">
<td width="16%" align="left" class="smallfont"> <div align="right"><b>Business Case:&nbsp;</b></div></td>
<td width="84%"><input type="file" name="filetoupload" id="filetoupload" size="30" class="button" onBlur="validate1(this);">

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="smallfont" height="45" align="right">&nbsp;</td>
<td colspan="4" valign="bottom" class="smallfont">

<input type="submit" class="button" name="btnSubmit" value="submit" onClick="xSubmit(this.form)">

</td>
</tr>
</table>
</form>

<p><a href="#top"><img src="/intranet/images/ico_top.gif" alt="Go to Top" border="0"></a>
</p>
</td>
</tr>
</table>

</script>
</body>
</html>
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: HTML Expand not displaying content with multiple instanc

Sorry, but without access to a live site, I can't possibly guess what's wrong. I don't know what's in your CSS, I don't know what's in your non-Highslide Javascript, and so on.

There is no fundamental problem with opening multiple HTML expanders, each with its own inline header and content. The problem must lie elsewhere - I can't even begin to guess where.

But among other things, you're loading the Highslide JS script three friggin' times, in various flavors!! That's not going to work, ever.

Edit: Here's the very first thing to fix:

Code: Select all

<script type="text/javascript" src="/intranet/highslide/highslide-with-html.js"></script>
<script type="text/javascript" src="/intranet/highslide/highslidePrint.js"></script>
<script type="text/javascript" src="/intranet/highslide/highslide.config.js" charset="utf-8"></script>
<script type="text/javascript" src="/intranet/highslide/highslide.js" charset="utf-8"></script>
<script type="text/javascript" src="/intranet/highslide/highslide.packed.js"></script> 
You're loading high-with-html.js, which is just a subset of the full script. Then you're loading highslide.config.js, which changes some of the defaults. Then you're loading highslide.js, which is just another subset of the full script (with a lot of overlap with highslide-with-html). This will undo whatever customizations you did in highslide.config.js. Finally, you're loading highslide.packed.js, which is simply the packed version of highslide.js - in other words, it's identical. I don't know what highslidePrint.js is, since I can't see it.

What you want is just the full Highslide JS script. It's small, so there's nothing to be gained by trying to deal with a subset of it.

Code: Select all

<script type="text/javascript" src="/intranet/highslide/highslide-full.js"></script>
<script type="text/javascript" src="/intranet/highslide/highslidePrint.js"></script>
<script type="text/javascript" src="/intranet/highslide/highslide.config.js" charset="utf-8"></script>
Instead of highslide-full.js, you could use highslide-full.min.js, which is exactly the same thing, but minified for faster loading.

And if you eventually join the HTML5 world:

Code: Select all

<script src="/intranet/highslide/highslide-full.js"></script>
<script src="/intranet/highslide/highslidePrint.js"></script>
<script src="/intranet/highslide/highslide.config.js"></script>
(BTW, table-based layout, HTML with no DOCTYPE, deprecated tags, coding aimed at Netscape 4, etc.? It's not 1997 any longer, you know.)
dhebert
Posts: 4
Joined: Tue Mar 14, 2017 8:37 pm

Re: HTML Expand not displaying content with multiple instanc

Thanks for the response. Followed the instructions on the configurator when initially downloaded (quite a long time ago). I do realize that the layout is outdated, but we are in the process of migrating our intranet, so really did not see any reason in wasting time trying to update at this point. I will try stripping the extraneous highslide includes.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: HTML Expand not displaying content with multiple instanc

At this point, I'm not sure I'd trust the configurator to produce the final version of the code. Better to download the full zip file, the one with all of the scripts, examples, images, etc., and extract what you need from it. That one definitely is the final, patched version.

There are still some bugs in it that I've taken a stab at fixing on my own - an extraneous 1px border on iframes in IE, the non-disappearing thumbnail when you fade from one image to the next, and the slideshow that doesn't pause by itself when the visitor clicks on a thumbnail image. Never did figure out how to take care of a slightly clipped last thumbnail when using a vertical thumbstrip - RoadRash and I beat on that one repeatedly, and never cracked it. :shock:

Return to “Highslide JS Usage”