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';
});
Related
Favicon not showing up when running my React project. However, when I click index.html, the icon appears. When I call npm start, when localhost opens I see my pages without icons. I tried every way and even though I made many changes, I could not reach the result. I will be glad if you help.
The file structure of my project is as follows.
file structure
and index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Trying Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Clear the cache in your browser, this should fix the issue.
Your icons should be in public folder. For importing correctly you have to start all your paths with "%PUBLIC_URL%/myIcon.ico" and this "%PUBLIC_URL%" will be resolved into public folder (where your index.html is placed by default).
(inside index.html on public folder)
exemple: <link rel="icon" href="%PUBLIC_URL%/logo.png" />
Just add version parameter for the favicon path to force your browser to refresh the pic
<link rel="icon" href="favicon.ico?v=2" />
Then you can delete it, the icon will remain.
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
I'm trying to implement a mobile app using mobile angular ui with a firebase data base.
But I can't include firebase without getting this error:
Uncaught ReferenceError: angular is not defined
at angularfire.min.js:1
at angularfire.min.js:1
I don't understand why this happens, because I include angular before the other dependencies? (not the "normal" angular but mobile-angular-ui)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>(...)</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<!-- Angular -->
<script src="/dist/js/mobile-angular-ui.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="/dist/js/mobile-angular-ui.gestures.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<script src="js/app.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="(...)" ng-controller="MainController">
From what the Mobile Angular UI Docs say, you have to include the regular angular.js file as well right above it.
Doesn't angular-ui depend on angular?
I see the script for angular-ui, but not the one for angular itself.
This is my index.html file. I have used angularjs , bower components etc. I have used angular ui view to store header, content, footer files as templates in another folder. When I try to open "index.html" is mozilla(using it for a long time) the website opens perfectly(with all the css and scripts loaded perfectly) , but in some other browser it just shows a blank screen. I have checked in Networks developers option , there is no error in mozilla but lots of 304 and 404 errors in other browsers.Are there some issues on loading the styles and scripts on other browsers or some cached data issues?
<!DOCTYPE html>
<html lang="en" ng-app="medicalApp">
<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>temp_App</title>
<!-- links to various stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-plain.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-default.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
</head>
<body>
<!-- I have used angular ui-view and store header, content, footer files as templates-->
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/ng-dialog/js/ngDialog.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
</body>
</html>
It is impossible to say since we can't directly interrogate your pages/scripts. Typically a white screen in an Angularjs application is indicative of a script error (unable to load a dependency or template usually). The Console should give you the answer. Firefox is pretty forgiving, which is why I prefer to use Chrome. In the failing browser look for angular errors for dependency loading.
It might be the order you are loading scripts. Other than that I can't see anything on the surface that would a problem.
I just started to explore react and trying to understand how do I use react-bootstrap if is installed over bower I just followed the getting started part but I do not really understand how does should work.
here I have my markup
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="styles/main.css" rel="stylesheet">
<script src="vendor/react/react.js"></script>
<script src="vendor/react-bootstrap/react-bootstrap.js"></script>
<script src="vendor/react/JSXTransformer.js"></script>
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script>
var Alert = ReactBootstrap.Alert;
console.log(Alert)
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
How do I generate bootsrap component with this package?
Update
I think I got it but I'm not sure if I use it right so in my markup
<script>
var Alert = ReactBootstrap.Alert;
</script>
<script src="components/Alert.js"></script>
Alert.js is the compiled jsx
const alertInstance = (
<Alert bsStyle='warning'>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>
);
React.render(alertInstance, document.body);
#dmasi mentioned it right in comments. This looks like a namespace issue and its missing from the examples mentioned on react-bootstrap website.
Here is an example of using Bootstrap's ButtonGroup via React-Bootstrap. You can adopt a similar approach for your code.
<h2>React-Bootstrap Testing</h2>
<div id="myBtn"></div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.25.1/react-bootstrap.js"></script>
<script type="text/jsx">
var MyReactBootstrapButton = React.createClass({
render: function() {
var ButtonGroup = ReactBootstrap.ButtonGroup,
Button = ReactBootstrap.Button;
return (<div>
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</div>);
}
});
React.render(<MyReactBootstrapButton />, document.getElementById("myBtn"));
</script>
Working Fiddle link: fiddle