Immersive portfolio showcase featuring customized filtering options

I attempted to customize the Portfolio gallery with filtering categories code snippet from

https://www.w3schools.com/howto/howto_js_portfolio_filter.asp

My goal was to implement animation based on the selected category, but I encountered difficulties.

This is the code that I tried:

/*Custom Portfolio Gallery*/
/* Adjust padding BETWEEN each column (if desired) */
.row,
.row > .column {
}

/* Create three equal columns positioned next to each other */
.column {
    float: left;
    width: 398px;
    display: none; /* Initially hide columns */
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); 
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); 
}

/* Style for content */
.content {
    background-color: white;
    padding: 10px;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); 
}

/* The "show" class applies to filtered elements to make them visible */
.show {
    display: block;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); 
}
javascripthtmlcss

Answer №1

display attribute does not support the transition attribute. However, you can achieve a transition effect by using CSS properties like height and visibility.

/* Create three equal columns that float next to each other */
.column {
    float: left;
    width: 33.33%;
    visibility: hidden;
    height: 0px;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); 
}

/* The "show" class is applied to the filtered elements */
.show {
  visibility: visible;
  height: 325px;
}

Make sure to specify the height of the displayed card in this setup.

Answer №2

I wasn't able to leave a comment so I found another way.

Using this code for my portfolio really worked wonders!

HTML

<div class="container">
  <div class="row">
    <div class="col-lg-12">
    <div class="portfolioFilter clearfix">
      <a href="#" data-filter="*" class="current">All Categories</a>
      <a href="#" data-filter=".webTemplates">Web Templates</a>
      <a href="#" data-filter=".logos">Logos</a>
      <a href="#" data-filter=".drawings">Drawings</a>
      <a href="#" data-filter=".ui">UI Elements</a>
    </div>
      </div>
    <div class="portfolioContainer">

      <div class="webTemplates objects">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/cc99b535336825.Y3JvcCwxMzk1LDEwOTEsMCw3ODA.png" alt="image">
      </div>

      <div class="drawings places">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/d4cfa934191261.Y3JvcCw2MTMsNDc5LDQsMjA0.jpg" alt="image">
      </div>

      <div class="webTemplates food">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/11893193.5482088f6f391.png" alt="image">
      </div>

      <div class="logos drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/be4b9728308865.55b92edb950fc.jpg" alt="image">
      </div>

      <div class="webTemplates">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/12963199.548365055868a.png" alt="image">
      </div>

      <div class="ui">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/20342607.5434c04b49254.png" alt="image">
      </div>

      <div class="drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/b11bbb26474383.555f91fd42584.jpg" alt="image">
      </div>

      <div class="webTemplates">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/14385875.548573dae7a09.jpg" alt="image">
      </div>

      <div class="drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/14569777.5485b3876a1b9.png" alt="image">
      </div>
      <div class="logos">
        <img src=" https://mir-s3-cdn-cf.behance.net/projects/202/1d854a24500155.5505cccd057a4.jpg" alt="image">
      </div>
      <div class="ui">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/f9b95b26406487.555cc1fded76f.jpg" alt="image">
      </div>

      <div class="logos">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/181a7b35469661.Y3JvcCw3NjUsNTk5LDY3LDA.png" alt="image">
      </div>


    </div>
  </div>
</div>

CSS

 body {
  font-family: Arial;
}

a:focus {
  outline: none;
}

.portfolioFilter {
  padding: 15px 0;
}

.portfolioFilter a {
  margin-right: 6px;
  color: #666;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 4px 15px;
  border-radius: 50px;
  display: inline-block;
}

.portfolioFilter a.current {
  background: #1e1e1e;
  border: 1px solid #1e1e1e;
  color: #f9f9f9;
}
.portfolioContainer{
  border: 1px solid #eee;
  border-radius: 3px;
}
img {
  margin: 5px;
  max-width:100%;
}

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
}

JS

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});

Hopefully this information proves helpful for your project endeavors! Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Differences Between Android and JavaScript: Ensuring Library Validity

Validation in JS is provided by the validator library which can be found at https://www.npmjs.com/package/validator Is there an equivalent library for validation in Android? If so, what is the name of Android's library? ...

javascriptandroidvalidation

Iterating through an array of objects and extracting values from unspecified keys

Calculating which color holds a higher value in each array element of the data. Then adding the color with the higher value to an empty object, or increasing the count if already present. Finally, sorting the totals object from highest to lowest based on t ...

javascriptarraysmaps

Troubleshooting Regular Expressions in JavaScript

My objective is to analyze a string in order to identify the presence of lowercase letters or numbers, and then add that specific letter or number to an array. for(let i = 0; i < datearg.length; i++) { log.info(datearg.charAt(i)); ...

javascriptregex

Sidebar Masonry - Use Bootstrap for a Unique Layout

My goal is to have the page divided into 4 rows, with Masonry aligning the posts within 3 rows and a sidebar displayed on the right. However, I am facing an issue where Masonry mixes everything up and does not allow me to have a sidebar at the right. HTML ...

jqueryhtmltwitter-bootstrapjquery-masonrymasonry

avoiding repetition of mouseup event firing

After perusing multiple inquiries on similar matters, I am under the impression that my issue lies in propagation through numerous DOM elements. Despite this, I am still facing the problem of my Ajax function triggering multiple times when the mouseup even ...

javascriptphpjqueryajax

The functionality of the Vue.js single file component is not performing as anticipated

Recently, I've been experimenting with Vue and Vue CLI. I came across this amazing vue-tabs-component that I would like to try out. Here is a snippet of my code from App.vue: <template> <div> <tabs> <tab name="Fir ...

javascriptvue.jsvuejs2

Show text on a button press in Angular

I have set up a group of three buttons using ngFor, each button has its own unique name stored in an array called buttonData[]. The buttonData array also includes corresponding text and images for each button. My goal is to display a specific text and imag ...

htmlangulartypescriptbuttonngfor

What is causing the width discrepancy in my header section on mobile devices?

Help needed with website responsiveness issue! The site works fine on most screen sizes, but when it reaches around 414px in width, the intro section becomes too wide for the screen. Any ideas on what could be causing this problem? html: <nav id="m ...

javascripthtmlcssresponsive-design

Is there a method in Typescript and React Native to save the state of a switch button?

Is there a way to save the switch button state using asyncstorage? I want to ensure that when the user toggles the switch, the state is saved even if they exit the application and come back. import { View, Text, Switch } from 'react-native'; impo ...

javascriptreactjstypescriptreact-native

Using PHP, loop through three arrays to generate a table with three columns

Looking to build a dynamic table with HTML and PHP showcasing different arrays in each column. Three columns are needed. <table class="table-styling"> <tr> <th>Column 1</th> <th>Col ...

phphtml

JavaScript and PHP/HTML template engine technology

I've recently discovered the jQuery template engine and am intrigued by its potential. It seems to be very efficient for ajax calls, as the data exchange is minimized. However, when I initially load my application using only PHP and HTML to display ...

javascripthtmlajaxtemplates

Creating a unique Bootstrap 5 layout for various sized cards, inspired by the popular Pinterest design

I'm currently in the process of building a website using Bootstrap 5. One section of the website will feature various cards, similar to this example: https://i.sstatic.net/haNeN.png Each card on the site may vary in size depending on the content and ...

htmlcsstwitter-bootstrapmasonrybootstrap-5

Strategies for managing HTML-rich strings within Angular-Translate

Are there any methods to instruct angular and angular-translate how to manage strings containing HTML content? I am using add_card-title = "To make ordering even quicker, <span class="nowrap">add a card now</span>" as my La ...

javascriptangularjs

Begin executing a JavaScript function upon receiving a POST request through AJAX

I'm currently working on coding a JavaScript script that initiates an AJAX POST request to a PHP page containing another JavaScript. I need the JavaScript in the PHP page to automatically execute after receiving the response from AJAX. Unfortunately, ...

javascriptphpjqueryajax

Tips for choosing only 1 single row from a Table with Jquery

I have created a table to display multiple records, and I am looking to add update functionality using Ajax. However, the current code I have written makes all rows editable when clicked, whereas I only want to edit the specific row that was clicked on. C ...

javascriptjquerymysqlajax

Experience the captivating AUTOPLAY feature of the mesmerizing FULLSCREEN SLIT SL

I am currently utilizing a slider that is functioning well, however I am encountering an issue with autoplay. Whenever I click on the navigation arrow or Nav dot at the bottom of the slider, the autoplay feature stops working. For more information, please ...

javascriptjqueryhtmljquery-slider

Utilize $.ajax to gracefully wait for completion without causing the UI to freeze

Consider a scenario where there is a JavaScript function that returns a boolean value: function UpdateUserInSession(target, user) { var data = { "jsonUser": JSON.stringify(user) }; $.ajax({ type: "POST", url: target, data: ...

javascriptajax

Unable to function properly for dividing sections

I am attempting to create a number field (.item_adults) that will multiply itself and display the value in a class called "item_price". Here is what I have created so far: <div class="bookSection"> <input class="item_adults" name="adults" type= ...

javascriptjqueryeach

Using jquery.ajax to create a dropdown form with filtering options

My application has two dropdown menus that are populated with values from a database: Table_Buildings |id|---|building_name| Table_Floors |id|---|Floor_name|---|building(Foreign key to table_Buildings)| Within my form, I have the following dropdow ...

javascriptphpjqueryajax

AngularJS: Triggering issues with $scope and template after implementing $resource

Currently, I am not in the process of developing a full-fledged application. Instead, my focus is on understanding HTTP requests using Angular. Below is a snippet of my simple (albeit poorly written) HTML template: <div class="row-fluid" ng-controller ...

javascriptangularjs