I have device detection in place using the following code:
<script>
if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile/i.test(navigator.userAgent) ) {
if(window.location.hash == "#desktop"){
// Stay on desktop website
} else {
window.location = "<?php bloginfo('url'); ?>/m";
}
}
</script>
This works in that it gets the user back to the desktop version of the website, however, my problem occurs when a user taps a link on the desktop site and then gets redirected to the mobile site.
How can I always append the #desktop to all links if the View desktop link has been clicked? Is this possible?
well it's just an idea,
if(window.location.hash == "#desktop"){
$(function(){
$(document).find('a').click(function(e){
e.preventDefault();
window.location.replace($(this).attr("href")+"#desktop");
});
});
}
or
if(window.location.hash == "#desktop"){
$(function(){
$(document).find('a').attr("href",$(this).attr()+"#desktop");
});
}
I think the best solution is using SESSION on server-side code.
Related
I need help please? I want to make my website that has a desktop and a mobile version. The CSS coding of styling to the correct widths of HTML elements are easy but a URL is harder.
I want to know is that how to make a URL that leads to a home page on desktop but on mobile the URL is different but it goes to the same home page as the desktop version but in the mobile version.
Do you know if there is any code that can do that with out getting any errors on previewing it privately. I don't mind if your answers are using PHP or JavaScript etc.
This is a code that i tried to use. I wasn't sure if it worked or not. Can't say it possibly did.
$(document).ready(function() {
$(window).on("load resize", function() {
if($(window).width() <= 950) {
var mobile = window.location = "/mindex.php";
console.log("The location is " + mobile);
} else if($(window).width() > 950) {
var desktop = window.location = "/index.php";
console.log("The location is " + desktop);
} else {
var defaultPlace = "";
console.log("Defualt location: " + defaultPlace);
}
});
});
Can you please help me? Remember, I would like some help on making a mobile redirect URL and a desktop URL but that will both lead to the same page but in different versions please.
You can use user-agent header sent by the browser to check whether the user is mobile user or desktop user and redirect according to the returned value. You can check user-agent header using this -
var usrAgent = navigator.userAgent;
Now you know the user agent, check the returned user-agent is mobile or not and redirect accordingly -
function detectMobile()
{
if(usrAgent.match(/Mobile/i))
{
return "Mobile";
}
}
var isMobile = detectMobile();
if(isMobile)
{
window.location = "MOBILE_URL";
}
else
{
window.location = "DESKTOP_URL";
}
Alternatively,
You can use html link tag to redirect to any webpage according to user device width using this -
<link rel="alternate" media="only screen and (max-width: 640px*)" href="MOBILE_URL_TO_REDIRECT">
*Change this width according to your requirement. 640px is the ideal max width for mobile devices.
I hope this solves your problem.
I'm working a wordpress website that needs a mobile redirect to the mobile home page in case the user is using a cell. I'm trying to utilize this Javascript code but I'm having major difficulties getting it to work properly.
I need help removing the conformation section that asks the user if they want to continue to mobile site.
I also need help figuring out how to restructure the code so it doesn't keep forwarding mobile user to home page. For example, I load the page on mobile, the code runs and it forwards me to mobile page. From there I click on another link in the top navigation and it takes me back to the home page no matter what I do.
Keep in mind I am very new to this so any Input and Help from you experienced folks out there would be much appreciated.
Thank You
P.
<script type="text/javascript">
if (screen.width < 1081) {
var ref = document.referrer;
var urls = new Array("http://www.mymainsite.com","http://m.mymobilesite.com");
var n = ref.match(urls[0]);
var m = ref.match(urls[1]);
if ((m!==null) || (n!==null)) {
stop;
}
else if (ref=='') {
var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE.");
if (r==true) {
window.location = "http://m.mymobilesite.com";
}
else {
stop ;
}
}
else
{
window.location = "http://m.mymobilesite.com";
}
}
</script>
We only activate this code on your main site. Then we check whether or not your screen width is small enough and look into localStorage to see whether or not the user has made a decision before. Then we put up the confirmation box. If the user clicks okay, we go to the mobile site, if not we set the localStorage variable to true. Keep in mind that localStorage is only available IE8+
if(location.hostname === 'mymainsite'){
if (screen.width < 1081 && !localStorage.isMainSite) {
if(confirm('Small Display is Detected.\nClick \"OK\" for MOBILE SITE.')){
window.location = "http://m.mymobilesite.com";
} else {
localStorage.isMainSite = true;
}
}
}
I currently have a list of useful webpages that I am adding to my web-page. I would like to add a link next to each URL that will add it as a bookmark in the users browser. How can I do this?
Further to this, how can I add a "Bookmark all links" button to my page ?
Bookmarking for the user isn't supported by some major browsers. You might want to just let the users do it themselves. If you insist, however, this post has some code Bookmark on click using jQuery
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a.jQueryBookmark").click(function(e){
e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
var bookmarkUrl = this.href;
var bookmarkTitle = this.title;
if (window.sidebar) { // For Mozilla Firefox Bookmark
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
} else if(( window.external && window.external.AddFavorite) || document.all) { // For IE Favorite
window.external.AddFavorite( bookmarkUrl, bookmarkTitle);
} else if(window.opera) { // For Opera Browsers
$("a.jQueryBookmark").attr("href",bookmarkUrl);
$("a.jQueryBookmark").attr("title",bookmarkTitle);
$("a.jQueryBookmark").attr("rel","sidebar");
} else { // for other browsers which does not support
alert('Your browser does not support this bookmark action');
return false;
}
});
});
</script>
This Code is taken from Developersnippets!
Chrome does not support such actions, since the security level could be broken.
I created a jquery mobile web app and on one of the buttons it links to an .HTML file. When I add the web app to my home screen and tap that button it opens the .HTML page in safari instead of staying within the app. I did some research online and came across this file but I still can't get it to work. Any ideas how to address this?
https://github.com/mrmoses/jQuery.stayInWebApp
Here's what I use...applies to all anchors. To make a long story short, it's disabling each anchors default behaviour, grabbing the clicked anchor's href, and then using js to open the link within the web-app. Applied to mobile devices only.
<script>
$(function() {
// prevent anchor links from opening in safari, web-app fix
if (("standalone" in window.navigator) && window.navigator.standalone) {
// For iOS Apps
$('a').on('touchend click', function (e) {
e.preventDefault(); return false;
var new_location = $(this).attr('href');
if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined) {
window.location = new_location;
}
});
}
});
</script>
I have implemented a script to prevent the link in my mobile app on my ipad.
It works fine but I have problem now with the popup I have with jquery mobile.
The problem is when I use this script, the popup window doesn´t open anymore.
What can I do to open the popup window?
The script:
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if('href' in curnode && ( curnode.href.indexOf('http') ||
~curnode.href.indexOf(location.host) ) ) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
In this case, you need to open it programmatically.
$('#popupID').popup('open');
Solved it...
what i have done:
instad to use the script i have write above, i only use this code in the .
<a onclick="parent.location='root/example.html'" id="ex"></a>
this allows me when i see my app in the fullscreen mode.. to navigate between the pages without to open it in the browser, the page loaded in my app.