Issue with detecting viewport resizing - javascript

I'm working on a project that requires that the vertical borders, which are currently calculated based on page size or the length of the page depending on which one is longer, but there is a slight issue.
I am using Firefox and for example if my noscript plugin kicks in and I for example allowed the script the vertical borders will have a gap at the bottom of the page.
That as an example, is there any way I am able to use javascript to detect a viewport change across multiple browsers?
I found somewhere watch() but was unable to find solid documentation on it and what browsers support this. Is what I am trying to do possible? Is watch() the proper way? If so, can anyone point me to some documentation, if not, what should I be looking at?

window.onresize is the event you're looking for, I think. Here's a link: https://developer.mozilla.org/en/DOM/window.onresize
However, you should be able to get full-height elements using only CSS, and then you won't need any javascript

Maybe you can solve this problem with Media Queries and window.matchMedia
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

Related

How to find Javascript which update matrix3d parameter?

Checking this site: http://themes.framework-y.com/codrop/chat/
Those small images in the patch bounching horizontally. I would see the parameters, how much is the maximum left right limit in the bounce. I would see the Javascript which moves the images. I think this is not a css / #keyframes animation, but Javascript / jQuery does it. But I do not know how to identify the script which works the indicated html elements.
Selected rs-loop-wrap has no animation attribute. Nor its parent elements.
What is the right way to get the background logic which is responsable for the animation?
this site is powered by the framework for wordpress
http://wordpress.framework-y.com/
This slider is used there
https://www.sliderrevolution.com/examples/
This is a pretty flexible slider with a lot of settings, so looking for this specific code would be a very thankless task. I looked at one of the pictures and saw that it moved from -15px to 15px. Perhaps others are slightly larger or smaller. You should follow them in the developer panel:
Dev Tools Screenshot
If you still want to look inside this slider, take a look at these files:
Dev Tools Network tab Screenshot
Have luck!

Manage tiny fonts visualization with CSS/Javascript in Firefox

I am trying to create a website in which the navigation is based on zoomable contents.
For instance, here is a screenshot of what you can see just after opening the webpage:
Then, I am using zoom.js for "zooming" the page and be able to read the text. However, after the magnification I got this:
The font-size is set to 9.4%, and as you can see it causes characters to be overlapped and not correctly positioned.
I tried to use some jQuery plugin like FitText.js or jQuery TextFill, just to see if they changed the font-size in some "magic" way that solve this issue; unfortunately they had effect in solving this visualization issue.
So my question is: how can I make the font looking "normal"? Is there any jQuery plugin or other JS library to manage this problem?
I am using Firefox, and I prefer to focus on using just this browser for the moment.
As suggested by Nico O and Ed Plunkett in the comments, the solution to my problem was to start with a very big page, in which everything is 20 times bigger than the desired page size. Then I added the following CSS to scale everything 20 times smaller:
body {
transform: scale(0.05);
transform-origin: 0 0;
}
When I need to zoom on a point, I simply add new transformation parameters in the CSS, by changing the transform property (I used jQuery, but it can be done in many other ways):
$("body").css("transform", "scale("+scale_factor+") translate("+translate_data+")");
Note also that I didn't need any additional library (with the exception of jQuery) to do this.

What's the most reliable way to integrate javascript with media queries?

I am building a responsive web site using Twitter Bootstrap. I can display/hide/modify/rearrange content using media queries and different CSS for each breakpoint. That works fine. But what about triggering different javascript for each breakpoint? What's the most reliable way to do this?
In this particular case I am using the masonry plugin. I want masonry to layout the items on small, medium or large devices, however on extra small devices I don't want it to. (My own native list layout will be fine).
It seems like the most modern way to do this uses the window.matchMedia() method. This also lets me add a listener so that I can add/remove masonry if the window size changes. The downside is that, according to Mozilla Developer Network, support for matchMedia is not great. I could use a polyfill to get around this, but it sounds a bit complex.
Another way to do it would be to test document.documentElement.clientWidth (or .screenWidth), and synchronize my javascript logic with the breakpoints for the media queries. I would use the window.onresize event to load/unload/re-layout as required.
A third way to do it might be to run some javascript on the resize event, testing the value of an attribute which is controlled by css and a media query. For example, if a particular element is hidden on extra small screens, I could look at the visibility property of that element to determine when I was on an extra small screen.
I am leaning towards the second of these three options, but I'm keen to know if there is a 'generally accepted' method of accomplishing this, and also if there are other options which I have missed.
I would go with window.matchMedia as it is supported by most current browsers (http://caniuse.com/#feat=matchmedia) and for those that do not support it you can use this polyfill: https://github.com/paulirish/matchMedia.js
Using matchMedia might reduce the complexity of your specific viewport/resize logic, as you can reuse the definition of the breakpoints you already use in your css. If you are using SASS you can even define your breakpoints once and share them between you SASS and your JavaScript: http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json
Listening for the resize-event can get quite expensive/slow if you are not throttling/debouncing. If you are sticking to the resize-event have a look at https://github.com/louisremi/jquery-smartresize.
There is a jsPerf comparing the performance of matchMedia to the resize-event: https://jsperf.com/matchmedia-vs-resize/3 For me matchMedia was way faster than the resize (tested in Chrome 41 and Firefox 36)
Check out Awesome Media Queries in JavaScript: enquire.js is a lightweight, pure javascript library (with no dependencies) for programmatically responding to media queries.
http://wicky.nillia.ms/enquire.js/
https://github.com/WickyNilliams/enquire.js/

How to use jQuery to horizontally center an object in the viewport?

I know this was asked before, but my situation is somewhat... weird. I am building an iframe for later use in a slideshow element on the website.
I have a long content-adaptive flexbox that goes way beyond the screen and I want to use the css trick of
left:50%;
transform:translateX(-50%);
To horizontally center the currently viewed area of the page, so when you resize the window, the middle of currently viewed element, will still remain horizontally in the middle of the screen.
As my flexbox is content-adaptive it's like 5K px long so I obviously can't use css %. So I went to jQuery and used $(window).width() to determine current viewport size and adjust the elements with .css({}) method. Here is the jQuery code:
$(document).ready(function(){
$(window).resize(function(){
var winWidthHalf = ($(window).width())/2;
$("#ss_home").css({
"left":"-"+winWidthHalf+"px",
"-webkit-transform":"translateX("+winWidthHalf+"px)"
});
});
});
And here's the puzzle: it worked. And then I restarted the PC and it didn't work since. Whatever I did didn't seem to help. Can you help? I have NO idea what could have happened...
Here is the page preview, please don't mind other comments in the code, they are irrelevant for now: http://users.metropolia.fi/~staniss/test/slideshow/
All content is just sample.
I would also love to know how to group the $(document).ready and $(window).resize properly, since I execute the same code, but don't wanna copy paste it twice just to change the events, since that's a bad practice. I haven't been able to find the right syntax for this.
Also sorry, the sample is for chrome only, it's very early in dev so I didn't bother with compatibility yet.
It was a browser vendor extension issue (had to add -webkit- prefix to transform) :P.

Detect Zoom in Firefox

I want to detect if the browser is zoomed in or out (don't really care to know the value, but I assume it will need to be found anyway in the decision process). I have read a lot of other SO posts on the topic, but none of the solutions given work on FF (although there is an IE7/8 and chrome solution).
Oh, and I can't use flash, so the flash solution is out of the question.
Edit: And I must be able to detect this on the initial page load
With modern versions of FireFox, you can now do the following:
DPR = window.devicePixelRatio;
if ( DPR <= 0.999 || DPR >= 1.001 ){
// User has zoomed in or zoomed out
}
If by zoom you mean that the user pressed ctrl/cmd+[plus] and not css transformation you can detect computed font-size. Just checked in FF 4.0.1/Mac and it worked for me. To detect computed font-size I used code from this question: Get computed font size for DOM element in JS .
The value changed after zooming. You need to know what the font-size of a certain element should be (as set in css) and compare it with what it really is.
I suggest you look at this generic question. And possibly close your own as a duplicate (not voting to do this myself, since it's not "an exact dup".
Did you try to detect the resolution, which may help you to detect the zoom.
Maybe instead of detecting the zoom you could detect the error.
For example if your layout expects an elements' offset to be at 100,200 and a query shows it's at 300,450 you'll know it's in the wrong place and you can apply your fixup/workaround.
This has the added benefit that if the zoom issue is fixed in a future version of the browser you won't be applying your fix needlessly or incorrectly.

Categories