Search code examples
htmlhighslide

highslide: can I get multiple popups of the same html content?


I'm building a course site for my students, with different 'chapters' accessed from different links. I would like to be able to have two or more popups of the same page so I can view different parts of the same chapter side by side. Is this possible in highslide (I don't think it is...). Any solution, using highslide or not, would be appreciated!


Solution

  • Here's a jsfiddle demo that lets you open multiple HTML popups. In this case, both links are opening the same page of stuff, but that's just to keep the demo setup simple - normally you would have each link opening a different iframed page, but for your specific requirement, I guess you'd be opening the same page twice, just like this demo. Open the first link, then drag it by the header to one side, and open the second link.

    http://jsfiddle.net/MisterNeutron/Qk6U6/1/

    The code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Demo by MisterNeutron</title>
    <script type='text/javascript' src="http://highslide.com/highslide/highslide-full.js"></script>
    <link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
    <script type='text/javascript'>
    hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.wrapperClassName = 'draggable-header';
    </script>
    </head>
    <body>
    <div>
    <a id="thumb1" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">First iframe</a>
    <br><br>
    <a id="thumb2" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">Second iframe</a>
    </div>
    </body>
    </html>