We Keep Coding

SweetAlert Icon overflow-y

I have an issue modifying my website. When I call Swal.fire(...), something like this happens:
Icon on the picture overflows and not renders properly(seems like scrollbar affects on icon render). How can I fix this? Thanks
Here is my custom css code:
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
color: white;
user-select: none;
font-size: 20px;
}
h1 {
font-size: 60px;
}
body {
z-index: -2;
background-color: black;
}
#canvas1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background: black;
}
.header {
text-align: center;
height: 100vh;
}
.header-title {
font-size: 70px;
font-weight: bold;
margin-top: 40vh;
}
section {
padding: 20vh;
}
.section-title {
font-size: 60px;
}
.section-text {
font-size: 25px;
}
footer {
height: 30vh;
background-color: rgb(24, 24, 24);
}
.navbar {
font-size: 40px;
position: fixed;
list-style-type: none;
overflow: hidden;
}
.navbar > li {
float: left;
}
.navbar > li a {
transition: .3s;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar > li a:hover {
background-color: rgba(255, 255, 255, 0.671);
}
input {
background-color: black;
margin: 20px;
}
.account-creator {
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin-top: 30vh;
padding: 10vh;
}
.account-creator {
margin-bottom: 100px;
}
.small-title {
font-size: 40px;
}
button {
background-color: black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 35px;
overflow-y: hidden;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f3214f;
}
input:focus + .slider {
box-shadow: 0 0 1px #f3214f;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input_description{
font-size: 30px;
}
.simple-button {
background-color: #f3214f;
padding: 10px;
border-radius: 5px;
border: none;
transition: .4s;
margin: 30px;
}
.simple-button:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px #f3214faf;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background-color: white;
background-image: none;
border-radius: 20px;
}
.clauses-field{
border: 3px solid white;
border-radius: 10px;
max-height: 300px;
position: absolute;
overflow-y: scroll;
margin-left: 40vw;
padding: 30px;
}
Idk maybe this code ruins everything, but it will be good if I don't need to change anything in here cause my website could just crash

For some resone you icon is overflowing so that orange line is scrollbar
add .sa-icon.sa-success { overflow:hidden }
this code in your css . if this dosent work , just inspect success icon and copy its class and add overflow:hidden to that.
if you still cant do it just copy popup code and add to your question , i will give you working code.

How to make mobile responsive vertical range slider

I have done a range slider position into vertical. but it's not responsive. I'm checked in chrome default mobile devices. when adjusting the range slider it will scroll the page
I have added my code here.
.slido{
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
-webkit-transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<input type="range" class="slido" min="1" max="100" step="1">

Using just transform on an element does not affect the size or position of its parent or of any other elements, at all. There is absolutely no way to change this fact of how transform works. so adding the div on parent level (which can handle the overflow of rotation) is one solution.
code Updated:
.slido {
-webkit-appearance: none;
width: 100vh;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.rotation-wrapper-outer {
display: table;
}
.rotation-wrapper-inner {
padding: 50% 0;
height: 0;
}
.element-to-rotate {
display: block;
transform-origin: top left;
/* Note: for a CLOCKWISE rotation, use the commented-out
transform instead of this one. */
transform: rotate(-90deg) translate(-100%);
/* transform: rotate(90deg) translate(0, -100%); */
margin-top: -50%;
/* Not vital, but possibly a good idea if the element you're rotating contains
text and you want a single long vertical line of text and the pre-rotation
width of your element is small enough that the text wraps: */
white-space: nowrap;
}
<div id="container">
<div class="rotation-wrapper-outer">
<div class="rotation-wrapper-inner">
<input type="range" class="slido" min="1" max="100" step="1">
</div>
</div>
</div>

You have transform the horizontal slider in to vertical which won't work so you can use vertical slider only check snippet.
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight/2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider
};
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #3D3D4A;
color: white;
font-family: sans-serif;
}
.info {
position: absolute;
top: 0;
left: 0;
padding: 10px;
opacity: 0.5;
}
.container {
position: relative;
display: inline-block;
padding-top: 40px;
}
.range-slider {
display: inline-block;
width: 40px;
position: relative;
text-align: center;
max-height: 100%;
}
.range-slider:before {
position: absolute;
top: -2em;
left: 0.5em;
content: attr(data-slider-value) '%';
color: white;
font-size: 90%;
}
.range-slider__thumb {
position: absolute;
left: 5px;
width: 30px;
height: 30px;
line-height: 30px;
background: white;
color: #777;
font-size: 50%;
box-shadow: 0 0 0 4px #3D3D4A;
border-radius: 50%;
pointer-events: none;
}
.range-slider__bar {
left: 16px;
bottom: 0;
position: absolute;
background: linear-gradient(dodgerblue, blue);
pointer-events: none;
width: 8px;
border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: calc(100vh - 50px);
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="range-slider">
<input type="range" orient="vertical" min="0" max="100" />
<div class="range-slider__bar"></div>
<div class="range-slider__thumb"></div>
</div>
</div>

Trying to combine geocoder with map cluster for leaflet js

I've been trying to figure out a way on how I can combine the leaflet plugins geocoding and clustering features onto the project I'm working.
I've been getting an error shown below when I try combining the two features together
Uncaught TypeError: t.addEventParent is not a function
What I'm trying to do first is get the list of countries on the markup as shown below
<ul class="countries">
<li data-country-population="100" class="country">Philippines</li>
<li data-country-population="200" class="country">Brunei</li>
</ul>
Then insert into an array so that the geocoding plugin could determine the lattitude and longitude of the country
$('.countries > .country').each(function() {
countries.push([
$(this).text()
]);
});
Next I would then cluster the countries that are the same.
for(var i = 0; i < countries.length; i++) {
geocoder.geocode(countries[i], function(results) {
marker = new L.LatLng(results[0].center.lat, results[0].center.lng);
console.log(marker);
markers.push(marker);
markerCluster.addLayer(marker);
});
}
markerCluster.on('clusterclick', function (a) {
});
map.addLayer(markerCluster);
Below is the code that is currently a work progress trying to run the geocoding plugin and the clustering plugin
var map = L.map('mapid', {
fullscreenControl: {
pseudoFullscreen: false // if true, fullscreen to page width and height
},
}).setView([0,0], 3);
map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
map.getPane('labels').style.pointerEvents = 'none';
var positron = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
noWrap: true,
maxZoom : 15
}).addTo(map);
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
pane: 'labels',
noWrap: true,
maxZoom : 3
}).addTo(map);
var southWest = L.latLng(-89.98155760646617, -180),
northEast = L.latLng(89.99346179538875, 180),
bounds = L.latLngBounds(southWest, northEast);
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds, { animate: false });
});
geocoder = new L.Control.Geocoder.Nominatim();
var countries = [];
var markers = [];
$('.countries > .country').each(function() {
countries.push([
$(this).text()
]);
});
var markerCluster = L.markerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false
});
for(var i = 0; i < countries.length; i++) {
geocoder.geocode(countries[i], function(results) {
marker = new L.LatLng(results[0].center.lat, results[0].center.lng);
console.log(marker);
markers.push(marker);
markerCluster.addLayer(marker);
});
}
markerCluster.on('clusterclick', function (a) {
});
map.addLayer(markerCluster);
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
max-width: none !important;
max-height: none !important;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
/* Fallback for FF which doesn't support pinch-zoom */
touch-action: none;
touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-container {
-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline: 0;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-container a.leaflet-active {
outline: 2px solid orange;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
font-size: 22px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path {
background-image: url(images/marker-icon.png);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover {
text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 18px 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #999;
}
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
margin-top: -1px;
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}
/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-clickable {
cursor: pointer;
pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Directions */
.leaflet-tooltip-bottom {
margin-top: 6px;
}
.leaflet-tooltip-top {
margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px;
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff;
}
.leaflet-tooltip-left {
margin-left: -6px;
}
.leaflet-tooltip-right {
margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px;
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff;
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff;
}
html, body {
width : 100%;
height : 100%;
}
.map-container {
width : 100%;
height : 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css"
/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.4.1/dist/MarkerCluster.Default.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"
></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBet5Wx-JdSc4cY4v4zR6_FIhYc2oWgTv4"
type="text/javascript"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js" ></script>
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant#latest/Leaflet.GoogleMutant.js'></script>
<script src="https://unpkg.com/leaflet.markercluster#1.4.1/dist/leaflet.markercluster-src.js"></script>
<ul class="countries">
<li class="country">Philippines</li>
<li class="country">Brunei</li>
</ul>
<div class="map-container" id="mapid"></div>

Your error is simply there:
marker = new L.LatLng(results[0].center.lat, results[0].center.lng);
markerCluster.addLayer(marker);
Your marker variable does not contain a Leaflet Marker, but a LatLng instead.
You should simply instantiate a Marker from this LatLng before trying to pass it to your Marker Cluster Group:
var latLng = new L.LatLng(results[0].center);
marker = L.marker(latLng); // Instantiate a Leaflet Marker from the latLng
markerCluster.addLayer(marker);

Change the css-ribbon position from right to left on a div

I want to change the position of css-ribbon from right-side to the left-side and the direction of ribbon should also be changed accordingly on the left side.The items like some images and text will be placed in the div and these elements will not be disturbed by the ribbon itself.And this is my html code.
<div class="content-box">
<div id="ribbon-container">
CSS-Ribbon
</div>
</div>
And this is my css code below.
* {
padding: 0;
/* Standard Reset, and we're adding box-sizing:border-box because it's awesome. */
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.content-box {
width: 100%;
height: 400px;
max-width: 80%;
margin: 94px auto 0 auto;
position: relative;
/* So we can position the banner within the box */
background: gray;
border: 5px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
position: absolute;
top: 15px;
right: -20px;
overflow: visible;
/* so we can see the pseudo-elements we're going to add to the anchor */
font-size: 18px;
/* font-size and line-height must be equal so we can account for the height of the banner */
line-height: 18px;
}
#ribbon-container:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
left: 0;
border-top: 29px solid rgba(0, 0, 0, .3);
/* These 4 border properties create the first part of our drop-shadow */
border-bottom: 29px solid rgba(0, 0, 0, .3);
border-right: 29px solid rgba(0, 0, 0, .3);
border-left: 29px solid transparent;
}
#ribbon-container:after {
/* This adds the second part of our dropshadow */
content: "";
height: 3px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -3px;
left: 58px;
right: 3px;
}
#ribbon-container a {
display: block;
padding: 20px;
position: relative;
/* allows us to position our pseudo-elements properly */
background: #0089d0;
overflow: visible;
height: 58px;
margin-left: 29px;
color: #fff;
text-decoration: none;
}
#ribbon-container a:after {
/* this creates the "folded" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
bottom: -15px;
right: 0;
border-top: 15px solid #004a70;
border-right: 15px solid transparent;
}
#ribbon-container a:before {
/* this creates the "forked" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
left: -29px;
border-top: 29px solid #0089d0;
border-bottom: 29px solid #0089d0;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}
#ribbon-container a:hover {
background: #009ff1;
}
#ribbon-container a:hover:before {
/* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
border-top: 29px solid #009ff1;
border-bottom: 29px solid #009ff1;
}

Here is a live fiddle:
http://jsfiddle.net/covn07uh/14/
HTML (The same):
<div class="content-box">
<div id="ribbon-container">
CSS-Ribbon
</div>
</div>
The CSS:
* {
padding: 0;
/* Standard Reset, and we're adding box-sizing:border-box because it's awesome. */
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.content-box {
width: 100%;
height: 400px;
max-width: 80%;
margin: 94px auto 0 auto;
position: relative;
/* So we can position the banner within the box */
background: gray;
border: 5px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
position: absolute;
top: 15px;
left: -20px;
overflow: visible;
/* so we can see the pseudo-elements we're going to add to the anchor */
font-size: 18px;
/* font-size and line-height must be equal so we can account for the height of the banner */
line-height: 18px;
}
#ribbon-container:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
right: 0;
border-top: 29px solid rgba(0, 0, 0, .3);
/* These 4 border properties create the first part of our drop-shadow */
border-bottom: 29px solid rgba(0, 0, 0, .3);
border-left: 29px solid rgba(0, 0, 0, .3);
border-right: 29px solid transparent;
}
#ribbon-container:after {
/* This adds the second part of our dropshadow */
content: "";
height: 3px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -3px;
right: 58px;
left: 3px;
}
#ribbon-container a {
display: block;
padding: 20px;
position: relative;
/* allows us to position our pseudo-elements properly */
background: #0089d0;
overflow: visible;
height: 58px;
margin-right: 29px;
color: #fff;
text-decoration: none;
}
#ribbon-container a:after {
/* this creates the "folded" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
bottom: -15px;
left: 0;
border-top: 15px solid #004a70;
border-left: 15px solid transparent;
}
#ribbon-container a:before {
/* this creates the "forked" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
right: -29px;
border-top: 29px solid #0089d0;
border-bottom: 29px solid #0089d0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
}
#ribbon-container a:hover {
background: #009ff1;
}
#ribbon-container a:hover:before {
/* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
border-top: 29px solid #009ff1;
border-bottom: 29px solid #009ff1;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.content-box {
width: 100%;
height: 400px;
max-width: 80%;
margin: 94px auto 0 auto;
position: relative;
background: gray;
border: 5px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
#ribbon-container {
position: absolute;
top: 15px;
left: -20px;
overflow: visible;
font-size: 18px;
line-height: 18px;
}
#ribbon-container:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
right: 0;
/* here right will be zero to move ribbon right to left */
border-top: 29px solid rgba(0, 0, 0, .3);
border-bottom: 29px solid rgba(0, 0, 0, .3);
border-right: 29px solid transparent;
/* in same way border right will be transparent instead of border left */
border-left: 29px solid rgba(0, 0, 0, .3);
}
#ribbon-container:after {
content: "";
height: 3px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -3px;
right: 58px;
/* here just left property is renamed with right property */
left: 4px;
}
#ribbon-container a {
display: block;
padding: 20px;
position: relative;
background: #0089d0;
overflow: visible;
height: 58px;
margin-right: 29px;
/* here margin left is replaced with margin right */
color: #fff;
text-decoration: none;
}
#ribbon-container a:after {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
bottom: -15px;
left: 0;
/* right is replaced with left */
border-top: 15px solid #004a70;
border-left: 15px solid transparent;
/* here border left is transparent instead if border right */
}
#ribbon-container a:before {
/* this creates the "forked" part of our ribbon */
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
right: -29px;
/* here left is replaced with right */
border-top: 29px solid #0089d0;
border-bottom: 29px solid #0089d0;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}
#ribbon-container a:hover {
background: #009ff1;
}
#ribbon-container a:hover:before {
/* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
border-top: 29px solid #009ff1;
border-bottom: 29px solid #009ff1;
}
<div class="content-box">
<div id="ribbon-container">
CSS-Ribbon
</div>
</div>

How to change the look of the controls for this rotating banner

I'd like to change the look of the controls for this rotating banner. They are currently just grey (and the current/selected one is black). I want the dots to be white with a grey outline (and the selected/current one to be orange with a grey outline).
Here's the css (I believe the selector is: .rslides_tabs a):
.rslides_container
{
position: relative;
}
.rslides
{
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li
{
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child
{
position: relative;
display: block;
float: left;
}
.rslides img
{
display: block;
height: auto;
float: left;
width: 100%;
max-width: 100%;
border: 0;
}
.rslides_tabs
{
margin-top: 10px;
text-align: center;
}
.rslides_tabs li
{
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.rslides_tabs a
{
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-background-clip: padding-box;
background: #ccc;
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.rslides_tabs .rslides_here a
{
background: #222;
}
.rslides_nav
{
position: absolute;
-webkit-tap-highlight-color: #000;
top: 50%;
left: 0;
-webkit-opacity: 0.7;
-moz-opacity: 0.7;
-o-opacity: 0.7;
filter: alpha(opacity=70);
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url( '../images/responsiveslides.gif' ) no-repeat left top;
margin-top: -45px;
}
.rslides_nav:active,
.rslides_nav:hover
{
-webkit-opacity: 1;
-moz-opacity: 1;
-o-opacity: 1;
filter: alpha(opacity=100);
opacity: 1;
}
.rslides_nav.next
{
left: auto;
background-position: right top;
right: 0;
}
If you need any more code to help me out, please let me know.

.rslides_tabs .rslides_here a
Is the one where you currently are
.rslides_tabs a
Has the value of the dot that is not selected.
Change the background property to the color you want.

.rslides_tabs a {
background-color:red;
border: 1px solid grey;
//here goes your style
}
.rslides_tabs .rslides_here a {
//here goes your style for the selected one
}