Bootstraptour page is breaking UI in mobile devices? - javascript

I have a page that implemented using bootstraptour (a product tour page). It's working fine in large screens, like desktops and laptops.
But when I open that page in mobile device the entire UI is breaking, so I have found that there is no viewport in header.
So i have added following tag in header:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and after that UI is much better but still breaking a lot. So is there anything that I need to add?
This is my page head links:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<script src="//dujl9qf395ztu.cloudfront.net/js_new/jquery-1.9.1.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/Chart.js"></script>
<!-- JavaScript -->
<script src="//dujl9qf395ztu.cloudfront.net/js_new/bootstrap.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/bootstrap-tour.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/demo.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Hachi| Product Tour</title>
<!-- Bootstrap core CSS -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/bootstrap.css" rel="stylesheet">
<link href="//dujl9qf395ztu.cloudfront.net/css_new/tour_app.css" rel="stylesheet">
<!-- Custom Google Web Font -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- Add custom CSS here -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/bootstrap-tour.min.css" rel="stylesheet">
<script src="//dujl9qf395ztu.cloudfront.net/js_new/jquery-1.9.1.js"></script>
</head>

Related

Include external javascript into angular

I was trying to include external javascript and html into my angular app.
Here is the author's tutorial which works in jsfiddle
<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<!-- embed the browser in the web page -->
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
So I did it according for my angular app, added the script ref to index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EpiMiner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://localhost:40080/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:40080/components/chart-controller/chart-controller.html">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
But I got an "chart-controller is not a known element" error. Not too much experience with angular. Suggestion are appreciated. Thanks

How to get respond.js to work with Bootstrap 3.3.7. in IE8

I have searched around to make this work but the problem remains, in IE8 the Bootstrap grid is in a total mess, and the page is completely unreadable. I have a local copy of bootstrap.min.css, and this is how my head section looks like:
What am I missing here..?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="html5shiv-master/src/html5shiv.js"></script>
<script src="Respond-master/dest/respond.js"></script>
<![endif]-->
</head>
This is at the end od the body:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

Webview tag not working for my chrome app

So I have been trying to load google in my app using this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Webview</title>
<meta name="description" content="">
<meta name="author" content="Kitanga Nday">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
<script src="kng.js"></script>
</head>
<body>
<div id="kontainer"> <!-- Kontainer div -->
<webview src="https://www.google.com/" width="640" height="480"></webview>
</div>
</div>
</body>
I then tried sandboxing the page and running it in the main html file using the iframe tag still nothing.
Maybe you missed the fact that using <webview> requires a "webview" permission in the manifest.

BitWasp doesn't load CSS and Js

I have just installed bitwasp and now i ran into this problem with a php generated html file, it doesnt load the CSS and the javascript because its pointed to the index.php.
Is there some fix in Php or need i to change my Apache server settings
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="open source bitcoin marketplace" />
<title>Welcome | BitWasp</title>
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/style.css">
<!-- JavaScript -->
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/jquery-1.8.1.min.js"></script>
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/bootstrap.js"></script>
</head>
Thanks in advance

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