AJS 4.x Manual

Note! This Manual is for the "Windows authentication" version, which is designed to work with existing Windows server or Active Directory accounts and Windows authentication. If you want to create accounts by yourself and store their credentials in your own HTTP Commander XML database, you need to download the "Forms authentication" version! This Manual is for the Windows authentication version only!

Web file manager Free Installation assistance Manual Home page

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="https://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 "https://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 "https://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="https://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
  • in the Default.aspx file find a line
    <!-- Opening embedded tag DIV -->
    and make sure there is a line below:
    <div id="httpCommander" style="position:relative !important;width:800px;height:600px;left:50px;top:50px;">
    Also find line
    <!-- Closing embedded tag DIV -->
    and make sure there is a line below with closing DIV 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.