I'm dealing with some modals that are opened up in an iframe (same domain, so no xss issues). One of the modals I have either hides or shows options based on things you do which grows or shrinks the form. Anyway, long story short I have the code that handles resizing the iframe based on the current height/width of the body on the inital load. The problem is that I'm not sure what event to tap into to determine that the body's actual size has changed after the initial load.
Why not add a setInterval()? Something like:
var originalWidth = {set original width}
var originalHeight = {set original height};
setInterval(function(){
var currentWidth = {grab new values};
var currentHeight = {grab new values};
if(originalWidth !== currentWidth){
//Change the width now...
//Next, set originalWidth to be the same as current for future checks
originalWidth = currentWidth;
}
//Now, do the same for original and current height
},100)
Related
In a web app I have a div with tooltips that are displayed only when hovering over certain objects of the page. These tooltips can overflow out of the div. When this happens, the scrollbars appear on the page as expected.
The issue is that the user cannot scroll with the mouse, because doing so moves the mouse out of the hovering element, so the tooltip disappear, and the window resizes down to the original size (so the scrollbars disappear too).
Here is a mock example of a similar behaviour :
I tried to use scrollIntoView for putting the object into the view, but again this works for a fraction of seconds, as the automatic scrolling of the page to put the element into view moves the mouse out of the hovering element and causes the tooltip to disappear.
Is there a way to always keep the biggest frame size ? This way the user can scroll into the right view before hovering over the elements so that they are displayed entirely.
Got it working by using ResizeObserver.
I defined this function in the source of the web app :
parent.set_size = function(height, width) {
const iframe = document.getElementById('your-iframe');
iframe.style.height = height + "px";
iframe.style.width = width + "px";
}
and then in the page loaded in the iframe I defined something similar to :
$(document).ready(function() {
// set the div which has a dynamic size depending on whether or not the tooltip are displayed
var map_div = document.getElementById("map")
// set the initial size
parent.set_size(map_div.scrollHeight, map_div.scrollWidth);
var max_height = map_div.scrollHeight;
var max_width = map_div.scrollWidth;
// when the size changes, keep the biggest size
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
max_width = Math.max(entry.target.scrollWidth, max_width);
max_height = Math.max(entry.target.scrollHeight, max_height);
parent.set_size(max_height, max_width);
}
});
ro.observe(map_div);
});
This way the iframe always keep the biggest size it get to, which allows scrolling to the correct position before displaying the tooltip.
I have been trying to figure out how to make a ticker like facebook.
the ticker automatically hides when you zoom past 110% and thats because the ticker would start to cover the whole layout.
I was wondering how they have done this? how does it detect when to hide the ticker? does it grab the resolution in javascript?
Whatever they are doing, it is done through Javascript. You can get the width and height of the browser window and also any element in the DOM.
You can use pure Javascript, but jQuery makes this a doddle:
// Get the pixel width and height of the window
var window_height = $(window).height(); // not required, but for clarity
var window_width = $(window).width();
var ticker_width = $('div#ticker_wrapper').width();
// ON rezise, do something
$(window).resize(function() {
// Do a caculation
var new_width = (window_width/100)*10; // 10% width
// Adjust the width of the ticker to suit
$('div#ticker_width').css('width', new_height);
});
I'm trying to get font size to adjust to fill a container. This alone obviously is not an issue. However, the container is also not a static size, it's size is set to a % of the browser window and I would like the font size to dynamically update on browser resizing, along with the container.
I had been using a modified script that I found which adjusts the font size by a % of the browser height and width.
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleFactor = 0.0001,
scaleSource = $(window).height(),
scaleSource2 = $(window).width(),
maxScale = 200,
minScale = 10;
var fontSize = (scaleSource * scaleSource2) * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
I wasnt getting the desired result from this, so then tried changing this so that the scale sources were the container rather than the window. This somewhat worked however it didnt dynamically update, it would require a refresh of the page.
In short I cannot find a way to resize font size, to fill a container that's size is determined by a % of the browser window, on the fly.
Why invent something that already exists? There's already a great jQuery tool out there: http://fittextjs.com/
This isn't a real-world answer, yet, but viewport dependent font sizes are on the horizon:
http://css-tricks.com/viewport-sized-typography/
Currently it's only supported in Chrome Canary, but it's good to know it's coming.
My application has two views, a live mode and a preview mode. Both of these have windows which can be resized. They are the same html file. I am looking for a way to get the font-size to resize proportionally for both views when they are resized.
I am using jQuery as my javascript framework.
Is there a way of getting this to work in either CSS or jQuery?
I know I am answering my own question, but the answer above was helpful but not enough to suffice as one. So this is how I ended up doing it.
First I set up this function which calculates a suitable font size based on a given width.
function getFontSize(width){
sizew = width / 100;
size = sizew * 1.5;
return size;
};
Then I got the function to run on load and on re size of the window then modify the body font size accordingly.
$(window).resize(function(){
size = getFontSize($(this).width());
$("body").css("font-size", size + "px");
}).resize();
All you have to do from there is set up any element to have its font-size re-sizable by giving it an "em" or percentage font size.
Sure, define a javascript object which has a function that takes in a width and height parameter. It should return your desired font size based on that width and height. Then, attach a resize event handler to your window, which calls that function you just defined and sets the font-size css property on the document body of the window.
You must use this plugin to get a resize event on an html element that is not the window: http://benalman.com/projects/jquery-resize-plugin/
var fontsize = function FontSizeBasedOnDimensions{
var that = {};
that.GetFontSize = function(height, width){
//Make some decisions here
}
return that;
}();
$('#yourwindow').resize(function(){
var size = fontsize.GetFontSize($(this).css('height'), $(this).css('width'));
var currentsize = parseInt($(this).css('font-size'),10);
if(size != currentsize){
$(this).css('font-size', size);
}
});
Is there any way to set the minimum size of a popup window through JavaScript?
My problem is that when someone makes it as small as he can the content just looks stupid.
When creating pop-ups, you can only set width and height. But since the pop-up was created, it means you can change the height and width of the window when the pop-up loads.
Simply place an onload event inside your pop-up window:
window.onload = function() {
if (document.body.scrollHeight) {
var winWidth = document.body.scrollWidth;
var winHeight = document.body.scrollHeight;
} else if (document.documentElement.scrollHeight) {
var winHeight = document.documentElement.scrollHeight;
var winWidth = document.documentElement.scrollWidth;
} else {
var winHeight = document.documentElement.offsetHeight;
var winWidth = document.documentElement.offsetWidth;
}
window.resizeTo(winWidth, winHeight);
}
edit: Tested in IE7,8, Chrome, Safari 4, Firefox 3. Working, but you might need to take into account the size of menu+address bars and such, as the window size will be the outer size, and this function will find the size of the content. So to be safe you should probably add a couple of pixels, and also turn off scrollbars in the popup to make sure they won't take up any space.
I do not believe that you can set a minimum using the Javascript new window. I know you can set the size and disable the scroll bars and prevent resizing, but that would answer the minimum, but also impose a maximum as well, which you may not be wanting.
Most browsers have a minimum width and height.
Internet Explorer 7
minimum width > 250px
minimum height > 150px
When using windows.open, you can specify the height and width of the window like this:
window.open ("http://www.stackoverflow.com",
"mywindow","menubar=1,resizable=1,width=350,height=250");
It is not the minimum size though, as the window will not be bigger when there is more room. You would have to check screen space yourself for that.
http://www.htmlgoodies.com/beyond/javascript/article.php/3471221
As seen in the link, you can set the minimum size. If you want to scale it so it gets bigger you must to that from within the popupwindow.