I'm building a version of my company's website with the jQuery Mobile framework. While it'd be fairly easy to do a javascript redirect to get users of mobile devices to our mobile site, I don't want to stop people from being able to view the classic website either.
What's the best way to accomplish this?
Our normal website is at:
us.companyname.com/
Our mobile website will be at:
us.companyname.com/mobile
There are some limitations, as we don't hold the domain name, our UK counterparts do, so getting anything done at the companyname.com level takes some patience. Basically, if anyone from North America comes to companyname.com, they'll get automatically redirected to us.companyname.com.
I do have full access to our website (written primarily in PHP & Expression engine, before I was here), and I'm free to do whatever as long as I don't mess anything up.
First, such things i would not do this with Javascript/Query, cause what is if the user has not activate js? It is better to do this server-side.
Something like this:
$mobile = array("IPHONE", "IPAD");
$flagMobileVersion = false;
if($_SESSION['version']!="mobile"){ //happens only at first visit
for($i=0;$i<=count($mobile)-1;$i++){
if(!strrpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $mobile[$i]))
{
$flagMobileVersion = true;
break;
}
}
if($flagMobileVersion) {
$_SESSION['version'] = "mobile";
Header("www.mydomain.net/mobile"); //on first Visit
}
Would something like this work:
When a user visits http://us.companyname.com from a mobile device, use JavaScript to redirect them to http://us.companyname.com/mobile.
On the mobile site, provide a link to the classic view at http://us.companyname.com?noredirect=true
All you'd have to do differently is wrap the window.location redirection code on the main page inside an if statement that makes sure the noredirect flag isn't set to true. The only challenge would be isolating the noredirect query string, but this Stack Overflow question might help.
Related
I would like to create one website. This website will have behave differently if I am viewing it at a specific event via a kiosk. The kiosk, will just be an iPad. I believe I can figure out how to lock down the iPad to act like a kiosk and just show my website based on this http://www.webascender.com/Blog/ID/447/How-to-Setup-Kiosk-Mode-Lock-Your-iPad-to-Just-One-App#.U9Fx3oBdVX4
But what I am asking is, in code, is there a way to detect that I am in 'kiosk' mode and show different pages? For example, if you are at home(or anywhere that is NOT the event) you should be able to hit my website to find out all about my company and to view your existing profile. You should be able to see these same pages on the 'kiosk'(the iPad while at an event) but you will now see additional pages such as pages dealing with the specific event and payment pages. Vice-versa you might be able to see additional pages on the website while at home that you will not see while in 'kiosk' mode.
I do not know if the solution is tools/language dependent as we have not settled yet on all tools/languages/frameworks we will be using to build the site and so I am open to all but we will definitely have some javascript/css/html.
I believe you will need to write a native app in order to detect whether you are in 'guided access' aka 'kiosk' mode.
Taken from Detect or react to Guided Access?
NSLog(#"Accessabilitiy enabled: %#", UIAccessibilityIsGuidedAccessEnabled() ? #"YES" : #"NO");
if (!UIAccessibilityIsGuidedAccessEnabled()) {
// show something since I'm not in guided access
}
If you want to know when it changes...
[[NSNotificationCenter defaultCenter] addObserver:self selector:#selector(guidedAccessChanged) name:UIAccessibilityGuidedAccessStatusDidChangeNotification object:nil];
- (void)guidedAccessChanged
{
// do something when guided access changes
}
If you must work with a website then what you can do is write a native app that embeds a UIWebView. This class allows you to show websites within a native app. So, what you could do with this method is pass along the guided access setting to your website so that it can adjust itself accordingly.
If you know the IP address you can direct views using PHP (and probably a host of other programs). Or you can lock the iPad to only open a specific URL (http://mysubdomain.mydomain.com) and only have pages that you want viewed by the kiosk. I'm sure there are a mess of other ways too.
Having Googled myself dry I'm going to try here, although it may be impossible.
I simply want to embed a tweet box in one of my web pages, using the web intent API which provides the content in page: https://twitter.com/intent/tweet.
The trouble is, using this url within an iFrame results in it not working, presumably because this functionality has been disabled by the Twitterati. It does say the web intents API is intended to be a popup but is there a way around this or am I forced to go with a link that produces a popup window?
This is really probably not the best way to do this, but I needed the same thing and had to do it quickly. First port of call was the twitter API which I expect is how it SHOULD be done. But time constraints meant I've done it like this:
HTML:
<textarea class="tweetmsg"></textarea>
Tweet
Then with jQuery populate the tweet buttons data-text attribute each time a key is pressed.
$('textarea.tweetmsg').keyup(function() {
var tweetmsg = $('textarea.tweetmsg').val();
$('.twitter-share-button').attr('href', 'https://twitter.com/share?text=' + tweetmsg);
});
Like I say this is probably a very inefficient way of doing it, as it re-populates the data-text field each time a key is pressed. I'd be interested if anyone can improve on the above solution.
A recurring problem with modern web design can be summed up as "too much sh** all over the place". There're two problems with this: one, it takes up memory and takes longer to load, and two, it visually clutters the webpage.
If I just wanted to solve the second problem, I wouldn't need help. JavaScript can delete DOM nodes and CSS can hide them, so there're already a few visible ways to simply hide parts of a webpage. What I want to do is solve the first problem - make a webpage load faster by not loading certain elements.
I'm pretty sure it's impossible to selectively download certain parts of an HTML file. But once the source is downloaded, the browser doesn't have to actually parse and display all of it, does it?
Of course, if this is done after it's already been parsed and displayed, it would be pointless. So I need a way to tell Chrome what to do before it begins parsing the HTML. Is this possible, and do you think it would significantly reduce load time/memory usage?
Yeah, unfortunately Ive never seen a way of changing the html before Chrome renders it.
But as far as blocking things that that page gets to display then Id recommend just using AdBlock https://chrome.google.com/webstore/detail/gighmmpiobklfepjocnamgkkbiglidom
AdBlock can be used to stop resources (js,images,css,xmlhttprequest) from ever being downloaded (it blocks them in the background using the webRequest api) and can also hide elements using css...its rather effective (just remember to select advanced options in its option page and then when you click the AdBlock button you get "Show the resource list"). Also installing Flashblock can help...or disable plugins in Chromes settings, doing this will make them not load but will still show on the page and then you can make them load.
Totally possible! Meet the newest Chrome API: webRequest, finalized in the current version of Chrome - 17.
Docs for webRequest: http://code.google.com/chrome/extensions/webRequest.html#event-onBeforeRequest
I'm trying to think of a solid way to do this... one suggestion I have is using the 'sub_frame' filter, and watching if it's a like/tweet/social button url
You could also block known analytics stuff... and the list goes on! Have fun! Do you have an email list I can sub to for when you launch? If not, get one and drop me a comment!
(From the comments, here is how a innerHTML hack could work)
//This modLoop constantly peers into and modifies the innerHTML in attempt to modify the html before it's fully processed.
var modLoop = function modLoop(){
var html = document.documentElement.innerHTML
//modify the page html before it's processed!
//like: html = html.replace('//google'sCDN.com/jquery/1.7.1/', chrome.extension.getURL('localjQuery.1.7.1.js'));
//I just pulled that ^ out of nowhere, you'll want to put careful thought into it.
//Then, mod the innerHTML:
document.documentElement.innerHTML = html;
setTimeout(modLoop, 1);
};
var starter = function starter(){
if (document.documentElement.innerHTML && document.documentElement.innerHTML.lengh > 0) {
modLoop();
} else {
setTimeout(starter, 1);
}
};
starter();
I have a web page where I have a button. I need to automatically dial a phone number on the click of the button. It needs to be done in HTML.
I need to do it on the onclick event of the button.
On mobile devices, there are protocol handlers to launch the phone. Depending on the security, some will dial it, or others will bring on the phone application with the number already there.
Call me at +1 (555) 555-5555
I've used this in the past for mobile apps:
<button id="call">Call</button>
<script>
$("#call").on('click', function() {
var link = "tel:18003334444";
window.location.href = link;
});
</script>
This, of course, uses jQuery.
Well, I don't think this is possible in HTML... Have you done any research on Java or PHP? a quick google reveals a grand central API, and Java Phone, But I don't know how much help they will be. Also, for future reference, it helps if you tell us what you want to do with this number, will you be connecting it to another phone number? To your computer? Etc. Regardless, this is going to be a fairly complex project, and would be so even if you were comfortable with a real programming language. Your best approach would be to figure out your options and then come back to Stack overflow if you need help on choosing one. Best of luck!
I have to declare a commercial interest. I work for Cisco and we've developed a JavaScript SDK and browser plugin that enable you to do this, but only in a Cisco deployment. If you're interested, here's the link:-
http://developer.cisco.com/web/jabber-developer/jabber
Should links to external sites set target=_blank? E.g. I am on www.acme.net and have a link to www.otherplace.net, should that link be:
<a href='http://www.otherplace.net' target='_blank'>otherplace's website</a>
or:
<a href='http://www.otherplace.net'>otherplace's website</a>
I was under the impression that using _blank to sites outside your domain was best practice, but now I am being told otherwise.
Some web idealists will state that you should allow the user to make their own choices when it comes to navigation - I have a lot of sympathy with this view. As web developers, we shouldn't be forcing such decisions on our visitors.
However, I also know that businesses often want to 'retain control' and so insist on spawning a new tab/window for external sites. An I understand this too - It's a very practical approach, particularly when you consider that how many users don't know how to control their own UA.
I often tend to steer a middle course between the two, by adding an image (I'm sure you will have seen many in your time) that indicates which links are external, and a note to indicate that external links will open in a new tab/window.
Not quite as 'pure' as the first option, but at least it is clear to the user how the site will behave.
found this on the w3c site
Checkpoints in this section:
•10.1 Until user agents allow users to
turn off spawned windows, do not cause
pop-ups or other windows to appear and
do not change the current window
without informing the user. [Priority
2] Content developers should avoid
specifying a new window as the target
of a frame with target="_blank".
More info here
the question you need to ask your client is "To what priority level are you aiming to achieve?"
I think it totally depends on your use case.
If you are opening a site in another domain and need to keep your site open, and I think in most cases you do, then use target='_blank'.
As a user, I find it annoying when I click on a link to another domain and it moves me from the original domain. Of course, using ctrl+click in most browsers is a way to defend against this - but why make the user do more work?
It might also be worth to mention that using target attribute is not xhtml valid. I do usually open links in external window or tab because I see that most regular users (not the advanced ones) want it that way so that they can always get back to the site they were on - usually they would go deep into the other site and then it become unfriendly for them having to click back multiple times.
So in terms of usability I think that there's more users that don't use special techniques to manually open links in new window/tab.
With regards to the xhtml validation, you might want to decorate your links with rel="external" or some similar word then use this JS function to handle new window open. I did it like this 99% of time in the last few years.
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
/**
DOCUMENT LOAD
**/
$(document).ready(function () {
/**
external links
**/
externalLinks();
....
Just don't do it. Using target attributes with links presents complications for assistive technology users who may not know another tab has opened. It becomes a bad experience for these users when the back button does not work in the new tab to take them back to the page they started on. This practice can also be disorienting to people with cognitive disorders. It is best to let users decide where links will open.
You need to predict what your users want. Use target="_blank" if you expect your users will want to stay on the site.
For example if a blog post has a link in the middle of the post, it makes sense to open that link in a new tab since you are expecting the reader to return to the page and continue reading.
Some people argue that the reader could simply click "Back" when they wanted to come back to the page,
But new webpages will have more links to webpages that have more links, what happens is that the reader has to "Back" a couple of times to get back to your blog post. Either that, or he ends up "lost" in the myriad of linked pages and couldn't come back to your blogpost (you can be sure that no one wants to open History and find your page again when they are "lost", unless there is a big incentive to coming back to your page).
As it is a governmental website, this is a tricky question. I regularly see disclaimers for external sites on these type of sites. I don't know if this is a standard or not.
I think the answer is probably down to your own opinion, which should probably be based on usability and integrity.
Just make two buttons for your users: One to open in new tab, and another to abandon the current page in favor of the linked page.
[ www.google.com ]
[Open Google in place of THIS page]