Window resize event in AngularJS - javascript

I have been googling for a while and so far I found how to resize window with window resize directive but in my code I'm using window.innerHeight to get initial height. I can use it any time except I need an event to when it changes. JavaScript window resize event does not fire for me for some reason. Here is my code inside of the controller:
function adjustH() {
var bodyElem = document.getElementsByTagName('body')[0];
var topP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-top');
topP = topP.substring(0, topP.indexOf("px"));
var bottomP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-bottom');
bottomP = bottomP.substring(0, bottomP.indexOf("px"));
vm.h = window.innerHeight - topP - bottomP - 20;
}
window.onresize = function(event) {
adjustH();
}
Can anybody tell me if it is impossible to do it this way and I have to go the directive route? Or if its possible please tell me what I'm missing.

If you are working with angularJS, did you pass $window as a dependency to you controller.
I have had similar issues with this before and it was because the depoendency was not set.
Hope this helps.

After reading your comment which stated
Also my canvas set to height="{{vm.h}}" but it only resizes when I mouse over
It seems that you need to call $scope.$apply() (or $rootScope.$apply()) in order to update the height property of the element.
If you add more code from your directive/controller, I could give you a more detailed answer.

Related

How to enforce user must scroll pdf within iframe

I have a pdf file within iframe. I want user to scroll must in pdf file before submitting the form. i am trying with this,
var position = $('#myIframe').contents().scrollTop();
But not working. Please help me Thanks in advance.
If you don't mind making a static height for your iframe, I have a solution for you.
HTML and CSS
1. Wrap your iframe in a div container
2. set heights for both your container and iframe (height of container should be the height you want your frame to be seen and the iframe height should be large enough to show entire pdf.)
3. set container div's overflow to scroll
Now you have a scrollable "iframe".
Javscript
Get container element. (var containerEl = $("#container")[0];)
Write a scroll function. Within the scroll function find if the total height of the element (scrollHeight) is less than or equal to how much has been scrolled (scrollTop) plus the inner height (clientHeight) of the
element. If it is, remove disabled property from button
Here's the fiddle. Made some changes to #mJunaidSalaat's jsfiddle.
Well I've tried almost an hour on this, Researched it, finally coming to a conclusion that Unfortunately this is not possible using this method.
The PDF is usually not a DOM element, it's rendered by PDF reader software. Every browser has its own mechanism for rendering PDFs, there is no standard. In some cases, the PDF might be rendered by PDF.js; in those situations you might be able to detect scrolling. But Adobe Reader, Foxit, and some of the native PDF rendering don't provide that option.
I've also created a Github issue for this. But no use.
Sorry. Please update me if you could find any thing or any workaround.
I've made a Fiddle for your solution. You can disable the submit button for user until user scroll on your iframe.
function getFrameTargetElement(objI) {
var objFrame = objI.contentWindow;
if (window.pageYOffset == undefined) {
objFrame = (objFrame.document.documentElement) ? objFrame.document.documentElement : objFrame = document.body;
}
return objFrame;
}
$("#myIframe").ready(function() {
var frame = getFrameTargetElement(document.getElementById("myIframe"));
frame.onscroll = function(e) {
$('.submitBtn').prop('disabled', false);
}
});
Hope it helps.
try this
$("#myIframe").ready(function() {
var frame = getFrameTargetElement(document.getElementById("myIframe"));
frame.onscroll = function(e) {
$('.submitBtn').prop('disabled', false);
}
});

Why is this difference in calculations? JQuery

i have this site:
link
There is a difference when you call function in document.ready calculation or resize function
There is a white border when the page loads calculation is not correct ...
$( document ).ready(function() {
var windowsize = $(window).outerWidth();
var stanga= jQuery('#secondary').outerWidth();
console.log('stanga:',stanga);
var dreapta= jQuery('.right').outerWidth();
console.log('dreapta:',dreapta);
var contentwh=windowsize-stanga-dreapta;
console.log('total:',contentwh);
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
$(window).on('resize',function(){
var windowsize = $(window).outerWidth();
var stanga= jQuery('#secondary').outerWidth();
console.log('stanga-resize:',stanga);
var dreapta= jQuery('.right').outerWidth();
console.log('dreapta-resize:',dreapta);
var contentwh=windowsize-stanga-dreapta;
console.log('total-resize:',contentwh);
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
}
});
Basically I used the same code and document.ready but also according to resize and unfortunately goes.
I did manual calculation on a 1366 px and ought to get a 669px width (good value) and I am 657px sites.
Does anyone know why this difference appears to 12px?
Thanks in advance!
You must be using Windows as OS aren't you?
The problem is that on load, you have a scrollbar.So when you are making you calculs, some element have a smaller width. Later, the scrollbar dispear and the white gap appear.
Quick fix would be to add overflow:hidden on the body then make your calculs. Afterward, you can remove the overflow hidden.
Note that the problem also appear when you resize the window below a certain height.
-edit
The issue lies with the .right node max-width property disabling this causes the page to load the dimensions correctly however the algorithm with the node resizing is not being run correctly on document ready.
The page loads correctly after re-sizing the page.
My best guess for this next issue is that the OP did not provide enough code to fully diagnose his issue; but, i am positive that the code on ready is not executing correctly.
Run each variable in console and edit your question to provide the answers please.
Onload values:
window: 1903
custom2.js:89
stanga: 260
custom2.js:91
dreapta: 609
custom2.js:93
total: 1034
After resize:
window: 1918
custom2.js:156
stanga-resize: 260
custom2.js:158
dreapta-resize: 614
custom2.js:160
total-resize: 1044
custom2.js:154
window: 1920
custom2.js:156
stanga-resize: 260
custom2.js:158
dreapta-resize: 614
custom2.js:160
total-resize: 1046
Your resize event is being triggered twice, thats a problem of its own, but eventually it resolves the correct values.
You might need to load the background image asynchronus, catch an event when loading is done, and then make calculations. Like so:
$(document).ready(function() {
asyncLoad('.yourElement');
});
$(window).resize(function() {
doCalculations('.yourElement');
});
var asyncLoad = function(elem) {
var imgCSS = elem.css('background-image');
var imgSrc = imgCSS.replace('url(', '').replace(')', '');
$('<img/>').attr('src', imgSrc).load(function() {
$(this).remove();
elem.css('background-image', imgCSS);
doCalculations(elem);
});
});
var doCalculations = function(elem) {
var windowsize = $(window).outerWidth();
var stanga = jQuery('#secondary').outerWidth();
var dreapta = jQuery('.right').outerWidth();
var contentwh = windowsize-stanga-dreapta;
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
}
You might need to change the function to catch an array of images and do something when the last is done loading, but I hope the idea of 'Async loading' is well explained.
As explained HERE the function loads an image, and then it uses the same image as background-image for your element, and the browser is smart enough to not load that image twice.

Scroll-view not scrolling with surface fa-size [undefined,true]

I have a scroll-view has one fa-surface that contains the html for my page. The height for this `fa-surface' is dynamic since it can be larger or smaller depending on the width of the page.
I have set the fa-modifier size to fa-size=[undefined, true] (Read that true sets the height to the surfaces height).
This results in a page that will not scroll. If I put a fixed height in the fa-size it will work, but that does me no good as the page is responsive and the height is dynamic.
Here is the code for the page:
<fa-app style="height:100%">
<fa-scroll-view fa-pipe-from="eventHandler">
<fa-view>
<fa-modifier fa-size="[undefined, true]">
<fa-surface fa-pipe-to="eventHandler">
Misc HTML...
</fa-surface>
</fa-modifier>
</fa-view>
</fa-scroll-view>
</fa-app>
Here is the simple controller for piping the events.
angular.module('newvitalwallApp')
.controller('MainCtrl', function ($scope, $famous) {
var EventHandler = $famous['famous/core/EventHandler'];
$scope.eventHandler = new EventHandler();
});
The live page is on a dev server here if your curious how it is behaving :
http://staging-sqtmp3dxdz.elasticbeanstalk.com/
I am at a loss as to why this is not working.. I am new to famous, but I have scoured the internet for answers on this and have found very little.
Thanks in advance for your input.
I just created a service that will handle true for width and height temporarily, but also logged the issue in the f/a issue tracker so hopefully the team will fix.
var faTrueService = function($famous){
this.height = function(cl){
if($famous.find(cl)[0].renderNode._currentTarget !== null && $famous.find(cl)[0].renderNode._currentTarget.children[0] !== undefined){
return $famous.find(cl)[0].renderNode._currentTarget.children[0].clientHeight;
}
};
this.width = function(cl){
if($famous.find(cl)[0].renderNode._currentTarget !== null && $famous.find(cl)[0].renderNode._currentTarget.children[0] !== undefined){
return $famous.find(cl)[0].renderNode._currentTarget.children[0].clientWidth;
}
};
};
In the template, you can now do the following:
<fa-modifier fa-size="[undefined, faTrue.height('.item-1')]">
<fa-view fa-index="1">
<fa-surface class="item-1" fa-pipe-to="pageScrollHandler">
When Surfaces get deployed, a resize event gets attached to the them that forces the Surface to reevaluate it's size, so the Service will get called on resize automatically.
Since you can't just use Services in a template, I created a helper function that calls the Service on the current Controller or Directive scope I'm working with.
//temp fix for true
$scope.faTrue = {
height : function(cl){
return faTrue.height(cl);
},
width : function(cl){
return faTrue.width(cl);
}
};
The child .fa-surface being targeted might have to get the following styling for this to work:
.fa-surface{
overflow:hidden;
height:auto;
width:auto;
}
I don't understand why the previous answer uses the callback for sync, this doesn't make sense, especially since the size is getting reevaluated on resize of Surfaces, not on an event attached to the scrollview.
Since all the children of the Scrollview now have height, it will automatically adjust it's height as well in Famo.us 0.3.0
So, though I do feel setting the size of the fa-modifier to [undefined,true] should be enough to set the height of the scrolled content, it's not enough.
So I added function that checks the height of the content on scroll and updates the fa-size dynamically. Here's the code I added the original controller:
$scope.$on('$viewContentLoaded', function(){
$famous.find('fa-scroll-view')[0].renderNode.sync.on('start', function(event) {
var test = angular.element( document.querySelector( '#test' ) );
$scope.testHeight = test[0].clientHeight;
});
});
$scope.getTestHeight = function() {
return $scope.testHeight;
}
Then I changed the fa-size in the view to [undefined, getTestHeight()]
There very well may be a better way of doing this, and ultimately I think it should be handled automatically by famous-angular, but for now this solves it.

Checking if window size has changes and performance/optimalization

today I'm implementing slider plugin and I have one question about it:
I want to make it responsive, but to achive that (depending on my current implementation) I should add another function which will detect if browser window size has changed - and here's my question - is it good for overall performance? Or maybe I should re-think about my solution and try to build it with pure css?
The browser resize is only temporary and personally I don't see the big hassle for a slight hiccup in that phase.
Since you refer to jquery, you can just add
$(window).resize(function() { ... });
Add it withing the document ready, and you will do good to call it one on load. Just do
$(window).resize();
As far as performance, you are correct that every little addon will have effect on the performance, but only when it is active. When the window is not resized, teh event does not get fired.
<div id="resized"></div>
function display() {
var p = document.createElement("p");
p.textContent = "resize event";
document.getElementById("resized").appendChild(p);
}
$(window).on("resize", display);
or using javascript
function display() {
var p = document.createElement("p");
p.textContent = "resize event";
document.getElementById("resized").appendChild(p);
}
window.addEventListener("resize", display, false);
on jsfiddle

Disable Browser Window Resize

For starters... I have no sinister intention of subjecting users to popups or anything like that. I simply want to prevent a user from resizing the browser window of a webpage to which they've already navigated (meaning I don't have access to / don't want to use window.open();). I've been researching this for quite a while and can't seem to find a straightforward answer.
I felt like I was on track with something along the lines of:
$(window).resize(function() {
var wWidth = window.width,
wHeight = window.height;
window.resizeBy(wWidth, wHeight);
});
...to no avail. I have to imagine this is possible. Is it? If so, I would definitely appreciate the help.
Thanks
You can first determine a definite size.
var size = [window.width,window.height]; //public variable
Then do this:
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});
Demo: http://jsfiddle.net/DerekL/xeway917/
Q: Won't this cause an infinite loop of resizing? - user1147171
Nice question. This will not cause an infinite loop of resizing. The W3C specification states that resize event must be dispatched only when a document view has been resized. When the resizeTo function try to execute the second time, the window will have the exact same dimension as it just set, and thus the browser will not fire the resize event because the dimensions have not been changed.
I needed to do this today (for a panel opened by a chrome extension) but I needed to allow the user to change the window height, but prevent them changing the window width
#Derek's solution got me almost there but I had to tweak it to allow height changes and because of that, an endless resizing loop was possible so I needed to prevent that as well. This is my version of Dereck's answer that is working quite well for me:
var couponWindow = {
width: $(window).width(),
height: $(window).height(),
resizing: false
};
var $w=$(window);
$w.resize(function() {
if ($w.width() != couponWindow.width && !couponWindow.resizing) {
couponWindow.resizing = true;
window.resizeTo(couponWindow.width, $w.height());
}
couponWindow.resizing = false;
});
If need some particular element to handle resize in some particular mode, and prevent whole window from resizing use preventDefault
document.getElementById("my_element").addEventListener("wheel", (event) =>
{
if (event.ctrlKey)
event.preventDefault();
});

Categories