HTML2Canvas unable convert div to image with large images - html2canvas

I am using HTML2CANVAS to capture Div as Image and save to database.
Its working fine with images of 1-2 kb and text.
but unable to capture multiple and large images suppose 200-300 kb.
Please help help me out if anyone has face this issue and has solution.
Here is my Code:
<div id="target">
<page size="A4">
<div id="wrapper" >
<div id="header">
<div class="text">
<span id="rent">This Space for rent/price</span>
<h1 id="propAdd">THIS SPACE FOR PROPERTY ADDRESS</h1>
<h1 id="Data">THIS SPACE FOR DATA</h1>
</div>
</div>
<h1 id="ad">
This Space For advert heading</h1>
<div id="content">
<div class="main">
<div id="dvPreview2">
<img src="images/main-image.jpg" width="550" height="355" />
</div>
<h1 id="DES">This Space for Property Description or FEATURES</h1>
<ul>
<li id="DES1">4 Bedrooms, 3 Bathrooms</li>
<li id="DES2">Ensuite has double shower & double vanity</li>
<li id="DES3">Massive open plan living with cathedral ceilings</li>
<li id="DES4">Resort-style pool deck area</li>
<li id="DES5">Gourmet kitchen with butlers pantry</li>
<li id="DES6">Fully ducted air-con</li>
<li id="DES7">Triple lock-up garage with remote</li>
<li id="DES8">Outside pets considered on application</li>
</ul>
</div>
<div class="sidebar">
<div id="dvPreview3">
<img src="images/sidebar-image-01.png" width="159" height="100" />
</div>
<div id="dvPreview4">
<img src="images/sidebar-image-02.png" width="159" height="100" />
</div>
<div id="dvPreview5">
<img src="images/sidebar-image-03.png" width="159" height="100" />
</div>
<p id="dvPreview1" >
<img src="images/agent-logo.png" style="width:80px;" /></p>
<p style="margin-top:0 !important;">
Phone: <span id="phone">+49 30 47373795</span><br />
E-mail: <span id="mail">Ject41#cuvox.de</span><br />
<span id="web">www.abc.in</span>
</p>
</div>
<div class="clear"></div>
<div class="slid-img">
<div id="dvPreview6" >
<img src="images/image-01.jpg" width="159" height="100" />
</div>
<div id="dvPreview7" >
<img src="images/image-02.jpg" width="159" height="100" />
</div>
<div id="dvPreview8" >
<img src="images/main-image.jpg" width="159" height="100" />
</div>
<div id="dvPreview9" >
<img src="images/sidebar-image-01.png" width="159" height="100" style="float:right; margin:0" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="affiliation-logo">
<ul>
<li><div id="dvPreview10" style="width:32px;"><img src="images/facebook-icon.png" width="32" /></div></li>
<li><div id="dvPreview11" style="width:32px;"><img src="images/twitter-icon.png" width="32" /></div></li>
<li><div id="dvPreview12" style="width:32px;"><img src="images/linkedin-icon.png" width="32" /></div></li>
<li><div id="dvPreview13" style="width:32px;"><img src="images/youtube-icon.png" width="32" /></div></li>
<li><div id="dvPreview14" style="width:32px;"><img src="images/google-plus-icon.png" width="32" /></div></li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
<div class="agent-section">
<%-- <div class="agent-name"></div>--%>
<span class="agent-name" style="float:left"> Disclaimer : </span>
<div id="DIS" style="max-width:550px; float:left; margin-left:10px; line-height:18px; font-size:14px;"></div>
</div>
<div class="clear"></div>
</div>
</div>
</page>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#add_button').click(function () {
html2canvas($('#target'), {
onrendered: function (canvas) {
var img = canvas.toDataURL()
img = img.replace('data:image/png;base64,', '');
//alert(img);
//window.open(img);
$.ajax({
type: 'POST',
url: 'Design1.aspx/UploadImage',
data: '{ "imageData" : "' + img + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
//alert('Image saved successfully !');
}
});
}
});
});
});
</script>

In file Html2Canvas.js on line 65
Change following line from
/* Highest positive signed 32-bit float value /
/maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
to as Below
maxInt = Number.MAX_VALUE,

trick.
set your tag with and height is double of the output image size.

Related

Trying to change the background color of the Bootstrap accordion title when opened

I am working on this project and am trying to change the background color of the accordion when it is open. I like that it's flush when it's closed, but do not like the white background when it's open.
I am also trying to change the way the arrows are situated, so that they are in a straighter line.
This is what I have so far:
console.log(1)
$(".accordion-button").click(function(){
console.log(2)
var dest = $(this).attr("data-bs-target");
$(dest)[0].scrollIntoView();
});
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
body {
background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));
opacity: 1;
position: relative;
overflow: scroll;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-header:collapse {background-color:black !important;}
.accordion-button collapse {
color: rgb(224, 16, 176);
}
h1 {
font-family: Red Rose;
color: #FEB7EE;
}
h2 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}
<!--html-->
<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">
<!--javascript-->
<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>
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.rtl.min.css" integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<!--bootstrap-->
<title>Raspberry Pilot</title>
<!--intro-->
<h1 class="display-1">Raspberry Pi-lot</h1>
<h2 class="display-6">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be surprised what it can do!</h1>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAbout">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"()>
About
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body about"><p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy way to learn programming and computing.</p></div>
</div>
</div>
<!--ingredients-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushIngredients">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
What You'll Need
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
<h3>Raspberry Pi</h3>
<p>Go with models 3 and higher.</p>
<img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
<h3>HDMI Monitor</h3>
<p>An HDMI TV works too!</p>
<img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
<h3>SD Card</h3>
<p>Aim for at least 8GB.</p>
<img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
<h3>USB Mouse</h3>
<p>You can switch to a wireless mouse later.</p>
<img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
<h3>USB Keyboard</h3>
<p>You can switch to a wireless keyboard later.</p>
<img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
<h3>Power Supply</h3>
<p>Standard 5V USB C or Micro depending on the model.</p>
</div>
</div>
</div>
<!--SetUp-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSetUp">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Set Up
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Set up your SD card.</h4>
<p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>
Link to download NOOBS
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
<p>Make sure everything is plugged in before turning it on.</p>
</div>
</div>
</div>
<!--options-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushOptions">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
What Can You Do?
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Set up your SD card.</h4>
<p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>
Link to download NOOBS
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
<p>Make sure everything is plugged in before turning it on.</p></div>
</div>
</div>
<!--python-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushPython">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Code with Python
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Open Thonny</h4>
<p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
Link to see what you can do with Python
<h4>Learn Python</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
</div>
</div>
</div>
<!--accessories-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAccessories">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Add Ons & Accessories
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--sensehat-->
<div class="accordion-item" >
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
SenseHat
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
<img src="" class="img-fluid" alt="SenseHat Demo" width="200" height="250">
<pre>
<code>
from sense_hat import SenseHat
sense = SenseHat()
# Define some colours
g = (0, 255, 0) # Green
b = (0, 0, 0) # Black
# Set up where each colour will display
creeper_pixels = [
g, g, g, g, g, g, g, g,
g, g, g, g, g, g, g, g,
g, b, b, g, g, b, b, g,
g, b, b, g, g, b, b, g,
g, g, g, b, b, g, g, g,
g, g, b, b, b, b, g, g,
g, g, b, b, b, b, g, g,
g, g, b, g, g, b, g, g
]
# Display these colours on the LED matrix
sense.set_pixels(creeper_pixels)
</code>
</pre>
</div>
</div>
<!--projects-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
SenseHat Projects
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight">
<div class="accordion-body">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">This will be a cool project idea.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Another cool project. </p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Last cool project goes here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--resources-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushResources">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
Raspberry Pi Resources
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Link</li>
<li class="list-group-item">Another Link</li>
<li class="list-group-item">Another another link</li>
<li class="list-group-item">Fourth link</li>
<li class="list-group-item">Last link</li>
</ul>
</div>
</div>
</div>
<!--end tag-->
</div>
</div>
</body>
<link href="./stylesheet.css" rel="stylesheet"/>
<script src="script.js"></script>
</html>
It is quite simple in your file stylesheet.css, add this code
.accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #FEB7EE;
}

how to create side panel custom search for leaflet that search through geojson data?

I have a project using leaflet, but I want to do a custom search through GeoJSON data but I don't know how to do it. I have a side panel with search box and button. below is my design:.
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
var map = new L.map("myMAP_id", {
fullscreenControl: {
pseudoFullscreen: false,
position: "topright"
}
}).setView([10.392241, 124.98], 16.5);
var layer = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
visible: false,
title: "OpenStreetMap"
}
);
map.addLayer(layer);
var poly = L.geoJson(slsu_bldg, {
style: function(feature) {
return bldg_style;
},
onEachFeature: function(feature, marker) {
marker.bindPopup(
"<div><b>SOUTHERN LEYTE STATE UNIVERSITY" +
"<br>" +
feature.properties.BLDG_NAME +
"<br><button id='" +
feature.properties.ID +
"' class='btn btn-xs btn-primary' style='height: 23px; font-size: 11px; padding: 3px 6px; letter-spacing: 0.02rem; margin-top: 5px;'>More Details <i class='fa fa-caret-right'></i></button></div"
);
}
});
var search_val;
$("#search").on("click", function() {
search_val = $("#searchtext10").val();
console.log(search_val);
var search = new L.Control.Search({
options: {
layer: poly,
zoom: 19,
initial: false,
filterData: search_val,
propertyName: "BLDG_NAME",
marker: {
icon: true,
animate: true,
circle: {
radius: 10,
weight: 4,
color: "#1BC500",
stroke: true,
fill: true
}
}
}
});
console.log(search);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SLSU Asset Management</title>
<link rel="shortcut icon" href="http://localhost/GIS-SLSU_AssetMgt/assets/img/slsu.png" />
<!-- offline bootstrap -->
<!-- online bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- custom stylesheet -->
<link rel="stylesheet" href="http://localhost/GIS-SLSU_AssetMgt/assets/custom/style.css" />
<!-- leaflet offline connection -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-src.js">
integrity="sha512-eldJj3obVsCO9Tlrj/J8AFrrTFD4+sN8d9HdwKAqZuSgHloWOm6IzetLy1uQnwh9qLssrY3TAgIJQfjPfQJxHQ=="
crossorigin=""
</script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/L.Conttol.Locate.min.js"></script>
<!-- leaflet full screen -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.min.js"></script>
<!-- online maptiler mapboxGL map -->
<script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
<!-- offline maptiler mapboxGL map -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/leaflet-mapbox-gl.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.js"></script>
<!-- geojson coder -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
/>
<script src="https://unpkg.com/osmtogeojson#2.2.12/osmtogeojson.js"></script>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.js"></script>
</head>
<body>
<!--- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand image" href="#">
<img
class="img img-responsive"
src="http://localhost/GIS-SLSU_AssetMgt/assets/img/LOGO.png"
alt=""
/>
<!-- SLSU-MC GIS MAP -->
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Help</a>
</li>
</ul>
</div>
</nav>
<!---map section -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map_wrapper">
<div class="row">
<div class="col-md-4" style="padding-right: 0 !important;">
<div class="left-control">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
BASE MAPS
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show"
aria-labelledby="headingOne"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label>
<div>
<input
type="radio"
id="basemaps"
value="OpenStreetMap"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
checked="checked"
/>
<span> Open Street Map</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Maptiler"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Maptiler</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="MapBox"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> MapBox</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Google"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Google</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="WorldImagery"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> World Imagery</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
LAYER MAPS
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-overlays">
<label>
<div>
<input
type="checkbox"
id="vector_layerBuilding"
value="Buildings"
class="leaflet-control-layers-selector"
checked=""
onclick="vector_layerBuilding()"
/>
<span> Buildings</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerRoads"
value="Roads"
class="leaflet-control-layers-selector"
onclick="vector_roads()"
/>
<span> Roads</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBoundary"
value="Boundary"
class="leaflet-control-layers-selector"
onclick="vector_layerBoundary()"
/>
<span> Boundary</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerTrack"
value="Track/Oval"
class="leaflet-control-layers-selector"
onclick="vector_layerTrack()"
/>
<span> Track/Oval</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerField"
value="Field"
class="leaflet-control-layers-selector"
onclick="vector_layerField()"
/>
<span> Field</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerParking"
value="Parking Lot"
class="leaflet-control-layers-selector"
onclick="vector_layerParking()"
/>
<span> Parking Lot</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerPath"
value="Foot Path"
class="leaflet-control-layers-selector"
onclick="vector_layerPath()"
/>
<span> Foot Path</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBleacher"
value="Bleacher"
class="leaflet-control-layers-selector"
onclick="vector_layerBleacher()"
/>
<span> Bleacher</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div id="myMAP_id"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info" style="height: 28vh">
<div align="right"><button class="btn btn-default">IMPORT</button></div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Building Name</th>
<th>Assets</th>
<th>Counts</th>
<th>Unit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CCSIT Building</td>
<td>Computer Sets</td>
<td>100</td>
<td>PCS</td>
</tr>
<tr>
<td>2</td>
<td>CCSIT Building</td>
<td>MAC PC</td>
<td>25</td>
<td>PCS</td>
</tr>
<tr>
<td>3</td>
<td>CCSIT Building</td>
<td>Mga Gwapo</td>
<td>Gamay Ra Me!</td>
<td>Way Labot Jorton (by: Ranel)</td>
</tr>
<tr>
<td>4</td>
<td>CCSIT Building</td>
<td>Mga Panget</td>
<td>Gamay Ra Sila!</td>
<td>Labot Si Jorton (by: Ranel)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<p>
<a href="https://leafletjs.com/" target="_blank">Leaflet ©</a
> | Developed by: darksidebug_09
</p>
</div>
</div>
</div>
<!--- scripts here -->
<!--- geojson data -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/new_bldg_data.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_boundary.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/road_network.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/track_oval.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_field.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/parking_lot.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/foot_path.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/bleacher.geojson"></script>
<!--- script -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/data_scripts.js"></script>
<!-- Bootstrap core JavaScript and JQuery-->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/js/jquery.min.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

fancybox not showing images when screen is smaller

The fancybox triggers and shows the images when it's wide screen until you resize down under approx 1000px wide. What did I do wrong? Can someone help? A live page with a test is here, only the top 6 images in the row under where it says Please, Click The Logos To Read Some Testimonial Letters are code with the fancybox. The stuff below is filler for now.
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
<=== the above is in the <head> ===>
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/tucscenter.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Tuscon Center" src="photos/logo/tuscenter.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/texasdot.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Texas DOT" src="photos/logo/TexasLogo.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/ushome.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Tuscon Center" src="photos/logo/USHomeLogo.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/kimberly.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Kimberly Clark" src="photos/logo/KimberlyClarkLogo.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/FresnoCollege.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Fresno College" src="photos/logo/FresnoCollege.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/roswelltoy.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Tuscon Center" src="photos/logo/roswelltoyota.jpg" /> </div>
</a></div>
</div>
<div class="clearfix d-none d-sm-block"></div>
<=== above </body> close ===>
<script src="jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
First, fix all JS errors, because any JS error can prevent further execution of the code:
Uncaught TypeError: $(...).collapse is not a function

List inside <ion-content> isn't scrolling vertically

I have the following list inside an ion-content:
<ul class="list">
<li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
<div class="dr-info-wrapper">
<img src="img/icons/ic_persona.png">
<section class="dr-info">
<h3>{{doctor.name}}</h3>
<h4 class="institution">{{doctor.institutions[0].name}}</h4>
<h4 class="address">{{doctor.institutions[0].address}}</h4>
<h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
</section>
<span class="ion-ios-information-outline info-icon"></span>
</div>
</li>
</ul>
I just need that list to scroll because I have other elements inside the same which I need them to be static/fixed (with no scroll). This is how the view looks right now:
The red part must not move/no-scroll the blue part is the part I want with scroll, thanks for any help!
The code for the complete html just in case is:
<ion-view id="doctors" view-title="Directorio médico" ng-controller="DoctorsDirController">
<ion-content class="content-dir-medico" scroll="false">
<div class="top-wrapper">
<section class="section-for-bg-img"></section>
<div class="dir-medico-grid-bg-img"></div>
<section ng-class="blurOptionsWrapper ? 'options-wrapper-blurred' : 'options-wrapper'">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CITIES FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="all-suboption">
<div class="description-and-dropdown-wrapper first">
<h4 ng-class="cityClicked ? 'mark-used' : 'mark-unused'">{{cityName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down" ng-disabled="blurOptionsWrapper"
ng-click="citiesPopover.show($event)">
<script id="popoverCities.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="city in cities | orderBy: 'id'" ng-click="cityClick(city)">
{{city.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
SPECIALTIES FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper">
<h4 ng-class="specialtyClicked ? 'mark-used' : 'mark-unused'">{{specialtyName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down"
ng-disabled="disableSpecialty || blurOptionsWrapper"
ng-click="specialtiesPopover.show($event)">
<script id="popoverSpecialties.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="specialty in specialties | orderBy: 'label'"
ng-click="specialtyClick(specialty)">
{{specialty.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
INSTITUTIONS FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-class="disableInstitutions ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper last">
<h4 ng-class="institutionClicked ? 'mark-used' : 'mark-unused'">{{institutionName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down"
ng-disabled="disableInstitutions || blurOptionsWrapper"
ng-click="institutionsPopover.show($event)">
<script id="popoverInstitutions.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="institution in institutions | orderBy: 'name' | unique: 'name'"
ng-click="institutionClick(institution)">
{{institution.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
</section>
</div>
<section class="search-instructions" ng-hide="hideSearchInstructions">
<img src="img/icons/ic_lupaesfera.png" class="search-icon">
<h4>Comienza buscando </br>por ciudad y especialidad</h4>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
RESULTS SHOW ALL DOCTORS, BASED ON CITY & SPECIALTY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<section class="results-area" ng-hide="hideDoctorsResults">
<div class="filter-results-info">
<h5>{{doctors.length}} resultados</h5>
<h6>Filtra resultados seleccionando una institución</h6>
</div>
<ul class="list">
<li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
<div class="dr-info-wrapper">
<img src="img/icons/ic_persona.png">
<section class="dr-info">
<h3>{{doctor.name}}</h3>
<h4 class="institution">{{doctor.institutions[0].name}}</h4>
<h4 class="address">{{doctor.institutions[0].address}}</h4>
<h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
</section>
<span class="ion-ios-information-outline info-icon"></span>
</div>
</li>
</ul>
</section>
I just used another ion-content covering the <ul class="list">and it solved my problem

How do I connect to a remote URL in Scala which requires authentication?

I am using the following code --
val url = new URL(LoginUrl)
val connection = url.openConnection()
val userpass = login + ":" + passwd
val auth = "Basic " + new String(new Base64().encode(userpass.getBytes()))
connection.setRequestProperty ("Authorization", auth)
val page = connection.getInputStream()
Logger.debug("Page " +page )
But the only thing I am getting is --
[debug] application - Page sun.net.www.protocol.http.HttpURLConnection$HttpInputStream#33f13d38
EDIT: Based on the comments I read the stream, I get the page. But I get the login page. I want the page which I get after log-in. What else needs to be done?
var writer = new StringWriter()
IOUtils.copy(page, writer, "UTF-8")
var htmlString = writer.toString()
Logger.debug("Page " + htmlString)
The login URL is "https://affiliate-program.amazon.in/gp/associates/network/main.html"
The html page I get --
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>
Amazon Sign In
</title>
<link type="text/css" href="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/errors-alerts/error-styles-ssl._CB138362389_.css" rel="stylesheet" />
<link type="text/css" href="https://images-na.ssl-images-amazon.com/images/G/31/authportal/common/css/ap_global._CB350157780_.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body id="amzn_associates_in" class="ap-locale-en_IN" >
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<div id="headerbanner">
</div>
<div id="wrapper">
<div id="navbarTopSlots">
</div>
<div id="topSlots">
<div id="top-0"></div>
<div id="top-1">
<div id="ap_header" class="ap_header">
<img src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/amazon-logo._CB138360615_.gif" height="36" alt="Amazon Logo" width="126" border="0"/>
</div>
</div>
<div id="top-2"></div>
<div id="top-3"></div>
<div id="top-4"></div>
<div id="top-5"></div>
<div id="top-6"></div>
<div id="top-7"></div>
<div id="top-8"></div>
<div id="top-9"></div>
<div id="top-10"></div>
</div>
<div id="leftSlots">
<div id="left-0"></div>
<div id="left-1"></div>
<div id="left-2"></div>
<div id="left-3"></div>
<div id="left-4"></div>
<div id="left-5"></div>
<div id="left-6"></div>
<div id="left-7"></div>
<div id="left-8"></div>
<div id="left-9"></div>
<div id="left-10"></div>
</div>
<div id="centerSlots">
<div id="center-0"></div>
<div id="title-slot">
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<div id="ap_title_pagelet">
</div>
<!--[if lte IE 8]>
</div>
<![endif]-->
</div>
<div id="message-box-slot">
<div id="message_warning" class="message warning" style="display:none">
<span></span>
<h6>Please Enable Cookies to Continue</h6>
<p>
To continue shopping at Amazon, please enable cookies in your Web browser.
</p>
<p>
<a href="/gp/help/customer/display.html/ref=ap_cookie_error_help??nodeId=200168080" target="AmazonHelp" onclick="return amz_js_PopWin(this.href,'AmazonHelp','width=700,height=800,resizable=1,scrollbars=1,toolbar=1,status=1');return false;" >
Learn more
</a>
about cookies and how to enable them.
</p>
</div>
<script type="text/javascript">
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
function deleteCookie ( cookie_name )
{
var cookie_date = new Date ( ); // current date & time
cookie_date.setTime ( cookie_date.getTime() - 1 );
document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
function checkCookieEnabled(nodeId)
{
setCookie('amznTest','1',null);
if(getCookie('amznTest')){
deleteCookie('amznTest');
}else{
document.getElementById(nodeId).style.display = 'block';
}
}
checkCookieEnabled('message_warning');
</script>
</div>
<div id="center-1"></div>
<div id="signin-slot">
<script>
function cf() {
if (typeof window.uet === 'function') {
uet('cf');
}
if (window.embedNotification &&
typeof window.embedNotification.onCF === 'function') {
embedNotification.onCF();
}
}
</script>
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<form name="signIn" method="POST" id="ap_signin_form" novalidate="novalidate" action="https://www.amazon.in/ap/signin"
onsubmit="var test1 = apCheckRequiredFields('ap_signin_form', ['ap_email','ap_password']);
return (apValidateEmail('ap_email') && test1);"
>
<input type="hidden" name="appActionToken" value="scIhj2FOCtxr39z7eUIj2FWeNOWxtIwj3D" /><input type="hidden" name="appAction" value="SIGNIN" />
<input type="hidden" name="openid.pape.max_auth_age" value="ape:MA==" />
<input type="hidden" name="openid.ns" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjA=" />
<input type="hidden" name="openid.ns.pape" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvZXh0ZW5zaW9ucy9wYXBlLzEuMA==" />
<input type="hidden" name="prevRID" value="ape:MEhOWlBQUjQ3Rzg0U1QwREJTRVo=" />
<input type="hidden" name="pageId" value="ape:YW16bl9hc3NvY2lhdGVzX2lu" />
<input type="hidden" name="openid.identity" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjAvaWRlbnRpZmllcl9zZWxlY3Q=" />
<input type="hidden" name="openid.claimed_id" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjAvaWRlbnRpZmllcl9zZWxlY3Q=" />
<input type="hidden" name="openid.mode" value="ape:Y2hlY2tpZF9zZXR1cA==" />
<input type="hidden" name="openid.assoc_handle" value="ape:YW16bl9hc3NvY2lhdGVzX2lu" />
<input type="hidden" name="openid.return_to" value="ape:aHR0cHM6Ly9hZmZpbGlhdGUtcHJvZ3JhbS5hbWF6b24uaW4vZ3AvYXNzb2NpYXRlcy9uZXR3b3JrL21haW4uaHRtbD9pZT1VVEY4JipWZXJzaW9uKj0xJiplbnRyaWVzKj0w" />
<div id="ap_signin1a_pagelet" class="ap_table ap_pagelet">
<div id="ap_signin1a_pagelet_title" class="ap_row ap_pagelet_title">
<h1>Sign In</h1>
</div>
<div id="ap_signin1a_email_section_title" class="ap_row ap_section_title">
<h2>
What is your e-mail address?
</h2>
</div>
<div id="ap_signin1a_email_row" class="ap_row">
<span class="ap_col1 ap_bold ap_right ap_no_collapse">
<label for="ap_email">
My e-mail address is:
</label>
</span>
<span class="ap_col2 ap_left">
<input id="ap_email" name="email" value="" type="email" size="30" maxlength="128" tabindex="1" autocorrect="off" autocapitalize="off" />
</span>
</div>
<div id="ap_signin_custom_message" class="center clear-both" >
</div>
<div id="ap_signin1a_password_section_title" class="ap_row ap_section_title">
<h2> Do you have an Amazon password? </h2>
</div>
<div id="ap_signin1a_new_cust_radio_row" class="ap_row">
<span id="" class="ap_col1 ap_right ap_no_collapse">
<input type="radio" onclick="setElementAvailability('ap_password', false);jQuery('#ap_captcha_table').hide();" name="create" id="ap_signin_create_radio" value="1" tabindex="6" />
</span>
<span id="" class="ap_col2 bold ap_radio_label">
<label for="ap_signin_create_radio">I am a new customer.</label>
<div class="small">(you'll create a password later)</div>
</span>
</div>
<div id="ap_signin1a_exist_cust_radio_row" class="ap_row">
<span class="ap_col1 ap_right" >
<input type="radio" name="create" onclick="setElementAvailability('ap_password', true);jQuery('#ap_captcha_table').show();" id="ap_signin_existing_radio" value="0" tabindex="7" checked="checked" />
</span>
<span class="ap_col2 bold ap_radio_label"><label for="ap_signin_existing_radio">I am a returning customer, <br>and my password is:</label></span>
</div>
<div id="ap_signin1a_password_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<input id="ap_password" name="password" type="password" maxlength="1024" size="20" tabindex="2" onkeypress="displayCapsWarning(event,'ap_caps_warning', this);" class="password"/>
</span>
<span id="ap_caps_warn_span">
<div id="ap_caps_warning" class="ap_caps_warn ap_col3_caps_warn" style="visibility:hidden;">
<!--[if lt IE 7]>
<style type="text/css">
.ap_caps_warn {
display: none;
}
</style>
<![endif]-->
<b>Caps Lock is on.</b> <font color="black">This may cause you <br>to enter your password incorrectly.</font>
</div>
</span>
</div>
<!--[if IE]><![if !IE]><![endif]-->
<div id="ap_small_forgot_password_link">
<!--[if IE]><![endif]><![endif]-->
<!--[if lte IE 6]>
<div id="ap_small_forgot_password_link_ie_old" class="ie_old">
<![endif]-->
<!--[if gte IE 7]>
<div id="ap_small_forgot_password_link_ie_new" class="ie_new">
<![endif]-->
<span class="small" id="ap_small_forgot_password_span">
</span>
</div>
<div id="ap_signin1a_signin_button_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<input type="image" src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/buttons/sign-in-secure._CB138348554_.gif" id="signInSubmit" height="22" onload="cf()" alt="Continue" width="201" tabindex="5" value="Continue" border="0" />
</span>
<div class="ap_csm_marker" style="display:none;">
<script type="text/javascript">if (typeof uet == 'function') { uet('af'); }</script>
</div>
</div>
<div id="ap_signin1a_forgot_password_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<a href="https://www.amazon.in/ap/forgotpassword?openid.pape.max_auth_age=0&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.ns.pape=http%3A%2F%2Fspecs.openid.net%2Fextensions%2Fpape%2F1.0&prevRID=0HNZPPR47G84ST0DBSEZ&pageId=amzn_associates_in&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.mode=checkid_setup&openid.assoc_handle=amzn_associates_in&openid.return_to=https%3A%2F%2Faffiliate-program.amazon.in%2Fgp%2Fassociates%2Fnetwork%2Fmain.html%3Fie%3DUTF8%26*Version*%3D1%26*entries*%3D0">
Forgot your password?
</a>
</span>
</div>
<div id="ap_signin1a_cnep_row" class="ap_row">
<span class="ap_col1"> </span>
<span id="ap_signin1a_cnep_row_col2" class="ap_col2">
Has your e-mail address changed since your last order?
</span>
</div>
</div>
</form>
<!--[if lte IE 8]>
</div>
<![endif]-->
</div>
<div id="center-2"></div>
<div id="center-3"></div>
<div id="center-4"></div>
<div id="center-5"></div>
<div id="center-6"></div>
<div id="center-7"></div>
<div id="center-8"></div>
<div id="center-9"></div>
<div id="center-10"></div>
</div>
<div id="rightSlots">
<div id="right-0"></div>
<div id="right-1"></div>
<div id="right-2"></div>
<div id="right-3"></div>
<div id="right-4"></div>
<div id="right-5"></div>
<div id="right-6"></div>
<div id="right-7"></div>
<div id="right-8"></div>
<div id="right-9"></div>
<div id="right-10"></div>
</div>
<div id="bottomSlots">
<div id="bottom-1">
<div id="ap_privacy" class="ap_privacy_footer">
<p class="tiny" align="center">
<a id="footer_conditions_of_use_URL_link" href="/gp/help/customer/display.html/ref=ap_footer_condition_of_use?ie=UTF8&nodeId=200545940" onclick="return amz_js_PopWin(this.href+'&pop-up=1','AmazonHelp','width=340,height=340,resizable=1,scrollbars=1,toolbar=1,status=1');" target="AmazonHelp" >Conditions of Use</a>
<a id="footer_privacy_notice_URL_link" href="/gp/help/customer/display.html/ref=ap_footer_privacy_notice?ie=UTF8&nodeId=200534380" onclick="return amz_js_PopWin(this.href+'&pop-up=1','AmazonHelp','width=340,height=340,resizable=1,scrollbars=1,toolbar=1,status=1');" target="AmazonHelp" >Privacy Notice</a>
<br>
<span id="ap_footer_copyright">© 1996-2015, Amazon.com, Inc. or its affiliates</span>
</p>
</div>
</div>
<div id="bottom-2"></div>
<div id="bottom-3"></div>
<div id="bottom-4"></div>
<div id="bottom-5"></div>
<div id="bottom-6"></div>
<div id="bottom-7"></div>
<div id="bottom-8"></div>
<div id="bottom-9"></div>
<div id="bottom-10"></div>
</div>
<div id="footerSlots">
<div id="footer-1"></div><!-- footer-1 -->
<div id="footer-2"></div><!-- footer-2 -->
<div id="footer-3"></div><!-- footer-3 -->
<div id="footer-4"></div><!-- footer-4 -->
<div id="footer-5"></div><!-- footer-5 -->
<div id="footer-6"></div><!-- footer-6 -->
<div id="footer-7"></div><!-- footer-7 -->
<div id="footer-8"></div><!-- footer-8 -->
<div id="footer-9"></div><!-- footer-9 -->
<div id="footer-10"></div><!-- footer-10 -->
</div><!-- footerSlots -->
<div id="navbarBottomSlots">
</div>
<script type="text/javascript">
(function() {
try {
if ( ue && ue.tag && window.performance.getEntriesByType ) {
var t = window.performance.getEntriesByType('resource');
if ( t ) {
var d = 0;
for ( var i = 0; i < t.length; i++ )
if ( t[i].duration > d ) d = t[i].duration;
ue.tag('ap-rt-' + Math.ceil(d / 100) * 100);
}
}
}
catch (e) {}
})();
</script>
<div id="javascriptSlots">
<div id="javascript-slot-0">
<script type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/javascripts/lib/jquery/jquery-1.2.6.min._CB166146506_.js"></script>
</div>
<div id="javascript-slot-1"></div>
<div id="javascript-slot-2"></div>
<div id="javascript-slot-3"></div>
<div id="javascript-slot-4"></div>
<div id="javascript-identity">
<script type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/authportal/common/js/ap_global-1.1._CB309255203_.js"></script>
</div>
<div id="javascript-slot-5"></div>
<div id="js-trms">
<script id="fwcim-script" type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/login/fwcim._CB342129342_.js"></script>
<script type="text/javascript">
fwcim.useMercury('https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/login/mercury9._CB372126299_.swf')
fwcim.profile();
</script>
</div>
<div id="cache-1"></div>
<div id="cache-2"></div>
</div><!-- javascriptSlots -->
</div> <!-- end div wrapper -->
<!--[if lte IE 8]>
</div>
<![endif]-->
</body>
</html>
connection.getInputStream() returns an InputStream. So you need to read from the InputStream. A good way to read from the InputStream and convert it to string would be
val page = connection.getInputStream()
val pageString = scala.io.Source.fromInputStream(page).getLines().mkString("\n")