I'm just learning Javascript and jQuery, but I'm an HTML'r trying to take the next step..
I'm attempting to drop content into a table, which can be any size at all (It's for a news site). I check for size and then resize the popup accordingly; while the window isn't exactly right it works, but in Firefox it's not even resizing.
Using a generic link to pop-open a basic window:
<a onclick="window.open('http://site.local/popup/','popup','width=1,height=1')">popup</a>
I'm pointing it to a default page where the cms is placing all content into a table (id="top"). It has a default width="1" to force a constraint, and then letting the content expand the table to set the real size. I then check the table size to see and resize the window on document.ready():
<script type="text/javascript">
<!--
$(document).ready(function() {
var divh = document.getElementById('top').offsetHeight;
var divw = document.getElementById('top').offsetWidth;
//Test size
//alert("Table: width= " + divw + "px / height= " + divh +"px");
//Resize
window.resizeTo(divw,divh);
}
-->
</script>
I need to be able to resize a window already opened in Firefox.
All the window sizes (except Firefox) are off but I can pad them - a little larger is better than cut-off. Firefox, unfortunately, generates a tiny 180w x 249h window and never resizes.
I've searched here unsuccessfully - most suggest editing a setting in firefox, which I clearly can't expect users to do.
Any ideas?
I would highly recommend replacing your popup with a div popup. You're going to run into issues like you have with Firefox, and browsers blocking it altogether. Assuming you have jqueryui included and you're loading this content from the same domain:
$('#container').load('/popup',function() {
var table = $('#container #top');
$('#container').dialog({height:table.height(), width: table.width()});
});
Firefox comes with a preference for user to allow/disallow resizing of window using Javascript. It's in Tools - Options - Content - Enable Javascript -> [Advanced].
I am not sure if resizing is disabled by default, but you might want to check your own Firefox installation first.
If it's disabled by default, then unfortunately there is nothing you could do to resize the window after it has been opened. An ugly workaround would be to open itself once again using window.open() with the preferred size though.
Try something like this;
<a class='poptrigger'>pop</a>
$(function(){
var w = $("#top").outerWidth();
var h = $("#top").outerHeight();
$('.poptrigger').click(function{
window.open('http://site.local/popup/','popup','width='+w+',height='+h)
})
});
That way you shouldn't need to resize the window, but just set the size initially.
Why not getting the content with ajax request and display it in a div above the current content?
Related
I'm trying to make a PDF's zoom always full width within an iframe, and on browser resize it re-calculates the PDF's zoom and sets it to 100% browser width.
The pdf parameter #view=Fit or #zoom=100 works on document ready, but I can't manage get it to refresh/recalculate this value when the browser is resized (preferably without losing the scroll position).
<iframe id="readFrame" src="https://xxxxxx.pdf#view=Fit"></iframe>
note: I'm resizing the iframe like this:
$(document).ready(function() {
$(window).trigger('resize');
});
$(window).resize(function() {
var browser_viewportH = $(window).height();
var browser_viewportW = $(window).width();
var nav_height = $("#nav-bar").height() + $("#tempWrapper").height();
var block_height = $("#blockContainer").height();
var viewportH = browser_viewportH - (nav_height + block_height);
$("#readFrame").css("height", viewportH);
});
Well I think you have a Typo on here:
$("#read iframe").css("height", viewportH);
Should be
$("#readFrame").css("height", viewportH);
As your iframe has the ID "readFrame", hasn't it`?
<iframe id="readFrame" src="YOUR_PDF_PATH.pdf#view=Fit" style="width:100%;"></iframe>
<script type="text/javascript">
$('#readFrame').css('height',$(window).height());
</script>
you can use this, and this works on resize as well, and this doesn't lose your scroll height too when resized..
I ended up using pdf.js if anyone else comes across this problem.
The problem with using the pdf parameters is they don't work in Chrome and Firefox as these browsers have their own pdf viewers.
On the other hand, pdf.js is only fully supported in Chrome and Firefox and others have limited support but are functional other than <=IE8.
I'm turning a clients website into a responsive site and they have lots of vbscript in the content of their home page. At mobile widths they've stripped out a lot of content which means there's lots of code that's being executed but not displayed thanks to display:none
Is there a way to run vbscript code when you hit a minimum width of 768px?
I thought about using javascript to get the screen width and store it as a cookie and use vbscript to get the cookie to obtain the screen width:
<SCRIPT LANGUAGE="javascript">
var width = screen.width;
document.cookie = 'YourDomain=ScreenWidthB='+width;
</SCRIPT>
<%Dim ScreenWidth%>
<%ScreenWidth=request.cookies("YourDomain")("ScreenWidthB")%>
but I feel there may be a better solution out there. Also the code above gives me the width of my monitor I believe, not the width of the browser
This isn't something you would do with any server side language.
You can either use Bootstrap Grid System for this, which has a built-in grid system to handle responsive sizing.
or you can simply use CSS to define your styles for elements with-in a certain viewport size, using the CSS #media tag:
Your CSS would look like this example:
div {width:100px;}
#media (min-width:768px) {
div { width: 50px; }
}
What this does is makes all div's at 100px width, but when the browser is 768px or larger it changes the div sizing to 50px, as defined with-in the #media tag.
Therefore, you can use VBScript to generate the CSS script in the page, without having to write any javascript code. But Bootstrap may be your best bet to help build a responsive design easily/seamlessly. You may want to check it out.
EDIT: Since OP has clarified not to even load the content
You can make a cookie in javascript, and read it in your VBScript to check the viewport.
You can use jQuery for this:
$(window).resize(function(e){
var w = $(this).width();
if(w>768) document.cookie = "viewport=768;";
else document.cookie = "viewport=;";
});
This will bind an event listener on any time the user resizes the window, to check it's size, and if above 768px, it will write the cookie or empty if not.
Then check for the viewport cookie using Request.Cookies("viewport")
Or better yet since you're concerned about performance, you can use Ajax to build your page when a certain viewport size is hit.
Again, you can use jQuery for this and bind to the window resize event.
contentloaded = false;
$(window).resize(function(e){
var w = $(this).width();
if(w>768 && !contentloaded) {
$.get(url,function(data){
$("div").html(data);
contentloaded = true;
});
}
});
I would use ajax to do this, since I'd want to show the content without the user having to refresh the screen as you would have to by using the cookie solution.
I have a control contained in an iframe on a page of my ASP.NET web application.
Control changes its vertical size correspondingly to what user selects on it (some elements get in, others get out). So, I have to set the iframe size precisely to get the whole control shown and not to make gap between the iframe and the elements below it.
Somewhere on the web I have found a way to get the document height in a cross-browser way:
function getDocHeight(document) {
return Math.max(
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}
On self.document.body.onload on the control page, hence, I call this function:
function adjustIframeHeight() {
var iframe = window.parent.document.getElementById(window.frameElement.id);
var iframeHeight = getDocHeight(iframe.contentWindow.document);
iframe.style.height = iframeHeight + "px";
}
The problem is it works fine e.g. in Firefox, but in some cases bottom sections of the control are cutoff in Chrome and IE for example.
Is there some truly cross-browser way to get this height, or I am doing something else wrong?
Thank you for the time
I'd use something like jQuery to help out with this (since using height methods seem to vary from browser to browser) and here is some jQuery code that could help out:
$(document).height(); // height of HTML doc
How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.
I am developing a modal dialog as a part of a web application. There is one thing that's been of a puzzle to me. Please watch a movie clip that I just uploded at http://inter.freetzi.com/example/. I feel strongly that I have to accompany my question with a video because this is the case when it's better to see once, than to hear 100 times.
(It could be vertical scrolling, or both vertical and horizontal at the same time. But I am using horizontal scrolling in my example, so watch for it.)
Here's about my question:
Width of the transparent mask affects the width of the page itself. But in Opera, for exemple, every time the window gets resized, the page gets width that is at most close to 'true'. While in IE, once the transparent mask has affected the width, afterwards the page remembers it and stays with it. What is the problem and how to settle it? How to make IE behave the way Opera does?
In my project, I do the following:
//curViewpointW and curViewpointH are current width and height of the viewpoint (current is meant to be the moment of the resize event)
oMask.style.width = curViewpointW + 'px';
oMask.style.height = curViewpointH + 'px';
var pageWH = getPageWH(); //getPageWH() is a function that gets current width and height of the page (with scrolling if there is any)
var curPageW = pageWH[0];
var curPageH = pageWH[1];
if (curPageW > curViewpointW) {
oMask.style.width = curPageW + 'px';
}
if (curPageH > curViewpointH) {
oMask.style.height = curPageH + 'px';
}
But IE ignores that somehow...
P.S. It's jQuery in my example, so many of you may have used its dialog before.
Have you looked into setting an onresize event handler that will adjust your mask dimensions when the window is resized? If you are using Prototype, you can set up such a handler unobtrusively like this:
Event.observe(document.onresize ? document : window, "resize", function() {//dostuff});
courtesy of the Roberto Cosenza blog