Include orientation change for resize events - javascript

For a slider I use some neat jQuery magic to have an overlaying text scale with the height of the slider, so it never overlaps the slider itself. While this is working pretty good I am having trouble make jQuery recognize an orientation change on mobile devices as well as from changing from window to full screen and vice versa on desktop browsers. Is there a way to make the following listen to those changes as well?
fontresize = function () {
var fontSize = jQuery("#slider").height() * 0.34;
jQuery("#slider_caption").css('font-size', fontSize);
};
jQuery(window).resize(fontresize);
jQuery(window).load(fontresize);
Edit: I am using jQuery, not jQuery mobile. Would it be recommended, for only this small problem, to include jQuery mobile as well?

Theres the "orientationchange" event
$(window).on("orientationchange",function(){
alert("The orientation has changed!");
});
I believe that "on" is the best practice to handle events, in your case it would be:
$(window).on("orientationchange resize load", fontresize);
Edit: and here are som fullscreen change events:
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', fontresize);
Edit: Since you are using a very outdated jQuery, maybe a JS event-binding works:
window.addEventListener('orientationchange', fontresize);

Related

How to disable parallax wagerfield on small resolution?

I use this parallax, but can't disable it on mobile?
I found some methods like this:
scene = $('#scene').parallax();
scene.parallax('disable');
But it didn't work. Can anybody help?
I would rather go in different direction. Instead of making something disable on small screens make it working only on larger devices:
if ($(window).width() > 640) { //set up breaking point
$('#scene').parallax(); // this or any other code you need
}
If you want to disable parallax straight after it's been initialized you should wrap your scene.parallax('disable'); in a setTimeout function. If you look at the source code of Parallax.js you will see that there's supportDelay: 500 value which is used as an argument in enable function. According to that your code for disabling would look like this:
var scene = $('#scene').parallax();
setTimeout(function () {
scene.parallax('disable');
}, 500);
Update:
Just found an article that explains different perspective on disabling parallax.js on small devices.

iPhone Web App - Prevent keyboard from moving/push up view - iOS8

In all versions prior to iOS8, I was able to prevent the iPhone keyboard from pushing up (and destroying) my html/css/js view when the keyboard appeared by the following method:
$('input, select').focus(function(event) {
$(window).scrollTop(0);
// or via the scrollTo function
});
Since iOS8, this no longer works. One workaround is to place this code within a setTimeOut
setTimeout(function() { $(window).scrollTop(0); }, 0);
But it only makes the view do a jerky motion as the view is initially pushed up by iOS, then dragged back down by my js code. preventDefault and stopPropagation does not help either.
I've tried everything available on the web of course including my own solution posted here: How to prevent keyboard push up webview at iOS app using phonegap but so far, nothing works for iOS8. Any clever ideas on how to prevent the keyboard in iOS8 to push/move the view?
Try position:fixed on body, and/or wrap content in a div and position:fixed on it as well.
There are some options :
Make listener on your ios code, to move the screen up along with the keyboard height, so everything move up along with the keyboard, then your design save.
Make your css design responsive. Then no problem with change height, it will be scrollable inside your webview.
When keyboard pushes up view in iOS, a scroll event is triggered ($(window).scrollTop() is changed). You can put $(window).scrollTop(0) inside the scroll event handler. To prevent the jerky motion, set opacity to 0 during scrolling. Related codes may look like this:
function forceScrollTop() {
var scrollTop = $(window).scrollTop();
if (scrollTop != 0) {
$(window).scrollTop(0);
$(selector).css('opacity', 1);
$(window).off('scroll', forceScrollTop);
}
}
// when an input is focused ...
$(selector).css('opacity', 0);
$(window).on('scroll', forceScrollTop);

jQuery solution to detect for touch only device?

I have designed my site with an image gallery that does not display the next / previous arrows until the mouse is rolled over them .next:hover{display: block} This is fine but the site is fluid and I did not think at all that hover (mouse over) does not work on touch screen! I do not want to keep the arrows on constant display unless the device is touch screen only like an ipad for example!
What is the best way to detect if the device is touch only and if so change display: none to display block automatically. Is there a jQuery way of doing this?
I hope this makes sense, I have googled it and search on S.O. but am unable to find a direct answer. That along with the fact that I am a bit (understatement) of a novice when it comes to jQuery!
Thank you for any help
I worked something out like this, the click counter also fires on touch events when I was testing it.
// Detect touchscreen only
var touchscreenonly = true;
var moves = 0;
var clicks = 0;
$("body").mousemove(function() {
moves++;
if (moves > clicks + 1){
touchscreenonly = false;
// now unbind these functions if you like
$(this).unbind("mousemove").unbind("click");
console.log('mouse moved, this is not a touch-only device');
}
}).click(function(){
clicks++;
});
I was in a same situation like you but, I did not wanted to use Modernizr, so as a quick fix I just checked for the window width.Most of the touch devices including tablets falls below the width of <=1024. So I wrote the below piece of code inside document.ready:
$(document).on("ready", function() {
if ( $(window).width() < 1025 ){
//Insert your code to add/display something different for mobile/tablet devices
}
});
Hope it helps someone.

Moving content blocks using javascript for responsive design

I'm working on a highly responsive website at the moment and I hit 2 areas where certain blocks of content need to move to others areas of the site. It would not be possible to do so purely with CSS. I suppose I could relatively reposition the blocks but as the dimensions change this isn;t really possible.
The option I am thinking of is, when a media query gets triggered, to then pull a block out of the page and append it in elsewhere where I need it.
I realise this is not ideal bit what I am wanting to ask is if this is a reasonable thing to so.
I know some of you may say reorder some of the markup but that is not possible. As stated above, I know falling back to javascript is not ideal but it would suit this and I don't particularly wish to duplicate content just so I can avoid the use of javascript.
Flexbox would be perfect but support is not where I want it to be currently for me to use that.
What do people here think? Any other solutions?
The right way is to listen to media queries using MediaQueryList:
var mql = window.matchMedia("(max-width: 320px)");
mql.addListener(function(event) {
if(event.matches) {
// Window width is less than or equal to 320, do something cool.
} else {
// Window width is more than 320, do something else.
}
});
The events will trigger when the query is either met or 'unmet'.
Alternatively, you can listen to a resize event, but note your function will get triggered for every new dimension. (Assuming jQuery in the code below.)
$(window).resize(function() {
if($(window).width() <= 320) {
// Window width is less than or equal to 320, do something cool.
} else {
// Window width is more than 320, do something else.
}
});
Like you said yourself though, using JS to make your layout responsive is generally NOT advisable. You can never assume all your users have JS enabled and all goes well.
I would rather see you solve this by restructuring your HTML and CSS. If the content layout has to change a lot, try outputting a block of content in two different places in your HTML and toggling visibility with CSS media queries (setting one to display:none; and the other to display:block;). You should be able to solve most responsive layout issues by rethinking your website structure.
Others looking for a solution may be interested in the Bootstrap Toolkit JS library available here: https://github.com/maciej-gurban/responsive-bootstrap-toolkit
Responsive Bootstrap Toolkit provides an easy way of breakpoint
detection in JavaScript, detecting changes in currently active
breakpoint, as well as executing any breakpoint-specific JavaScript
code.
The SASS module enables quick and simple styling for elements needing
different property values for each screen resolution.
Then you can do things like:
(function($, document, window, viewport){
// Listen to resize event
$(window).bind('resize', function() {
// Default 300ms poll delay
viewport.changed(function() {
// Debug
console.log( 'Current breakpoint: '+ viewport.current() );
// Trigger custom event
$('body').trigger('viewportChanged', [viewport.current()]);
}, 300)
});
// Register event listener
$(document).on('viewportChanged', 'body', function(event, current) {
console.log('Current breakpoint: '+ current);
}
})(jQuery, document, window, ResponsiveBootstrapToolkit);
You could check out some of the already available responsive design HTML boilerplates like Twitter Bootstrap or Zurb Foundation. Maybe their existing configurations satisfy your need.
I have a similar problem on two websites and i do:
JavaScript/jQuery with the window re size event and have breakpoints in JavaScript to. I then remove the item and append/prepend it where i want it to be.
On my other website i use Twitter Bootstrap which is very responsive and looks nice.
I would personally go with Twitter Bootstrap as its a nice grid system. If your site is very complex and cant be done using Twitter Bootstrap them capturing the window re size event is the best way.
$(window).resize(function() {
//Use $(window).width() and maybe some ifs/a switch to handle break points
if($(window).width()<700){
//Move it here
}
});
With CSS and JS it can be done :) You can clone the content to another section with jquery (append), then using media queries you can control what shows.
Here is what I do:
I do the appendTo:
$( $('.goto').html() ).appendTo('.mobile')
Here's an example I did:
http://jsfiddle.net/Riskbreaker/vkfWd/
This might not be what you are looking for (since its really not moving it but cloning the content )but this is the way I do it.

How to detect CSS3 resize events

The CSS3 resize property can be assigned to arbitrary elements. I'm looking for a way to detect such a resize on, say, divs (I don't mind it only working in Firefox at the moment):
div {
resize: horizontal;
overflow: hidden;
}
Unfortunately, the onresize event seems not to be fired on the div. How can I detect in JavaScript when such a user-instantiated resize has happened?
Edit: FWIW I had opened a bug report over at Mozilla. If you want to track it: https://bugzilla.mozilla.org/show_bug.cgi?id=701648
Resizing is like a style change. As such it can be observed with a MutationObserver. The more specific ResizeObserver is probably even better:
let observer = new ResizeObserver(function(mutations) {
console.log('mutations:', mutations);
});
let child = document.querySelector('textarea');
observer.observe(child, { attributes: true });
<textarea></textarea>
Listen to DOMAttrModified events. Got the idea from this answer, this jsFiddle appears to work in Firefox 8 (if you open the console).
Since the resize event clearly doesn't work (currently, at least), you can try one of these alternative options:
Use a combination of mousedown, mousemove and/or mouseup to tell whether the div is being / has been resized. If you want really fine-grained control you can check in every mousemove event how much / if the div has been resized. If you don't need that, you can simply not use mousemove at all and just measure the div in mousedown and mouseup and figure out if it was resized in the latter.
Poll every 200ms or so (depending on your needs) and compare the current size with the last known size. See setTimeout().
You can use the ResizeSensor class of the css-element-queries polyfill from
https://github.com/marcj/css-element-queries
It allows you to call a javascript function on size changes for all types of elements, not only for window. It sets up a real sensor, not a javascript setTimeout poll.
Use it like this:
new ResizeSensor($('#myelement'), function() {
console.log("myelement's size has changed");
});
Supported browsers are: all incl. IE6+.
This seemed to work pretty well for me:
$("body").on('mousedown mousemove', ".resizeItem", function () {
console.log($(this).height());
})
"Use a combination of mousedown, mousemove and/or mouseup"
as per Felixs answer.
Especially useful when combining a custom search result panel with Dev Extremes Scroll View and you want full control over it.
$("body").on('mousedown mousemove', ".scrollContainer", function () {
var h = $(this).height() - 20;
$(".scrollArea").dxScrollView('instance').option('height', h);
});
According to this site it only works in internet explorer 9.
Try this fiddle: http://jsfiddle.net/maniator/3Zva3/

Categories