So I've got a test site that uses Google's Chart API. I wanted to put an Adsense banner on this site. When I add the Adsense code the chart won't display, but the ad does. Take the Adsense code out and the chart displays just fine.
EDIT: Doesn't matter where the Adsense code is put either. If it's there, the chart is not.
Here's the entire page:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Price'],
['Yesterday', 10.00],
['Today', 12.00],
]);
var options = {
title: 'kyurem'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div>
<h3>doeiqts's Pokemon Price Guide</h3>
</div>
<div id="adsense">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-4255182576260971";
/* Pokemon Graph */
google_ad_slot = "2704848389";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="cardPicture" style="height: 400px; width: 227px; float: left;">
<img src=http://pokegym.net/gallery/displayimage.php?imageid=53682 style="height: 320px; width: 227px; position: relative; top: 80px;" />
</div>
<div id="chart_div" style="width: 900px; height: 500px; float: left;"></div>
<div style="clear: both;">
<p>
<br>
<p>
This site is not affiliated with Nintendo, Pokemon, PokeGym, or eBay.
</div>
</body>
</html>
Related
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
I have a page that will show up a popover that has contact list, one of the list is a map location (google map).
All the lists are shown when popover is called, except google map. Google map only show gray background, but when I inspected it, it shows my coordinated I've input. And when I move it to the outside of pop over it shows no problem.
I've tried to reignite/resize the map when the popover is shown using shown.bs.popover function, but it failed.
here is the plunkr http://plnkr.co/edit/VWiCzhpiOyEMmfRoxaIy?p=preview
here is my code snippet
// Code goes here
$(function() {
//show popover
$('[data-toggle="popover"]').popover({
html: true,
container: 'body',
content: function() {
var getID = $(this).attr("id");
switch (getID) {
case "contact-us":
return $('#list-popover').html();
}
}
});
});
$(document).ready(function() {
$("[data-toggle='popover']").on('shown.bs.popover', function() {
reignitMap();
// console.log(popo);
});
});
//variable used to try reignite map when popover is shown
var googleMap = {};
function initMap() {
// console.log("initiating map");
googleMap.myPosition = {
lat: -6.2126170,
lng: 106.8228290
};
googleMap.map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: googleMap.myPosition
});
googleMap.marker = new google.maps.Marker({
position: googleMap.myPosition,
map: googleMap.map
});
};
function reignitMap() {
// console.log("reignit map");
google.maps.event.trigger(googleMap.map, "resize");
googleMap.map.setCenter(googleMap.myPosition);
};
/* Styles go here */
#map {
width: 110%;
height: 15em;
background-color: grey;
}
.popover {
max-width: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="formLabelRight displayTable col-xs-2 col-md-2 ">
<div class="alignMiddle">
<a href="javascript:;" id="contact-us" class="linkFont" data-toggle="popover" data-placement="bottom">
<span> Contact Us</span>
</a>
</div>
</div>
<div class="container">
<div id="list-popover" class="hide col-xs-12 col-md-12" style="width:100px;">
<div class="col-xs-12 col-md-12" style="display: block;">
<div class="row">
<p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah
kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</p>
</div>
<!--
View Branch Locator -->
<div id="map" class="col-xs-10 col-md-10"></div>
</div>
</div>
</div>
<!-- <div id="map" class="col-xs-10 col-md-10"></div> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4MzPKw9W1RlCgQcctcWmlktTfqQLhMC8&callback=initMap"></script>
</body>
</html>
I have got the following sample html.
Files variable is a simple array of integers, like [1,2,3,4,5,6]
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<!--<script src="../app.js"></script>
<script src="../Controller/applicationCtrl.js"></script>-->
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
$scope.showAll = false;
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
height: 70px;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" ng-class="{'J1': (files.length > 3) && !showAll}">
<div ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href ng-click="showAll = !showAll;">Show {{ showAll ? 'less':'more'}}</a>
</div>
</body>
</html>
If the length of files array is more than 3 then it adds the overflow css to the div. But I also set the height of the div to a fixed value. What I would like to do is to set the height of div based on the heights of the first 3 divs on the fly without setting a fixed value for it. How can I achieve this?
You may try this. I've added jquery CDN. You can do this with raw javascript though.
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
/* Set the parent div's height */
$(function(){
$('.J1').height($('.each-button').outerHeight() * 3);
});
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" class="J1">
<!-- new class has been added -->
<div class="each-button" ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href>Show more</a>
</div>
</body>
</html>
I don't know anything about HTML. So I have to produce this for a project on the fly. I need help from experts in this forum.
I need to place three line charts and one gauge chart from google on one page, how do I write an HTML code that will split the screen into 4 quarters to place each chart. here is the html code for one of the line charts:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
And here is the gauge chart html code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
</html>
Basically, here's the structure to divide screen into four parts
.wrapper > div {
position:absolute;
width:50vw;
height:50vh;
overflow:hidden;
}
#chart1 {top:0;left:0;}
#chart2 {top:0;right:0;}
#chart3 {bottom:0;left:0;}
#chart4 {bottom:0;right:0;}
<div class="wrapper">
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
</div>
Ofcourse you would have to refresh charts once the screen size changes
Here is online demo: https://jsfiddle.net/0cr5enak/
EDIT
Well, to stack vertically I would just go for setting height property to 1/4 screen size for each div: https://jsfiddle.net/0cr5enak/2/
Im trying to convert my div to PDF.
this is my HTML code:
I can download it just fine but I want to show in the PDF file the Div float:left is aligned with Div Float:right.
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>
Right now it show the Div left in the first row, and the Div right in the next row. Help Please.
as I stated in the comments jspdf does not support css as is.
But I found this post which has a reference for HtmlToCnavas plugin which could help.
As i know javascript can not generate full page html with css to PDF.
If your project written by PHP in back-end, dompdf will help you.
Notice: CSS float is not supported (but is in the works).
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>