is there any way to change the size of an HTA application?
thanks
<script type="text/javascript">
window.resizeTo(300,290);
</script>
Javascript and VBScript ways to size the HTA on loading, to 1/4 the screen area (half the height, half the width) and center it - using screen.availWidth and screen.availHeight :
<SCRIPT LANGUAGE="javascript">
function Window_onLoad(){ // resize to quarter of screen area, centered
window.resizeTo(screen.availWidth/2,screen.availHeight/2);
window.moveTo(screen.availWidth/4,screen.availHeight/4);
}
window.onload=Window_onLoad;
</SCRIPT>
In VBSScript a Window_onLoad sub will automatically get called any time the HTA starts up (or is refreshed) :
...
</head>
<SCRIPT LANGUAGE="VBScript">
Sub Window_onLoad
' resize to quarter of screen area, centered
window.resizeTo screen.availWidth/2,screen.availHeight/2
window.moveTo screen.availWidth/4,screen.availHeight/4
End Sub
</SCRIPT>
<BODY>
...
I've just tested it (Win XP on an old laptop) and there's a quick flicker of the initial larger window before it shrinks to the smaller size, but it's not that bad.
Here is a tip. If the HTA needs to be resized/moved when the hta is opened, then put the resizeTo and moveTo in its own script tag right after the HEAD tag. Then you won't see the flash that happens as a result of the resize/move.
<HTML>
<HEAD>
<SCRIPT type="text/vbscript" language="vbscript">
' Do the window sizing early so user doens't see the window move and resize
Window.resizeTo 330, 130
Call CenterWindow
Sub CenterWindow()
Dim x, y
With Window.Screen
x = (.AvailWidth - 330 ) \ 2
y = (.AvailHeight - 130 ) \ 2
End With
Window.MoveTo x, y
End Sub
</SCRIPT>
....
Try setting the HTA Attribute windowstate to minimize
windowstate="minimize"
your resize routine will then set the size you want and force the window display.
first set focus to your window:
window.focus()
window.resizeTo(500,500)
window.moveTo(screen.availWidth-500,0)
Related
I'm working with PrimeFaces and BootsFaces libraries. I have a little form inside bootsfaces modal. The form is used to change system parameters, and for one specific parameter has a <p:keyboard /> to change its value. My problem is that in extra-small devices, the bootstrap modal doesn't allow horizontal scroll, and the keyboard is not showing complete:
The keyboard is not responsive by default when the viewport with is less than 510px, so I have adjusted it to 436px by default in extra small screens. I want to make horizontal scroll on the modal just to see the complete keyboard, but only when I open the modal.
This is my javascript function to adjust the keyboard depending on screen size:
$(document).on('click', '.inpKeyboard', function() {//- The input text has a class called 'inpKeyboard'
if ($(window).width() <= 505) {//- Small screen
$('#keypad-div').css('width', '436px');
$('#keypad-div').css('left', '0px');
//$('.modal-open').css('overflow-x', 'auto');
}
$('#keypad-div').css('z-index', '2000');
});
Any help would be appreciated. Thanks.
What a nice puzzle! :) PrimeFaces calculate the size of the keypad window in JavaScript and stores it as an inline-style. So the clue to solving this is to add a timeout, like so:
<script>
$(document).on('click', '.hasKeypad', () => {
$('#keypad-div').css('z-index', '2000');
if (!(window.width > 505)) { // JSF (i.e. XML) doesn't accept the less-than-operator
// add a timeout to make sure the code is executed after PrimeFaces did its magic
setTimeout(() => {
// set a fixed with
$('#keypad-div').css('width', '436px');
// add the horizontal scrollbar
$('#keypad-div').css('overflow-x', 'auto');
// increase the height to make space for the scrollbar
$('#keypad-div').css('height', '180px');}
,1);
}
});
</script>
<!-- set a minimum width for the keyboard rows -->
<!-- (otherwise the key overflow to the next row) -->
<style>
#media screen and (max-width: 504px) {
.keypad-row {
min-width:470px;
}
}
</style>
I have used the following code to have equal height for rightpos, leftpos and middlepos divs:
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
// Find the greatest height:
maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
maxHeight = Math.max(maxHeight, $('#leftpos').height());
// Set height:
$('#rightpos').height(maxHeight);
$('#middlepos').height(maxHeight);
$('#leftpos').height(maxHeight);
})
</script>
Determining of the tallest div using this way for the main page of http://yaskawa.ir/ works well in Firefox, but has problems in Chrome.
UPDATE 1 after Sparky672's answer:
I can see that with this code,the alert('test here'); at the end doesn't work.
<script>
jQuery.noConflict();
//jQuery(document).ready(function($){});
jQuery(window).load(function($){
// Find the greatest height:
maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
maxHeight = Math.max(maxHeight, $('#leftpos').height());
// Set height:
$('#rightpos').height(maxHeight);
$('#middlepos').height(maxHeight);
$('#leftpos').height(maxHeight);
alert('test here');
})
</script>
Try window.load() in place of document.ready() to ensure that all assets are loaded before your heights are calculated.
jQuery(window).load(function($){
Documentation:
The load event is sent to an element when it and all sub-elements have
been completely loaded. This event can be sent to any element
associated with a URL: images, scripts, frames, iframes, and the
window object.
http://api.jquery.com/load-event/
See DEMO:
http://jsfiddle.net/snBLP/3/
$(document).ready() isn't suitable for calculating heights. $(document).ready() doesn't wait for images to load, etc.
I'd suggest trying
$(window).ready()
instead...
Here's the scenario:
I have an asp.net webpage which displays dynamic data in a gridview.
I'm using a master page to display the header and footer of the page, and this gridview is being displayed inside a div in the contentplaceholder.
The Problem:
What I want is that the size of the page that is displayed remains constant for a user and must be equal to the size of their browser's available display area and the content being visible by scrolling the div.
Sort of like the header and footer remain at the same position and the content inside it is scrollable.
I really don't know how to achieve this.
Any help on the matter is highly appreciated.
Thanks.
Try some jQuery:
function changeHeight(){
var winHeight = $(window).height();
var heightOfHeaderAndFooter = 200px; // change this to what you need
$('#myDiv').height($(window).height() - heightOfHeaderAndFooter);
}
$(window).resize(function() { // changes height with browser window
changeHeight();
});
$(document).ready(function() { // changes height on load of the page
changeHeight();
});
What you want is for your div to use width:auto and to dynamically change the height of it to always keep the footer at the bottom of the page. Also, make sure your div has overflow-y:scroll
Code snippet:
divMain.style.height --> height of div in pixel containing GridView. This div tag also has style setting of style="overflow-y:auto;"
document.documentElement.clientHeight --> height of the working/client area for your display.
document.getElementById("divMain").offsetTop --> height of content prior to divMain.
25 --> this is the height of my additional footer.
The pixel result is the height available for your divMain.
divMain.style.height = (document.documentElement.clientHeight - document.getElementById("divMain").offsetTop - 25) + "px";
Hope this helps.
I am opening a pop up within a application and problem is that this popup window is not opening correctly when i want to open popup at the end of the application that means popup height decreases and some data truncated in popup window .I am using canvas for pop up.
You can position the popup using Point Object.Set the titlewindow's width and height to fit the contents.
var titleWin:FileUpload=PopUpManager.createPopUp(this, PopupName, true) as FileUpload;
var point:Point=new Point(0, 0);
point=this.parentDocument.parent.localToGlobal(point);
titleWin.x=point.x + 100;
titleWin.y=point.y + 100;
titleWin.width=500;
titleWin.height=400;
Refer this link to read about Point object.
You would use the PopUpManager.centerPopUp() function.
I want to display my page inside another page via Iframe.
The problem is that the iframe doesn't resize automatically (height).
How can I resize it automatically? Or maybe there is better way to display one page inside another?
Here's one way: http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
If the height of the frame may change after it's loded (e.g. expanding/collapsible regions) then you can set up a polling mechanism to periodically resize the frame in case the size has changed. Like this:
<html>
<head> <title>Parent frame</title> </head>
<body onload="window.setTimeout(resizeFrame, 250)" bgcolor="#cccccc">
<script type="text/javascript">
// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrame() {
var f = document.getElementById('childframe');
if (f.style.height != f.contentWindow.document.body.scrollHeight + "px")
f.style.height = f.contentWindow.document.body.scrollHeight;
window.setTimeout(resizeFrame, 250)
}
</script>
<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
<p>
<iframe frameborder=0 src="./innerframe.htm" name="childframe" id="childframe">
</iframe>
</p>
</body>
</html>
Note: I'm assuming that you're using frames because you're pulling content from another domain. If you're pulling content from the same domain, you might be able to simply use script to fetch the content using XmlHttpRequest, and then inject the HTML into a DIV on the parent page. You can't do this if the content lives on a different domain, due to browsers' cross-site scripting limitations.
setInterval(function() {
var ifm = document.getElementById("ifrmeID");
var h = ifm.contentWindow.document.body.scrollHeight;
ifm.height = h < 400 ? 400 : h;
}, 800);
400 is the default height if you didnt want iframe too short,800(ms) is frequency,you can adjust these two values. put the js in the end of your page which contained iframe .then it will be ok.