For some reason, this page won't go to the mobile or desktop page when I use it! Here is the code:
<html>
<head>
<title>Loading...</title>
</head>
<script>
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
</script>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
Sorry, this is my first time on Stack Overflow, so I'm not familiar with some stuff. Thanks.
You are missing the closing } for onload function. Update code to following.
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
You have missing } . so its not working. You have missed } for the window.onload = function() { //your code goes here }
Please check running code here
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
<html>
<head>
<title>Loading...</title>
</head>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
2 problems:
You've put your script element in the wrong place, in the middle of nowhere. The script tag must be under body or head and nothing else. As said at W3: The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
You also missed a } on your onload function:
<html>
<head>
<title>Loading...</title>
<script>
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
Related
I am facing one issue in my HTML page actually I need to implement the below-
I need to change my image on the basis of Browser change .So, when I am browsing with Chrome it should load Image1 or if I am browsing with IE then load Image2. Please find the below code which I am using but it is not working for me
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript">
function browsercheck() {
var userAgent = window.navigator.userAgent;
return (userAgent.indexOf("MSIE ") > 0 || !!userAgent.match(/Trident.*rv\:11\./));
}
function displayImage() {
debugger;
var browser = browsercheck() ? 'IE' : 'Chrome';
if (browser == "IE") {
document.getElementById("image").setAttribute("src", "Image1.jpg");
}
else if (browser == "Chrome") {
document.getElementById("image").setAttribute("src", "Image2.jpg");
}
}
</script>
</head>
<body">
<img id="image" this.src="displayImage()" alt="can't display picture" />
</body>
It's simpler to maintain if you distribute responsibilities between CSS and JavaScript. Let each do what it's meant to.
<script>
var browser = browsercheck() ? 'ie' : 'chrome';
document.body.className += ' ' + browser; // vanilla JS
// $('body').addClass(browser); // jQuery version
</script>
<style>
.image {
background-image: url("regular.jpg");
}
.chrome .image {
background-image: url("chrome_specific.jpg");
}
.ie .image {
background-image: url("ie_specific.jpg");
}
</style>
This JSFiddle shows example of Browser Detection https://jsfiddle.net/311aLtkz/
I think script did not work for you, because you had a function, and you did not use that function on page. Edited code should work when page in opened
function browsercheck() {
var userAgent = window.navigator.userAgent;
return (userAgent.indexOf("MSIE ") > 0 || !!userAgent.match(/Trident.*rv\:11\./));
}
var browser = browsercheck() ? 'IE' : 'Chrome';
if (browser == "IE") {
document.getElementById("image").setAttribute("src", "Image1.jpg");
console.log("IE");
}
else if (browser == "Chrome") {
document.getElementById("image").setAttribute("src", "Image2.jpg");
console.log("Chrome");
}
I have following script in the <body>:
<script>
(function($) {
var buttonShowed = false;
var vPlayer = new Vimeo.Player($('#video0 iframe'));
vPlayer.on('timeupdate', function(time) {
if ((time.seconds >=580) && (!buttonShowed) ) {
buttonShowed = true;
$('#delayed-button') .css('visibility','visible');
}
});
})(jQuery);
</script>
In the <head>:
<script src="https://player.vimeo.com/api/player.js"></script>
The Vimeo Video got the ID video0 and the button got the ID delayed-button.
On my phone the button shows on 580 seconds but with different browsers (Chrome, Opera, Safari) on my PC the button does not show up.
I really don't why, can you help me?
Try using a div element instead of an iframe and it should work. It seems that timeupdate is not working with iframe.
I've made you a working fiddle here. The full code:
var buttonShowed = false;
var vPlayer = new Vimeo.Player($('#video0 #player'));
vPlayer.on('timeupdate', function(time) {
console.log(time.seconds);
if ((time.seconds >= 570) && (!buttonShowed)) {
buttonShowed = true;
$('#delayed-button').css('visibility', 'visible');
}
});
#delayed-button{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://player.vimeo.com/api/player.js'></script>
<div id='video0'>
<div data-vimeo-id="76979871" data-vimeo-autoplay="true" id="player"></div>
</div>
<div id='delayed-button'>
button
</div>
I am using ng auth token and rails devise token, when i am login in ios safari the window is stuck on the "redirecting" window and does not close the window.
This is the code that run to close the window:
<!DOCTYPE html>
<html>
<head>
<script>
var usingExternalWindow = function() {
var nav = navigator.userAgent.toLowerCase(),
ieLTE10 = (nav && nav.indexOf('msie') != -1),
ie11 = !!navigator.userAgent.match(/Trident.*rv\:11\./);
return !(ieLTE10 || ie11);
}
if (usingExternalWindow()) {
window.addEventListener("message", function(ev) {
if (ev.data === "requestCredentials") {
ev.source.postMessage({
<%= yield %>
}, '*');
window.close();
}
});
} else {
window.location.href = "<%= #auth_origin_url %>";
}
</script>
</head>
<body>
<pre>
Redirecting...
</pre>
</body>
</html>
In all other browsers this is working fine and here its seems like the postMessage does not send to the new tab.
I am trying to detect browser types and IE compatibility from user agent and redirect accordingly. It works only in IE but not in Firefox and Chrome. I am still looking around the solution and cannot figure out yet.
<html>
<head>
<title>Testing </title>
<script src="UserAgent.js" type="text/javascript"></script>
</head>
<body>
<div id="results">Output</div>
<script type="text/javascript">
if (UserAgent.firefox){
window.location.href("http://www.yahoo.com");
}
if (UserAgent.compatibilityMode) {
window.location.href("http://192.168.10.236/iecorrect.html");
} else {
window.location.href("http://www.apple.com");
}
</script>
</body>
</html>
UserAgent.js
if (typeof jQuery == 'undefined') {
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
}
// Create new object
var UserAgent = {
init: function () {
// Get the user agent string
var ua = navigator.userAgent;
this.compatibilityMode = false;
this.firefox = ua.toLowerCase().indexOf("firefox") > -1;
this.chrome = ua.toLowerCase().indexOf("chrome") > -1
if (ua.indexOf("MSIE 7.0") > -1) {
this.compatibilityMode = true;
}
}
};
// Initialize the object
ieUserAgent.init();
Change your window.loacation.href calls to the below code:
if (UserAgent.compatibilityMode) {
window.location.href = "http://192.168.10.236/iecorrect.html";
} else {
window.location.href = "http://www.apple.com";
}
You wrote them like you would write jQuery :)
To check for IE and/or a specific version of IE you are better off using conditional statements.
http://www.quirksmode.org/css/condcom.html
I am trying to activate full screen mode using Javascript but it is not working.
Please note that console logs inside the function (on line 4 and 11) are printing correct values but full screen mode is not appearing.
what might be the issue? Here's my code.
function fullscreen()
{
var _element = document.getElementById('BookMainDiv');
console.log(_element);
if (_element.mozRequestFullScreen)
{
_element.mozRequestFullScreen();
}
else if(_element.webkitRequestFullScreen)
{
console.log("aaa");
_element.webkitRequestFullScreen();
}
}
HTML
<body>
<div id="BookMainDiv" style="width:500px;height:500px;background-color:yellow">
</div>
<input type="button" style="height:20%;width:20%" onclick="fullscreen()">
</body>
p.s. I am using chrome 31 on windows 8
This should work..
<html>
<head>
<script>
function fullscreen()
{
var fullscrn = document.getElementById("BookMainDiv");
req= fullscrn.requestFullScreen || fullscrn.webkitRequestFullScreen || fullscrn.mozRequestFullScreen;
req.call(fullscrn);
}
</script>
</head>
<body>
<div id="BookMainDiv" style="width:500px;height:500px;background-color:yellow">
</div>
<input type="button" style="height:20%;width:20%" onclick="fullscreen()">
</body>
</html>
P.S:Your code is working fine in my system , (yes, browser is chrome itself)
It happens that the requesFullScreen (webkitRequestFullScreen) does not work in Chrome when developper tools are open and you have break points in the javascript!
Close it and you will see it will work!
----------------------------- EDITED ------------------
Be sure your document declaration is this one:
<!DOCTYPE html>
And try this code :
function FullScreen() {
var element = document.getElementById("BookMainDiv");
if (element.requestFullScreen) {
element.requestFullScreen();
}
if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}