Mobile Safari and x-offset - javascript

I posted previously (https://stackoverflow.com/questions/5737833/adjusting-horizontal-offset-for-an-image-gallery-in-mobile-safari) about using Javascript to find the x-offset of a viewport in Mobile Safari and then apply that as a px-based value to an element's inline CSS.
The post was a little long-winded and specific to that application, so I'll ask the real question here:
Is there a way to determine the viewport's x-offset in Mobile Safari, and then apply it to an element as an inline style?
This will be necessary, not just to place the image gallery overlay properly, but also to use named anchors throughout the site. It's my understanding that some JS trickery is required, as Mobile Safari doesn't support the usual methods of determining the x-offset of an object (or the viewport).

I'm not exactly sure if I understand your question but in javascript on mobile safari (asuming Iphone,Ipod,Ipad) using jquery I use the following lines to position div layers with z-index on top of each other. var left1 = jQuery("div#Layout_Border_div").offset().left;
var top1 = jQuery("div#Layout_Border_div").offset().top;
jQuery("div#LayoutPage_Backward").
css( { position: "absolute","left": (left1) + "px","top": (top1) + "px" } );
if you can give me some sample of code I can help more.

I managed to come up with an almost-solution: I added marginLeft: window.pageXOffset + "px", to all four references of the positioned wrapper divs in photoswipe.js.
So now, clicking a photo results in the photo viewer appearing inside the viewport, if it's been scrolled at all.
However, it's not ideal: I'm manually editing photoswipe.js source, first of all, and second of all, the gallery doesn't actually follow the user's scroll (so, when the user scrolls further to the right and clicks another image, the gallery appears where its first position was).
This is close to being fixed. How can I make the photo gallery follow the user's scroll dynamically, preferably without editing photoswipe.js source code?

Related

Is there a way to prevent browsers from caching values like scroll position and zoom level?

I am designing an interactive web game that takes place entirely in the browser. It uses html5, and everything (including the elements) is part of the game world. Since this is the case, I need some pretty strict control over the positioning of my elements, scroll position, zooming, etc.
One particular level requires that an element be placed off screen (just outside the viewport) so that the user must scroll the page to find it. Unfortunately, after scrolling, the page seems to record the new width of the page including the originally unseen element. When the page is refreshed, the zoom level is adjusted to fit the entire screen with the hidden element into the viewport. This gives away the puzzle and ruins the level.
I know that browsers store information like scroll position so that when a user revisits the page they can pick up right where they left off. This is great for some things, but bad for my purposes. Is there a way to prevent this caching behavior of my browsers? Is there a way to get or set the zoom level of a page using JavaScript?
Currently I am using the code below to reset the scroll position right before the user leaves the page. It works pretty well, but the user can see the page scroll right before leaving.
window.addEventListener("beforeunload",function(event_){
window.scrollTo(0,0);
/* What I would love is if there were a way to do this: */
// window.zoomTo(1.0);
/* But I'm sure that's asking for too much. */
});
I managed to fix my problem by keeping the hidden element out of the html flow all together by setting its css position property to fixed. I simulate page scrolling by changing the elements style.left value with some custom touch event handlers. The page has no need to resize or zoom with the addition of the off screen element because fixed position elements do not effect layout.
This doesn't answer my question about resetting the zoom level, however, and I would still appreciate any insight anyone may have.

Disable :active pseudo-class on z-index's layers

I am developing a mobile web app, and I'm a bit confuse with something :
I have one div called UpperDiv with a z-index of 50 and under that div, there is an other one, called UnderDiv with z-index 0.
The problem is, when I "tap" on UpperDiv, it activates the :active pseudo-class on an element (where I clicked) of my UnderDiv. What should I do to disable this ?
----------------------------- EDITED --------------------------------
It finally works !!!!
I forgot to mention that I'm using a transition to open/close my UpperDiv.
So when opening I'm using :
$('#myDiv').css('-webkit-transform', 'translate3d(200px, 0px, 0px)').bind('webkitTransitionEnd', function(){
$('.underDiv').css('pointer-events', 'none');
});
And when I close :
$('#myDiv').css('-webkit-transform', 'translate3d(0px, 0px, 0px)').bind('webkitTransitionEnd', function(){
$('.underDiv').css('pointer-events', 'auto');
});
It works fine for me, if it can help someone else...
If this is on Android, it will be similar to this question
Is there a workaround for the Android browser bug with CSS-Position and clickable areas?
It is a bug in Android browser (and only there) that comes around when you change the DOM of the page along with some z-index stacking. The layers below will be target for mouse clicks even if something is stacked on top of it.
There are some workarounds on the above question which might work for you.
I read about using an empty flash movie with z-index 20 between the two divs.
Here's another question, which might have the answer
Android Webkit: Absolutely positioned elements don't respect z-index
on the issue page at google there is a workaround by some developer.
https://code.google.com/p/android/issues/detail?id=6721#c26
The problem is: If you change the CSS of an HTML element (e.g. display), the Android browser does not keep track of the UI changes the same way it would do it, if the DOM was changed. The change and the UI active areas are not synchronised correctly by only changing CSS. They would be by changing DOM.
So if you display the hight z-index layer with changes in the CSS, do change the DOM of that layer accordingly. This includes some gibberish in some data- attributes.
Comment https://code.google.com/p/android/issues/detail?id=6721#c55 may have a solutions, too

Controlling image movement using scroll bar of browser

I want to guide an image through a path. The scroll down of browser should bring the image down the path, and the scroll up of browser should make the image to trace back its path.
Here is an example of what I would like to acheive:
I want to guide that bug down the path as the user scrolls down through the article on the page and make it retrace its path when the user scrolls up (The bug's head will always be in the direction of motion).
How can I achieve this using jQuery and javascript?
You'll need to calculate the path you intend to use, and then bind a function to the scroll event that moves the image based on the distance scrolled, something like :
$(window).on('scroll', function(e) {
var S = $(this).scrollTop(), // scrolled distance
T = 10 + (S/24), // value for Top
L = 10 + Math.abs(Math.sin(S/400)*50); // value for Left
$("img").css({top: T+'%', left: L+'%'}); //set CSS
});​
FIDDLE
I don't believe you can directly capture the mouses scroll with javascript or jquery alone. As that works with whats part of the browser, and inside the "window". You can however capture a scroll event. Based on the windows height/width. It takes a little calculation via javascript to build a reliable/stable equation that will work on all browsers in all resolutions. I'm not going to go into details here more so due to the fact that your question is rather vague and doesn't supply a problem to be solved more than it sounds like a demand for an answer.
But the essence of what you may want to do is, get the width/height of the window/body. And through some trickery of smoke and mirrors or in this case HTML and CSS and properly laying out a bunch of layers on top of one another create a page thats a mile long, with a hidden scroll bar, that you have 2 layers on top of one acting as your "path" and the other your image.. Of which when scrolled from point a to point b is tracked via the scrolling event of the page being a mile long under it all. And then use that couples with the width/height found to make adjustments so it doesnt run off screen at any given point (less thats what you want).

Javascript - calculate position with iScroll

I have a pagination that needs to look like that:
a busy cat http://img338.imageshack.us/img338/3180/pagination.jpg
Basically, it's a div ( 20 000 px wide) inside another div that have a width of 160 with an overflow:hidden.
I used iScroll to make it scroll (im currently doing the iPad version of my site, so it have to works only on iPad) . So far it's working great, I can scroll in my div, and I need to "click" on the number to go to the page. And then the page reload.
My problem is that when my page load, the current page (the one in pink with a class="current") need to be in the middle of my div (like on the picture). So I need a way in javascript to do that...
For exemple, if I click on page 20, when the page loads, the pagination show the page from 1 to 10, if I scroll I can see that the page 20 is set as "current". Need a way to calculate the position and center it.
I have totally no idea on how to do that with javascript / jquery ...!
Can someone help?
iScroll has a public method for this: scrollToElement – see the docs.
As an aside, the browser in iOS 5 supports scrolling natively with overflow:auto; and a special CSS declaration, -webkit-overflow-scrolling:touch;. I would use the native scrolling support instead of iScroll.

Loading a long page with multiple backgrounds based on vertical scroll value in jQuery?

The design I've been given to work with is 960px wide by around 7000px tall, cut into five vertically-stacked segments at arbitrary points. There's a fixed-placed sidebar that scrolls to each segment, depending on which navigation link is clicked. Atop this are a bunch of sliders, transparent PNGs, headlines and paragraphs, predominantly positioned in a relative fashion.
I need to ultimately do two things:
Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded
Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.
I'm currently using softscroll.js to achieve a smooth scrolling effect for when the sidebar links are clicked (thus scrolling to the related anchors). Thus, lazy loading techniques that begin to load images as you scroll by won't work -- if I click the last link in the sidebar nav and it scrolls me to the bottom, I don't want every image between the bottom segment and the top loading as a result.
While I'll need to figure out point 1 sooner rather than later, I'm more interested in the second question.
How would one use jQuery to load images inside a certain element if and only if the user has paused between two specific vertical scroll values?
Thank you!
(BTW, please don't respond with appelsiini's lazyload jQuery plugin. It's unsupported by the developer and doesn't appear to work in modern browsers. Thanks!)
A slightly more full fat solution to the already great one suggested by Justin is to use jQuery Waypoints to manage the in viewport events.
You may run into issues if you're rewritting the scroll mechanism on mobile browsers using something like iScroll or scrollability. In which case you'll need to use their APIs to investigate a fix.
Check the user's position using scrollTop(). You should be able to do this inside a setInterval() callback.
function loadBackground() {
var userTop = $(window).scrollTop();
var userBtm = userTop + $(window).height();
var elemTop = $('#element').scrollTop();
var elemBtm = elemTop + $('#element').height();
if ((userBtm >= elemTop) && (userTop <= elemBtm))
{
// Load images
}
}
$('document').ready(function(){
setInterval(loadBackground,500);
}
(This is untested code, but you get the idea.)
Edit: Adjusted the conditional so that if any part of the element is in the window it will fire.
Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded
Haven't tested it but you should be able to just do this by sticking a couple of <img>s in with the same src as the background (with display: none; of course) and testing the .complete property of each image, on a short setInterval loop, until they're all loaded. Don't use onload, it tends to be unreliable on images.
Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.
Justin's solution should work for detecting when you're in a given section. Just set a flag to false before you do the softscroll, and true once it stops- and then only mark a section as active when the flag is true.
I would "disable" the images by pointing their src attribute to a 1x1 blank gif, and setting their data-src attribute to the real src. Then just do something like:
$('.selected-section img').each(function () {
$(this).attr('src', $(this).data('src'));
});
You'll have to be sure to set the size of the "disabled" images to the size that they'll be once their image has loaded, or else the page will jump around a lot.
You could use the window.onscroll event handler to detect when you're scrolling, but this is generally a bad idea. For discussion on this see: http://ejohn.org/blog/learning-from-twitter/

Categories

Resources