Develop Reference

Sliding an image when the scroll reaches it

HTML:
<div id="slideimage">
<img src="file:///android_asset/images/mainpageimage1.jpg" style="width:100%; height:auto; padding-bottom:7px;" >
<img src="file:///android_asset/images/mainpageimage2.jpg" style="width:100%; height:auto;" >
</div>
Script:
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 700 ) {
$("slideimage").animate({left: '250px'});
}
I have the code above but it doesn't do anything.
I just need a simple code to slide the image.
The problem is that the code is an Android app based on HTML code, not a website, and I'm new to it so I don't know if it works the same.

You are forgetting the hash (#) in the jQuery selector.
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 700 ) {
$('#slideimage').animate({left: '250px'});
}
}
Check to see if it works right now.

Using jQuery "swipe" function to navigate an array of images

I'm building a simple slideshow that is controlled by buttons when viewed on a computer and by swiping gestures on touch screen devices. This is a demo with 3 images.
Each image, its corresponding caption and the navigation are contained within one div. Here's the first one:
<div class="item" id="1">
<img src="...">
<div class="caption">
caption 1
</div>
<div class="navigation">
&lt 1 / 3 &gt
</div>
</div>
These divs are shown or hidden using the "click" and "swipeleft / swiperight" functions.
$(document).ready(function () {
$("#1prev").click(function () {
$("#1").hide();
$("#3").show();
});
$("#1").on("swipeleft", function () {
$("#1").hide();
$("#3").show();
});
$("#1next").click(function () {
$("#1").hide();
$("#2").show();
});
$("#1").on("swiperight", function () {
$("#1").hide();
$("#2").show();
});
});
The slideshow will contain as many as 40 images in total. Is there a way to condense the script? Is this a relatively efficient and accessible solution? Is the code written properly? Can it be improved?

You could do something like this:
For the items, I have assigned classes to the prev and next buttons instead of IDs.
<div class="item" id="1">
<img src="http://www.leecorbin.co/img1.jpg" width="50%" />
<div class="caption">caption 1</div>
<div class="navigation">
&lt
1 / 3
&gt
</div>
</div>
Then in script, on pagecreate
Hide all items and show only the first one.
Add a handler for swipeleft and swiperight on items.
Add a click handler for the navigation buttons
Within these handlers determine which direction we are going and which slide we are currently on.
Call a function passing in the direction and current slide; it determines the next slide to show and makes the transition.
$(document).on("pagecreate", "#page1", function () {
$(".item").hide().first(0).show();
$(document).on("swipeleft swiperight", ".item", function (e) {
var dir = 'prev';
if (e.type == 'swipeleft') {
dir = 'next';
}
GoToNextSlide($(this), dir);
});
$(document).on("click", ".navigation > a", function (e) {
var dir = 'prev';
if ($(this).hasClass("nextBtn")) {
dir = 'next';
}
var $item = $(this).closest(".item");
GoToNextSlide($item, dir);
});
});
function GoToNextSlide($item, direction) {
var $next;
if (direction == 'next') {
if ($item.next().length > 0) {
$next = $item.next();
} else {
$next = $(".item").first();
}
} else {
if ($item.prev().length > 0) {
$next = $item.prev();
} else {
$next = $(".item").last();
}
}
$item.fadeOut(function () {
$next.fadeIn();
});
}
Updated DEMO

scrollLeft wrong calculation on Firefox Android

How it's expected to work
I created a scollable div for a project. The position of the scrollbar is calculated width jQuery. In a desktop environment there is a visible slider. On mobile devices there is not but it's still possible to swipe left to get more content.
(It does not yet update on window resize. Reload is required.)
Expected: "overflow_diff" should be equal to "Scoll pos". "Percentage" should be 100 when scolled to the end.
What works
It works fine in Chrome and Firefox on desktop and on Chrome on Android.
What does not work - My question
Firefox on Android does the calculations all wrong. Strange is that it works on desktop. If it's a bug in Firefox, how do I get around it?
Full example
http://xn--trnell-wxa.se/scrolltest2/index.php
HTML header
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
CSS
* {
padding: 0;
margin: 0;
}
.wrap {
padding: 40px;
background: #eee;
width: 75%;
}
.cropped {
overflow-x: auto;
}
.overflow {
width: 300%;
background: #ddd;
height: 100px;
}
JS
jQuery(window).ready(function($) {
var cropped_width = $('.cropped').width();
var overflow_width = $('.overflow').width();
var overflow_diff = overflow_width - cropped_width;
$( '.log' ).append( 'Overflow: ' + overflow_width + '<br>' );
$( '.log' ).append( 'Cropped: ' + cropped_width + '<br>' );
$( '.log' ).append( 'Overflow diff: ' + overflow_diff + '<br>' );
$( '.log' ).append( '<div class="scrolled"></div>' );
$( '.log' ).append( '<div class="scrolled2"></div>' );
$( '.cropped' ).on('scroll touchmove', function() {
var scroll_pos = $( this ).scrollLeft();
var percentage = Math.round( scroll_pos / overflow_diff * 100 );
$( '.log .scrolled' ).html( 'Scroll pos: ' + scroll_pos + '<br>Percentage: ' + percentage + '<br>' );
});
});
HTML
<div class="wrap">
<div class="cropped">
<div class="overflow">Swipe to the end</div>
</div>
</div>
<div class="log"></div>

I think you should bind your event with .on() and use touchmove event too:
$( '.cropped' ).on('scroll touchmove', function() {
// the code here
});

From #Joeytje50 answer Android browsers not handling touchmove events correctly
Turns out the problem here was simply the fact the event handler
didn't have an event.preventDefault() in it, so the original action
still executed, which apparently interrupted the touch event. To fix
this, simply add e.preventDefault() in the current event handler
function to cancel the current event, and make it work as expected in
Chrome and Opera too.
Also, to check whether you use scroll or touchmove you can use the below condition,
// ..... your remaining code
$( '.log' ).append( '<div class="scrolled2"></div>' );
var eventName='scroll';
if ('ontouchstart' in document.documentElement) {
eventName = 'touchmove';
}
$( '.cropped' ).on(eventName , function(e) {
(eventName == 'touchmove') ? e.preventDefault() : '';
var scroll_pos = $( this ).scrollLeft();
// your remaining code
});

Google Maps v3 too close and height is incorrect on jQuery Mobile and PhoneGap

I want to add Google maps v3 with Geolocation into my jQuery Mobile / PhoneGap Android app but I've some problems:
It locates my position correct, but it's (the radius?) too close. I've changed the value of the radius at my code, but nothing happens. You can see the problem here: http://s7.directupload.net/images/131214/nbc3wudy.png
The second problem concers the height. You can see that at the screenshot too. The maps is too high for the screen, but I don't know how to change it.
And the last problem is this error: /android_asset/www/js/jquery.ui.map.js: Line 46 : Uncaught TypeError: Cannot call method 'apply' of undefined
Here is my code:
index.html
<div data-role="page" id="GPS">
<div data-role="header">
LeftPanel
<h1></h1>
</div>
<div data-role="content" id="map-content">
<div id="map-container"></div>
</div>
<script type="text/javascript">
$('#GPS').on("pagecreate", function() {
var positionOutput = function(position){
var longpos = position.coords.longitude;
var latpos = position.coords.latitude;
$('#map-container').height($(window).height());
$('#map-container').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map-container').gmap('addMarker', {'position': clientPosition, 'bounds': true});
$('#map-container').gmap('addShape', 'Circle', {
'strokeWeight': 0,
'fillColor': "#008595",
'fillOpacity': 0.25,
'center': clientPosition,
'radius': 15,
'clickable': false
});
}
});
};
navigator.geolocation.getCurrentPosition(positionOutput);
});
</script>
</div>
CSS:
#map-content {
padding: 0px;
}

JQuery Mobile ListView

I'm having 2 strange problems with the code I'm using to pull in some data to use in a listview. Here is my javascript:
function getOrders(status, url) {
$(function () {
//check if url from pagination
if (!url) {
url = api_url + '/orders/?callback=?&status=' + status;
} else {
url = root_url + url + '&callback=?';
}
$.mobile.loading('show');
$.getJSON(url, null, function (d) {
//declare a variable with which to build our output (it's best to buffer output and only do one append at the end since DOM manipulation is CPU expensive)
var output = '';
//iterate through the data (we could also get rid of the jQuery here by using `for (key in data) {
$.each(d.objects, function (index, value) {
output += '<li><a id="' + value.reference + '" href="view_order.html" class="view_order"><h3>' + value.reference + ' - ' + value.client.company + '</h3><p>' + value.order_date + ' ' + value.user.username + '</p></a></li>';
});
$('#orders_list').html(output).listview('refresh');
//if paginated, update next button
if (d.meta.next) {
$("#id_ordersNext").attr('href', d.meta.next);
$("#id_ordersNext").show();
} else {
$("#id_ordersNext").hide();
}
if (d.meta.previous) {
$("#id_ordersPrevious").attr('href', d.meta.previous);
$("#id_ordersPrevious").show();
} else {
$("#id_ordersPrevious").hide();
}
$("#id_ordersTotal").html(d.meta.total_count);
$.mobile.loading('hide');
});
});
}
$(function () {
//bind the nav
$(".order_nav").die();
$(".order_nav").live('click', function () {
$(".order_nav").each(function () {
$(this).removeClass('ui-btn-active');
});
$(this).addClass('ui-btn-active');
getOrders($(this).attr('href'));
return false;
});
//bind the view order
$(".view_order").die();
$(".view_order").live('click', function () {
//save var
window.viewOrderReference = $(this).attr('id');
$.mobile.changePage("view_order.html");
});
$("#id_ordersNext,#id_ordersPrevious").die();
$("#id_ordersNext,#id_ordersPrevious").live('click', function () {
getOrders(null, $(this).attr('href'));
return false;
});
//default view
getOrders('Order Placed');
});
Here is the html I'm using for the page that's being loaded via JQMobile:
<div data-role="page" data-needs-auth='true'>
<script src="js/list_orders.js"></script>
<div class="headerDiv" data-role='header' data-theme='b'>Home
<h1>Jubilee Distributors</h1>
Login</div>
<div data-role='navbar'>
<ul>
<li>Placed</li>
<li>Picked</li>
<li>Delivered</li>
</ul>
</div>
<div data-role="content">
<ul data-role='listview' id="orders_list" data-filter="true"><li>No records found</li></ul>
<p>Previous <span id='id_ordersTotal' class='record-count'></span> records found Previous
</p>
</div>
<div id='footerDiv' data-role="footer"></div>
</div>
This all works fine in any browser on a desktop, but when I run it on an Android device 2 things happen, or rather don't.
The last line in the $(function() - getOrders('Order Placed'), doesn't seem to execute, or if it does, it's not updating the list with the returned result. If I click the first link with the "Orders Placed" it works no probs.
The addClass is not actually adding the class.
Like I said, this all works fine in any desktop browser, but not on the Android device.
Any ideas?
EDIT: Fixed the second problem, however the first problem still exists.. It works if I navigate to the page, then away from it, then back again tho.

Fixed this error by changing the dom ready function to pageinit.