Now I have this code of redirect in function of the referer:
document.addEventListener('DOMContentLoaded', function() {
console.log(isMobile);
var referrer = document.referrer;
if(referrer.indexOf('site1.com') !== -1 || referrer.indexOf('site2.com') !== -1) {
if(isMobile.phone) {
window.location = "http://www.landingphone.com";
console.log('Is phone');
} else if(isMobile.tablet) {
window.location = "http://www.landingtablet.com";
console.log('Is tablet');
} else {
window.location = "http://www.landingdesktop.com";
console.log('Is desktop');
}
} else {
window.location = "http://www.anotherlanding.com";
}
});
Its ok this code for redirect in function of the referer site1 and site2.com, but if I need redirect also another referer (for example site3.com) to another landing (for example www.landingphone2.com, landingtablet2.com and landingdesktop2.com). What I need add in the code? what i need modify?
Thank you very much.
You can try something like this, adding another else if statement as referred to in the comment to your answer.
document.addEventListener('DOMContentLoaded', function() {
console.log(isMobile);
var referrer = document.referrer;
if (referrer.indexOf('site1.com') !== -1 || referrer.indexOf('site2.com') !== -1) {
if (isMobile.phone) {
window.location = "http://www.landingphone.com";
console.log('Is phone');
} else if (isMobile.tablet) {
window.location = "http://www.landingtablet.com";
console.log('Is tablet');
} else {
window.location = "http://www.landingdesktop.com";
console.log('Is desktop');
}
} else if (referrer.indexOf('site3.com') !== -1) {
// Do your other redirects here
} else {
window.location = "http://www.anotherlanding.com";
}
});
Related
I have a redirect based on the OS in mobile devices.
I try to return the redirect in the following script
$(document).ready(function (){
//Android Version:
if(navigator.userAgent.toLowerCase().indexOf("android") != -1) {
window.location.href = "https://link1";
}
if(navigator.userAgent.toLowerCase().indexOf("iphone") != -1){
window.location.href = 'https://link2';
}
if(navigator.userAgent.toLowerCase().indexOf("ipad") != -1){
window.location.href = 'https://link3';
}
});
I need fourth redirect if none of the above true. But when I use at the end of the script:
else {
window.location.href = 'https://link4';
}
Only ipad redirect works. Iphone and android redirects to link4.
Each of the if statements needs an else if after it so that instead of 3 separate if statements, with the last one having an else, you have one if statement with multiple conditions.
$(document).ready(function (){
//Android Version:
if(navigator.userAgent.toLowerCase().indexOf("android") != -1) {
window.location.href = "https://link1";
} else if(navigator.userAgent.toLowerCase().indexOf("iphone") != -1){
window.location.href = 'https://link2';
} else if(navigator.userAgent.toLowerCase().indexOf("ipad") != -1){
window.location.href = 'https://link3';
} else {
window.location.href = 'https://link4';
}
});
You need else on all of your subsequent ifs. So:
$(document).ready(function (){
//Android Version:
if(navigator.userAgent.toLowerCase().indexOf("android") != -1) {
window.location.href = "https://link1";
} else if(navigator.userAgent.toLowerCase().indexOf("iphone") != -1){
// ---^^^^
window.location.href = 'https://link2';
} else if(navigator.userAgent.toLowerCase().indexOf("ipad") != -1){
// ---^^^^
window.location.href = 'https://link3';
} else {
window.location.href = 'https://link4';
}
});
That way, if the first if's condition is true, you only do what's in the if block. If the first if's condition is false, you do the next if, and only do what's in its if block if it's true. If none of theifconditions is true, you end up doing theelse` block at the end.
The above is the standard way to write it, but this verbose way may help make it clearer:
$(document).ready(function (){
//Android Version:
if(navigator.userAgent.toLowerCase().indexOf("android") != -1) {
window.location.href = "https://link1";
} else {
if(navigator.userAgent.toLowerCase().indexOf("iphone") != -1){
window.location.href = 'https://link2';
} else {
if(navigator.userAgent.toLowerCase().indexOf("ipad") != -1){
window.location.href = 'https://link3';
} else {
window.location.href = 'https://link4';
}
}
}
});
That does exactly the same thing my first code block above does.
like the question asks, I'm trying to communicate with a serial device through a chrome app, via a webpage. The objective is to turn on a switch with a button on a webpage, and make sure the switch is in fact on (serial response).
So far I have been able to turn on the switch fine, however I need to validate that it is in fact enabled.
My chrome app code:
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (request.request == 'info') {
sendResponse(DEVICE_INFO);
} else if (request.request == 'turn_off') {
device_array.forEach(function(device){
if (device.id == request.device_id){
device.send('f');
}
});
//INSTEAD OF "OK" I NEED IT TO ASK THE DEVICE TO CONFIRM OFF/ON STATUS
sendResponse('OK');
} else if (request.request == 'turn_on') {
device_array.forEach(function(device){
if (device.id == request.device_id){
device.send('n');
}
});
sendResponse('OK');
}
return true;
});
If I send a "status" query to the device, it's going to take a few milliseconds for it to respond "off" or "on" to the serial buffer. Any ideas on how to go about this? Thanks in advance.
Ultimately I got it to work by requesting the device status within the listener block of code. Below are the modifications, crude but it gets the job done. DEVICE_STATUS is being updated by an onReceive listener on the serial connection.
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (request.request == 'info') {
sendResponse(DEVICE_INFO);
} else if (request.request == 'turn_off') {
device_array.forEach(function(device){
if (device.id == request.device_id){
device.send('f');
}
});
var time_loop = 0;
connection.send('s'); // s is for STATUS
var timer = setInterval(device_is_off, 200);
function device_is_off(){
if (time_loop > 5){ //Serial Communication Timeout at 1sec
sendResponse('ERROR ' + DEVICE_STATUS);
clearInterval(timer);
return;
}
if (DEVICE_STATUS == 0){
sendResponse('OK');
clearInterval(timer);
return
}
else time_loop++;
}
} else if (request.request == 'turn_on') {
device_array.forEach(function(device){
if (device.id == request.device_id){
device.send('n');
}
});
var time_loop = 0;
connection.send('s'); // s is for STATUS
var timer = setInterval(device_is_on, 200);
function device_is_on(){
if (time_loop > 5){
sendResponse('ERROR ' + DEVICE_STATUS);
clearInterval(timer);
return;
}
if (DEVICE_STATUS == 1){
sendResponse('OK');
clearInterval(timer);
return
}
else time_loop++;
}
}
return true;
});
I'm new... I'm looking for a script that detects the browser and then a function that links to a specific url based on the browser being used. I'm stuck on how to combine two functions into one js file. Using the onclick method to call one of the two functions. Does this make sense? What are my options. I know userAgent is frowned upon, what are the work arounds?
Here is a script that can be modified very easily to include all modern browsers, this is not based on mouseover but is based on Browser detection and redirection depending on what browser.. if this is not what you are looking for please explain in more detail and either i or someone else will be able to help out better... Do you have example pages or code to work with?
version = parseInt(navigator.appVersion);
if (navigator.appVersion.indexOf('5.') > -1) {
version = 5
};
if (navigator.appVersion.indexOf('6.') > -1) {
version = 6
};
if (navigator.appVersion.indexOf('7.') > -1) {
version = 7
};
browser = 'OTHER';
if (navigator.appName == 'Netscape') {
browser = 'NS' + version;
}
if (navigator.appName == 'Microsoft Internet Explorer') {
browser = 'MSIE' + version;
}
if (navigator.appVersion.indexOf('MSIE 3') > 0) {
browser = 'MSIE3';
}
if (browser == 'NS5') {
browser = 'NS6'
};
if (browser == 'MSIE3') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'MSIE4') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'MSIE5') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'MSIE6') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'MSIE7') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'NS3') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'NS4') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'NS6') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'NS7') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'OTHER') {
window.location = 'http://www.mywebsite.com'
}
Thanks
I'm trying to run a small piece of jQuery - when it's clicked it runs a function and when clicked again it runs another.
I have tried the following but this doesn't even run the first.
$('body').on('click', '.card--small', function() {
console.log('clicked');
$(this).addClass('card--expanded');
if (topCheck() == 'chrome') {
$('.card--expanded .card--small__container').css({
'top': '51px'
});
}
}, function() {
console.log('clicked again');
$(this).removeClass('card--expanded');
if (topCheck() == 'chrome') {
$('.card--expanded .card--small__container').css({
'top': '0'
});
}
});
function topCheck() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
console.log('Chrome');
} else {
return 'safari';
console.log('Safari');
}
}
}
Just use the card--expanded class as a flag to determine which click you need and design your function accordingly.
$('body').on('click', '.card--small', function (e) {
var self = $(this),
isExpanded = self.hasClass('card--expanded'),
isChrome = topCheck() === 'chrome'; // will always be false as topCheck never returns 'chrome' (it returns either 'safari' or undefined).
self.toggleClass('card--expanded', !isExpanded);
if (!isExpanded) {
console.log('clicked');
if (isChrome) { // will never execute as isChrome will always be false
$('.card--expanded .card--small__container').css({
'top': '51px'
});
}
} else {
console.log('clicked again');
if (isChrome) { // will never execute as isChrome will always be false
$('.card--expanded .card--small__container').css({
'top': '0'
});
}
}
});
The point is to use some external condition as a flag to keep track of the click state. This could be a global variable, or a local variable above your handler in the scope chain (or a CSS class, or a HTML5 data attribute, etc.). There are a number of ways to do this. Using a CSS class seems like a natural fit in your case.
Also, the topCheck function would be better written if there were a chance it could return 'chrome':
function topCheck() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') > -1) {
if (ua.indexOf('chrome') > -1) {
return 'chrome';
console.log('Chrome');
} else {
return 'safari';
console.log('Safari');
}
}
}
or
function topCheck() {
var ua = navigator.userAgent.toLowerCase(),
browser = 'unknown';
if (ua.indexOf('safari') > -1) {
if (ua.indexOf('chrome') > -1) {
browser = 'chrome';
console.log('Chrome');
} else {
browser = 'safari';
console.log('Safari');
}
}
return browser;
}
Personally, I dislike multiple return statements per function so I would use the second form.
$('.card--small').click( function(){
// run function 1
function_1();
$(this).unbind('click').click( function(){
// run function 2
function_2();
});
});
Inside function 2 you would have to rebind $('.card--small') to run function 1 on click, if you want to run function 1 again.
A simple approach without jQuery. Just keep some kind of state around to determine what to do.
<html>
<head>
<style>
div {
background-color: #ff0;
}
</style>
<script>
var state = 0;
function runIt() {
if (state > 0) {
doSomethingDifferent();
state = 0;
return;
}
doSomething();
state = 1;
}
function doSomething() {
alert("something");
}
function doSomethingDifferent() {
alert("something different");
}
</script>
</head>
<body>
<div onClick="runIt()">Click me</div>
</body>
</html>
Another approach would be to rebind the click event to another function.
In your function topCheck nothing is returned when you detect Chrome. You only log it. Your click event calls the function topCheck but does not get anything back from the function when Chrome is detected. So your if statement probably gets an undefined value.
To answer your original question on how to toggle function called on click, your code should look something like this:
function click1() {
// ...
$(this).off('click', click1).on('click', click2)
}
function click2() {
// ...
$(this).off('click', click2).on('click', click1)
}
$('#link').on('click', click1)
Live demo
But from your code snippet it seems that it would be simpler to implement toggling in single function:
$('body').on('click', '.card--small', function() {
if (!$(this).hasClass('card--expanded') {
$(this).addClass('card--expanded');
if (topCheck() == 'chrome') {
$('.card--expanded .card--small__container').css({
'top': '51px'
});
}
} else {
$(this).removeClass('card--expanded');
if (topCheck() == 'chrome') {
$('.card--expanded .card--small__container').css({
'top': '0'
});
}
}
});
Try
css
.card--small__container {
top:0px;
display:block;
position:relative;
}
js
$("body")
.on("click", ".card--small", function () {
if (topCheck() == "Chrome"
&& !$(this).data("clicked")
&& !$(this).hasClass("card--expanded")) {
$(this).data("clicked", true)
.addClass("card--expanded")
.css("top", "51px");
} else if ( !! $(this).data("clicked")
&& $(this).hasClass("card--expanded")) {
$(".card--small")
.css("top", "0")
.removeClass("card--expanded");
}
});
function topCheck() {
var ua = navigator.userAgent.toLowerCase();
return ua.indexOf("chrome") !== -1 ? "Chrome" : "Safari"
};
http://jsfiddle.net/o4ebav8t/
I have a simple facebook validation i would like to implement to my jQuery button.
When the user clicks the button it should check if logged in, if TRUE then change the text.
I found this article which talks about returning a true/false state but when i tried to implement it in my code it didnt work.
Any suggestion where im going wrong please, thank you.
function fb_loginCheck(){
FB.getLoginStatus(function(response, e) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
e.returnValue = true;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook, but has not authenticated your app
fb_oAuth();
e.returnValue = false;
} else {
// the user isn't logged in to Facebook.
fb_oAuth();
e.returnValue = false;
}
}, true);
}
$('.myBttn').click(function(){
var io = return fb_loginCheck();
if (io){
$this = $(this).text();
if($this == 'yes')
$(this).text('no');
else
$(this).text('yes');
}
return false;
});
got it to work:
similar to potench answer but removing the e.returnValue did it
function fb_loginCheck(callBack){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
callBack(true);
} else if (response.status === 'not_authorized') {
fb_oAuth();
callBack(false);
} else {
fb_oAuth();
callBack(false);
}
}, true);
}
Something like this might work. I've moved the methods around so they get fired when a response is returned from the FB.getLoginStatus method.
I'm passing in a callBack method which fires when the response from FB.getLoginStatus returns a result. Also note that I've had to re-scope the $(this) variable.
function fb_loginCheck(callBack){
FB.getLoginStatus(function(response, e) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
e.returnValue = true;
callBack(true);
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook, but has not authenticated your app
fb_oAuth();
e.returnValue = false;
callBack(false);
} else {
// the user isn't logged in to Facebook.
fb_oAuth();
e.returnValue = false;
callBack(false);
}
}, true);
}
$('.myBttn').click(function(){
var targ = $(this);
fb_loginCheck(function (io) {
targ.text( (io) ? "yes" : "no" );
});
return false;
});