I am trying to update some existing javascript code in place that navigates the user to a desktop depending on whether their device has Flash or not. However, I now want the option to navigate the user to a Mobile site if the screen width is smaller that 800px.
I have included the code below which is not working and I think I have the characters wrong between the two function requirements. Any guidance would be appreciated.
<script type="text/javascript">
if (screen.width <= 800) {
window.location = "mobile.htm";
}
if ((navigator.appName == "Microsoft Internet Explorer" &&
navigator.appVersion.indexOf("Mac") == -1 &&
navigator.appVersion.indexOf("3.1") == -1) ||
(navigator.plugins && navigator.plugins["Shockwave Flash"])
|| navigator.plugins["Shockwave Flash 2.0"]){
window.location='home_f.htm';
}
else {
window.location='home_n.htm';
}
</script>
I think what is happening is that the code above (with the screen.width and all) is executing properly, but then, while mobile.htm is still loading, the code continues. Because you have Flash, the code below it still executes and before mobile.htm can fully load the browser instead decides to obey the later if statement and go to home_f.htm .
Try creating a function that returns after the first bit, like so:
function redirect() {
if (screen.width <= 800) {
window.location = "mobile.htm";
return;
}
if ((navigator.appName == "Microsoft Internet Explorer" &&
navigator.appVersion.indexOf("Mac") == -1 &&
navigator.appVersion.indexOf("3.1") == -1) ||
(navigator.plugins && navigator.plugins["Shockwave Flash"])
|| navigator.plugins["Shockwave Flash 2.0"]){
window.location='home_f.htm';
}
else {
window.location='home_n.htm';
}
}
redirect();
I'd also like to note that screen.width measures the screen resolution, but if the browser is resized, it will not take into account the browser's new size. It'll take the size of the entire monitor regardless of the size of the browser. If that isn't what you want, read up on measuring the browser width and height here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
Finally, for what you're doing, that is, detecting mobile devices, you may prefer browser detection to basing it off the screen size. There is a simple way to detect if your user is using Android via a user agent. In your case scenario feature detection is probably not applicable. But do remember to provide a link to the mobile version of the site from your non-mobile version just in case of false positives! You never know.
if(navigator.userAgent.toLowerCase().indexOf("android")!=-1||navigator.userAgent.toLowerCase().indexOf("googletv")!=-1||navigator.userAgent.toLowerCase().indexOf("htc_flyer")!=-1) {
// this person is using Android. Redirect the the mobile site!
window.location = "mobile.htm";
return;
}
Related
Is there a cross-browser way or cross browser solution to capture the "Save" keyboard shortcut in the browser? For example, in GMail if you use CMD + S it will save the email and not prompt the browser to download the webpage (default behavior). I would rather use a cross browser solution than add event listeners and write it from scratch.
One cross browser solution is to check out keycode.js. Less hassle to worry about looking for browser caveats and such.
I know it's old, but it still works. You can check out its demo too!
Looking at the demo, and the header comments in the .js, something like this?
document.onkeydown = function(e) {
e = e || window.event
var k = KeyCode.translate_event(e);
if( k.ctrl && !k.alt && !k.shift && k.code == 83 ) //83 is the code for s
save(); //Magic function
if(e.preventDefault) {
e.preventDefault();
}
return false;
};
I bought some files through codecanyon.net and they've been working fine on all browsers. Just recently I noticed they weren't working in Chrome.
The code is really big and I've tried to change some things through trial and error on the js file but was unsuccessful. You can see the slider at http://miguelsart.com/scroller-test.
As you can see, the captions are supposed to be hidden and once you hover they have slide up. But with Chrome, the captions appear automatically and nothing happens when you hover.
I think something is wrong in this part of the code:
//init captions
Scroller.prototype.initCaptions = function() {
var $captions = this._$slides.find(">p:first");
if (this._displayCaption) {
var padding = $captions.outerWidth() - $captions.width();
$captions.css({width:this._slideWidth - padding, display:"inline-block"}).click(preventDefault);
if (this._captionPos == OUTSIDE) {
var heights = $captions.map(function() { return $(this).height(); }).get();
var maxHeight = Math.max.apply(Math, heights);
$captions.css({top:this._captionAlign == TOP ? 0 : this._slideHeight, height:maxHeight});
this._extHeight = $captions.outerHeight();
if (this._captionAlign == TOP) {
this._extOffset = this._extHeight;
}
$captions.addClass("outside");
}
else {
if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 6 && parseInt(jQuery.browser.version) < 9) {
$captions.addClass("ie-inside");
}
else {
$captions.addClass("inside");
}
}
}
else {
$captions.hide();
}
}
I've tried messing around replacing display for opacity or for visibility but nothing worked. Does anyone have any clue what might be wrong?
Thanks in advance!
I believe I've figured out what's wrong with the author's implementation, and you are correct, it has to do with the latest version of Chrome.
On line 43 of jquery.wt.scroller.js
this._mouseoverCaption = window.Touch ? false : opts.mouseover_caption;
The author of the plugin is testing for native touch capabilities (by determining if window.Touch is defined). Chrome must've recently added native touch API capabilities in a recent version.
So what the author was going for, was saying that 'you can't hover on a touch device, so we can't show the captions on hover on a touch device so we'll just always show them' - which is logically.
However, just because touch capabilities exist, however, doesn't mean that touch input is the default (as in this case). Modernizr solves this issue (for now) by performing the following conditional:
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
Something tells me this will also soon be broken. (https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js#L42)
So, long story short (too late, I know) add this to the plugin code:
Add this to line 7 (push all lines down one):
var TOUCH = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
Find and replace all occurrences of window.Touch with TOUCH in the plugin code.
Tell the author of the plugin I'll send him a bill. :)
I'm using the javascript version from http://detectmobilebrowsers.com/ to redirect to a mobile site. The only thing is that I have a link to go to the full site in the off chance that users want/need to go there.
However, when you click on the link to view the full site from the mobile, it picks back up on the redirection and kicks it back to the mobile version and not to the full site.
I was doing some searching and was wondering if it could be possible to hack it so that it uses
window.location.href.indexOf
or somthing of that nature like this:
if(window.location.href.indexOf("mobile/index.html") > -1)
{window.location = "http://thefullsiteURL.com"}
else { function (a, b) {
if (//mobile direction stuff from detectmobilebrowsers.com
})(navigator.userAgent || navigator.vendor || window.opera,
'http://thefullsiteURL.com/mobile/index.html')};
Keep in mid that this is something that I pieced together and my JS skills are fairly new, so if any one has a more elegant solution I am all for it.
Set a session cookie in conjunction with a querystring value in your full site link. Then, have your mobile detect code check first for the cookie value, second for the query string, and last for user agent mobile detect.
So your full site link should be something like with the query string trigger:
<a href='http://mysite.com?fullsite=true'>Link to full site</a>
And then in your mobile detect:
;(function(a,b) {
if (document.cookie.indexOf('fullsite') > -1) {
return; // skip redirect
}
if (location.search.indexOf('fullsite') > -1) {
document.cookie = 'fullsite=true; path=/;'
return; // skip redirect
}
if (/mobile regex conditional goes here/) {
window.location = b;
}
})(navigator.userAgent || navigator.vendor || window.opera, 'http://thefullsiteURL.com/mobile/index.html')
I know that this code will redirect for blackberries;
if ((/blackberry/i.test(navigator.userAgent))) {
//Send to mobile page (Blackberries)
window.location = ("../Default.aspx");
}
But what would I use to replace blackberry for HTC phones?
I looked here but there seems to be different ones for just about every phone. Is there a single call that I could use?
Edit A C# way to detect would work too. Something along the lines of this:
if (Request.Headers["User-Agent"] != null && (Request.Browser["IsMobileDevice"] == "true"){
if(Request.Browser ["BlackBerry"] == "true")
{
if(int.Parse(Request.Browser.Version) < 4.5)
{
//This is how you get blackberry version right?
}
}
else if(Request.UserAgent.ToUpper().Contains("HTC"))
{
}
}
To find if a phone is an HTC server side do this:
if(Request.UserAgent.ToUpper().Contains("HTC")){
//Code
}
I'm working on a project which is using Selenium and I'd like to try to get the full web page height cross-browser and cross-platform. IE8 is being stubborn as always, is there anybody who has an idea of how to solve this?
The problem: When you scroll down a page for e.g. 500px and you keep doing this until the bottom of the page, the last scroll will be less than 500px. I need to know how much this last scroll was.
Two ways of solving:
1) Find the offset that has been scrolled each time (works everywhere except IE8)
2) Find the total height of the webpage
I know JQuery's height() function does this but I can't use this function from Selenium RC.
If you know a way of calling JQuery functions through Selenium or any other solution, please tell!
Cheers,
Henry
I've found a solution to my own problem.
When you run tests with Selenium, it starts two windows:
1) The Selenium window executing all the commands
2) The Browser window in which the website is tested.
When you try to get info about window 2 via JavaScript functions, you need to do the following:
selenium.browserbot.getCurrentWindow()
To get the full height of a browser window cross browser via selenium, you'll need following script:
function getPageHeight(){
$scrOfY = 0;
$test = $this->getEval("typeof(selenium.browserbot.getCurrentWindow().pageYOffset)");
if(strcmp($test,"number") == 0) {
//Netscape compliant
$scrOfY = (int)$this->getEval("selenium.browserbot.getCurrentWindow().pageYOffset;");
//scrOfX = window.pageXOffset;
} else if( (bool)$this->getEval("selenium.browserbot.getCurrentWindow().document.body != null") && (bool)$this->getEval("selenium.browserbot.getCurrentWindow().document.body.scrollTop != null")) {
//DOM compliant
$scrOfY = (int)$this->getEval("selenium.browserbot.getCurrentWindow().document.body.scrollTop;");
//scrOfX = document.body.scrollLeft;
} else if( (bool)$this->getEval("selenium.browserbot.getCurrentWindow().document.documentElement != null") && (bool)$this->getEval("selenium.browserbot.getCurrentWindow().document.documentElement.scrollTop != null")) {
//IE6 standards compliant mode
$scrOfY = (int)$this->getEval("selenium.browserbot.getCurrentWindow().document.documentElement.scrollTop;");
//scrOfX = document.documentElement.scrollLeft;
}
if(!$scrOfY || $scrOfY <= 0)
$scrOfY = $this->getEval("selenium.browserbot.getCurrentWindow().document.body.offsetHeight");
return $scrOfY;
}