Forem: Sameer Mulla

Bootstrap Multi-Select Option with Checkbox in Bootstrap 5.2

Sameer Mulla — Thu, 09 Nov 2023 01:44:15 +0000

Bootstrap is a powerful framework for building responsive and feature-rich web applications. One of the key components of a web application is the ability to select multiple options from a list. Bootstrap Multi-Select with checkboxes allows users to easily make multiple selections from a dropdown list. In this blog post, we will guide you through creating a Bootstrap Multi-Select Option with checkboxes using Bootstrap 5.2.

GitHub: Code View

Live : Live View

Prerequisites

Before we start, make sure you have the following prerequisites installed in your project:

Bootstrap 5.2
jQuery 3.7.1
Bootstrap Multi-Select 1.1.2

You can include them in your project by adding the following CDN links to your HTML file's

section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css" integrity="sha512-fZNmykQ6RlCyzGl9he+ScLrlU0LWeaR6MO/Kq9lelfXOw54O63gizFMSD5fVgZvU1YfDIc6mxom5n60qJ1nCrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js" integrity="sha512-lxQ4VnKKW7foGFV6L9zlSe+6QppP9B2t+tMMaV4s4iqAv4iHIyXED7O+fke1VeLNaRdoVkVt8Hw/jmZ+XocsXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Creating the Bootstrap Multi-Select

Let's create a Bootstrap Multi-Select with checkboxes in your HTML file.

<div class="d-flex text-left align-items-center w-100">
    <strong class="sl">Select Language:</strong>
    <select id="multiple-checkboxes" multiple="multiple">
        <option value="front-end">Front End</option>
        <option value="back-end">Back End</option>
    </select>
    <br>
    <select name="property_nhb[]" id="p-nhb" multiple>
        <option data-value="" value="" selected>all</option>
        <option data-value="back-end" value="php">PHP</option>
        <option data-value="front-end" value="javascript">JavaScript</option>
        <option data-value="back-end" value="java">Java</option>
        <option data-value="back-end" value="sql">.Net</option>
        <option data-value="front-end" value="jquery">Jquery</option>
        <option data-value="front-end" value=".net">.Net</option>
    </select>
</div>

In the code above, we have two <select> elements, one with the id "multiple-checkboxes" for selecting languages and another with the id "p-nhb" for selecting programming languages.

Initializing the Bootstrap Multi-Select

To enable the Bootstrap Multi-Select with checkboxes, we need to initialize it using JavaScript. Add the following script at the end of your HTML file:

<script>
    $('#multiple-checkboxes').multiselect({
        buttonClass: 'form-select',
        templates: {
            button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
        }
    });

    $('#p-nhb').multiselect({
        buttonClass: 'form-select',
        templates: {
            button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" ><span class="multiselect-selected-text"></span></button>',
        }
    });

    var select_clone = $('<select>')
        .html($('#p-nhb option'))
        .hide()
        .insertAfter('#p-nhb');

    $('#p-nhb').multiselect();

    $('#multiple-checkboxes').change(function () {
        $('#p-nhb').html(select_clone.find('[data-value="' + this.value + '"]').clone());
        $('#p-nhb').multiselect('rebuild');
    }).change();

    $('#get').click(function () {
        console.log('city: ' + $('#multiple-checkboxes').val() + ', neighborhood: ' + $('#p-nhb').val().toString());
    });
</script>

This script initializes the Bootstrap Multi-Select for both elements and provides functionality to update the options in the "p-nhb" dropdown based on the selections in the "multiple-checkboxes" dropdown.

Conclusion

In this blog post, we've shown you how to create a Bootstrap Multi-Select Option with checkboxes using Bootstrap 5.2. This feature can be valuable in various scenarios where you need to allow users to make multiple selections from a list of options. You can customize the appearance and behavior of the multi-select dropdown according to your project's requirements.

Elevate Your Website's Image Carousel with Owl Carousel Two, Elevated Zoom, and Fancybox Integration

Sameer Mulla — Mon, 09 Oct 2023 01:26:34 +0000

If you're looking to elevate your website's image carousel experience, look no further than the Owl Carousel Two Integration with Elevated Zoom and Fancybox. This integration combines powerful features to enhance the way your users interact with images on your website.

Hmtl Code

<div id="slider" class="main-carousel owl-carousel positive-relative">
  <div class="item">
    <a href="images/one.jpg" data-fancybox="gallery">
      <img id="zoom_05" src="images/one.jpg" data-zoom-images="images/one.jpg" alt="">
    </a>
  </div>
  <!-- Add more carousel items here -->
</div>

Javascript Custom Code

 // Activate Fancybox for a sleek image viewing experience.
$('.fancybox').fancybox();
// Enable Elevated Zoom for larger screens (min-width: 992px)
if (window.matchMedia('(min-width: 992px)').matches) {
  $('#zoom_05').ezPlus({
    zoomType: 'inner',
    cursor: 'crosshair'
  });
}
// Initialize Owl Carousel for a dynamic image carousel
$(document).ready(function() {
  $(".main-carousel").owlCarousel({
    direction: 'vertical',
    loop: false,
    items: 1,
    margin: 0,
    stagePadding: 0,
    autoplay: false,
    responsive: {
      0: {
        items: 1,
        nav: true,
        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
      },
      700: {
        items: 1,
      }
    }
  })
  // Enhance carousel with dynamic zoom functionality
  if (window.matchMedia('(min-width: 992px)').matches) {
    dotcount = 1;
    jQuery('.owl-dot').each(function() {
      jQuery(this).addClass('dotnumber' + dotcount);
      jQuery(this).attr('data-info', dotcount);
      dotcount = dotcount + 1;
    });
    slidecount = 1;
    jQuery('.owl-item').not('.cloned').each(function() {
      jQuery(this).addClass('slidenumber' + slidecount);
      slidecount = slidecount + 1;
    });
    jQuery('.owl-dot').each(function() {
      grab = jQuery(this).data('info');
      slidegrab = jQuery('.slidenumber' + grab + ' img').attr('src');
      if (typeof slidegrab === 'undefined') {
        jQuery(this).css("background-image", "url('assets/images/youtube.png')");
      } else {
        jQuery(this).css("background-image", "url(" + slidegrab + ")");
      }
    });
    amount = $('.owl-dot').length;
    gotowidth = 300 / amount;
    jQuery('.owl-dot').css("height", gotowidth + "%");
    // Update zoom when changing carousel items
    $('.main-carousel').on('translated.owl.carousel', function(event) {
      var currentItem = event.item.index + 1;
      $('.owl-item:nth-child(' + currentItem + ')').find('img').attr('id', 'zoom_05');
      $('#zoom_05').ezPlus({
        zoomType: 'inner',
        cursor: 'crosshair'
      });
    });
    // Detach zoom when changing carousel items
    $('.main-carousel').on('changed.owl.carousel', function(event) {
      var currentItem = event.item.index + 1;
      $(".zoomContainer").detach();
      $('.owl-item img').removeAttr('id');
    });
  }
});

GitHub Repository:
Explore the full integration on GitHub: Owl Carousel Two Elevated Zoom Fancybox Integration.

With this integration, you'll take your website's image carousel to the next level, providing users with an engaging and interactive image-viewing experience.

Enhance Your Website's Image Carousel with Owl Carousel Two and Elevated Zoom

Sameer Mulla — Sun, 28 May 2023 01:32:25 +0000

Link to view the live demo: View Demo

Link to raw code: Raw Code

we'll explore how to integrate Owl Carousel Two with Elevated Zoom to enhance the image carousel functionality on your website. By combining these two powerful tools, you can create an engaging and interactive user experience for showcasing product images or any other type of visual content. Let's dive in!

Understanding the HTML structure: We'll start by examining the provided HTML code and understanding its structure. It includes a container element for the carousel, a set of image items, and a zoom lens element.

Applying CSS styling: To ensure a visually appealing carousel, we'll apply CSS styling to the carousel container, image items, and zoom lens. This includes setting the dimensions, positioning, and other visual properties to achieve the desired look and feel.

Integrating Owl Carousel Two: Next, we'll integrate Owl Carousel Two into the HTML structure. This powerful carousel library allows us to create responsive and touch-friendly image carousels with ease. We'll initialize the carousel, set the number of items to display, and configure navigation options.

Incorporating Elevated Zoom: Now comes the exciting part – integrating Elevated Zoom into the carousel. This advanced zoom library enables users to zoom in and inspect the images in detail. We'll add the necessary JavaScript code to enable zoom functionality and customize settings like the zoom window dimensions.

Adding interactivity: To enhance the user experience, we'll incorporate interactivity into the carousel. This includes adding event listeners to the zoom lens for hover and click actions. Users can hover over the lens to see it change color, indicating interactivity, and click to trigger the zoom-in functionality.

By following these steps, you can create a captivating image carousel that not only showcases your products or visual content but also allows users to explore the images up close with the zoom functionality.

Feel free to access the live demo here to see the integration in action. If you're interested in studying or modifying the code, you can access the raw code here.

In conclusion, integrating Owl Carousel Two with Elevated Zoom offers a powerful solution for enhancing image carousels on your website. Take advantage of the flexibility and customization options provided by these tools to create an immersive and visually appealing user experience. Happy coding and creating stunning image carousels!

How can Owl Carousel improve the user experience of an eCommerce website?

Sameer Mulla — Wed, 03 May 2023 17:24:00 +0000

Adding auto-play pause on hover functionality to an Owl Carousel can greatly enhance the user experience of your website or application. In this tutorial, we'll show you how to achieve this with some simple jQuery code.

First, let's start by setting up an Owl Carousel with auto-play enabled. Here's an example:

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 2000,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  });
});

This sets up an Owl Carousel with auto-play enabled and some responsive breakpoints to adjust the number of items displayed based on screen size. However, this carousel doesn't pause auto-play when the user hovers over an item. To add this functionality, we need to add some additional jQuery code.

$(document).ready(function(){
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    loop:true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 2000,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  });

  // Pause autoplay on hover
  owl.on('mouseover', '.owl-item', function() {
    owl.trigger('stop.owl.autoplay');
  });

  // Resume autoplay when mouse leaves item
  owl.on('mouseout', '.owl-item', function() {
    owl.trigger('play.owl.autoplay');
  });
});

Here, we've added event listeners for mouseover and mouseout on the .owl-item elements within the carousel. When the user hovers over an item, the stop.owl.autoplay event is triggered to pause auto-play. When the user leaves the item, the play.owl.autoplay event is triggered to resume auto-play.

And that's it! With just a few lines of jQuery code, you can add auto-play pause on hover functionality to your Owl Carousel and greatly improve the user experience of your website or application.

In summary, adding auto-play pause on hover functionality to an Owl Carousel is a simple yet effective way to enhance the user experience of your website or application. By following the steps outlined in this tutorial, you can easily add this functionality to your Owl Carousel and give your users a more seamless browsing experience.