I have a problem with the Simple Modal (Eric Martin) modal window.
I have a window that needs a scrollbar. I have found the having autoResize set to true correctly sets the scrollbars when the browser window is shrunk down.
However if I then resize the browser window large again, the modal window stays at the shrunk size.
If I have autoResize turned off and include the following code
$(window).resize(function() {
$("#simplemodal-container").css("height","auto");
$(window).trigger('resize.simplemodal');
});
then the resize works correctly. However I need autoResize to be turned on in order to get the scrollbars to appear when the browser window is shrunk down.
Any help would be very much appreciated.
Thanks,
Ok, I have managed to answer my own question. If I define the modal window with the minHeight property set then the modal window will naturally expand back to the correct size when the browser window is re-expanded.
Doing this I don't even need the resize function mentioned above.
Related
When I load the page, a modal immediately is displayed. However, about half the time, it's impossible to scroll. I can see the scrollbar on the side of the window, but it doesn't let you scroll. Also, zooming the window into 150% allows scrolling to work again.
How can I make it so the user can scroll up and down the modal? I'm using jQuery.
Modals will generally remove the scrollbar and male your page eesize due to the fact that when a modal is loaded, you normally overlay the body elements which remives and scrollbara, causing the body or wcreen width to adjust.
I am working on this website about a pub and I made the menu as a slider, but the problem is that when the window gets resized the iframes themselves don't. I don't know exactly how to explain it but you can take a look here:
http://raduadrian.com/square101/
Scroll down to the menu , and you'll see that it looks fine , if you resize the window it will mess up but , if you resize it and then refresh the page it will look okay on that width until you resize again.
Any ideas how this could be fixed?
If you need any of the code let me know but I basically used bx slider found here: http://bxslider.com/
You can use:
$(window).resize(function(){
document.getElementById('FrameID').contentDocument.location.reload(true);
});
With multiple iframes you can use classes instead of id's.
i have a question about automatically resizing childcontrols of a panel if the panel change the width or the height. I use Asp.net (vb.net). Is there an extender or a property of the panel which allows this?
Or is there another panel which has the possiblity to auto resize their controls?
Or a javascript (jquery) plugin which allows resizing. I know the jquery.ui resiziable plugin, but i don't know if the plugin allows me to resize the childrencontrols when i change the size of the main panel with textboxes for example.
So i want to set the width for my button to 100px and add it to my panel like
main_panel.controls.add(btn)
On my testpage i have two textboxes which allows me to resize the panel, the main panel with the button as his childrencontrol and another button for submiting the panelresizing.
i hope anyone understand me, my english is waste(:
There multiple solutions to your problem depending on your knowledge/requirements.
you can set a fixed size in when you add the controls to the panel
(with .NET)
you can set up flexible rules with css which automatically make the controls inside the div or even set them all the same fixed size the div will scale
you can do this with script as well, target all the elements and make them the same size
Depending on your need (eg does the user do the resizing? or is it window resizing?) I find it the easiest to set up solution 2 and then add an event listener when needed. For instance when the project requires re-sizing when the user sizes his browser window.
Just be careful though the window resize event is very "heavy" and gets triggered a lot so use it only when absolutely needed
English is not my native tongue as well so I hope I understood your question; if not just shoot :)
(try to avoid option 1, it is the least flexible and scalable)
I want to open a window popup on second monitor automatically. I try to open it with javascript but the popup recline to my first screen's right top. When I use mouse it can fit on second screen but I dont want to use mouse, I want to do it automatically
my javascript code:
window.open("Pop.aspx", "Pop.aspx", "width=10,height=10,screenX=1800,screenY=0");
I change screenX property many times but it didn't work.
Any Idea?
I have a simple page with images, and when the user clicks the image, it opens up a new browser window with the image filling the area. I have the css set on the new window so that the image height and width are both 100% (and overflow is set to hidden) so that the window can be resized.
But what I need is for the window to maintain aspect ratio if the user resizes it. Right now, I'm stuck because I'm not getting how the event works, but I think I'm making this harder than it needs to be. Right now I have:
$(function(){
$(window).resize(function() {
var height = $(this).attr("innerHeight");
var width = $(this).attr("innerWidth");
if(height/width != .75){
window.resizeTo(width,width*.75);
}
});
});
Before I added the conditional, the window would immediately start shrinking (apparently opening a new window fires the resize event). Adding the conditional preventing this from happening when the window opens, but any resizing starts the shrinking again.
Is it just because the height and width are never exactly the right ratio (should I manually set the width to a round number ever time) or is there something else I'm doing wrong? Or is there some other way to get what I'm after that's more straightforward?
I believe you're on the right track, but resizeTo() resizes the entire browser window, including window frames, toolbars, menus, etc.
So, when you call resizeTo(), it fires, detects the inner height/width isn't the desired aspect ratio, and resizes the entire window, frames and toolbars and all.
This then fires resizeTo() again, which finds, again, the inner aspect ratio isn't right, and so keeps firing and resizing ad infinitum.
To fix this, you'd need to:
Detect the outer size by resizing and then testing the innerWidth/innerHeight. Remember, this can change as the user works with their browser.
Call resizeTo with a size that accounts for the outer chrome and achieves the desired aspect ratio for the innerWidth/inner Height.