Fitting images all on the same row in grid - javascript

I'm using angularjs to output the bicycles in same row using ng-repeat.
I can't seem to get left arrow stay on the same row no matter how I mess with the col-3-md/col-4-md or whatever I set it too. It currently looks like the image attached.
How can It get it all on one line. I'm trying to build a carousel to cycle through the images.
index.html
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3" ng-repeat="product in products | limitTo:-4">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
app.js
var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){
$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
},
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'
},
{
manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{
manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{
manufacturer: "Framed",
image: 'images/bike5.jpg'
}
];
this.form = {};
this.addForm = function(product){
};
}]);

Related

Google chart HTML page integration in my existing project not working

I have a google chart HTML page and it draws chart fine whenever I rut it individually.
the code of page is following
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<title>Value IQ</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<!-- detail section start -->
<section class='section-padding'>
<div class='container'>
<div class='row'>
<div class='col-12'>
<div>
<h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
</div>
</div>
</div>
<div class='row'>
<div class='col-lg-12'>
<!-- start:: Chart card -->
<div class='card-blk chart-card d-flex flex-column'>
<div class='card flex-grow-3'>
<div class='card-title'>
<h6 class='text-center'>
Customers
</h6>
</div>
<div class='card-content text-center'>
<div id='chartElement3'>
<script type='text/javascript'>
google.charts.load('current', {
callback: drawElement3Dashboard,
'packages':['corechart', 'controls']
});
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9', 18.2, '18.2'],['A',5.5, '5.5', 5.4, '5.4'],['B',2.4, '2.4', 2.3, '2.3'],['C',1.0, '1.0', 1.0, '1.0'],['C-',0.3, '0.3', 0.3, '0.3']]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
'height': 300,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'short','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
</script>
<div id='dashboard_div_3'>
<div id='filter_div_3' style='display: none;'></div>
<div id='chart_div_3'>
</div>
</div>
</div>
</div>
</div>
<h6 class='card-subtitle'>
User: Company name
</h6>
</div>
<!-- end:: Chart card -->
</div>
</div>
<!-- Start:: Copyright and page text -->
<div class='row mt-auto pt-3'>
<div class='col-12'>
<div class='copyright-text d-flex justify-content-between'>
<span>Company Name</span>
<span>Page 1</span>
</div>
</div>
</div>
<!-- End:: Copyright and page text -->
</div>
</section>
<!-- detail section end -->
</body>
</html>
Now when I to put the content between and in particular of my existing project page, chart is not drawn and in encounter following error in chrome's console
VM410:7 Uncaught (in promise) TypeError: google.visualization.DataTable is not a constructor at drawElement3Dashboard (eval at (jquery-1.7.2.js:614), :7:13)
I already included
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
in my project.
JSfiddle link is here
Guys, what could be the cause of of this?

Could you add this to your code.
you can place the callback directly in the load statement and you can depend on the callback to know when the page is ready.
google.charts.load('current', {
callback: drawElement3Dashboard,
'packages':['corechart', 'controls']
});

Check this by separating javascript and html
google.charts.load('current', {
callback: drawElement3Dashboard,
'packages':['corechart', 'controls']
});
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9', 18.2, '18.2'],['A',5.5, '5.5', 5.4, '5.4'],['B',2.4, '2.4', 2.3, '2.3'],['C',1.0, '1.0', 1.0, '1.0'],['C-',0.3, '0.3', 0.3, '0.3']]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
'height': 300,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'short','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<title>Value IQ</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<!-- detail section start -->
<section class='section-padding'>
<div class='container'>
<div class='row'>
<div class='col-12'>
<div>
<h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
</div>
</div>
</div>
<div class='row'>
<div class='col-lg-12'>
<!-- start:: Chart card -->
<div class='card-blk chart-card d-flex flex-column'>
<div class='card flex-grow-3'>
<div class='card-title'>
<h6 class='text-center'>
Customers
</h6>
</div>
<div class='card-content text-center'>
<div id='chartElement3'>
<div id='dashboard_div_3'>
<div id='filter_div_3' style='display: none;'></div>
<div id='chart_div_3'>
</div>
</div>
</div>
</div>
</div>
<h6 class='card-subtitle'>
User: Company name
</h6>
</div>
<!-- end:: Chart card -->
</div>
</div>
<!-- Start:: Copyright and page text -->
<div class='row mt-auto pt-3'>
<div class='col-12'>
<div class='copyright-text d-flex justify-content-between'>
<span>Company Name</span>
<span>Page 1</span>
</div>
</div>
</div>
<!-- End:: Copyright and page text -->
</div>
</section>
<!-- detail section end -->
</body>
</html>

parseTime and functions in D3 have errors

I am currently learning D3, following a tutorial.
I have an error "d3.timeParse is not a function" on the first line in the main.js file. Also when I remove the variables parseTime and formatTime, I get the error ".then(function(data) is not a function"
Any help would be appreciated, thank you.
Here is the main.js file -
var parseTime = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%d/%m/%Y");
d3.json("data/calls.json").then(function(data){
data.map(function(d){
d.call_revenue = +d.call_revenue
d.units_sold = +d.units_sold
d.call_duration = +d.call_duration
d.date = parseTime(d.date)
return d
})
allCalls = data;
calls = data;
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
donut = new DonutChart("#company-size")
revenueBar = new BarChart("#revenue", "call_revenue", "Average call revenue (USD)")
durationBar = new BarChart("#call-duration", "call_duration", "Average call duration (seconds)")
unitBar = new BarChart("#units-sold", "units_sold", "Units sold per call")
stackedArea = new StackedAreaChart("#stacked-area")
timeline = new Timeline("#timeline")
$("#var-select").on("change", function(){
stackedArea.wrangleData();
})
})
function brushed() {
var selection = d3.event.selection || timeline.x.range();
var newValues = selection.map(timeline.x.invert)
changeDates(newValues)
}
function changeDates(values) {
calls = allCalls.filter(function(d){
return ((d.date > values[0]) && (d.date < values[1]))
})
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
$("#dateLabel1").text(formatTime(values[0]))
$("#dateLabel2").text(formatTime(values[1]))
donut.wrangleData();
revenueBar.wrangleData();
unitBar.wrangleData();
durationBar.wrangleData();
stackedArea.wrangleData();
}
This is the index.html file -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Corporate Dashboard</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="static/css/dc.min.css" type="text/css" />
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="static/css/jquery-ui.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.theme.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#"><img id="logo" src=""></a>
</div>
</nav>
<div class="container">
<div class="row">
<div id="left-charts" class="col-sm-12 col-md-8">
<div class="row">
<div class="col-md-4">
<label>Dates: <span id="dateLabel1">01/01/2017</span> - <span id="dateLabel2">10/12/2017</span></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<select id="var-select" class="form-control">
<option selected value="call_revenue">Revenue (USD)</option>
<option value="call_duration">Call Time (seconds)</option>
<option value="units_sold">Units Sold</option>
</select>
</div>
</div>
<div id="stacked-area"></div>
<div id="timeline"></div>
</div>
<div id="right-charts" class="col-md-4 col-sm-12">
<div class="row">
<div class="col-sm-6 col-md-12" id="company-size"></div>
<div class="col-sm-6 col-md-12" id="units-sold"></div>
<div class="col-sm-6 col-md-12" id="revenue"></div>
<div class="col-sm-6 col-md-12" id="call-duration"></div>
</div>
</div>
</div>
</div>
<!-- External JS Libraries -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/js/d3.min.js"></script>
<script type="text/javascript" src="static/js/crossfilter.min.js"></script>
<script type="text/javascript" src="static/js/dc.min.js"></script>
<script type="text/javascript" src="static/js/queue.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="static/js/barChart.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
</body>
</html

You should probably include the d3 library. Add this to the beginning.
<script src="https://d3js.org/d3.v5.js"></script>
Here is the whole documentation to the library, check it out: https://github.com/d3/d3/wiki

Framework7 and Material Design: Styling not rendered

I'm building my first Android app using Framework7. However, when I use the example provided in https://www.tutorialspoint.com/framework7/navbar_basic.htm, and use the CDNs corresponding to the latest version of Framework7 (3.6.0 instead of 1.4.2), my webpage just renders as HTML without any styling whatsoever.
My code:
<!DOCTYPE html>
<html class="with-statusbar-overlay">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Notifications</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.0/css/framework7.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Notifications</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Single-line notification</p>
<p>Multi-line notification</p>
<p>With custom button</p>
<p>With callback on close</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.0/js/framework7.min.js"></script>
<script>
</script>
</body>
</html>

This issue happen since you are not init app, also you dont set an App Wrapper, lets check this example
You can find here app init for F7:
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: 'left',
},
// Add default routes
routes: [
{
path: '/about/',
url: 'about.html',
},
],
// ... other parameters
});
App Html Layout:
<div id="app">
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Notifications</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Single-line notification</p>
<p>Multi-line notification</p>
<p>With custom button</p>
<p>With callback on close</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: I suggest you start from here nested of toutrialpoint website.
Ref:
Init F7 App
App Layout

angular js Bootstrap not working with multiple rows and columns

I am making a basic blackjack game with angularjs and using bootstrap for the layout however I cannot seem to make it work.
What I want is a heading across the top, the content of the game in the middle and left and a list of current players on the right but isn't everything is running down the page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackjack</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="./angular.js"></script>
<script src="./angular-animate.js"></script>
<script src="./angular-touch.js"></script>
<script src="./ui-bootstrap.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="main">
<div class = "row">
<div class="col-sm-12">
<h1>Black Jack</h1>
</div>
</div>
<div class="row">
<div class = "col-sm-10">
<div ng-include="'play.html'" my-replace>
</div>
<div ng-include="'next.html'" my-replace>
</div>
<div ng-include="'start.html'" my-replace> </div>
</div>
<div class="col-sm-2">
<ul class = "row">
<li class="col-sm-12">
<h2>Players</h2>
</li>
<li class = "col-sm-12" ng-repeat="player in players">
<span>{{player.name}}: <button ng-if="!started" ng-click='removePlayer(player)'>Remove</button></span>
</li>
</ul>
</div>
</div>
</div>
<!--
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> </script>
<script>
div = $("div");
(function add(div){
div.each(function(i, val){
this.innerHTML=this.nodeName+" open "+this.className+" "+this.innerHTML+" "+this . nodeName+" close"
add($(this).children());
})})(div);
</script>
-->
</body>
</html>
The my-replace directive strips away the wrapping div of the ng-includes once their content loads.
The js code at the bottom is a quick debugger so I can see how the html was being interpreted as firebug light doesn't work with angularjs.
I've tried with multiple versions of bootstrap too
Why isn't the bootstrap working?

Cycling through angular objects onclick

I'm trying to use jquery to hide the opacity of the first 3 products by clicking the left arrow and then I want the next 3 products to fade into view. I can get the first 3 to fade out without moving the arrows by hiding opacity. So when they are invisible the products will change and then I will fade into view the next 3 products.
I can't seem to figure out how to change out the first 3 images on click with the next 3 images. Can anyone help me with this?
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><a ng-href="#"><img ng-src="images/leftarrow.png" class="img-responsive"></a></div>
<div class="bikesandtitles">
<div id="bikeTitle" class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
</div>
<div class="col-md-1" id="rightArrow"><a ng-href="#"><img ng-src="images/rightarrow.png" class="img-responsive"></a></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
bikeimageslider.js
$( document ).ready(function() {
$('#leftArrow').click(function (event) {
event.preventDefault();
$('.bikesandtitles').fadeTo(800, 0);
});
});
app.js
var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){
$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
},
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'
},
{
manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{
manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{
manufacturer: "Framed",
image: 'images/bike5.jpg'
},
{
manufacturer: "Windsor",
image: 'images/bike6.jpg'
}
];
this.form = {};
this.addForm = function(product){
};
}]);

Categories