mobile websites with full site button - javascript

I am looking for a way to do the following
If they are on a mobile device, it goes to -> m.domainname.com/
I want this expandable so that in the future, i can do ->
m.domainname.com/iphone or /ipad etc.
I want there to be a bypass
feature that will allow the user to bypass the mobile version of the
website and go directly to the full version (even if they are on a
smart phone).
I've seen this code in the past, but haven't been able to find it lately and want to make sure I'm doing this the best way possible.
Please give an example of the code or a place I can find the code/a tutorial on the code if possible.
If you see any other tags I didn't include this in that I should have, please add them.
Thanks

Points 1 and 2 have to be done by user-agent checks. It is relatively easy - if you're using a server-side language, you can easily look at the User-agent: header (note however that it can be spoofed!). You can find a full list at http://www.useragentstring.com/pages/useragentstring.php , sorted by browser. For instance, the Safari page has all the iPad user-agent versions.
Point 3 will be a refinement of point 1 - you need to cookie the user with their version.
So, in pure JS, that's going to be hard. Not impossible, but hard.

You can find different ways to detect if it is a mobile device here http://detectmobilebrowsers.com/. Their Javascript sample:
(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge
|maemo|midp|mmp|netfront|opera m(ob|in)i|palm(
os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows
(ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a
wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r
|s
)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|)|g1
u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp(
i|ip)|hs-c|ht(c(-|
||a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac(
|-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(
|/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg(
g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-|
|o|v)|zz)|mt(50|p1|v
)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v
)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-|
)|webc|whit|wi(g
|nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');
As you can see you can change easily the url you want them to navigate to.
A lot of sites use a simple dialog to ask the users if they want to use the normal website, or the mobile, you can do this as well. I am using jQuery Mobile for one of my sites, so I just use a normal dialog:
Good luck.

Related

options for implementing a PowerPoint viewer on HTML for a web app (other than embedding with provided i-frame tag)

Here's what I'm trying to accomplish: displaying a PowerPoint presentation on HTML. The user should be able to start and execute the presentation exactly like when you press the "Start Presentation" button in Microsoft PowerPoint: it goes fullscreen, transitions and animations are played, it goes to the next slide if a duration for the slide is set, on click it goes to the next slide, arrow keys are used for navigating slides and so on. Only need to run the presentation, NOT editing.
I've been looking around and came up with these three approaches:
Creating the viewer from scratch and processing/reading the .pptx file using HTML, CSS and JS, btw is this is feasible?
I know it won't be easy, but it seems it would take a lot of time to develop (I'm just one person working in the project).
Also free or paid approaches both are fine, the more options I get to know the better.
WOPI host, the problem with this is I need a paid Office365 membership.
Embedding using a third party such as Office Online, Google Docs, slides.com, the problem I noticed is that the i-frame they provide lacks from functionality and customization.
So my question is, are there other approaches for this? or is this all there is?
Final Edit: I decided to go with iSpring Converter Pro. Seems like the best option overall
Insane amount of work -> not worth it. But you could use a paid library such as Aspose.Slides
MS WOPI is, indeed, a way to do that. WOPI clients such as Office Online and Office Online Server offer an action called present. That's what you're looking for.
What about SlideShare's API and oEmbed?
Another approach:
Convert the PPTX to ODF and use https://viewerjs.org/

Detect browsers that AREN'T mobile?

I'm using the javascript from http://detectmobilebrowsers.com/ to see check if a browser is mobile and then use a different version of my website.
However I'd also ideally like the site to revert to desktop if a browser isn't one of the mobile ones.
I don't wanna post the whole thing because it's quite long but the function goes like this:
(function(a,b){if(/...'http://detectmobilebrowser.com/mobile');
So basically, I want 'if' to instead have a role of 'if not'. How can I accomplish this?
Shouts out to #JennaSloan in the javascript chat - the answer is to use the following:
if(!( or if(false==(

Wordpress - Change home page on mobile device

I have been searching for some solution to make my home page on mobile devices different than on normal browsers. I need 100% reliable solution but i found only:
Checking with $is_mobile (it doesn't work in all cases)
Using JS scripts to calculate device screen. Not sure how to apply that, all the solutions i have found were only useful for some elements on website not to change the home page in genereal.
Is there any solution to that? Most of the posts seems to be outdated also.
I too spent a lot of time on this topic. I would simply say do not use wp_is_mobile. It can be used to load an entirely new page but it is not reliable. And since you are looking for a reliable solution I would say do not use it. It fails.
Rather use javascript to alter different elements of your home page based on the screen size. Also use media queries.
Some important URLs which you might like to read to get more idea :
https://codex.wordpress.org/Function_Reference/wp_is_mobile
https://wordpress.stackexchange.com/questions/188881/proper-usage-of-wp-is-mobile
https://wordpress.stackexchange.com/questions/73273/wp-is-mobile-function
https://wordpress.stackexchange.com/questions/50219/responsive-theme-design-how-have-slideshow-on-desktops-tablets-and-static-photo/50265#50265

Programmatically "open in Adobe Reader" from JavaScript

The iOS safari browser has a handy option that appears whenever you open a PDF page in the browser
If you have Adobe Reader installed, a button will appear that says:
Open in "Adobe Reader"...
However, if you open up the PDF document where the HUD (address bar, etc) is hidden, like in a phone gap application, or a quick and dirty "Add to Home Screen app" using the following meta:
<meta name="apple-mobile-web-app-capable" content="yes" />
then, obviously, the button will not appear.
I want to still open the PDF document in Adobe Reader. Does anyone know a way to do this programmatically?
I want to include jsPDF in a phonegap application, and save the results, and this would be the easiest way to do that.
Thanks in advance!
With some fantastic help from Vince Parsons (and others), I've solved this problem.
Using a PhoneGap Plugin, you can create / expose a JavaScript call, which is then processed in Objective-c.
Here's the two lines you need (yes, only two lines!), and a subsequent explanation:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,100,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
Explanation
Your input will be the file location.
In my case it's inside the app sandbox, so it looks something like:
/var/mobile/Applications/B16-HU83-GU1D-1D3NT1F13R/Documents/DocumentToExport.pdf
If you want to use an external URL, you can (with adjustments), but for my purposes it was internal.
So, with my file location as an input (let's call my input variable myDocumentPath), you just need to declare a document controller:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
this creates a UIDocumentInteractionController using the interactionControllerWithURL method, which needs an NSURL variable.
We create that NSURL variable using the fileURLWithPath method, passing it our myDocumentPath.
The next line calls presentOpenInMenuFromRect Which takes a rectangle and a viewport:
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,0,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
the rectangle is created at position 0,0 with a width and height of 0,0 (GCRectMake(0,0,1,1))
and the viewport is taken from the PhoneGap application: UIApplication.sharedApplication.keyWindow
I'm reeling with joy and amazement that this only took two lines of code to fix. Granted, there's not a way to do it with JavaScript only, but it's still pretty elegant, and works great.
You can open your PDF using PhoneGap InAppBrowser(http://docs.phonegap.com/en/2.5.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser) if the PDF is opend from the server using a URL or if its from local device, you can use the PDFViewer plugin: https://github.com/phonegap/phonegap-plugins/tree/master/iOS/PDFViewer.
Bothways the native default PDF reader will be used to open the PDF.
I really searched for an ready-to-use solution and gave up at one point. There are a few old repositories on GitHub and some articles building on the two lines of the green marked answer - but nothing works satisfying for me.
That's why i forked the cordova-plugin-file-opener2 to change the iOS behavior and this works perfect for me. To allow also parallel usage of the forked plugin, i've renamed it creatively to cordova-plugin-file-opener3. It provides the same features as version 2.0.1 of the forked plugin except that on iOS the "Open In"-Dialog is shown.
The change to the plugin was trivial. Just replaced one method call and did some renaming. Don't know why it was so hard to find a working solution - but maybe that i didn't search the right way.
You can find the repository here:
https://github.com/napolitano/cordova-plugin-file-opener3
Feel free to use it.

Tracking down display errors in IE, when everything looks good in firefox

I am a super newb at developing web pages. Especially pages that are created dynamically from javascript.
I have a page that I have worked on that uses some templates from prototype, and widgets from dojo, as well as plain old javascript. This page looks and acts perfectly in firefox.
It is basically adding rows to a table, and adding widgets to the cells.
The widgets basically seem like they are in the wrong column/wrong place.
Where do I start looking to figure out what the incompatibilities are between firefox and IE?
There are lots of sites that will give you information about compatibility. I'd check google. Also, you can download IETester which will allow you to see how your site looks in most IE versions (5.5+).
Take a look at: http://www.quirksmode.org/
I am currently trying to make a template that displays well with FF do the same in IE.
So far, I am breaking it down div by div with corresponding JS function.
Then it is easier to look up the specifics of that particular piece you are trying to make compatible.
For example, I was implementing the enter key and noticed it worked well in FF and not IE. After I looked at that specific input box in html and gathered there were no problems with it, I dove into that specific JS function. Inside I found that the currentTarget wasn't "working". I did a quick search on current target in IE and got all the info I needed to get it to work.
Get yourself a good JS debugger as well, FireBug works with both browsers.
There just aren't good web standards in the web industry right now. Everyone is doing their own thing, it is like the house and bank market. These guys are trying though.

Categories

Resources