0

I am a newbie so treat me gently.

I want to open an Highslide html window on load. I have seen an explanation on the old "Highsoft" site but cannot make it work.

Here is my test file without any script to make it open onload:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Open on load - test</title>
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-       8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</head>
<body>
<div>
<a href="#" onclick="return hs.htmlExpand(this, { 
        width: 400, creditsPosition: 'bottom left', 
        headingText: 'Stoke Gabriel Boating Association',     wrapperClassName: 'titlebar' } )">Inline HTML</a>
<div class="highslide-maincontent">
    <h3>Next Sailing Event</h3>
    The next sailing event will take place on June 23.
</div>
</div>
</body>
</html>

What do I need to do to make the Highslide window open onload as well as keeping the clickable link?

Best Wishes

Geoffrey

RoadRash
  • 881
  • 6
  • 9
gpocock
  • 1
  • 1
  • 2
  • If you want to open any window onload, you need to specify onload event in the body tag.. – Hiren Pandya May 07 '13 at 09:13
  • You don't need to specify an onload event in the body tag when using Highslide. See the answer from EarlyOut with the comment from me. – RoadRash May 07 '13 at 11:45

2 Answers2

2

First, you need to use the full Highslide script, not the stripped-down highslide-with-html.js version. Use highslide-full.js or highslide-full.min.js (a compressed version of the full script).

Next, your href needs a unique ID:

<a href="#" id="image1" onclick="return hs.htmlExpand....

The ID can be anything, as long as it's unique.

Finally, add this to the Highslide config options in your highslide.config.js file:

hs.addEventListener(window, "load", function() {
document.getElementById('image1').onclick();
});
hs.addEventListener(document, "ready", function() {
document.getElementById('image1').focus();
});
MisterNeutron
  • 3,359
  • 3
  • 17
  • 20
  • See this Highslide FAQ item: http://www.highslide.com/forum/viewtopic.php?f=4&t=1882 => A second method – if you want to open and existing anchor… Read the part about HTML expander. – RoadRash May 07 '13 at 11:41
0

A good way would be to make a function fire when the document is ready.

if (document.readyState === "complete") { window.open(URL,name,specs,replace) }

Extra information: Javascript - How to detect if document has loaded (IE 7/Firefox 3) http://www.w3schools.com/jsref/prop_doc_readystate.asp http://www.w3schools.com/jsref/met_win_open.asp

Community
  • 1
  • 1
Eirinn
  • 836
  • 1
  • 10
  • 23
  • note however that I am primarely a jQuery guy, but this should at the very least lead you in the right direction. You may also want to fire it on "interactive" and not "complete", but that would be based on your needs. – Eirinn May 07 '13 at 09:22