jQuery popup resize on phone - javascript

I have a small problem with a popup image displaying on a mobile browser. The popup is displayed on a mouse click and then a resize function sets the size according to the viewport size.
This works fine and is centred in the viewport when opened, but when I tilt the phone to landscape I call a resize function but it doesn't seem to work properly as the newly resized image is off centre in the viewport, this is then repeated when the phone is returned to portrait mode. I have tested the code on android chrome browser.
The resize function I have used is as follows:
$(window).resize(function () {
$(".dialogContent").css({
position: 'absolute',
left: ($(window).width() - $(".dialogContent").outerWidth()) / 2,
top: ($(window).height() - $(".dialogContent").outerHeight()) / 2
});
});

Sorry about posting as an answer but I still can't comment yet.
Based on what you have said I am a little confused about the mouse click portion of your code.
Surly the resize function is not being called when the user clicks the button for the first time. so are you sure that it is working he way you want at all?
To answer your question with a limited amount of understanding of what your code looks like
it should be something like:
$(".dialogContent").css({
position: 'absolute',
left: '50%',
'margin-left': $(".dialogContent").outerWidth() / 2,
'margin-top': $(".dialogContent").outerHeight() / 2,
top: '50%'
});
From my understanding to centre align positioned absolute you set it's top and left to 50% and then offset the positioned absolute element by half.
Now that I'm home I can make you a fiddle here

Related

URL bar hiding when scrolling on phone messes '100% height' up

I have this following demo website: http://woohooo.fortleet.com/
Pieces of content as well as navigation are set to 100% height. When I'm on my phone, there's this url bar up top that hides when I scroll up. However, this effect messes the 100% height up because it adjusts to the new browser size, creating an unpleasing effect. The same goes for 'vh' and 'vw' units.
I've tried the following:
function windowDimensions() {
if (html.hasClass('touch')) {
height = window.screen.height;
width = window.screen.width;
} else {
height = win.height();
width = win.width();
}
}
function screenFix() {
if (html.hasClass('touch')) {
touch = true;
nav.css({'height' : height + 'px'});
home.css({'height' : height + 'px'});
header.css({'height' : height/2 + 'px'});
content.css({'min-height' : height + 'px'});
}
}
This, however, creates a problem, because at the VERY TOP there's this bar with battery, wifi, signal info that is also accounted to the screen height, making the '100%' and 'vh' elements a tad bigger.
I couldn't believe I didn't find any other question about this, as I assumed this is a pretty common problem for 100%/100% sites.
Do you guys know any fix for this?
Your viewport meta tag seems fine. 100vh will not take into account the menu/wifi/top bar. It will only provide the viewport height, which does not account for the menubar on phones. It's important to note that 100vh, and 100% are not going to be the same height. I took a look at your site in mobile and on desktop, each section appears to be 100vh without any additional padding (so it looks correct to me).
If you are referring to the "iPhone" URL bar that automatically toggles in and out when scrolling, then you won't have any way to hide or toggle that display. The URL bar shows up when you scroll up... so yes... it may mean that you will have 20px or so that will not be visible when the user is scrolling upwards. However, it's usually not a problem, because when you are scrolling downwards IOS hides that bar... as to not affect the view of the screen. This may not answer your question, but the URL bar is what I assumed you meant.
It sounds as if your viewport isn't properly set. I'm pretty sure it should not take that extra 10 - 20 pixels into account.
If you haven't already, try setting the view port meta and disabling all zooming options. Hope this helps :)
Ref: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

CSS "position:fixed": mobile zoom

I'm trying to solve an issue with css "position:fixed" property on mobile browsers. I have a fixed div:
<div id="logo">
...other content here...
</div>
with css:
#logo{
position: fixed;
-webkit-backface-visibility: hidden;
bottom: 100px;
right: 0px;
width: 32px;
height: 32px;
}
So, usually the behaviour is exactly the desired one, with the div position always on the bottom right of the window, indipendently of the scroll position.
My issue is that on mobile browsers, when the users zoom the page, after a certain zoom level the div position is wrong (sometimes the div disappear out of the window).
I know that fixed position is not well supported on mobile browsers, but I wonder if there is some workaround. I tried with this js code onScroll event:
window.addEventListener('scroll', function(e){
drag.style['-webkit-transform'] = 'scale(' +window.innerWidth/document.documentElement.clientWidth + ')';\\I want to avoid zoom on this element
var r = logo.getBoundingClientRect();
var w = window.innerWidth;
var h = window.innerHeight;
if(r.right != w){
rOff = r.right - w;
logo.style.right = rOff;
}
if(r.top+132 != h){\
tOff = r.top + 132 - h;
logo.style.bottom = tOff;
}
});
Unfortunately, the code seems to return the wrong position.
Does anyone have any tip?
Ok, that's how I solved the issue...I hope that could help anyone to simulate fixed position on iOS devices.
I switched the position from fixed to absolute;
Attach to window a listener to get the new position when the page is scrolled or zoomed,
setting window.onscroll and window.onresize events with the following function:
function position() {
drag.style.left = window.innerWidth + window.pageXOffset - 32 + 'px';
drag.style.top = window.innerHeight + window.pageYOffset - 132 + 'px';
}
Do you want to catch if zoom is active?
There's no window.onZoom listener, but you can read this thread:
Catch browser's "zoom" event in JavaScript
and this answer: https://stackoverflow.com/a/995967/3616853
There's no way to actively detect if there's a zoom. I found a good entry here on how you can attempt to implement it.
I’ve found two ways of detecting the zoom level. One way to detect zoom level changes relies on the fact that percentage values are not zoomed. A percentage value is relative to the viewport width, and thus unaffected by page zoom. If you insert two elements, one with a position in percentages, and one with the same position in pixels, they’ll move apart when the page is zoomed. Find the ratio between the positions of both elements and you’ve got the zoom level. See test case. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3
You could also do it using the tools of the above post. The problem is you're more or less making educated guesses on whether or not the page has zoomed. This will work better in some browsers than other.
There's no way to tell if the page is zoomed if they load your page while zoomed.
Just a theory, but you may want to try setting the bottom/right positions in % rather than px.
I think what you're seeing when using pixel measurements is just the zoom effecting the pixels. Or to put it better, when you zoom-in the pixels appear larger and that throws off the position of the element, even pushing it out of the view-port on smaller screens.
Example using pixel positioning
Notice that even on a desktop as you zoom-in and out the element appears to move up and down?
Example using percent positioning
In this example the element appears to stay in the bottom right corner, because it is always positioned at 10% from the bottom of the view-port.
#logo{
position: fixed;
-webkit-backface-visibility: hidden;
bottom:10%;
right: 0;
width: 32px;
height: 32px;
}
Having two different z-index for the logo and the rest of the page could help. Allowing zooming only to the rest of the page and not to the z-index layer where logo is included. So, this might not affect the stretching on the logo.
We can
Implement a ZOOM listener
Attach it to browser
Make the zoom listener change the zoom level of the element (modify the elements position) using z-index as a factor.

animate with relative and absolute div

Please have a look at http://users.sch.gr/ellhn. By clicking the top links two animations take place: one drags the current content to the left and the second drags the new content to the center of the browser window.
$("#menu_choice4").click(function () {
$('#content_home').animate({ "left": screenwidth }, 1500 );
$('#content_main').animate({ "left": screenwidth},1500);
$('#content_creations').animate({ "left": screenwidth }, 1500 );
setTimeout( function() {pack4()},900);
function pack4(){
$('#content_home').hide();
$('#content_main').hide();
$('#content_creations').hide();
var x4=$("body").width()/2;
var y4=$("#content_mail").width()/2;
$('#content_mail').animate({ 'left': x4-y4}, 1200 );
}
$('#content_mail').show();
});
In the above code #menu_choice4 represents the last top link whereas #content_home, #content_main, #content_creations, #content_mail are the divs which include everything except the top links for each choice respectively.I have to give make these divs absolute positioned as for the animation to work correctly (as you may see from the above site). In case I make them relative positioned the animation has problems.
My question is why do they have to be absolute and not relative? What should I do for the animation to work the right way with relative positions? I want to apply Responsive Web Design and I have a lot of problems with absolute positions...
Thank you very much

CSS/jQuery - responsive design getting close button to stay in right hand corner

Im trying to create a popup that stays fixed in the middle of the screen no matter how the user resizes his/her window
here is the js im using to accomplish this
$(window).resize(function() {
return $(".wrapper").css({
position: "fixed",
left: ($(window).width() - $(".wrapper").outerWidth()) / 2,
top: ($(window).height() - $(".wrapper").outerHeight()) / 2
});
});
i feel like this works ok......i think my problem is within the css
when the user squishes the window height down my close button goes to the right since the div wrapper that the image is in does not seem to want to reisize with the image.
here is my fiddle..
http://jsfiddle.net/jBM8Z/1/
so if you squish the height of the window browser down the close button will move away but if you refresh the page the close button snaps back into place.......
I just want the close button to be with his friend the image
You're not adjusting the width of wrapper during the resize, so it is being left at its original size. Try pulling it in by setting it to the same width as the image:
$(document).ready(function(){
$(window).resize(function() {
return $(".wrapper").css({
position: "fixed",
left: ($(window).width() - $(".wrapper").outerWidth()) / 2,
top: ($(window).height() - $(".wrapper").outerHeight()) / 2,
width: $(".wrapper img").width()
});
});
});
Note that if you have any padding on wrapper, you may need to adjust the width to take account of this.
Also, I recommend checking out the Debounced Resize plugin for jQuery, so that your updates only fire when someone is finished resizing the window instead of continuously while they are resizing it.

Why would my Javascript break on iOS?

I have this code on jsFiddle that is implemented and works just fine on desktop browsers and works, to a point, on mobile devices. http://jsfiddle.net/heufT/
What my code is doing
If the screen is larger than 960px wide (or thereabouts) a normal horizontal navigation will be displayed, however if the screen is less than 960px wide the navigation becomes apart of a button, which when clicked reveals the same links in a vertical menu instead. When you scroll the page, the header will shrink to a smaller height and if you go back to the top the header goes back to the same height as before. There is also a .load script that will ensure this all happens even when you resize your browser (mainly for use on desktop).
jQuery(document).ready(function($){
// prepend menu icon
$('nav').prepend('<div id="menu-icon"></div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("ul#prim").slideToggle();
$(this).toggleClass("active");
});
});
// Navigation resize event on scroll
$(document).scroll(function(){
if($(window).width()>959){
$("ul#prim").addClass("adjTop");
}
if($(window).width()<958){
$("ul#prim").removeClass("adjTop");
}
if ($(this).scrollTop()>105){
// animate fixed div to small size:
$('header').stop().animate({ height: 90 },50, 'linear');
$('ul#prim.adjTop').stop().animate({ top: '50%', 'margin-top': 18 },50, 'linear');
$('ul#prim').stop().animate({ top: 62 },50, 'linear');
$("img.logo").fadeOut();
$("img.bao_logo").fadeIn(1000);
} else {
// animate fixed div to original size
$('header').stop().animate({ height: 175 },50, 'linear');
$('ul#prim.adjTop').stop().animate({ top: '50%', 'margin-top': 18 },50, 'linear');
$('ul#prim').stop().animate({ top: 105 },50, 'linear');
$("img.logo").fadeIn(1000);
$("img.bao_logo").hide();
}
});
$(window).resize(function() {
if($(window).width()>959){
$("ul#prim").addClass("adjTop");
}
if($(window).width()<958){
$("ul#prim").removeClass("adjTop");
}
// Showreel
$(window).resize(function(){
// Resize video to fix aspect ratio when window resizes
// Only do this if video is currently visible
if ($('#showreel').height()!=0){
$('#showreel').height(($('#showreel').width()/16)*9);
}
});
});
(function($){
// Custom scrollbars for work feature on homepage
$(window).load(function(){
$(".scroll-pane").mCustomScrollbar({
horizontalScroll:true,
mouseWheel: false
});
});
})(jQuery);​
The problem
The one thing I have been noticing though on iPad and iPhone especially is that the JS will work but then when you pinch/zoom Javascript completely breaks and the navigation button doesn't work nor does the shrinking/growing of my header.
I have tried disabling pinch/zoom using the meta viewport tag which obviously stops the user from zooming in to the page but even when you at least try to pinch/zoom and it doesn't do anything, i've noticed the JS still breaks and nothing works.
Has anyone got any pointers? Is there any errors in my code that would casue this? Am I missing anything?
Ok so after testing for a couple of days I ended up revisiting the meta viewport tag and added a maximum-scale attribute combined with the user scalable attribute and it cured the problem. Not sure if this is the right way to go about things as the user is prevented from pinch/zooming and therefore impacts usability but this is a short term solution none the less.
My viewport tag now looks like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Categories