In the following example, the navbar is correctly hidden when resizing the browser window. However, it is never hidden (always visible) when using the "Toogle device toolbar" in Chromium.
The problem doesn't seem to come from the devtools of chromium though because once deployed, displaying it on a mobile (google chrome or samsung internet browser) still shows the navbar.
What am I missing here ?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-md-start justify-content-center">
<div class="col-2 d-none d-md-block" style="background-color: coral;">
navbar
</div>
<div class="col-12 col-sm-10 col-md-8" style="background-color: aqua;">
content
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
You need to add the:
<meta name="viewport" content="width=device-width, initial-scale=1">
...line. Otherwise chrome will just scale (zoom) to fit.
See: https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template
Related
Having tough times learning React. So I started to rewrite simple HTML + JavaScript page with React.
I want to prerender the html markup before the div with main application. I found that library with custom fonts (simple-line-icons) doesn't load in a way how I've done this. But if I put this <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div> div inside a component, the fonts are loaded fine. Here is the code of index.html how it looks now:
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="css/preloader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/simple-line-icons.css">
<!--[if lt IE 9]>
<script>
(function(){
var ef = function(){};
window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
}());
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
<![endif]-->
<script>
(function (i, s, o, g, r, a, m) {
Google Analytics code
});
</script>
</head>
<body data-spy="scroll">
<div id="preloader">
<div id="status_first">
<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
</div>
<div id="status_second">
<div className="wow tada infinite" data-wow-duration="8s">K</div>
</div>
<div id="status_third">
<div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
</div>
</div>
<div id="app">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
<script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
so, the task is simply perrender this piece of code:
<div id="status_first">
<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
</div>
<div id="status_second">
<div className="wow tada infinite" data-wow-duration="8s">K</div>
</div>
<div id="status_third">
<div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
</div>
How it could be done in simple way? Need a working example please
Well, I've solved it by moving the html code to the first child component of the App.
I make simple example of ng-repeat when I used ng-repeat it works fine .But when I use collection-repeat it gives me this error
Controller '$ionicScroll', required by directive 'collectionRepeat', can't be found!
could you please help me solving this error
Here is my my plunker
http://plnkr.co/edit/LjADQj07M4cEpTQP3WzS?p=preview
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Invoices Grid</title>
<!--Stylesheets-->
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!--Scripts-->
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="a">
<div class="row" collection-repeat="n in names">
<div class="col">{{n.name}}</div>
<div class="col">{{n.lasename}}</div>
</div>
</body>
</html>
First post Google post :
http://forum.ionicframework.com/t/error-compile-ctreq-controller-ionicscroll-required-by-directive-collectionrepeat-cant-be-found/4879
collection repeat needs a scrolling system.
Therefore, suround your code with <ion-content overflow-scroll="true" >
See updated plnkr : http://plnkr.co/edit/LuHPy3lbqYBlg35iYuw1?p=preview
I have tried to create a responsive coming soon page with the above image.I need to create a col_12 at centre of the page and have to position an image just outside the container top.While resizing the image position getting changed from width:760px.how to fix it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
<link rel="stylesheet" href="css/bootstrap.css" media="all"/>
</head>
<body style="background:#9ed8f0;">
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top:225px; background:#fff;">
<div class="container">
<center>
<img src="images/le1.png" alt="" style="margin-top:-121px; max-width:100%;">
</center>
</div>
</div>
</body>
</html>
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.
I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role="page." Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" style="padding:0;">
<img src="coffee.gif" width="320" height="480" alt="coffee">
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks so much for your help. Much appreciated.
-bob
edit the "viewport" in meta tag with this
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
It's the viewport metadata property that controls those settings.
Follow this to see how to enable pinch & zoom on JQM iOS (shouldn't really matter that you are using PhoneGap).
Hope this helps.
When jQuery Mobile renders a page, it adds the following meta tag to
the head of the document.
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
It is the minimum-scale=1, maximum-scale=1 part of
the tag which disables the pinch zoom. What we need to do is modify
the $.mobile.metaViewportContent variable. We can do this using the
following code.
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width';
});
If we want to restrict the amount of zooming, we can use the following:
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2';
});