Huddle MixItUp (grid)

Developer
Alyssa
Size
3,741 Kb
Views
24,288
  1. Huddle MixItUp (grid) Previews
  2. Huddle MixItUp (grid) HTML Codes
  3. Huddle MixItUp (grid) JS Codes

How do I make an huddle mixitup (grid)?

What is a huddle mixitup (grid)? How do you make a huddle mixitup (grid)? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

Huddle MixItUp (grid) Previews
IQ Test

Huddle MixItUp (grid) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Huddle MixItUp (grid)</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://codepen.io/alyda/pen/rGBgJ.css'>
</head>
<body> <!--need Filter (EyrvD) -->
<div id="grid-north" class="container"> <div class="fancy"><h4 class="ruled"><span>North Side</span></h4></div> <ul class="rooms north"> <li id="N-1" class="room-10 category-3 mix"><span>N-1</span></li> <li id="N-2" class="room-11 category-2 mix"><span>N-2</span></li> <li id="N-3" class="room-12 category-3 mix"><span>N-3</span></li> <li id="N-4" class="room-13 category-3 mix"><span>N-4</span></li> <li id="N-5" class="room-14 category-1 mix"><span>N-5</span></li> <li id="N-6" class="room-15 category-3 mix"><span>N-6</span></li> <li id="N-7" class="room-16 category-2 mix"><span>N-7</span></li> <li id="N-8" class="room-17 category-3 mix"><span>N-8</span></li> <li id="N-9" class="room-18 category-3 mix"><span>N-9</span></li> <li id="N-10" class="room-19 category-2 mix"><span>N-10</span></li> <li id="N-11" class="room-20 category-3 mix"><span>N-11</span></li> <li id="N-12" class="room-21 category-1 mix"><span>N-12</span></li> <li id="N-13" class="room-22 category-3 mix"><span>N-13</span></li> <li id="N-14" class="room-23 category-2 mix"><span>N-14</span></li> <li id="N-15" class="room-24 category-3 mix"><span>N-15</span></li> <li id="N-16" class="room-25 category-3 mix"><span>N-16</span></li> <li id="N-17" class="room-26 category-3 mix"><span>N-17</span></li> <li id="N-18" class="room-27 category-2 mix"><span>N-18</span></li> <!-- https://mixitup.kunkalabs.com/learn/tutorial/responsive-grids/#-gap--elements --> <li class="gap"></li> <li class="gap"></li> <li class="gap"></li> <li class="gap"></li> <li class="gap"></li> <p class="error">No rooms were found matching the selected filters.</p> </ul>
</div> <!-- /.container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/patrickkunka/mixitup/master/build/jquery.mixitup.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Huddle MixItUp (grid) - Script Codes JS Codes

/* $$\ \__|
$$$$$$\$$$$\ $$\ $$\ $$\
$$ _$$ _$$\ $$ |\$$\ $$ |
$$ / $$ / $$ |$$ | \$$$$ /
$$ | $$ | $$ |$$ | $$ $$<
$$ | $$ | $$ |$$ |$$ /\$$\
\__| \__| \__|\__|\__/ \__| */
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "buttonFilter".
var currentFilters, buttonFilter = { // Declare any variables we will need as properties of the object $filters: null, $reset: null, groups: [], outputArray: [], outputString: '', // The "init" method will run on document ready and cache any jQuery objects we will need. init: function(){ var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "buttonFilter" object so that we can share methods and properties between all parts of the object. self.$filters = $('.filters'); self.$reset = $('.reset'); self.$container = $('.rooms'); self.$filters.find('.type li, .special').each(function(){ self.groups.push({ $buttons: $(this), //.find('.filter') active: '' }); }); self.bindHandlers(); }, // The "bindHandlers" method will listen for whenever a button is clicked. bindHandlers: function(){ var self = this; // Handle filter clicks self.$filters.on('click', '.filter', function(e){ e.preventDefault(); var $button = $(this); // If the button is selected, remove the selected class, else make selected and deactivate others. $button.hasClass('selected') ? $button.removeClass('selected') : $button.addClass('selected'); //.siblings('.filter').removeClass('selected') self.parseFilters(); $button.hasClass('special') ? self.$reset.toggleClass('selected') : null ; }); // Handle reset click self.$reset.on('click', function(e){ var $reset = $(this); self.$filters.find('.filter[data-filter=".available"]').removeClass('selected'); self.parseFilters(); // check state of .special $(' li.special ').hasClass('selected') ? $reset.removeClass('selected') : $reset.addClass('selected') ; //$reset.toggleClass('selected') // this should be tied to a callback, not to each click. we need to know if this button changed the resultset }); }, // The parseFilters method checks which filters are selected in each group: parseFilters: function(){ var self = this; // loop through each filter group and grap the selected filter from each one. for(var i = 0, group; group = self.groups[i]; i++){ // console.log(group.$buttons.filter('.selected').data('filter')) group.active = group.$buttons.filter('.selected').data('filter') || ''; } self.concatenate(); }, // The "concatenate" method will crawl through each group, concatenating filters as desired: concatenate: function(){ var self = this; self.outputString = ''; // Reset output string for(var i = 0, count=0, flag=false, group; group = self.groups[i]; i++){ // console.log(i+': '+group.active) // self.outputString += group.active; // EXCLUSIVE if ( group.active == ".available" ) { // self.outputString += group.active; flag = true // this only works because '.active' happens to be first. if it were last or somewhere else in the list, the final loos would have to check for this flag and then modify the self.outputString accordingly } else if( group.active != ""){ // console.log('count:'+count) if(count == 0){ // INCLUSIVE if(flag){ self.outputString += group.active+'.available'; } else { self.outputString += group.active; } } else { if(flag){ self.outputString += ', '+group.active+'.available'; } else { self.outputString += ', '+group.active; } } count++; } } // If the output string is empty, show all rather than none: !self.outputString.length && (self.outputString = 'all'); // console.log(self.outputString); // ^ we can check the console here to take a look at the filter string that is produced // Send the output string to MixItUp via the 'filter' method: if(self.$container.mixItUp('isLoaded')){ self.$container.mixItUp('filter', self.outputString, updateSubway); //don't pass the 'state' variable, it is magically attached } }
}; // buttonFilter{}
var updateSubway = function(state){ if( state.activeFilter != '.mix' ) { $('.subway li').addClass('dim') $('.subway li'+state.activeFilter).removeClass('dim') } else { $('.subway li').removeClass('dim'); } currentFilters = state.activeFilter;
} // updateSubway()
// -----------------------------------------------
// Initialize buttonFilter code
buttonFilter.init();
// Instantiate MixItUp
$('.rooms').mixItUp({ controls: { enable: false // we won't be needing these }
});
$('.rooms li').hover( function(e){ $(this).siblings().addClass('unfocus'); }, function(e){ $(this).siblings().removeClass('unfocus'); }
) // $('.rooms li').hover()
Huddle MixItUp (grid) - Script Codes
Huddle MixItUp (grid) - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 3,741 Kb
Views 24,288
Do you need developer help for Huddle MixItUp (grid)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alyssa (alyda) Script Codes
Name
Wire up a Backend
CSS Patterns
Evolve Error Pages
Huddle Grid-Detail View
Photo Gallery
Evolve Media Gallery
Huddle Subway Map
Evolve JS
Evolve Patterns
Lexus Email Templates
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!