I'm trying to trigger an event with jQuery mobile that automatically reloads the page when the device's orientation changes. I have media queries written with max-device-width, orientation:landscape, and orientation: portrait. Since the <video> wont scale properly...the only solution I can think of is to refresh the page to the correct media query with the device is rotated.
How do I go about doing this? Thanks.
Thanks guys who answered but I found this and used this and it worked perfectly.
<script type="text/javascript"> // RELOADS WEBPAGE WHEN MOBILE ORIENTATION CHANGES
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
case 90:
case -90: window.location.reload();
break; }
};
How about this?
$(window).on('orientationchange', function(e) {
$.mobile.changePage(window.location.href, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
});
It would be best to namespace that orientationchange event to a specific page.
jQM docs on orientationchange event
using jQuery
$(window).bind('orientationchange', function (event) {
location.reload(true);
});
Please try the following code to redirect the page on orientation event, its work well for me
if (window.DeviceOrientationEvent) {
window.addEventListener('orientationchange', function() { location.reload(); }, false);
}
Thanks
<script type="text/javascript">
window.addEventListener("orientationchange", function() {
console.log(screen.orientation);
}, false);
</script>
Related
I have a button that opens up a pop-up window for a contact form, but the pop-up is not scrolling on mobile, so I was just thinking that it might be easier to change the button for mobile only. Is there a way to plug in some code to make this work for now?
The code for the button is:
<a class="book-now call-popup" href="booking-form.html" title="">Book Now</a>
where if I take out "call-popup" it disables the popup and takes you to the url. Any way to set this up so that on mobile the "call-popup" is turned off/disabled?
EDIT:
Added the following
function checkWidth() {
if ($(window).width() < 758) {
$('#popup').removeClass('call-popup');
} else {
$('#popup').addClass('call-popup');
}
}
$(window).resize(checkWidth);
and
<a id="popup" class="book-now" href="booking-form.html" title="">Book Now</a>
But it is not working. I mean, when I inspect the page, it IS working correctly, but it is still calling the popup even when the class has been removed for some reason. And strangely enough, it is working on my fiddle, but not my site:
http://jsfiddle.net/5SM9u/51/
EDIT 2: Since it was asked, here is the popup js
/*=================== Book Now Popup ===================*/
$(".call-popup").on("click", function() {
$(".booking-popup").fadeIn();
return false;
});
$(".booking-popup").on("click", function() {
$(this).fadeOut();
return false;
})
$(".popup-inner, .datepicker").on("click", function(e) {
e.stopPropagation();
});
$(".booking-popup .close-btn").on("click", function() {
$(".booking-popup").fadeOut();
});
/*=================== Popup ===================*/
$(".call-popup-alert").on("click", function() {
$(".popup").fadeIn();
return false;
});
$(".popup").on("click", function() {
$(this).fadeOut();
return false;
})
$(".simple-popup-inner").on("click", function(e) {
e.stopPropagation();
});
$(".popup .close-btn").on("click", function() {
$(".popup").fadeOut();
});
I am creating a page to work on low-end devices. Where JS support may not be available or very poor.
So I want to hit an tag on page load for Tracking purpose.
Please help.
please try this one:
window.whenloaded = function(fn) {
if (window.onload) {
var old = window.onload;
window.onload = function() {
old();
fn();
}
} else {
window.onload = fn;
}
}
DEMO
I am creating a Phonegap app and I really want to avoid jqm in the project, because the css is just blowing up the whole html code. So I can change the pages with
window.location = "profiles.html";
but that's a pretty hard cut in the user experience and I really want to change this to something more smooth. Are there any possibilities to enhance the changepage process, maybe with css or something?
You can use a fade effect.
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').fadeOut(speed, function() {
window.location = "profiles.html";
});
});
});
});
See it in action (jsFiddle)
I'm using the jquery-ui-map plugin and my test page (test.html) loads a Google Map correctly when I click the button. This SAME test.html don't work if a load it from another jquery mobile page. What I'm doing bad or what I'm missing? Next the significant code:
Javascript in the header (like in the example for the basic map):
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({
'center': mobileDemo.center,
'zoom': mobileDemo.zoom,
'disableDefaultUI':true,
'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
And the html (sorry, I can't post the HTML code because it's interpretatded, but the link is below):
http://www.medlifesolutions.com.mx/locations/mobile/test.html
As I said, this works perfect if I write test.html in the browser directly but if comes from another page:
http://www.medlifesolutions.com.mx/locations/mobile/main.php
it simply ignores a "click" or touching the button to show the map. Thanks in advance for your help.
One problem I see in your code is the use of live. It is recommended to replace live with on.
I know that Chrome don't support onfinish event on marquee tag.
I decide to use JQuery plugin here: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
In this post, the author say it can capture stop event.
How ever, I cannot use it. Please help me out.
you should call .bind() for the the stop event. please see my example code below. hope it helps.
$(document).ready(
function(){
$('div.demo').marquee('pointer')
.bind('stop', function() {alert($(this).text())})
.mouseover(function () {
$(this).trigger('stop');
//alert($(this).html());
}).mouseout(function () {
$(this).trigger('start');
}).mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
}).mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
$(this).data('drag', false);
})
});