Manual swith back to normal Website on mobile Device using wurfl - javascript

I can't get into it. Please give me a hint.
There is a website with device-detection with wurfl - the javascript method.
The condition looks like this:
if(!WURFL.is_mobile){
$('body').addClass('mobile'); //Do the stuff for mobile website
} else {
$('body').addClass('no-mobile'); // Do the stuff for no-mobile normal website
};
Now we want to put a button on mobile Version to switch back to normal (no-mobile) Website manualy. But the website needs to be reloaded without care of the orginal wurfl-condition, because there are some images and html inserted with javascrit on the normal (no-mobile) Version. I don't know how to do this.

When the button is pressed to manually go to mobile or desktop, you can set a cookie like so:
document.cookie = "forceMobile=true";
then just read the cookie in your if statement like so:
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
if(!WURFL.is_mobile && !getCookie("forceMobile")) ...
More info here

Related

How can I stop a background video playing every time the user returns to the home page?

I have been handed a design which requires a background video to load when the users hits the home page. I realise that this isn't best practice, but the design has been signed off by the client, so trying to develop a decent solution for it. I have video in place and it is working nicely.
I have also been asked to ensure that the video only loads once when the user visits the site and when they navigate about the site, if they return to home, the video shouldn't play again.
I have been searching about the web, but can't find a precedent for this. Could anyone suggest a possible solution for this to work? Or some documentation that I could visit to source one?
The site is written with HTML, CSS and JQuery.
I appreciate that there isn't any code to see, but any suggestions would be much appreciated.
Thank you to anyone who stumbles across this.
Use localStorage or sessionStorage:
Supposing you have a video element with an id, e.g.:
<video id="myVideo">...</video>
Your script might look something like this:
if (!localStorage.getItem('alreadyPlayedVideo')) {
const myVideo = document.getElementById('myVideo');
myVideo.play();
localStorage.setItem('alreadyPlayedVideo', true);
}
It would look the same with sessionStorage. The primary difference between the two is that sessionStorage is cleared when the user exits the browser or closes the tab, whereas localStorage persists between sessions.
You have to check if the user was already on the site, so you have to save this data somewhere, data can be saved in session, database, localStorage or in cookies.
Using cookies would be the best option for this scenario. Cookies gets stored on client side and can be used for session and state management
Cookie usage with JS
function setCookie(cookieName, cookieValue, expireDays,isGlobal) {
var expireDate = new Date();
expireDate.setTime(d.getTime() + (expireDays*24*60*60*1000));
var expires = "expires="+expireDate.toUTCString();
if(isGlobal){
document.cookie = cookieName + "=" + cookieValue + "; " + expires+"; path=/";
}else{
document.cookie = cookieName + "=" + cookieValue + "; " + expires;
}
}
function getCookie(cookieName) {
var name = cookieName + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
function checkCookie(cookieName) {
if (getCookie(cookieName) != "") {
return true;
} else {
return false;
}
}
$(document).ready(function(){
if(checkCookie('visited')){
//Stop playing video
}else{
setCookie('visited',1,3,false);
//Play video automatically
}
});

Third party cookie to check if the browser block it by default

I want to check which browser blocks by default third party cookie.
I though to create a local file .html with a third party cookie and open it to every browser to check it will open. Is this a good option?
I plan to use this example but is it a third party cookie?
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
This code will create a 1st party cookie - i.e. the domain of this cookie will match the domain of the page loaded.
In order to create a third party cookie you must request a resource from a different domain than the page that requests that resource. This resource could set a cookie using either javascript or HTTP header command (which is initiated by server side code like PHP).
If you are just doing your own survey to gain information about which browsers accept 3rd party cookies by default then it may be worthwhile looking at the specification for each browser to see what the official line is before going to the effort of testing.

Redirect a user to a URL from input, store in cookie

I'm working on a project in which the user is sent to the directory name they entered in an input, like so:
function sendanswer(e) {
if (e.keyCode === 13) {
e.preventDefault();
var answer = document.answerarea.input.value;
if (answer) {window.location.href = answer;}
}
}
document.answerarea.input.onkeypress = sendanswer;
This works fine. But now I want for the user to be automatically redirected to the directory they specified every time they visit the page, BUT only if they didn't recieve a 404 error after navigating to the directory. I imagine this would be accomplished by erasing the cookie when the 404 page is visited.
But how would the redirecting-to-cookie process work?
When you get input from use set a cookie using this code:
function sendanswer(e) {
if (e.keyCode === 13) {
e.preventDefault();
var answer = document.answerarea.input.value;
if (answer) {
window.location.href = answer;
//SET COOKIE WITH NAME redirectPath
document.cookie="redirectPath="+ answer;
}
}
}
Now on your home page (the page which user gets on visiting your site) add following call on-page load:
window.onload=function(){
var kuki = "redirectPath=";//NAME OF COOKIE WE SET
var cookies = document.cookie.split(';');
for(var i=0;i < cookies.length;i++) {
var c = cookies[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(kuki) == 0){
var path = c.substring(kuki.length,c.length);
//MOVE USER TO STORED PATH
document.location.href=path;
}
}
}
A better approach will be to read cookie on server-side and redirect user to their favourite folder from there.
For more reference check this answer.

Javascript Cookie function only working on index file

I've created a function to show a cookie policy in my website. The cookie is stored across the website and is working fine but the show/hide part of it only works in the index file and not in all the other pages and I can't understand why.
The function is as follows:
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
(function() {
var InfoCookieCont = jQuery('#info_cookie');
var InfoCookieDiv = jQuery(".ok-cookie");
InfoCookieDiv.click(function() {
createCookie('infoCookie','true',365)
InfoCookieCont.removeClass("cookie-visible").addClass("cookie-hidden");
});
var InfoCookie = readCookie("infoCookie");
if (!InfoCookie) {
InfoCookieCont.removeClass("cookie-hidden").addClass("cookie-visible");
}
})();
This installs a cookie from my website and until you click the .ok-cookie button, the #info_cookie will keep showing up on top of the page thanks to the .cookie-visible class.
This works fine on index.php, but not in the other pages. In other pages it keeps the .cookie-hidden class even if I didn't click the ok-cookie button in the previous page.
The .js file where this function is, is of course included in every page of my website.
The live website is: www.valeriopierbattista.com
thanks for your help, im going crazy!
You've got some other js errors on the other pages which are killing the js script.

Javascript: reload page with changed variable value

Is it possible to change variable "a" to "true" without modifying the page source, so that it prints "foo"?
<html>
<head>
<script>
var a = false;
if(a) document.write("foo");
else document.write("bar");
</script>
</head>
<body>
</body>
</html>
I can change variable value dinamically from Chrome. But how to reload to see "foo", not "bar"
How should this work? You cannot preserve a state on reload with a static HTML page and an embedded script. Use a cookie or some other persistent mechanism for storing the state.
You can use localstorage on most modern browsers see http://www.w3schools.com/html/html5_webstorage.asp
if you plan to support older browsers, you can set a cookie then read it when the document reloads.
http://www.w3schools.com/js/js_cookies.asp
edit: Try this code
//function to check support for localStorage
function checkLocalStorageSupport() {
try {
localStorage.setItem("x", "x");
localStorage.removeItem("x");
return true;
} catch (e) {
return false;
}
}
//function to read value of cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
if (checkLocalStorageSupport()) {
if (localStorage.getItem('a') != null)
if (localStorage.getItem('a') == "true") //check that the value of localStorage is not null
document.write("foo"); //do operation if localStorage value is true
else
document.write("bar");
else
localStorage.setItem('a', 'false');
}
else {
if (getCookie('a') != null) //check that the value of cookie is not null
if (getCookie('a') == "true")
document.write("foo"); //do operation if cookie value is true
else
document.write("bar");
else
document.cookie = "a=false; expires=Thu, 31 Dec 2015 12:00:00 UTC"; //if no cookie exists set a cookie
}

Categories

Resources