I would like to redirect any request for my web page to my mobile page (based on the screen size)
We have all layers like Ngnix, SQUID, Spring application.
I'm trying to do it in the web page (the JSP), in the javascript block. But my JSP page where i had my redirect is very huge (I cant fix it now). Its working but, it loads the complete page and then does the redirect, which isnt the optimal thing. Where else can i handle this (Ngnix/SQUID)?
If I'm forced to do it in JS/web page, is there anyway I can do that in without loading the huge page?
Thanks
Mahesh
Check this article out on css-tricks.com by Chris Coyier. In the article he discusses how to mobile redirect visitors based on screen size or targeting specific mobile options.
http://css-tricks.com/snippets/javascript/redirect-mobile-devices/
Related
I am newer to JavaScript and I am working on a website where I want to be able to switch the URL when I click on certain elements of the site without reloading the page.
I want it to work like http://www.itemcycle.com when you click on the link to sell your iPad or iPhone and then select your model. It shows different boxes, and when you click on them, it changes the URL but I know it's not loading a new page because it doesn't scroll me back to the top.
Thanks in advance for your help!
what you are seeing is a single page application
A single-page application (SPA), also known as single-page interface
(SPI), is a web application or web site that fits on a single web page
with the goal of providing a more fluid user experience akin to a
desktop application.
It will be achieved by using certain JS frameworks. AngularJS is the popular one.
Try this:
window.location.href="/yourUrl";
HTML5 introduced the history.pushState() which allows you to add and modify history entries.
window.history.pushState('page1', 'Title', '/page1.php');
This might worth looking.
There's 2 main ways to redirect a user, each with it's tradeoffs:
You can redirect a user to a new page by changing the value of window.location.href. So for instance window.location.href='https://example.com'; will redirect a user to https://example.com. Note this will do a hard page reload, so the page will actually reload.
To change the url path without redirecting the user to a new page you can do use history.pushState. Doing something like:
history.pushState({}, "page 2", "/page2");
will change the url from https://example.com to https://example.com/page2 and the scroll position won't change. You can then listen to changes from history.pushState and update the page accordingly giving you effect you're looking for. Note you cannot change the domain (i.e. you can't go from https://example1.com to https://example2.com), but on the plus side the page will not actually be reloaded.
As others have pointed out there are various frameworks which allow you to do this type of thing, but those frameworks are making use of the techniques I've described above.
I'm currently working on the web-site using Polymer, Jekyll and Github pages. But I'm facing one big issue. When switching between pages there is a white screen showing every time, which is not correct behavior. I would like to always see the header section and left menu (without flash) even when switching between the pages.
The web-site is not vulcanized yet (there were another issues with that), so it is not very fast, but this should not be a reason. I was playing with the imports in <head> section and scripts, but nothing helps. Seems that the page actually renders only after DomContentLoaded event.
Any suggestions?
The web-site can be checked on this url and the source code is also available on GitHub.
If you refer to the transition when navigating between pages — the Polymer website feels faster because they don't do full page loads. Instead, they use AJAX to load the new pages and modify your URL bar with the help of the History API to make it look like you went from page A to page B. The term for this kind of thing is Single-page application.
I have a web App which has links to other web pages. When a user taps one of these links while the app is running from full screen mode the new page opens in full screen as well and so there is no means of navigating back to the web App. Has anyone found a method for escaping full screen mode on the iPad once a web App has been launched from a home screen icon ?
Try redirecting with javascript, like:
document.location='';
We actually consider this a bug, but as always there are those who would see this as a feature :)
If the page your going to is supposed to be in the app, then this solves your problem.
How can I open an external link in Safari not the app's UIWebView?
If the page is any page on the internet, then the answer is pretty much no.
Once you leave the app, there is no way back, except for the user clicking back on your app.
It is not simple to force the ipad to stay in your app. Some suggested methods:
Create your own web view in your app. If your using phone gap, or another framework, you would have to create a plug in to do this. You would then show the loaded pages on that web view, this is similar to how ads are shown & stay in the app.
Parse and replace all the links on the loaded page with custom events, and use a server to return the content, instead of loading it directly via the web.
Both are very complex, and have issues, like you cant have white lists if you let them browse outside specific domains.
My website will revert visitors to a seperate mobile site, this seems fairly simple after reading a few guides online.
However, I would like people to be able to click a link on the mobile site which will then take them to the desktop site.
The problem I see is that if I link back to the desktop site it will just redirect them back if they are on mobile?
How can I get around this?
Really you want to be doing this sort of thing server-side, not client-side. The issue is you're forcing a mobile user (on a potentially bad connection) to download your whole desktop site first (which might be over 1MB), just for the javascript redirect to take effect.
By that point, your mobile visitor may have lost patience and left already.
I blogged about the process here: http://www.9xb.com/blog-2012-08-6-common-pitfalls-when-deploying-a-mobile-site-and-how-they-can-be-avoided/ - if you jump to the bottom of the article, you'll see a flow diagram that maps out the whole process. This particular method uses cookies, but it could be adapted. The beauty of this flow diagram is that it is language independent - you can develop it in any server side programming flavour.
For your convenience, I've included the flow diagram below (although I strongly recommend you give the article a read):
http://www.9xb.com/wordpress/wp-content/uploads/2012/08/mobile-deployment-small.png
The alternative to all of that work, would be to develop a mobile-first responsive site. Not knowing your circumstances, I'll leave it at that - it's not always appropriate in every single scenario.
Make the redirect-to-mobile optional (i.e. a link at the top of the desktop page), or put the mobile redirect only on the initial entry point, i.e. mydomain.com. If they go to mydomain.com/index.html, then don't redirect. That way your 'back to desktop' link can be simply a normal link to index.html, from index_mobile.html or wherever you send them for their mobile experience.
Personally, I would much rather the layout was fluid enough to fit whichever browser anyway, then there is no problem to begin with. Remember, there are now tablets of various sizes to muddy the mobile browsing waters.
Unfortunately you cannot check for the referrer after window.location change. But you can add a hashtag and then check for it.
if(window.location.hash == "#stayHereDude"){
// do nothing, or whatever
} else {
window.location = "mobile/index.html";
}
Then, you'ld make a link to /index.html#stayHereDude on the mobile page.
On your home page that makes the mobile redirect, you'll want to check for something in the href that marks them as having coming from the mobile site. In my case I've used a link to the home page from the mobile site with a ?m=0 at the end of it. For example: http://www.yoursite.com/?m=0
Then you check before the redirect on the home page for that m=0 in the href. if it's there, don't redirect, if it isn't, redirect to mobile.
if (window.location.href.match("m=0")) {
} else {
window.location = "http://www.yoursite.com/mobilesite";
}
This works if you're only redirecting from a single page to your mobile site.
You can use Cookies, Session or Local Storage such that when a user clicks on "go to desktop site", it sets a value.
Let's say you set the name to be "mobileOff" and the value set to "1" or "true" when a user on a mobile phone clicks on "Go to Desktop Site". Then, wherever you're doing your mobile check, add a conditional to check for the mobileOff in the user's cookie/session/localStorage, if it's set to true, bypass the automatic mobile redirect, otherwise, load the main desktop site.
you should combine user agent method to detect device clubbed with query string to this sort of functionality.
so lets assume your link is
site/default.aspx
if some one hits this page check the user agent and give in the response the appropriate site or event better if the device detected if a mobile device simply redirect to m.yourdomain.com/site/default.aspx
but if some one hits the page site/default.aspx?type=desktop then override the behaviour of checking the useragent and render the desktop site.
never ever you should first load the desktop site and then via javascript reditect to a mobile site. do this using user agents server side.
Static
/site/index.html
/site/mobile/index.html
Then you can use a range of things.
Cookies
Session States
User Logged in and Preference Settings (even database saved)
If you're using a static site - becomes more difficult as it gets messy with JavaScript redirects and two many duplicate pages. Post your code and tell us your how you are currently doing your setup and I will update my solution.
I developed a website using Javascript and HTML pages
Problem :
When i am clicking on refresh button on Internet Explore, it is going to home page instead of refreshing the current page of my web page. please do the need full
Regards
Santosh
This usually happens when you are using ajax to update parts of the website after loading.
Ex: Say clicking on add button loads a form using ajax.
When you do like this the URL in the browser remains same even after loading the form. Because of this hitting the refresh button will not take you to form again.
Solution:
Really Simple History (RSH) is lightweight JavaScript library for the management of bookmarking and browser history in Ajax/DHTML applications.
Use this library to update the browser URL after the ajax request. Now the refresh should work fine.
Hope this helps.