I have a weird one that I have managed to track down the cause of but not why... I have a (very rough!) test page at:
{Page No longer there}
On this page there is a image gallery and also a popup form for uploading images - it's probably easiest to "View Source" on that page (but I have included in case). The problem I have is all the ID's of the form become Null (and hence cannot be controlled by JS) after the form is viewed.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/includes/hs.css" media="screen, tv" />
<script type="text/javascript" src="/includes/hs/hs-full.js"></script>
<script type="text/javascript" src="/includes/hs_config.js"></script>
<script type="text/javascript">
hs.addSlideshow({
slideshowGroup: 'gallery1',
interval: 4000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: .75,
position: 'top right',
hideOnMouseOut: true
}
});
hs.transitions = ['expand', 'crossfade'];
</script>
</head>
<body>
<div id="pagebox">
<div><a href="#" onclick="alert(document.getElementById('uploadresults'));">JS Alert to Display document.getElementById('uploadresults')</a></div>
<div id="cartitle">
Porsche Boxster 2.7
</div>
<div id="carimages">
<div class="outline"><a id="zoomcontent1" class="highslide" href="/uploads/image/catalogue/iteml/4a.jpg" onclick="return hs.expand(this, {slideshowGroup: 'gallery1', wrapperClassName: 'photo-with-caption'})"><img class="cargal" src="/uploads/image/catalogue/items/4a.jpg" title="Porsche Boxster 2.7" alt="Porsche Boxster 2.7" width="100" height="75" /></a><a href="#" id="uploadlink1" onclick="return hs.htmlExpand(this, {contentId: 'imageupdform', wrapperClassName:'form-wrapper' }, { xxx: '4', yyy: '1' })"><img src="images/icons/change_image.gif" class="cmschange" alt="Image Edit" width="20" height="20" /></a></div>
<div class="outline"><a id="zoomcontent2" class="highslide" href="/uploads/image/catalogue/iteml/4b.jpg" onclick="return hs.expand(this, {slideshowGroup: 'gallery1', wrapperClassName: 'photo-with-caption'})"><img class="cargal" src="/uploads/image/catalogue/items/4b.jpg" title="Porsche Boxster 2.7" alt="Porsche Boxster 2.7" width="100" height="75" /></a><a href="#" id="uploadlink2" onclick="return hs.htmlExpand(this, {contentId: 'imageupdform', wrapperClassName:'form-wrapper' }, { xxx: '4', yyy: '2' })"><img src="images/icons/change_image.gif" class="cmschange" alt="Image Edit" width="20" height="20" /></a></div>
</div>
<div id="closebutton" class="highslide-overlay closebutton" onclick="return hs.close(this)" title="Close"></div>
</div>
<div id="imageupdform" class="highslide-html-content imageupd">
<h3 class="formtitle">Image Upload</h3>
<div id="uploadresults" style="color:#c00;">Error message here</div>
<form id="frmimageupd" action="/admin/processupload.asp" enctype="multipart/form-data" method="post">
<p><label>Image Name:</label><input type="file" name="uploadedfile" /></p>
<p><input type="submit" name="upload" value="Process" class="btn uploadbtn" /></p>
</form>
</div>
</body>
</html>
To see this is action:
- 1. load up the page above
2. click the link "JS Alert to Display document.getElementById" - see the JS popup says [object HTMLDivElement]
now...
- 3. Click on the little edit icon (not the cars!) to see the popup form.
4. Just close that form (click background or the Close button), do not click the Process button
5. Now click the link "JS Alert to Display document.getElementById" again - this time it says "Null - i.e. no ID found."
Code: Select all
hs.Expander.prototype.onAfterClose = function (sender) {
if(this.a.id=='uploadlink') {
document.getElementById('uploadresults').style.display = 'none';
}
}
I have found a fix and that is to remove the line:
Code: Select all
hs.transitions = ['expand', 'crossfade'];
Why does the settings the transitions cause the Popup Form to lose all it's ID's?
Cheers
Rob