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)
Related
I've been looking through the Stackoverflow questions, trying to get help with a simple link delay; I want to put it around a div, and I can't make heads or tails of the examples I've found.
So far, I understand that I need to halt the native function of href, but I don't know how to do that. The code is still very alien to me. Help?
Set your href attribute as href="javascript:delay('URL')" and JavaScript:
function delay (URL) {
setTimeout( function() { window.location = URL }, 500 );
}
If you want to delay every link on your page, you can do it with jQuery like this
$(function(){
$("a").click(function(evt){
var link = $(this).attr("href");
setTimeout(function() {
window.location.href = link;
}, 500);
});
});
I use this to keep the function waiting before continuing:
var wait_until = new Date().getTime() + 500;
while (new Date().getTime() < wait_until) {
//Do nothing, wait
}
To delay a link with inline javascript, just
set your href attribute as href="javascript:setTimeout(()=>{window.location = 'URL' },500);".
When you replace the URL with your link, just make sure it is inside the ' '.
<li class="nav-item">
<a href="javascript:setTimeout(()=>{window.location = '#About' },500);">
About Me
</a>
</li>
If you want to open on a new tab (target="_blank"),
This would be #gurvinder372's code changed to account for the new tab:
If you want to use any other target setting, just change the "_blank" to your preferred setting.
function delay(URL) {
setTimeout(function () {
window.open(URL, "_blank"); // this is what I've changed.
}, 500);
}
I have a code, which gets refreshed from mysql database on a button click.
From the mysql I get links of images on refresh, but I never know, hat links and how many.
I have a "loading" circle which spins until the page is loaded, but it is shown only, until the code is loaded, which is not very long. After that I see small empty squares on my page as placeholders, until the real images show up.
Does anybody have an idea, how to show the spinning circle untill all images are loaded?
I tried some javascript examples found on the net with building arrays of links, but I was not able to integrate them into my code, because the construction of the codes are very different and I obviously am not a pro.
So here is my code (I simplified it for now):
$(document).ready(function() {
function refresh(free){
$("#loadingfree").show();
if (free) datum = datum + free;
var url = "listfree.php?date=" + datum;
$.getJSON(url,function(data) {
var div_data = '';
$.each(data, function(i,data) {
div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
});
$("#loadingfree").hide();
$("#app-wrapper-free").html(div_data);
});
}
$(document).on('click', '#prevbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(-1);
});
$(document).on('click', '#nextbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(+1);
});
// call the method when page is opened:
refresh(0);
});
If you want the spinner to continue showing until the images are loaded, you should use the load eventListener to make that happen.
So let's say you have your code that has the spinner while it makes the request to the server.
//just an example
$('button').click(function(){
//call server
$.ajax();
//show spinner
$('.spinner').show();
});
Now we will tell the spinner to stay showing until the images are done loading.
$('img').on('load',function(){
//Not sure what your spinner is called
$('.spinner').hide();
});
I ended up with this.
It just shows the content a bit later. It's a fake preloader.
<script type="text/javascript">
var datum = 0;
$(document).ready(function() {
function refresh(free){
if (free) datum = datum + free;
var url = "listfree.php?date=" + datum;
$.getJSON(url,function(data) {
var div_data = '';
$.each(data, function(i,data) {
if ($("#date_free").html() == '');
div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
});
$("#loadingfree").show();
$(div_data).hide()
.appendTo("#app-wrapper-free")
setTimeout( function() {
$("#app-wrapper-free").children().show()
$("#loadingfree").hide()
}, 3000 );
});
}
$(document).on('click', '#prevbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(-1);
});
$(document).on('click', '#nextbuttonfree', function(e){
e.preventDefault();
$("#app-wrapper-free").empty();
refresh(+1);
});
// call the method when page is opened:
refresh(0);
});
</script>
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>
$(document).ready(function(){
$('#container').load('contents/home.html');
$('#nav ul#navigation li a').click(function(){
var page = $(this).attr('href');
$('#container').fadeOut('slow').load('contents/' + page + '.html').fadeIn('slow');
return false;
});
});
This works good when loading pages within a div container.
home.html containing nivoSlider, when the whole page is refreshing it works good but loading home.html again onto #container after loading pages using function
$('#container').load('contents/' + page + '.html') then the nivoSlider isn't not working.
I have to refresh the whole page just to refresh the div. So I need a code to refresh the div every time it load the pages onto the div #container.
Make sure to encapsulate unique knowledge in a single place in your code. If you need to refresh something, make sure to put this in a single place and then call it as required. Your code could look something like this:
$(document).ready(function() {
var container = $('#container');
function loadContent(url, callback) {
return container.load(url, {}, function () {
// Add code here to refresh nivoSlider
// Run a callback if exists
if (callback) {
callback();
}
});
}
loadContent('contents/home.html');
$('#nav ul#navigation li a').click(function (event) {
var page = $(this).attr('href');
container.fadeOut('slow').loadContent('contents/' + page + '.html').fadeIn('slow');
event.preventDefault();
});
});
I am trying to make chrome extension to be in full screen, but the max I can do is half width. More then that it just give me a scroll bar in the bottom..
How can I make it to be in full screen? meaning, the whole width of the chrome browser?
Thanks!
chrome.windows.update(windowId, { state: "fullscreen" })
See https://developer.chrome.com/docs/extensions/reference/windows/#method-update
In your extensions "background.js" script:
chrome.app.runtime.onLaunched.addListener(function (launchData) {
chrome.app.window.create(
// Url
'/editor.html',
// CreateWindowOptions
{
'width': 400,
'height': 500
},
// Callback
function(win) {
win.contentWindow.launchData = launchData;
win.maximize();
win.show();
});
});
Did you try the fullScreen API ?
addEventListener("click", function() {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
;
rfs.call(el);
});
As seen in this post
for general use on web pages in all browsers, include msRequestFullscreen
addEventListener("click", function () {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if (rfs) { rfs.call(el); } else { console.log('fullscreen api not supported');}
});