Hy i just want to know the code to paste to the "index.html" of my website so i Can ask Mobiles users if they want to be redirected to mobile version or go to desktop version
but i haven't figured out a way
Cause the code i found always redirect with no chance to go to desktop version on mobile
I am not able to post the code that i found but the question says it all
If this is not possible i just want to know a code that redirect mobile users only "ONCE" please and thank you
i have no professional experience in this...just a beginner
Following the instructions at http://www.ezmobilewebsitetools.com/howto-redirect.html:
Paste the following code in the <head> section of your index.html
<script>
if ((document.location.hostname.match(/\.mobi$/) || screen.width < 699)
&& (document.cookie.indexOf("skipmobile") == -1 || getCookie("skipmobile") == -1)
{
document.location = "mobile/"; //change this to location of your mobile site
} else if (document.location.search.indexOf("skipmobile") >= 0) {
document.cookie = "skipmobile=1";
}
//getCookie function from http://www.w3schools.com/js/js_cookies.asp
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) {
return unescape(y);
}
}
}
</script>
This will detect if a user is on a device with a screen width of less than 699 pixels, or if they have gone to the .mobi domain of your site (if you have one). To allow the user to go back to the desktop site, create a link somewhere on your mobile page
<a href="http://www.MyWebsite.com/?skipmobile=1">
This will create a cookie notifying the site to go stay on the desktop site for that user. Based on the same logic, I believe putting the following link on the desktop site will change this cookie to allow the user to go back to the mobile site.
<a href="http://www.MyWebsite.com/?skipmobile=-1">
Note that I do not know much about cookies and have not tested this. If someone with more knowledge can verify, or correct, the second link, I would appreciate it, and I'm sure gs2rom would as well.
You can use Cookies. For exemple, set a Cookie when the user selects "desktop version", an when the user comes back check if it exists or not.
How to set a Cookie in PHP here (http://www.w3schools.com/php/php_cookies.asp)
Related
I'm making a simple login page with express.js + E.js.
If the login is wrong, I have a variable badLogin that triggers if the login is wrong (see below), but I'd like the website to redirect back to the login page and not stay on the `auth` page.
Does anybody know how to make this work?
I am new to Web development so this kinda confused me.
If there is no found user:
if (!targetUser) {
await res.render('login', {
badLogin: true
})
}
With this code, the browser stays on the /auth page, but I'd like it to redirect back to the login page. I was going to use res.redirect() but I can't use the variables that I need with that.
TLDR; User logs in -> login is wrong -> redirect back to the login page (not stay on the auth page) and display the error (set the variable to true.
Thanks in advance.
You could make a simple if statement around the login variable you already made.
if(badLogin){
window.location.href="https://your-login-page.com";
}
else{
//go to authentication etc.
}
When you type in an invalid address, Chrome displays a grey page that says "Oops! Google Chrome could not find X. Did you mean Y?"
Because this is not an HTTP page but rather one of the browser's built-in things, I can't put a content script in it and can't control it, so my extension is frozen until the user manually goes to another page.
Since the extension is supposed to be able to control the browser on its own, it's very important that anytime this page opens, it automatically goes back to a page I do have content script access to, and then displays a message instead.
Is this impossible?
You can use the chrome.webNavigation.onErrorOccurred to detect such errors, and redirect to a different page if you want. Unless you've got an extremely good reason to do so, I strongly recommend against implementing such a feature, because it might break the user's expectations of how the browser behaves.
Nevertheless, sample code:
chrome.webNavigation.onErrorOccurred(function(details) {
if (details.frameId === 0) {
// Main frame
chrome.tabs.update(details.tabId, {
url: chrome.runtime.getURL('error.html?error=' + encodeURIComponent(details.error))
});
}
});
According to the docs the only pages an extension can override are:
The bookmarks manager
The history
The new-tab
So, an extension can't change/contol/affect the behaviour of the browser regarding the "Oops!..." page.
I have a pretty standard a tag for a telephone number. It works in everything except Firefox. I thought the tel protocol was standard - is there a workaround I am unaware of?
<a class="tel" href="tel:8001234567">(800) 123-4567</a>
Firefox error message:
The address wasn't understood
Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program.
You might need to install other software to open this address.
Firefox doesn't know a program for every protocol. The user would need to specify a program in the settings in this case. There is no server-side workaround for this, except replacing it with the unofficial callto: introduced by Skype.
I know this is an old question, but this might help if you need a workaround:
var isFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
var isMobile = (typeof window.orientation !== "undefined") ||
(navigator.userAgent.indexOf('IEMobile') !== -1);
if(isFirefox && !isMobile) {
$('a[href^="tel:"]').click(function() { return false; });
}
NOTE:
As #Peter pointed out, this code definitely disables tel: links on Firefox. I added a detection for mobile device (found here) to limit side effects, but it still disables third-party applications that could handle it on desktop.
The phone link DOES work in firefox, and, if no phone app is installed, it informs you why it cannot call the number. It is not an error message, and as comments point out the "solutions" are not appropriate. I am using this hint for pc users in my responsive web site:
<a class="tel" href="tel:8001234567"
title="Clicking this link only works on a mobile phone">
(800) 123-4567
</a>
While not the exact truth, it will explain to most pc users, who do not have a telephone application installed, that they should not utilize the phone number as a clickable link, while mobile users, who have no mouse, will never see the tooltip. Desktop users with a phone app will probably be used to click phone links, and also understand that the tooltip is meant for desktop users without phone app.
I did not uninstall my mail to test if the same message is shown on an anchor tag with href="mailto:...". The message is kind of general to handle any protocol that is not installed, so it sounds kind of cryptic to some users.
I hope my footnote is not outdated.
Current version of firefox copes pretty fine with the href="tel: (on Windows 10, which asks me to define the required application for the telephone call).
But:
It seems firefox has still problems with AJAX-calls following the onclick-event on the tel-link.
HTML:
anynumber
Javascript (experimental):
function log_action(aid,action2){
$.getJSON('myscript_ajax.php',
{action: "log_action",
actionid: aid,
action2: action2
})
.done(function(data)
{
console.log(data);
})
.error(function(jqXHR, textStatus, errorThrown) {
console.log("error " + textStatus);
console.log("incoming Text " + jqXHR.responseText);
});
}
While chrome logs the response from the php-script as expected, firefox displays the error-notice with empty text-status and response text.
Maybe the AJAX-request works fine in case a telephone IS installed, but i have none, and developing server-applications, I cannot know whether the client has, either.
I started to program my own Chrome extension today and I'm stuck since hours with one problem.
Right now, I'm sending the current URL from the open website to my server where it's checked against some criterias and then a return value is sent back to the extension. This is working so far. I'm using only a popup.html, no background page.
The request is only sent when the user clicks on the icon in the browser.
How can I realize that the request is automatically sent, when the page is loaded?
If there is a specific return value from the server the user should be given an unannoying warning. Alert boxes and new windows are...well...annoying. Best way should be the little popup under the icon of the extension but that's not possible without a user's click. So I thought of a little -layer at the top of the page.
<html>
<head>
<script>
window.addEventListener("load", sendRequest, false);
function sendRequest() {
var q = "test";
xmlHttp=new XMLHttpRequest();
xmlHttp.open('GET', 'http://www.testurl.com/check.php?q='+q, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.getElementById("textf").innerText = xmlHttp.responseText;
chrome.tabs.executeScript(null,{code:"<div style='position: absolute; top: 0; left: 0; background-color=blue;layer-background-color: blue;'><p>test </p><p>test2 </p></div>"});
}
}
xmlHttp.send(null);
}
</script>
</head>
<body>
//Just for the popup...
<font color="blue"><p id="textf">Checking...</p></font>
</body>
</html>
If I do
chrome.tabs.executeScript(null,{code:"alert('testalert')"});
it gives me the alert. However, the isn't working and I can't figure out why :(
Do I need a background page for all this since I only want to check the URL when the page is loaded?
Why is the -thing not working but the alert is?
Thank you in advance!
chrome.tabs.executeScript is for JavaScript only. To add content to a Web page, you must write JavaScript that manipulates the DOM. A good place for you to start learning this may be Mozilla's DOM docs. (DOM is a W3C standard and Chrome has implemented it, so yes, Mozilla pages are relevant here.)
If I may say so, it sounds like the best way forward for you is to scrap this and start over with a content script defined in your manifest so that Chrome will execute it for you; check the Content Scripts documentation to learn more. Since you're trying to accomplish your goal with no background page, and would therefore need to use XMLHttpRequest directly from your content script, you should add "minimum_chrome_version": "13" to your manifest, as Chrome 12 and earlier won't let you do that.
By the way, practically no one will understand what you're talking about when you use "-layer" and "-thing" like that. Please be more careful in making sure you are using proper terminology. Ask your peers if you're unsure of the proper term for something.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
How can I detect if a user is viewing my web site from a mobile web browser so that I can then auto detect and display the appropriate version of my web site?
There are open source scripts on Detect Mobile Browser that do this in Apache, ASP, ColdFusion, JavaScript and PHP.
Yes, reading the User-Agent header will do the trick.
There are some lists out there of known mobile user agents so you don't need to start from scratch. What I did when I had to is to build a database of known user agents and store unknowns as they are detected for revision and then manually figure out what they are. This last thing might be overkill in some cases.
If you want to do it at Apache level, you can create a script which periodically generates a set of rewrite rules checking the user agent (or just once and forget about new user agents, or once a month, whatever suits your case), like
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
which would move, for example, requests to http://domain/index.html to http://domain/mobile/index.html
If you don't like the approach of having a script recreate a htaccess file periodically, you can write a module which checks the User Agent (I didn't find one already made, but found this particularly appropriate example) and get the user agents from some sites to update them. Then you can complicate the approach as much as you want, but I think in your case the previous approach would be fine.
Just a thought but what if you worked this problem from the opposite direction? Rather than determining which browsers are mobile why not determine which browsers are not? Then code your site to default to the mobile version and redirect to the standard version. There are two basic possibilities when looking at a mobile browser. Either it has javascript support or it doesn't. So if the browser does not have javascript support it will default to the mobile version. If it does have JavaScript support, check the screen size. Anything below a certain size will likely also be a mobile browser. Anything larger will get redirected to your standard layout. Then all you need to do is determine if the user with JavaScript disabled is mobile or not.
According to the W3C the number of users with JavaScript disabled was about 5% and of those users most have turned it off which implies that they actually know what they are doing with a browser. Are they a large part of your audience? If not then don't worry about them. If so, whats the worst case scenario? You have those users browsing the mobile version of your site, and that's a good thing.
Here's how I do it in JavaScript:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
See an example at www.tablemaker.net/test/mobile.html where it triples the font size on mobile phones.
My favorite Mobile Browser Detection mechanism is WURFL. It's updated frequently and it works with every major programming/language platform.
Have you considered using css3 media queries? In most cases you can apply some css styles specifically for the targeted device without having to create a separate mobile version of the site.
#media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
You can set the width to whatever you want, but 1025 will catch the iPad landscape view.
You'll also want to add the following meta tag to your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Check out this article over at HTML5 Rocks for some good examples
for ANDROID , IPHONE, IPAD, BLACKBERRY, PALM, WINDOWS CE, PALM
<script language="javascript"> <!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("MOBILE DEVICE DETECTED");
document.write("<b>------------------------------------------<br>")
document.write("<b>" + navigator.userAgent + "<br>")
document.write("<b>------------------------------------------<br>")
var userAgent = navigator.userAgent.toLowerCase();
if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
document.write("<b> ANDROID MOBILE <br>")
else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
document.write("<b> ANDROID TABLET <br>")
else if ((userAgent.search("blackberry") > -1))
document.write("<b> BLACKBERRY DEVICE <br>")
else if ((userAgent.search("iphone") > -1))
document.write("<b> IPHONE DEVICE <br>")
else if ((userAgent.search("ipod") > -1))
document.write("<b> IPOD DEVICE <br>")
else if ((userAgent.search("ipad") > -1))
document.write("<b> IPAD DEVICE <br>")
else
document.write("<b> UNKNOWN DEVICE <br>")
}
else
alert("NO MOBILE DEVICE DETECTED"); //--> </script>
The Mobile Device Browser File is a great way to detect mobile (and other) broswers for ASP.NET projects: http://mdbf.codeplex.com/
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
This example works in asp.net
You can detect mobile clients simply through navigator.userAgent , and load alternate scripts based on the detected client type as:
$(document).ready(function(e) {
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
//write code for your mobile clients here.
var jsScript = document.createElement("script");
jsScript.setAttribute("type", "text/javascript");
jsScript.setAttribute("src", "js/alternate_js_file.js");
document.getElementsByTagName("head")[0].appendChild(jsScript );
var cssScript = document.createElement("link");
cssScript.setAttribute("rel", "stylesheet");
cssScript.setAttribute("type", "text/css");
cssScript.setAttribute("href", "css/alternate_css_file.css");
document.getElementsByTagName("head")[0].appendChild(cssScript);
}
else{
// write code for your desktop clients here
}
});
You can check the User-Agent string. In JavaScript, that's really easy, it's just a property of the navigator object.
var useragent = navigator.userAgent;
You can check if the device if iPhone or Blackberry in JS with something like
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
if isIphone is true you are accessing the site from an Iphone, if isBlackBerry you are accessing the site from a Blackberry.
You can use "UserAgent Switcher" plugin for firefox to test that.
If you are also interested, it may be worth it checking out my script "redirection_mobile.js" hosted on github here https://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:
http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/
You haven't said what language you're using. If it's Perl then it's trivial:
use CGI::Info;
my $info = CGI::Info->new();
if($info->is_mobile()) {
# Add mobile stuff
}
unless($info->is_mobile()) {
# Don't do some things on a mobile
}
Yes user-agent is used to detect mobile browsers. There are lots of free scripts available to check this. Here is one such php code which will help you redirect mobile users to different website.
I put this demo with scripts and examples included together:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
This example utilizes php functions for user agent detection and offers the additional benefit of permitting users to state a preference for a version of the site which would not typically be the default based on their browser or device type. This is done with cookies (maintained using php on the server-side as opposed to javascript.)
Be sure to check out the download link in the article for the examples.
Hope you enjoy!
MobileESP has PHP, Java, APS.NET (C#), Ruby and JavaScript hooks.
it has also the Apache 2 licence, so free for commercial use.
Key thing for me is it only identifies browsers and platforms not screen sizes and other metrics, which keeps it nice an small.
There's a brand new solution using Zend Framework. Start from the link to Zend_HTTP_UserAgent:
http://framework.zend.com/manual/en/zend.http.html