I am working on a JQuerymobile site with multiple pages. If one of the pages is shown (id="shown"), I want a redirect to another page (id=#redirected") after a delay of 6 seconds.
In my code, the commented line works for this, but the problem is that it even redirects to the #redirected page if the user changes to another sup page in the meantime. So what I would need would be an "if other page is not shown" thing in here.
I also tried with JQuery "changePage" (which would be good to handle transitions etc.), but I don't know how to implement a delay here.
Please see my code:
$("#shown").bind("pageshow", function(e) {
//window.setTimeout('window.location="#redirected"; ',6000);
$.mobile.changePage("#fertig", { reverse: "false"});
I made a working jsfiddle for you:
http://jsfiddle.net/zUZMx/
Using the jQuery mobile multi-page template with three pages with ids "one", "two", and "three". When navigating to two it initiates a timeout of 6 seconds after which it checks if the active page is "two" and, if so, proceeds to redirect the user to three using mobile changePage (so you can make full use of transitions).
Javascript used:
$(document).delegate("#two", "pageshow", function(event) {
setTimeout(function() {
if($.mobile.activePage.attr("id") == "two") {
$.mobile.changePage("#three", {
transition: "slide"
});
}
}, 6000);});
If I understood your case correctly "two" would be changed to "shown" and "three" to "redirected".
Related
I am using Bootstrap 5.0.2 as the basis of my website, I finally got the modal to appear on page opening, thanks stack overflow, my aim is to not have the modal appear should the visitor move to another page and then return.
This is the code for running the modal. What do I need to add to make it only function the first time this page is viewed per session?
<script>
window.addEventListener('DOMContentLoaded', () => {
const modal = new bootstrap.Modal(document.querySelector('#myModal'));
modal.show();
});
You would need to implement sessionStorage.
When a user visits the page, we check to see if the sessionStorage contains a value for the modal. If it is the first time they load the page, it would not contain a value as we haven't set anything to it yet. In that case, we show the modal as normal and set a value for the sessionStorage. That way, when the user refreshes the page the value is already set in sessionStorage so the if statement will not run.
window.addEventListener('DOMContentLoaded', () => {
if (!sessionStorage.getItem("modal")) {
const modal = new bootstrap.Modal(document.querySelector('#myModal'));
modal.show();
sessionStorage.setItem("modal", "blah");
}
});
So I'd like to use ratchet to create a mobile web experience (and not a phone gap/hybrid app experience), and ratchet seems like a good fit for that. However, I don't want the functionality to be broken if a user views my prototype from a desktop browser (it can be ugly ). I've noticed that some of the javascript like the modals don't work in a desktop and only on the mobile device.
What's the work around to get something like the modal working on a desktop browser as well?
I noticed in the js file that I can just add the same event listener to the click event from the touched event like so:
window.addEventListener('click', function (event) {
var modal = getModal(event);
if (modal) {
if (modal && modal.classList.contains('modal')) {
modal.classList.toggle('active');
}
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
}
});
Any suggestions on doing a side by side with say bootstrap? Is that feasible?
How FB refreshes the page without reloading it (xmlHttpRequest) but Back/Forward Buttons still work as usual?
It's not about using history.pushState() methods. PushState() only changes URL-string but does nothing to get previous looking page after you click Back Button. So it's smth different.
Here's my code and example.
I have such site (look at the pic below). Header-div and Content-div. At the begining when you first time open it, the URL is mysite.com/page1.php. I want to change content in Content-div without reloading page. Just new info should appear in Content-div. And the URL should change to mysite.com/page2.php.
Here's HTML-code.
<div id="content"></div>
Reload Content
Here's JS-code to it.
document.getElementById("relaodLink").onclick = function() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "page2.php", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("content").innerHTML = xmlHttp.responseText;
}
}
return false;
}
So Header should not reload after pressing relaodLink, just content in Content-div changes. And most important: URL should change like page was really reloaded. Back Button allows to go to mysite.com/page1.php and then Forward Button allows to go back to mysite.com/page2.php again. With history.pushState() methods it doesn't work. But in FB Back and Forward Buttons work fine. How to make it?
(source: ljplus.ru)
This is an excellent question. If you observe, you can notice that the back buttons and forward buttons will work in gmail also though it is completely built on Ajax.
The browser back and forward buttons work on storing what is there in the address bar. So in Ajax, if you never change what is there in the address bar, it doesn't go into the history and hence back and forward buttons don't work.
For this to work, you need to append something to the address bar constantly.
For example : In gmail,
When Inbox is clicked - https://mail.google.com/mail/?tab=mm#inbox
When Starred is clicked - https://mail.google.com/mail/?tab=mm#starred
When Sent is clicked - https://mail.google.com/mail/?tab=mm#sent
So in this way, gmail keeps appending to address bar. Hence history is preserved. The same goes with facebook also. Though the page is not refreshed, the location in address bar changed - that's the key here !!
I hope it helps you !
I have the following code to check if my tab is liked by the user:
protected bool IsPageLiked()
{
try
{
var current = ConfigurationManager.GetSection("facebookSettings")
as IFacebookApplication;
dynamic data = FacebookWebContext.Current.SignedRequest.Data;
if (data.page != null)
{
var pageId = (String)data.page.id;
var isUserAdmin = (Boolean)data.page.admin;
var userLikesPage = (Boolean)data.page.liked;
if (userLikesPage)
return true;
}
}
catch (Exception ex)
{
return false;
}
return false;
}
This works correctly when I load my tab initially.
However, if I try and call the same code after changing page within the tab, I get the following error:
{"Precondition failed: !String.IsNullOrEmpty(signedRequestValue)"}
Is there a way I can make this code work after the first page?
I know I can check if the tab is liked on the first page, and put this into a session object or something, but I'd prefer not to do this.
My app itself is MVC 3
Thanks
EDIT
I think what is happening is when I change page (I'm using a RedirectToAction method), it's loosing the signed_request query string, hence the error I am getting.
Edit 2
Not sure the above is what is happening after all, as I can't see any query string values on the initial page? It's still not able to get the signedrequest.
It looks like the signed_request is a form object (Request.Form["signed_request"] returns the string in the inital page, but not the second page).
Page tabs are basically just your app within an iframe on the page, like you've noticed the signed request is POSTED to the tab on page load.
When you change page within the tab the outer Facebook frame isn't reloading so the signed_request is not being re-posted to your tab which is why you can't access it again.
You will need to either pass the signed_request from one page to the next yourself or make sure all links use target="_top" so that the whole page is reloaded each time and you still get the POST.
To define which page you want your tab to load you can use an additional parameter called app_data in the url to your tab, eg
http://www.facebook.com/MY_PAGE?sk=app_MY_APP_ID&app_data=A_STRING_OF_DATA
Your tab will then receive this as part of signed_request, you can grab it and use it to work out which page your tab needs to display.
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};