I'm a newbie at Foundation and Interchange. I referred to the very limited documentation on background images at http://foundation.zurb.com/docs/components/interchange.html, but could not find anything to make it work for me. I believe I'm not doing anything wrong but no image appears on screen or even if it appears after I specify the height in 'pixels,' it just doesn't resize. It's so frustrating!
I want the background image on the website design to be responsive along with image options for 'Medium' and 'Small' screens. And possibly have a carousel that changes image automatically, but having a responsive background is the biggest challenge at this point so I don't know how I'll get there.
Also, there are 2 booking engines for the hotel site. I want that after you select let's say HOTEL-1, you should go to BOOKING ENGINE-1 after you click on BOOK NOW. Likewise, HOTEL-2 should go to BOOKING ENGINE-2 when BOOK NOW is clicked. At the same time it should send the data of CHECK-IN & NIGHTS to the respective booking engine.
Any expert help is greatly appreciated.
My design is:
My code is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/octave-home.css" />
<script src="js/vendor/modernizr.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="row">
<div class="large-12 columns">
<div data-interchange="[images/img-1.jpg, (default)], [images/img-1.jpg, (large)], [images/img-1.jpg, (small)]" style="height:596px; width:100%"></div>
<div class="large-9 large-centered columns">
<div id="headerTop">
<div id="date">
<script type="text/javascript">
var d=new Date();
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname=new Array("January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December");
document.write(monthname[d.getMonth()] + " ");
document.write(d.getDate() + ", ");
document.write(d.getFullYear() + " – ");
document.write(weekday[d.getDay()]);
</script>
</div>
<div id="number"><img src="images/phoneIcon.jpg" alt="Phone" width="13" height="17" align="left">+91 7676 555 222</div>
<div id="smiWrapper"><img src="images/f.jpg" alt="facebook" name="facebook" width="22" height="22" border="0"><img src="images/g+.jpg" alt="twitter" name="google+" width="24" height="22" border="0"><img src="images/in.jpg" alt="linkedin" name="linkedin" width="23" height="22" border="0"></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<!-- Other JS plugins can be included here -->
</body>
</html>
Related
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 Angular for the first time, and my first issue that I want to implement is single page application feature.
But here the first problem:
I have configured a very simple work, it is divided into two files: index.html and project.js.
I'm working on a Windows 10 machine and I'm using xampp 3.2.2, this project is putted inside the folder /htdocs/webapp.
When access to "localhost/webapp/" it properly load the "otherwise" condition, but when I try to load for example "localhost/webapp/#/tomato" or "localhost/webapp/#tomato" the url becomes "http://localhost/webapp/#!#tomato" and the page still shows the content of the otherwise condition...
I really don't know what is the cause, and also the console doesn't show any errors, it seems that in $routeProvider always get the otherwise condition.
Please guys, give some solutions I'm very nervous ;-)
Thank you
Below the snippets of the files
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<script src="project.js"></script>
</head>
<body ng-app="myApp">
<h2>JavaScript Projects</h2>
<div ng-view></div>
</body>
</html>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : '<h1>None</h1><p>Nothing has been selected</p>prova'
});
});
DEMO
var app = angular.module("contactMgr", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : '<h1>None</h1><p>Nothing has been selected</p>prova'
});
}])
<!DOCTYPE html>
<html ng-app="contactMgr">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Title of the document -1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Welcome to Route</h1>
<div class="nav">
Tomato
Banana
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
</body>
</html>
I am using google places API in my ionic/cordova, angular based mobile app in android platform.
I am able to get search results from text field value using API but when i select an option by simply clicking on one of search results, the text box remains empty.
But when I press and keep holding the search result option for 2-3 secs, that option is selected.
It seems weird to me but it is happening.
place_changed event is not getting triggered on quick tap.
I really dont know what can be the cause of this issue? I have tried Faskclick.js to eliminate 300 ms but that didnt work though I think this issue is not related to 300 ms delay.
My code:
function initialize() {
var autocomplete = new google.maps.places.Autocomplete(input, options);
};
Please help me out here.
I used ngMap and angular-google-places-autocomplete together in the following example.
Hope it helps.
angular.module('app', ['ionic', 'google.places', 'ngMap'])
.controller('MapCtrl', ['$scope', 'NgMap',
function ($scope, NgMap) {
$scope.location = null;
NgMap.getMap().then(function (map) {
console.log("getMap");
$scope.map = map;
});
$scope.$on('g-places-autocomplete:select', function(event, place) {
console.log('new location: ' + JSON.stringify(place));
$scope.data = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
};
$scope.map.setCenter(place.geometry.location);
console.log($scope.data);
});
}
]);
.map {
width: 100%;
height: 500px !important;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="https://maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.js"></script>
<link href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="MapCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic map</h1>
</ion-header-bar>
<ion-content class="has-header padding">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" g-places-autocomplete ng-model="location" placeholder="Insert address/location"/>
</label>
<button ng-click="location = ''" class="button ion-android-close input-button button-small" ng-show="location"></button>
</div>
<ng-map zoom="6" class="map">
<marker position="{{data.lat}}, {{data.lng}}"></marker>
</ng-map>
</ion-content>
</ion-pane>
</body>
</html>
I didnt find its solution but https://github.com/stephjang/placecomplete is a great plugin as work around :)
So, I'm trying to get angularjs working with KendoUI mobile...hybrid mobile app.
HTML:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
Home
</li>
<li>
Settings
</li>
<li>
Contacts
</li>
</ul>
</div>
AngularJS:
(function () {
var ngApp = angular.module("MyApp", ["kendo.directives"]);
ngApp.controller('HomeController', ['$scope', function ($scope) {
$scope.foo = 'something';
alert("HOME CONTROLLER");
}]);
}());
Part View HTML:
<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>
What I'm thinking "should" happen is the ng-controller="HomeController" should cause the HomeController to fire and populate the $scope.foo variable. This should bind to the {{foo}} on the view page as well as show the alert...not happenin'.
Any ideas?
Kendo UI developer here, the Kendo UI mobile application and AngularJS do not work well together currently. The good news is that this is something we are actually working on right now - it will be released in our upcoming 2014 Q3 release, due November.
The Telerik resource linked here should be helpful to devs looking to optimally integrate AngularJS functionality into Kendo UI Mobile: http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial
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';
});