I am trying to create a similar to view to what we see on the Apple App Store. It works... however, for some reason my slider doesn't show at the top of the view when I view in my mobile device but works fine when I display in Google Chrome using mobile view in developer tools. Does anyone have any idea? My view doesn't vertically scroll either for some reason, I am thinking this could be a conflict with the horizontal scroll... that or I have some syntax wrong somewhere?
I'm guessing its the HTML where the issue lies?
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/drewrygh-misc/hscrollcards.css" />
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src='https://s3-us-west-2.amazonaws.com/drewrygh-misc/ionic.hscrollcards.js'></script>
<link href="css/style.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body ng-app="starter" class="slide-left-right-ios7">
<ion-header-bar class="bar-positive">
<h1 class="title">App</h1>
</ion-header-bar>
<ion-pane overflow-scroll="true">
<div class="home-wrapper">
<!--start featured banner-->
<div ng-controller="testCtrl">
<ion-slide-box delegate-handle="theSlider" show-pager="true" does-continue="true" auto-play="true">
<ion-slide ng-repeat="feat in featured">
<h2>{{feat.name}}</h2>
<img ng-src="{{feat.heder_img}}" style="width:100%" />
</ion-slide>
</ion-slide-box>
</div>
<!--end featured banner-->
<div ng-controller="barsCtrl">
<h4>Top Rated Bars</h4>
<hscroller>
<hcard ng-repeat="bar in bars" index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}"></hcard>
</hscroller>
</div>
<div ng-controller="restCtrl">
<h4>Top Rated Restaurants</h4>
<hscroller>
<hcard ng-repeat="restaurant in restaurants" index="{{$index}}" desc="{{restaurant.name}}" image="{{restaurant.profile_pic}}"></hcard>
</hscroller>
</div>
</ion-pane>
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item" ng-click="#">
Home<i class="icon ion-android-home"></i>
</a>
<a class="tab-item" ng-click="#">
Categories<i class="icon ion-ios-list"></i>
</a>
<a class="tab-item" href="#">
Events<i class="icon ion-calendar"></i>
</a>
</nav>
</div>
</body>
</html>
JS:
angular.module('starter', ['ionic', 'ionic.contrib.ui.hscrollcards'])
.controller('barsCtrl', function($scope, $http)
{
$http.get('http://liverpool.li/api/feat/type/1').
success(function(data, status, headers, config)
{
$scope.bars = data.Featured;
console.log($scope.bars);
}).
error(function(data, status, headers, config)
{});
})
.controller('testCtrl', function($scope, $http)
{
$http.get('http://liverpool.li/api/feat/home').
success(function(data, status, headers, config)
{
$scope.featured = data.Featured;
}).
error(function(data, status, headers, config)
{});
})
.controller('restCtrl', function($scope, $http)
{
$http.get('http://liverpool.li/api/feat/type/2').
success(function(data, status, headers, config)
{
$scope.restaurants = data.Featured;
}).
error(function(data, status, headers, config)
{});
})
What's your phone: iPhone Or Android?
If iPhone, test on Safari desktop to make sure it works. If it doesn't, you will have access to Safari Dev tools to find the cause of the problem.