Here is my entire HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=232, user-scalable=no" />
<style>
body {margin:0;width:200px;border:1px solid black;padding:15px;background:#ccff99;color:#004000;font-family:sans-serif;font-size:6pt}
</style>
</head>
<body>
<h1>Test page</h1>
</body>
</html>
If I understand right, the body should be the full width of the viewport (200+(1+15)*2 = 232) so why is it that the page renders with a viewport width of 360? I would expect that of device-width, not an absolute 232...
Related
I am experiencing a very strange sizing issue where the width of all of the content on the page except for the nav bar shrinks as the device-width shrinks (on mobile).
Screenshot of Mobile: https://gyazo.com/461c5252c1f4749e6b18ed8ae7754ae0
Desktop Screenshot: https://gyazo.com/bfe36b73455cefe9803f5494f5bc1048
Here is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Equilibria Network</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Here is the main layout of the page
class Main extends React.Component {
render() {
return (
<div id={"main"}>
<MainNav/>
<MainParallax/>
<ThreeCols/>
<TwitterParallax/>
<EquilibriaSection/>
<Roadmap/>
</div>
);
}
}
ReactDOM.render(<Main/>, document.getElementById('root'));
Github: https://github.com/thomasdparker1/equilibria-website-react
If you have any suggestions I would really appreciate the help! Thank you.
I'm newbie on AngularJs. I made website with angularJS template.
Everything works fine but, after clicking and loading some page content, I got flickering screen problem. I have included angular.min.js in header.
How I can solve the flickering problem ?
HTML - HERE IS MY CODE
<!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>MYAPP</title>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script src="https://use.fontawesome.com/81204b271a.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-css.min.js"></script>
<script src="js/app.js"></script>
<style>
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="myapp" ng-cloak>
<!-- VIEWS-->
<div class="page {{ pageClass }}" ng-view=""></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
You might be looking for ng-cloak. I have used this and it has alleviated my issues with cloaking.
https://docs.angularjs.org/api/ng/directive/ngCloak
Add ng-cloak at the angular js root element(ag-app). This will display the view on screen only after the angular complies the DOM elememts (Angular extended HTML attributes)
I have a AngularJS page that I am attempting to display in IE 8.
Below is my HTML
<html id="ng-app" ng-app="">
<head>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js'></script>
<script src="http://docs.angularjs.org/angular.min.js"></script>
</head>
<BODY ng-app="">
<script type="text/javascript">
function cstScope($scope) {
$scope.LEVEL = "x1 ";
$scope.change = function() {
alert("changed");
};
}
</script>
<div ng-controller="cstScope">
<input type=text ng-model="LEVEL" ng-change="change()"></input>
</div>
</BODY>
</html>
It falls over when the page is loading with
Line: 30
Error: [$sce:iequirks] http://errors.angularjs.org/1.2.14-build.2316+sha.24fe163/$sce/iequirks
I have tried adding JSON3 and ieshiv but no luck.
Add this meta tag in inside of Header tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Look like
<head>
<meta charset="utf-8">
<title>Sample App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
I hopes, it's helps to you. Cheer's...
Just a shot here, but make sure you do not have compatibility mode turned on. I wasted some time on a similar error, and had accidentally clicked the compatibility button when I meant to click on the refresh button.
for Angularjs working correctly in Internet Explorer you also need jQuery version which is under 2.0. Here is the solution which works for me.
<head>
<!--[if lt IE 9]>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="../../js/jquery.1.9.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="../../js/jquery.2.0.min.js"></script>
<!--<![endif]-->
<title>App Title</title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript" src="../../js/jquery.plugin.min.js"></script>
I am following a tutorial on AngularJS - "Building a website with AngularJS"
The routes I am using are pretty much the same as the tutorial :
// JavaScript Document
angular.module('quest', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {template:'partials/about.html'}).
when('/start', {template:'partials/start.html'}).
otherwise({redirectTo:'/home', template:'partials/home.html'});
});
The problem is: it only shows the path to the resource, instead of the contents of the resource, so instead of showing the html content, it just shows:
PARTIALS/ABOUT.HTML
I am not sure what I am doing wrong, but it does work, if i go to the #/about URL it shows "PARTIALS/ABOUT.HTML" if i change the url to index.html#/start it shows "PARTIALS/START.HTML"
html of page:
<!DOCTYPE html>
<html lang="en" ng-app="quest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title></title>
</head>
<body ng-controller="MainController">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/quest.js"></script>
<div ng-view></div>
</body>
</html>
Use templateUrl instead of template
I've got a simple website using jQuery mobile. It's composed of 2 pages, index.php and pageB.php. In pageB.php is the jqm pages' header. I put a link back to index.php:
Retour
In index.php, the page id is welcome
My problem is that if I
Enter the site from domain.com/
Click on a link to pageB.php (ajax-loaded)
Click on the link back to index.php
The event pageshow is not fired again and the content, which I loaded dynamically before, is not present. (Seems to be a new page of type #welcome)
But if I replace the link in pageB.php with a link to index.php#welcome, welcome being the id of the page in index.php, then if I enter the site from pageB.php, the link is inactive.
Update:
Here is simplified code to reproduce the problem:
index.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
<div data-role=page id=welcome>
<div data-role=header>
<h1>Index</h1>
</div>
<div data-role=content>
<a href="pageB.php">link to pageB</link>
<script>
$('#welcome').bind('pageshow', function(){
alert('pageshow triggered');
});
</script>
</div>
</div>
</body>
</html>
and pageB.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
<div data-role=page id=pageB>
<div data-role=header>
<!--Retour-->
Retour
<h1>PageB</h1>
</div>
<div data-role=content>
nothing
</div>
</div>
</body>
</html>
I suggest the following solution:
First, create a javascript file and call it test.js for example. In this file, include the following code:
function myfunc(){
alert('pageshow triggered');
}
$(document).delegate('#welcome', 'pageshow', myfunc);
Then, include the following code for both your files index.php and pageB.php:
-index.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div data-role="page" id="welcome">
<div data-role="header">
<h1>Index</h1>
</div>
<div data-role="content">
link to pageB
</div>
</div>
</body>
</html>
-pageB.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div data-role="page" id="pageB">
<div data-role="header">
Retour
<h1>PageB</h1>
</div>
<div data-role="content">nothing</div>
</div>
</body>
</html>
Another solution would be to group every jQuery Mobile pages in one HTML file:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<!-- PAGE ONE -->
<div data-role="page" id="welcome">
<div data-role="header">
<h1>Index</h1>
</div>
<div data-role="content">
link to pageB
</div>
</div>
<!-- PAGE TWO -->
<div data-role="page" id="pageB">
<div data-role="header">
Retour
<h1>PageB</h1>
</div>
<div data-role="content">nothing</div>
</div>
</body>
</html>
PS: You may change the path / source of the file 'test.js' according to your convenience.