AJS 3.x Manual

Note! This Manual is for the "Forms authentication" version. This version requires you to create each account and store credentials in the HTTP Commander XML database. If you have Windows server or Active Directory accounts already and want to use them in the HTTP Commander, you need to download the "Windows authentication" version! This Manual is for the Forms authentication version only!

Web file manager Free Installation assistance

Interface view modes

• Install application and check if it works in stand-alone browser window.
• Set "IsEmbeddedtoIFRAME" parameter to the "true" at Application settings.
• Place the code on any page on your site:
  <iframe src="http://demo.element-it.com/examples/demoiframe/Default.aspx" id="HTTP_Commander" frameborder="0" style="width: 500px; height: 300px; margin-left: 0px; margin-top: 0px"></iframe>
  Replace "http://demo.element-it.com/examples/demoiframe/Default.aspx" with the path to the default page of your HTTP Commander instance.
• Note 1! Minimum IFRAME dimensions: width - 500, height - 300.
• Note 2! You can pass "IsEmbeddedtoIFRAME" parameter also in the URL like "http://demo.element-it.com/examples/demoiframe/Default.aspx?IsEmbeddedtoIFRAME=true"
• If you place iframe element on site page with the same domain, as HTTP Commander, you can add in addition the button of deployment of iframe with HTTP Commander in fullscreen.
  For this purpose set a parameter value of ShowFullScreenOrExitFullScreenButton in true.
  Screenshot

  

• If you want to use iframe with HTTP Commander on page with other domain:
  • Place on your page the following code:
    <div style="position: relative;"> <script type="text/javascript"> function moveButton(tools) { if (tools && tools.parentNode) { var iframes = tools.parentNode.getElementsByTagName('iframe'); if (!iframes || iframes.length < 1 || !iframes[0]) { return; } var hc = iframes[0]; var dx = 3, dy = 5; if (hc.maximized) { tools.style.cssFloat = 'right'; tools.style.left = ''; tools.style.right = '' + dx + 'px'; tools.style.top = '' + dy + 'px'; } else { var pos = [hc.offsetLeft, hc.offsetTop]; pos[0] = hc.offsetWidth + pos[0] - 15 - dx; pos[1] += dy; tools.style.cssFloat = 'left'; tools.style.right = ''; tools.style.left = '' + pos[0] + 'px'; tools.style.top = '' + pos[1] + 'px'; } tools.style.display = ''; } } function toggleButton(tools) { function getStyle(element) { if (element) { return window.getComputedStyle ? getComputedStyle(element, '') : element.currentStyle; } return null; } if (tools && tools.parentNode) { var iframes = tools.parentNode.getElementsByTagName('iframe'); if (!iframes || iframes.length < 1 || !iframes[0]) { return; } var hc = iframes[0]; var images = tools.getElementsByTagName('img'); if (images.length > 0) { var img = images[0]; if (hc.maximized) { if (hc.restoreStyle) { for (prop in hc.restoreStyle) { hc.style[prop] = hc.restoreStyle[prop]; } } if (hc.parentPositions && hc.parentPositions.length > 0) { var parent = hc.parentNode; var i = 0; do { if (parent.style && hc.parentPositions[i]) { parent.style.position = hc.parentPositions[i]; } i++; } while ((parent = parent.parentNode) && (i < hc.parentPositions.length)); } if (hc.htmlOverflow) { document.documentElement.style.overflow = hc.htmlOverflow; } if (hc.bodyOverflow) { document.body.style.overflow = hc.bodyOverflow; } if (hc.oldScrolling) { hc.scrolling = hc.oldScrolling; } img.src = 'maximize.png'; hc.maximized = false; } else { window.scrollTo(0, 0); // save current style var hcStyle = getStyle(hc); if (hcStyle) { hc.restoreStyle = { position: hcStyle.position, left: hcStyle.left, top: hcStyle.top, width: hcStyle.width, height: hcStyle.height, zIndex: hcStyle.zIndex, overflow: hcStyle.overflow } } // save and change 'position:static' for parent nodes var parent = hc.parentNode; var cs; hc.parentPositions = []; do { if (parent.style) { cs = getStyle(parent); if (cs) { hc.parentPositions.push(cs.position); } parent.style.position = 'static'; } } while (parent = parent.parentNode); // save and change overflow for html and body var csHtml = getStyle(document.documentElement); if (csHtml) { hc.htmlOverflow = csHtml.overflow; } document.documentElement.style.overflow = 'hidden'; var csBody = getStyle(document.body); if (csBody) { hc.bodyOverflow = csBody.overflow; } document.body.style.overflow = 'hidden'; // change iframe styles hc.style.position = 'absolute'; hc.style.left = '0px'; hc.style.top = '0px'; hc.style.width = '100%'; hc.style.height = '100%'; hc.style.zIndex = '50000'; hc.style.overflow = 'hidden'; hc.oldScrolling = hc.scrolling; hc.scrolling = 'no'; img.src = 'restore.png'; hc.maximized = true; } moveButton(tools); } } } </script> <div style="display: none; cursor: pointer; z-index: 50001; border-style: none; margin: 0; padding: 0; width: 15px; height: 15px; position: absolute; left: 0px; top: 0px; float: left;" onclick="toggleButton(this);"> <img alt="" src="maximize.png" onload="moveButton(this.parentNode);" onerror="window.alert('Image maximize.png and-or restore.png not loaded!');" /> </div> <iframe src="http://demo.element-it.com/examples/demoiframe/Default.aspx?isEmbeddedtoIFRAME=true&username=demo&password=demo" frameborder="0" style="width: 500px; height: 300px; z-index: 50000;"></iframe> </div>
    Note! Placement of the elements script, div with the button and iframe in the DIV container with style="position:relative;" is mandatory. For iframe you can set style parameters and others (the sizes, etc.). Other elements NOT change!
  • Copy maximize.png and restore.png images in the folder near your page on which iframe will be placed. Also you can use other icons, but consider, their size shall be 15x15.
  • In settings surely for the ShowFullScreenOrExitFullScreenButton parameter set false value, and for DefaultViewMode - FullScreen value.
  • You can look at use example having followed the link.
    HTML code and icons of buttons you can also find in archive.
• You can also place HTTP Commander interface in stand-alone browser window inside DIV tag.
  • Open in notepad on editing page Default.aspx
  • Find a line
    <!-- Opening embedded tag DIV -->
    also delete comments (<!-- and -->) since the next line with the DIV element.
    Also find lines
    <!-- Closing embedded tag DIV -->
    <!--</div>-->
    also delete comments from closing tag </div>.
  • You also can change attributes of style at the DIV element: width, height, etc.
    Note! It is recommended not to change attribute of position style.
  • Save and close.
  
  Screenshot

  

  • Change voluntarily in settings DefaultViewMode parameter value:
    InsideDiv - in case of start of HTTP Commander will be shown in an element DIV as it is defined in Default.aspx.
    FullScreen - HTTP Commander will be unrolled on all screen of the browser together with the DIV element.
  • Also for switching between a fullscreen mode and normal to use parameter ShowFullScreenOrExitFullScreenButton.