Ho to keep Draggable-header moveable after adding icons

[gfw]

HI HS support:

I have been looking for a way to keep draggable header moveable after I add some icons (Print/close/move). Adding icons has completely disable the header area moveability. The only way is to click the move icon to move the window now. SInce the header area will be a blank area except three icons, this is a gloable template to be applied to all HTML pages.
Can you please share how to do that?

Thank you very much in advance
Gfw
===============================================
Below is the code I use for the page:

Code: Select all

<p><a href="../tasks/Profile_52_Remove_codec.html" onClick="return hs.htmlExpand(this, {outlineType: 'rounded-white',
         wrapperClassName: 'draggable-header',  objectType: 'iframe' , contentId: 'my-content'} )"
         class="highslide">Click to see  page with icons and Heading (Iframe with Browser style back and forward buttons)</a>   </p>
<div class="highslide-html-content" id="my-content">
           <a href="#" onClick="return hs.close(this)"> <img src="../../../../images/close.gif" alt="Close"/></a>
           <a href="#" onClick="return hs.getExpander(this).printIframe()"> <img src="../../../../images/print2.gif" alt="Print" /></a>
           <a class="highslide-move" href="#" onClick="return false"><img src="../../../../images/move-34-33.gif" alt="Move" /></a>
        <div class="highslide-body"></div>
        <div class="highslide-footer">
                  <div><span class="highslide-resize" title="Resize"></span></div>
        </div>
</div>

[gfw]

Just found a solution for this and thought about to share. Draggable header can be done with icons in the header by using following HS css tag, here's how it is done:

example:

Code: Select all

<p><a href="../tasks/popup.html" onClick="return hs.htmlExpand(this, {outlineType: 'rounded-white',
   wrapperClassName: 'draggable-header',  objectType: 'iframe', contentId: 'my-content'} )"
   class="highslide">Click to see  page with icons and draggable Heading (Iframe)</a>   </p>
<div class="highslide-html-content" id="my-content">
<div class="highslide-header">
<span class="highslide-move">
<!-- this is to make a blank header bar draggable -->
</span>   
<a href="#" onClick="return hs.getExpander(this).printIframe()"> <img align="absmiddle" src="../../../../../images/print.gif" title="Print" /></a>
<a href="#" onClick="return hs.close(this)"> <img align="absmiddle" src="../../../../../images/close.gif" title="Close"/></a>
</div>
<div class="highslide-body"></div>
<div class="highslide-footer">
<div><span class="highslide-resize" title="Resize"></span></div>
</div>
</div>