auto redirect to mobile site creating issues - javascript

I am using this to redirect to a mobile version of a webpage (it is not in a sub domain)
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "http://www.site.com/mobile/";
}
//-->
</script>
<script language="javascript">
<!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) {
location.replace("http://www.site.com/mobile/");
}
//-->
</script>
But when I access from a mobile I get an error that server is not found?
Here is the header of the mobile version
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="apple-touch-icon" sizes="114x114" href="images/icontwo.png">
<link rel="apple-touch-startup-image" href="images/startup.png" />
What could be causing this?, If I enter directly it seems to work...

Just to be safe I would use window.location.href because semantically the document object is referring to the DOM document or the HTML elements on the page. Also, some browsers only use window.location.href
Also, you seem to be using two redirects:
document.location = "http://www.site.com/mobile/";
AND
location.replace("http://www.site.com/mobile/");
which may cause issues. location.replace actually destroys the back button capability too which may cause some weird effects not to mention agitated users.
Also, make sure you're not coming onto the site with https://

Related

Error sending Whatsapp using "Click to Chat"

Previously my code already worked but recently when sending a message using "Click to Chat". When executing the script it opens a page of the message to send and when pressing "Send" the message is not sent and it opens the html code of the page.
As I mentioned before, the code already worked and nothing was modified. Does anyone else have this?
I did tests with the current and previous syntax, running directly in Chrome:
https://wa.me/5211234567890?text=Hi
https://api.whatsapp.com/send?phone=5211234567890&text=Hi
This opens in place of "WhatsApp Web":
<!DOCTYPE html>
<html class="no-js" dir="ltr" loc="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>WhatsApp Web</title>
<meta name="viewport" content="width=device-width">
<meta name="google" content="notranslate">
<meta name="format-detection" content="telephone=no"/>
<meta name="description" content="Quickly send and receive WhatsApp messages right from your computer.">
<meta name="og:description" content="Quickly send and receive WhatsApp messages right from your computer."/>
<meta name="og:url" content="https://web.whatsapp.com/"/>
<meta name="og:title" content="WhatsApp Web"/>
<meta name="og:image" content="https://www.whatsapp.com/img/whatsapp-promo.png"/>
<link id="favicon" rel="shortcut icon" href="/img/favicon/1x/favicon.png" type="image/png" />
<link id="favicon" rel="shortcut icon" href="https://whatsapp.net/favicon_web.png" type="image/png" />
<link rel="apple-touch-icon" sizes="194x194" href="/apple-touch-icon.png" type="image/png" />
<link rel="stylesheet" href="/cssm_99362fa8365d8e39028c84edca18e758.css">
<style>
html, body, #app {
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.
.
.
The page https://web.whatsapp.com/send has a bug and loads the last html version of the home of https://web.whatsapp.com, so the index of the page doesn't even load any process and returns only the last html version of the send page. The bug could be fixed in the next updates of WhatsApp Web, if not then contact WhatsApp and tell them.
Here: WhatsApp Web / Contact

Drop Down Menu Click

Should be an easy question...
My NAV Bar Template (working): https://codepen.io/ScottFSchmidt/pen/GMzgKz
...imported into my Portfolio (is NOT working): https://scottschmidtportfolio.000webhostapp.com/# The menu is not going down on click(the menu appears when the screen is smaller).
What is causing this? I have a feeling it is something within my scripts (below):
EDIT NEW UPDATED SCRIPTS from https://www.bootstrapcdn.com/:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>SS Studio</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script>
<script src="https://use.fontawesome.com/fab417e5fd.js"></script>
<script language="javascript">
Check the console:
Make sure Bootstrap loaded correctly. It look like you are trying to add bootstrap in three places.
Better to use CDNetworks. Here is the link for bootstrap cdn
Also you had one script error:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
// }); // remove this
Caution:
You're using HTTPS but some resources are requested in an insecure way. use https:// for including all the resources like images, css, js, etc

Local storage issue in HTML 5 / Javascript

I am making a checklist app with Phonegap but it debugs in a browser too as they both use web technologies. Anyway, I am having a problem with using the HTML 5 local storage. Perhaps my code is broken, or I am using it wrong. When ever I refresh the page or exit out/come back the data is gone.
Appreciate any help :^)
I tested it on my live domain as well as locally but both do not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script>
$(function() {
var arr = [];
var i;
$("button").click(function() {
arr.push($(":text").val());
$(":text").val("");
localStorage.setItem("item" + arr.length, arr[arr.length - 1]);
$("#x").append(localStorage.getItem("item" + arr.length) + "<br>");
})
})
</script>
</head>
<body>
<div class="app">
<h1>Alex</h1>
<input type="text" id="item" placeholder="Enter an item">
<button id="add">Add Item</button>
<br>
<div id="x"></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
As was said - the data is persisted and saved correctly.
However the logic is incorrect and overrides all the elements in the localStorage (first element overrides the first, second overrides the first two, third overrides the first three, etc.). Perhaps this is what masks the issue? :)
To be frank, I don't the the logic of running in loop and overriding all existing with the last item (and writing it to the list on the screen each time)...

Why are these CSS files being downloaded twice?

I have included all the files just once. I have triple checked it. Here are some screen shots. I noticed that the request headers are different. How do I resolve this issue?
<?php require_once("cssheadertop.php");?>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta name="description" content="">
<link rel=stylesheet href='http://fonts.googleapis.com/css?family=Roboto+Slab'>
<style>.demo{text-align:center}</style>
<title>My title</title>
<?php require_once("cssheaderbottom.php")?>
This is cssheadertop.php
<?php require_once('../../templates/sitelink.php');?>
<link rel=stylesheet href=//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/united/bootstrap.min.css>
<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<link rel=stylesheet href=../../rrssb.css />
<script src=../../rrssb.min.js></script>
<link rel=stylesheet href=../../style.css>
<link rel=stylesheet href='http://fonts.googleapis.com/css?family=Dosis:300|Orbitron:900'>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js></script>
<script src=../prism.js></script>
<link rel=stylesheet href=../prism.css />
<meta property=og:image content="">
UPDATE
sitelink.php just has PHP and cssheaderbottom.php just has navigation.
UPDATE 2
It is not just about bootstrap.min.css but every css file is being downloaded twice sometime thrice (You can see it in the images below).
this has nothing to do with your code, it has to do with your browser development setup, there is an option somewhere in your development console that is called 'Persist logs' that basically keep old files in the logs for you to compare, if you disable that feature you'll see that there is no load duplication of files, see my attached screen shot where i duplicate your problem by selecting the 'Persist logs' -marked in yellow
hope it helped you,
.

W3C validator : Element head is missing a required instance of child element title

Hi am validating my HTML code through w3c validator. But it is showing an error Element head is missing a required instance of child element title.
URL is
http://nitansh.fwd.wf/article/travel/best-all-inclusive-resorts-for-romance/3189783/
while title is Present in the head of the html body
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Best all-inclusive resorts for romance- NowU
</title>
<link rel="stylesheet" href="/static/css/styles.css">
<link rel="stylesheet" href="/static/css/video-js.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
<link rel="stylesheet" media="print" href="/static/css/print.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script>
<![endif]-->
<link rel="stylesheet" href="/static/css/socialsharing.css">
<link rel="canonical" href="/article/travel/best-all-inclusive-resorts-for-romance/3189783/">
<meta name="description" content="Whether for a honeymoon, anniversary, or private escape, these resorts fit the romantic bill.">
<meta property="og:description" content="Whether for a honeymoon, anniversary, or private escape, these resorts fit the romantic bill.">
<meta name="twitter:card" value="Whether for a honeymoon, anniversary, or private escape, these resorts fit the romantic bill.">
<meta property="og:title" content="Best all-inclusive resorts for romance">
<meta property="og:type" content="article">
<meta property="og:url" content="http://nitansh.fwd.wf/article/travel/best-all-inclusive-resorts-for-romance/3189783/">
<meta property="og:image" content="http://www.gannett-cdn.com/media/USATODAY/USATODAY/2013/06/18/1371593281000-Earlyne-s-luggage-1306181810_3_4.jpg"></head>
Just for your information this is what the validator is seeing in your code
<head>
<script src="//cdn.optimizely.com/js/687271175.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="UTF-8">
</head>
You can see this by turning on the show source option in the validator. Maybe it's time to look into progressive enhancement?
Same solution as in your other question:
You are injecting the title element with JavaScript, but the W3C validator does not execute JavaScript.

Categories