How to disable the rest of the available checkboxes if some are selected

I was wondering through the internet and I found this type of checkboxes with images. (<a href="https://codepen.io/kskhr/pen/pRwKjg" target="_blank">https://codepen.io/kskhr/pen/pRwKjg</a>) I need to disable the rest of the checkboxes when 3 are selected.

I was wondering through the internet and I found this type of checkboxes with images. (https://codepen.io/kskhr/pen/pRwKjg) I need to disable the rest of the checkboxes when 3 are selected.

JS

// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  }
  else {
    $(this).removeClass('image-checkbox-checked');
  }
});

// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))

e.preventDefault();
});

I think the best way can be solved with javascript, but i'm a little bit confused.

Thank you!

Map Custom Marker and Controls | JavaScript, CSS and API

Map Custom Marker and Controls | JavaScript, CSS and API

How we can add a custom marker on google map using JavaScript & CSS? Solution: JavaScript Google Map Marker With CSS, Custom API Map Controls.

Maybe you have seen custom markers on the map on some tour & travels websites. They show their all destination using those markers on the map. There are many online websites or services for creating custom markers, but we can also create those own using google map’s API. Google provides many kinds of API for developers on its Cloud Platform.

Today you will learn to add a custom marker on the map with your choosing place. This possible because of API, I am using jQuery & jQuery-Migrate for this program. As you know jQuery is a JavaScript library that’s why I am calling this a JavaScript Custom Map Marker Program. Suppose you have an online hotel booking site & you want to show all the places where your hotel is, then this will very useful for you.

So, Today I am sharing JavaScript Google Map Marker With CSSA Custom API Map Controls With JS & CSS. This program marker will place on given longitude & latitude. Its also has zoom in, zoom out, center, & full-screen buttons. There also is an option bar to choosing road view or satellite view. If you want to change the marker to other places, then you have just change the longitude & latitude.

If you are thinking now how this custom map marker actually is, then see the preview given below.

Preview Of Custom API Map Control

See this video preview to getting an idea of how this custom map with marker looks like.


Now you can see this visually. If you like this then get the source code of its.

Discussion

Before sharing source code, let’s talk about this. As you know I have used API, that runs the whole map’s function. I have used an image for the marker’s icon, after that placed on the chosen address in map. For placing the marker I have created some variables for the functions like whole map, long, lat, icon, etc.

All the functions like zoom, focus center, choosing satellite or road view are done by google’s provided API commands. There is another function is when you will click on the marker then the address will open in a new tab. You can remove this feature by removing the code in JS file, I have left a comment on every function’s code section. You can easily identify the codes are for your decided part.

In the CSS section, I have placed all the things you can see on the preview. Works like managing colors, positioning, etc are handled by CSS. As you can see all the buttons in the map are created using Font-Awesome icons. If you have good knowledge of HTML, CSS & JavaScript then you can understand the codes easily. These codes are looking tough but believe me that all are default functions of the API, I have just called on the right place.

For using it on your websites or project you just have to change the longitude & latitude on the JS file. If you get any trouble you can ask me on the comment section or direct message on the Facebook page.

JavaScript Google Map Marker With CSS Source Code

For creating this program you have create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>CSS Custom Marker On Map | Webdevtrick.com</title>
  
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
      <link rel="stylesheet" href="style.css">
</head>
 
<body>
 
  <div class="full-screen">
  <div id="map" class="map"></div>
 
    <!--controls-->
    <span id="zoomIn" class="btn zoom in">
        <i class="fa fa-plus"></i>
    </span>
    <span id="zoomOut" class="btn zoom out">
        <i class="fa fa-minus"></i>
    </span>
 
    <span id="center" class="btn zoom center">
        <i class="fa fa-crosshairs"></i>
    </span>
 
    <div class="mapTypeId">
        <select id="mapTypeId">
            <option value="1">Roadmap</option>
            <option value="2">Satellite</option>
        </select>
    </div>
 
</div>
  <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCLFomDOPKqvvITt7tv_hZG0PDlWB2-q0g'></script>
<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='https://code.jquery.com/jquery-migrate-1.2.1.min.js'></script>
 
    <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

/** code by webdevtrick ( https://webdevtrick.com ) **/
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.full-screen {
  position: relative;
  width: 100%;
  height: 100%;
}
.full-screen .map {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.full-screen .btn {
  cursor: pointer;
  border: 0;
  border-radius: 2px;
  background-color: white;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: all 300ms ease-in-out;
}
.full-screen .btn.zoom {
  position: absolute;
  right: 20px;
  color: #e60023;
  font-size: 20px;
  padding: 5px 8px;
}
.full-screen .btn.zoom.in {
  top: 50%;
  margin-top: -37px;
}
.full-screen .btn.zoom.out {
  bottom: 50%;
  margin-bottom: -37px;
}
.full-screen .btn.zoom.center {
  top: 50%;
  margin-top: -87px;
}
.full-screen .btn.zoom:hover,
.full-screen .btn.zoom:active {
  color: white;
  background-color: #e60023;
}
.full-screen .btn.zoom:active {
  opacity: 0.75;
}
.full-screen .mapTypeId {
  position: absolute;
  top: 20px;
  left: 5px;
  border-radius: 2px;
  background-color: #e60023;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);
  width: 90px;
  overflow: hidden;
  color: white;
  padding: 8px 0;
}
.full-screen .mapTypeId select {
  color: white;
  text-indent: 10px;
  text-transform: uppercase;
  font-weight: 700;
  width: 100%;
  position: relative;
  top: -2px;
  border: none;
  box-shadow: none;
  background-color: #e60023;
  background-image: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.full-screen .mapTypeId select:focus {
  outline: none;
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/**code by webdevtrick ( https://webdevtrick.com ) **/
$(document).ready(function() {

var map;
var marker;
var lat = 28.7407056;
var lng = 77.0577493;
var ico = new google.maps.MarkerImage("https://webdevtrick.com/wp-content/uploads/location.png");

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};	

function initialize () {
	var mapCanvas = document.getElementById('map');
	var mapOptions = {
	zoom: 13,
	center: {
	lat: lat, 

     lng: lng
},
mapTypeControl: false,
zoomControl: false,
panControl: false,
        scaleControl: false,
        streetViewControl: false,
        scrollwheel: false
}
 
map = new google.maps.Map( mapCanvas, mapOptions );
 
overlay.setMap(map);
   ZoomControl(map);
   addMarker(map);
  
}
 
// Marker
function addMarker ( map ) {
marker = new google.maps.Marker({
            map: map,
            draggable: false,
            icon: ico,
            position: new google.maps.LatLng( lat, lng )
        });
 
        mouseOverHandler = function () {
         showMarker(marker);
        }
        mouseClickHandler = function () {
         clickMarker(lat, lng);
        }
 
        google.maps.event.addListener( marker, 'click', mouseClickHandler );
        google.maps.event.addListener( marker, 'mouseover', mouseOverHandler );
}
 
// Marker Click
function clickMarker ( lat, lng ) {
var url = 'https://maps.google.com/maps?q='+lat+','+lng+'&z=18';
window.open(url, '_blank');
}
 
// Zoom
function ZoomControl ( map ) {
var zoomIn = document.getElementById('zoomIn');
var zoomOut = document.getElementById('zoomOut');
 
google.maps.event.addDomListener(zoomOut, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0){
map.setZoom(currentZoomLevel - 1);}    
});
 
google.maps.event.addDomListener(zoomIn, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21){
map.setZoom(currentZoomLevel + 1);}
});
}
 
// MapTypeId
function TypeIdChange ( option ) {
switch (option) {
            case "1":
                map.setMapTypeId( google.maps.MapTypeId.ROADMAP );
                break;
               case "2":
               map.setMapTypeId( google.maps.MapTypeId.SATELLITE );
                break;
            default:
                map.setMapTypeId( google.maps.MapTypeId.ROADMAP );
        }
}
// center
$( '#center' ).on( 'click', function () {
map.setZoom( 13 );
map.setCenter(new google.maps.LatLng( lat, lng ) );
map.setMapTypeId( google.maps.MapTypeId.ROADMAP );
$( '#mapTypeId' ).val( "1" ).trigger('click');
});
 
// center
$( '#center' ).on( 'click', function () {
map.setZoom( 13 );
map.setCenter(new google.maps.LatLng( lat, lng ) );
map.setMapTypeId( google.maps.MapTypeId.ROADMAP );
$( '#mapTypeId' ).val( "1" ).trigger('click');
});
 
$( '#mapTypeId' ).change( function () {
var self = $(this);
TypeIdChange( self.val() );
});
 
google.maps.event.addDomListener( window, 'load', initialize );

That’s It. Now you have successfully created JavaScript Google Map Marker With CSS. In other words, A Custom API Based Map Controls Like add Marker, Zoom In & Out, etc.

Thanks For Visiting, Keep Visiting.

Originally published on https://webdevtrick.com

How to Create an autoplay Testimonial Slider with jQuery and CSS

How to Create an autoplay Testimonial Slider with jQuery and CSS

How we can create a testimonial slider using jQuery and CSS? Solution: Responsive Testimonial Slider With jQuery and CSS, an Automated Slider which slides automatically.

How we can create a testimonial slider using jQuery and CSS? Solution: Responsive Testimonial Slider With jQuery and CSS, an Automated Slider which slides automatically.

Basically, The slider shows the testimonial or feedback text submitted by your customers or users. You can see on many services providing websites, there is a section which is what our client says about us. In other words, the testimonial is a kind of review. Some of the reviews are featured by the websites that is testimonial.

Today you will learn to create an automated testimonial slider with responsive design. Most websites use testimonials on their home page for better user attraction. When we buy any services or products first we check reviews, that’s why we should use that on our website. If are using any CMS then are so many plugins available to create this feature. But if you have created your websites from scratch & it’s not based on any content management system then this post will helpful for you.

So, Today I am sharing a Responsive Testimonial Slider with jQuery and CSS. This is an automated or autoplay slider for testimonial based on jQuery. I have used a special jquery based library for creating this review slider because of that library made especially for this function. You can show one or multiple testimonials to visitors, just by changing the values.

If you are thinking now how this automatic testimonials slider actually is, then see the video preview given below.

Preview Of Automated Review Slider

See this video preview to getting an idea of how this program looks like.

Video Player

Now you can see this visually both versions desktop & mobile or small screen versions. If you like this, then get the source code of its.

Responsive Testimonial Slider With jQuery and CSS Source Code

Before sharing source code, let’s talk about it. As you know I have used a special library for creating this program, which is slick.js (get). Slick JS is developed for making slider or carousel. This library is based on jQuery function, that’s why I am putting this post in JavaScript category because of jQuery also a JavaScript library.

JavaScript or jquery has fewer lines of codes, but they are the main part of this slider. Most of the works is created with CSS, like the layout, UIstyling next/previous buttons, etc. I used the font-awesome library to creating the button‘s icon.

There are all the controls in the JS file, I added autoplay: true; you can also disable this by removing or putting false value. After that, you can control how many testimonials want to show on the webpage. For this, there is a command slidesToShow: 2 . After that, there is a command to set how many users review you want to slide on a single slide. That is slidesToScroll: 1 for controlling this. Also, I put a responsive condition.

There are so many things, I can’t explain it in writing. You will understand easily after getting the codes. For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>jQuery Testimonial Slideshow | Webdevtrick.com</title>
 
  <link href="https://fonts.googleapis.com/css?family=Lato|Patua+One&display=swap" rel="stylesheet">
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>
      <link rel="stylesheet" href="style.css">
 
  
</head>
 
<body>
 
  <div class="container">
  <div class="testiSlide">
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="http://pbs.twimg.com/profile_images/829191018331385858/jxsj-ZmD.jpg" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Neil Patel</h3>
          <p class="indentity">SEO Expert</p>
        </div>
      </figure>
    </div>
 
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://secure.gravatar.com/avatar/24a495e3a7316e619af62445f1a86886?s=96&d=mm&r=g" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Shaan</h3>
          <p class="indentity">Web Developer</p>
        </div>
      </figure>
    </div>
 
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://yt3.ggpht.com/a/AGF-l7_ESQtd3r7nPdFdP_mmyxn65RFy9JlGT0dGyA=s900-mo-c-c0xffffffff-rj-k-no" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Brian Dean</h3>
          <p class="indentity">SEO / Blogger</p>
        </div>
      </figure>
    </div>
 
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://design.sva.edu/wp-content/uploads/2018/08/Sagmeister.jpg" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Stefan Sagmeister</h3>
          <p class="indentity">Graphic Designer</p>
        </div>
      </figure>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
  <script src='http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
 
    <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
html {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background: #fff;
	color: #333
}
body {
	margin:  0;
	background: #ff5057;
	height: 100vh;
}
h3 {
	font-family: 'Patua One', cursive;
	font-weight: 400;
	font-size: 1.4em;
	line-height: 1.4em;
	color: #fff
}
.container {
	box-sizing: content-box;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 40px;
	padding-bottom: 40px;
}
.indentity {
	margin: 0!important
}
figure.testimonial {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	padding: 0 20px;
	text-align: left;
	box-shadow: none !important;
}
figure.testimonial * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.testimonial img {
	max-width: 100%;
	vertical-align: middle;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	margin: 40px 0 0 10px;
}
figure.testimonial blockquote {
	background-color: #fff;
	display: block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	margin: 0;
	padding: 25px 50px 30px;
	position: relative;
}
figure.testimonial blockquote:before, figure.testimonial blockquote:after {
	content: "\201C";
	position: absolute;
	color: #ff5057;
	font-size: 50px;
	font-style: normal;
}
figure.testimonial blockquote:before {
	top: 25px;
	left: 20px;
}
figure.testimonial blockquote:after {
	content: "\201D";
	right: 20px;
	bottom: 0;
}
figure.testimonial .btn {
	top: 100%;
	width: 0;
	height: 0;
	border-left: 0 solid transparent;
	border-right: 25px solid transparent;
	border-top: 25px solid #fff;
	margin: 0;
	position: absolute;
}
figure.testimonial .peopl {
	position: absolute;
	bottom: 45px;
	padding: 0 10px 0 120px;
	margin: 0;
	color: #ffffff;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
}
figure.testimonial .peopl h3 {
	opacity: 0.9;
	margin: 0;
}
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus {
	outline: none;
}
.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
	transform: translate3d(0, 0, 0);
}
.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
}
.slick-track:before, .slick-track:after {
	display: table;
	content: '';
}
.slick-track:after {
	clear: both;
}
.slick-loading .slick-track {
	visibility: hidden;
}
.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
.slick-slide img {
	display: block;
}
.slick-slide.slick-loading img {
	display: none;
}
.slick-slide.dragging img {
	pointer-events: none;
}
.slick-initialized .slick-slide {
	display: block;
}
.slick-loading .slick-slide {
	visibility: hidden;
}
.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-btn.slick-hidden {
	display: none;
}
 
.slick-prev, .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 40%;
	display: block;
	width: 20px;
	height: 20px;
	padding: 0;
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
	color: transparent;
	outline: none;
	background: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
	opacity: 1;
}
.slick-prev:before, .slick-next:before {
	font-family: "FontAwesome";
	font-size: 40px;
	line-height: 1;
	opacity: .75;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
	left: -40px;
}
.slick-prev:before {
	content: "";
}
.slick-next {
	right: -40px;
}
.slick-next:before {
	content: "";
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
$(document).ready(function () {
	$('.testiSlide').slick({
		slidesToShow: 2,
		slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 1500,
		responsive: [{
		breakpoint: 850,
		settings: {
		slidesToShow: 1,
		slidesToScroll: 1,
		infinite: true,
		}
		}]
	});
});

That’s It. You have successfully created a Responsive Testimonial Slider With jQuery and CSS, An Automated Slider or Carousel. If you have any doubt or question comment down below.

Thanks for reading. If you liked this post, share it with all of your programming buddies!

Further reading

☞ The Web Developer Bootcamp

☞ Build Responsive Real World Websites with HTML5 and CSS3

☞ Advanced CSS and Sass: Flexbox, Grid, Animations and More!

☞ Web Design for Beginners: Real World Coding in HTML & CSS

☞ Foundation CSS Framework - Crash Course for Beginners

☞ Animating SVG with CSS

☞ The CSS Handbook: a handy guide to CSS for developers

☞ 11 Amazing CSS You Shouldn’t Miss


This post was originally published here