Huddle Space | Collaborate At Will

Developer
Alyssa
Size
29,037 Kb
Views
24,288
  1. Huddle Space | Collaborate At Will Previews
  2. Huddle Space | Collaborate At Will HTML Codes
  3. Huddle Space | Collaborate At Will CSS Codes
  4. Huddle Space | Collaborate At Will JS Codes

How do I make an huddle space | collaborate at will?

WIP. What is a huddle space | collaborate at will? How do you make a huddle space | collaborate at will? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

Huddle Space | Collaborate At Will Previews
IQ Test

Huddle Space | Collaborate At Will - Script Codes HTML Codes

<!DOCTYPE html>
<html class="no-js">
<head> <meta charset="UTF-8"> <title>Huddle Space | Collaborate At Will</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=9,chrome=1'><![endif]-->
<meta name="viewport" content="user-scalable=no,minimal-ui">
<link rel="shortcut icon" type="image/x-icon" href="http://teamone-usa.com/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- matchMedia polyfill needed for IE8/9, iOS<5, Opera Mini, Android<3 http://caniuse.com/#search=matchMedia -->
<script src="https://rawgit.com/paulirish/matchMedia.js/master/matchMedia.js"></script> <link rel='stylesheet prefetch' href='css/__codepen_io_alyda_pen_xf.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script> // This belongs in 'stuff for head' but it ouputs something weird on the 'full' page, but not on 'debug' nor 'editor' pages. Slight FOUC, but oh well... function resizeThrottler(){resizeTimeout||(resizeTimeout=setTimeout(function(){resizeTimeout=null,resize()},66))}function resize(){document.querySelector("body"),console.log(window.innerWidth),device=window.matchMedia("(max-device-width: 767px)").matches?"phone":window.matchMedia("(min-device-width: 768px)").matches&&window.matchMedia("(max-device-width: 959px)").matches?"tablet":"desktop",console.log(device)}function DOMContentLoaded(){var a=document.body;a.classList?a.classList.add(device):a.className+=" "+device}var device="unknown";window.addEventListener("resize",resizeThrottler,!1);var resizeTimeout;resize(),document.addEventListener("DOMContentLoaded",DOMContentLoaded,!1);
(function() { var path = '//easy.myfonts.net/v2/js?sid=10336(font-family=Avenir+35+Light)&sid=10340(font-family=Avenir+85+Heavy)&sid=10346(font-family=Avenir+95+Black)&key=yUVTRHtKtX', protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'), trial = document.createElement('script'); trial.type = 'text/javascript'; trial.async = true; trial.src = protocol + path; var head = document.getElementsByTagName("head")[0]; head.appendChild(trial);
})();
</script>
<!--[if lt IE 9]> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade</a> to a different browser to experience this site.</p>
<![endif]-->
<header id="header"> <!--Utilities--> <nav class="utilities dark"> <span class="close"></span> <div class="container"> <h2 hidden>Utilities</h2> <div class="col"> <h3 class="form-title">Check-In</h3> <form id="check-in"> <input id="name" type="text" placeholder="Name" tabindex="0" required> <ul class="matches"></ul> <span class="select" style="margin-left:0" data-selected="">North Side</span> <!-- tabindex="1" --> <ul id="wing" class="options"> <li class="option" value="north">North Side</li> <li class="option" value="south">South Side</li> </ul> <span id="room-number" class="select" data-selected required>Room #</span> <!-- tabindex="2" --> <ul id="room-ids" class="options"> <li class="option-heading">North</li> <li class="option" value="10">N-1</li> <li class="option" value="11">N-2</li> <li class="option" value="12">N-3</li> <li class="option" value="13">N-4</li> <li class="option" value="14">N-5</li> <li class="option" value="15">N-6</li> <li class="option" value="16">N-7</li> <li class="option" value="17">N-8</li> <li class="option" value="18">N-9</li> <li class="option" value="19">N-10</li> <li class="option" value="20">N-11</li> <li class="option" value="21">N-12</li> <li class="option" value="22">N-13</li> <li class="option" value="23">N-14</li> <li class="option" value="24">N-15</li> <li class="option" value="25">N-16</li> <li class="option" value="26">N-17</li> <li class="option" value="27">N-18</li> <li class="option-heading">South</li> <li class="option" value="29">S-1</li> <li class="option" value="30">S-2</li> <li class="option" value="31">S-3</li> <li class="option" value="32">S-4</li> <li class="option" value="33">S-5</li> <li class="option" value="34">S-6</li> <li class="option" value="35">S-7</li> <li class="option" value="36">S-8</li> <li class="option" value="37">S-9</li> <li class="option" value="38">S-10</li> <li class="option" value="39">S-11</li> <li class="option" value="40">S-12</li> <li class="option" value="41">S-13</li> <li class="option" value="42">S-14</li> <li class="option" value="43">S-15</li> <li class="option" value="44">S-16</li> <li class="option" value="45">S-17</li> <li class="option" value="46">S-18</li> </ul> <button>Submit</button> <!-- type="submit" is default, shouldn't have to declare --> </form> </div> <div class="col"> <h3 class="form-title">Search</h3> <form id="search-form"> <input type="search" placeholder="Find Someone"> <ul class="matches"></ul> </form> </div> </div> <!-- /.container --> </nav> <div class="container" style="position: relative;"> <!--for abs position of .toggle, but don't want to waste css markup to find this non-specific element --> <div class="banner"> <h1 class="logo">Huddle <span class="light">Space</span></h1> <span class="tagline">Collaborate at will</span> </div> <div class="toggle"> <span>toggle</span> </div> </div> <!-- /.container -->
</header>
<div id="document" role="document"> <!--Subway--> <div class="subway mobilehide"> <div id="draggable" class="container"> <h3 hidden>Subway Diagram</h3> <span class="marker north">North Side</span> <ul class="north"> <li id="N-1" class="room-10 category-3"><span>N-1</span></li> <li id="N-2" class="room-11 category-2"><span>N-2</span></li> <li id="N-3" class="room-12 category-3"><span>N-3</span></li> <li id="N-4" class="room-13 category-3"><span>N-4</span></li> <li id="N-5" class="room-14 category-1"><span>N-5</span></li> <li id="N-6" class="room-15 category-3"><span>N-6</span></li> <li id="N-7" class="room-16 category-2"><span>N-7</span></li> <li id="N-8" class="room-17 category-3"><span>N-8</span></li> <li id="N-9" class="room-18 category-3"><span>N-9</span></li> <li id="N-10" class="room-19 category-2"><span>N-10</span></li> <li id="N-11" class="room-20 category-3"><span>N-11</span></li> <li id="N-12" class="room-21 category-1"><span>N-12</span></li> <li id="N-13" class="room-22 category-3"><span>N-13</span></li> <li id="N-14" class="room-23 category-2"><span>N-14</span></li> <li id="N-15" class="room-24 category-3"><span>N-15</span></li> <li id="N-16" class="room-25 category-3"><span>N-16</span></li> <li id="N-17" class="room-26 category-3"><span>N-17</span></li> <li id="N-18" class="room-27 category-2"><span>N-18</span></li> </ul> <span class="marker kitchen">Kitchen</span> <span class="marker line"></span> <span class="marker front-desk">Front Desk</span> <ul class="south"> <li id="S-1" class="room-29 category-4"><span>S-1</span></li> <li id="S-2" class="room-30 category-2"><span>S-2</span></li> <li id="S-3" class="room-31 category-4"><span>S-3</span></li> <li id="S-4" class="room-32 category-4"><span>S-4</span></li> <li id="S-5" class="room-33 category-3"><span>S-5</span></li> <li id="S-6" class="room-34 category-4"><span>S-6</span></li> <li id="S-7" class="room-35 category-3"><span>S-7</span></li> <li id="S-8" class="room-36 category-3"><span>S-8</span></li> <li id="S-9" class="room-37 category-4"><span>S-9</span></li> <li id="S-10" class="room-38 category-1"><span>S-10</span></li> <li id="S-11" class="room-39 category-4"><span>S-11</span></li> <li id="S-12" class="room-40 category-3"><span>S-12</span></li> <li id="S-13" class="room-41 category-3"><span>S-13</span></li> <li id="S-14" class="room-42 category-3"><span>S-14</span></li> <li id="S-15" class="room-43 category-3"><span>S-15</span></li> <li id="S-16" class="room-44 category-4"><span>S-16</span></li> <li id="S-17" class="room-45 category-3"><span>S-17</span></li> <li id="S-18" class="room-46 category-3"><span>S-18</span></li> </ul> <span class="marker south">South Side</span> <span class="marker all-agency">All Agency</span> </div> <!-- /.container --> </div> <!-- /.subway --> <!-- <div class="container"> --> <h3 hidden>Grid</h3> <!--Filter--> <div class="filters"> <!--mobile only--> <div class="mobileonly" style="background: white"> <span class="select">Filter Rooms</span> <ul class="views filter-buttons"> <li class="grid selected"><span class="dots">view as grid</span></li> <li class="map"><span class="pin">view as map</span></li> </ul> </div> <div class="container"> <span class="h4 filter-title">Show Only:</span> <!-- We can add an unlimited number of "filter groups" using the following format: --> <ul class="status filter-buttons"> <li class="filter special" data-filter=".available">Available</li> <li class="reset selected">All</li> </ul> <span class="h4 filter-title mobileonly" style="clear:right">Filter by:</span><!--mobile only--> <ul class="type filter-buttons"> <li class="filter" data-filter=".category-3">Table</li> <li class="filter" data-filter=".category-2">Lounge</li> <li class="filter" data-filter=".category-1">Standing</li> <li class="filter" data-filter=".category-4">Open Space</li> </ul> <span class="mobileonly done">Done</span> </div> <!-- /.container --> </div> <!-- /.filters --> <!--Grid (north)--> <!--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 --> <!--Details (dark)--> <div class="details dark"> <!-- light --> <div class="container"> <header class="details-header"> <span class="h2 room">N-1</span> <span class="h3"><span class="location">North Side</span> // <span class="details-type">Lounge</span></span> <span class="close"></span> </header> <div class="col col1"> <figure class="floorplan"></figure> <!-- <span class="check-in button">Check-In</span> --> </div> <div class="col col2"> <!-- style="margin-left:45px" --> <ul class="amenities col"> <li class="h3">Room Details:</li> </ul> <!-- /.amenities --> <!-- </div> --> <!-- <div class="col"> --> <!--<ul class="occupants col"> <li class="h3" style="padding-left: 0">Occupants:</li> <li>Alastair Green</li> <li>Charlene Zvolanek</li> <li>Dan Frazier</li> <li>Steve Belovarich</li> <li>Rob Edwards</li> </ul> /.occupants --> </div> </div> <!-- /.container --> </div> <!-- /.details --> <div id="grid-south" class="container"> <a class="mobileonly backToTop" href="#top" title="Return to the top of this page">return to top</a> <div class="fancy"><h4 class="ruled"><span>South Side</span></h4></div> <ul class="rooms south"> <li id="S-1" class="room-29 category-4 mix"><span>S-1</span></li> <li id="S-2" class="room-30 category-2 mix"><span>S-2</span></li> <li id="S-3" class="room-31 category-4 mix"><span>S-3</span></li> <li id="S-4" class="room-32 category-4 mix"><span>S-4</span></li> <li id="S-5" class="room-33 category-3 mix"><span>S-5</span></li> <li id="S-6" class="room-34 category-4 mix"><span>S-6</span></li> <li id="S-7" class="room-35 category-3 mix"><span>S-7</span></li> <li id="S-8" class="room-36 category-3 mix"><span>S-8</span></li> <li id="S-9" class="room-37 category-4 mix"><span>S-9</span></li> <li id="S-10" class="room-38 category-1 mix"><span>S-10</span></li> <li id="S-11" class="room-39 category-4 mix"><span>S-11</span></li> <li id="S-12" class="room-40 category-3 mix"><span>S-12</span></li> <li id="S-13" class="room-41 category-3 mix"><span>S-13</span></li> <li id="S-14" class="room-42 category-3 mix"><span>S-14</span></li> <li id="S-15" class="room-43 category-3 mix"><span>S-15</span></li> <li id="S-16" class="room-44 category-4 mix"><span>S-16</span></li> <li id="S-17" class="room-45 category-3 mix"><span>S-17</span></li> <li id="S-18" class="room-46 category-3 mix"><span>S-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> <p class="error">No open rooms were found matching the selected filters.</p> </ul> </div> <!-- /.container -->
</div> <!-- /#document -->
<footer id="footer"> <div class="container"> <p class="copy">&copy; 2014 Team One USA</p> <small class="message"></small> <!-- <b>Latest MQTT message:</b> <small id="message">no message recieved</small> --> </div>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mixitup/1.5.6/jquery.mixitup.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js'></script>
<script src='https://codepen.io/alyda/pen/sDhlG.js'></script> <script src="js/index.js"></script>
</body>
</html>

Huddle Space | Collaborate At Will - Script Codes CSS Codes

/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";
/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";
$em-base: 16px; //http://bourbon.io/docs/#em-base
// https://raw.githubusercontent.com/thoughtbot/bourbon/master/app/assets/stylesheets/functions/_strip-units.scss
// Srtips the units from a value. e.g. 12px -> 12
@function strip-units($val) { @return ($val / ($val * 0 + 1));
}
// https://raw.githubusercontent.com/thoughtbot/bourbon/master/app/assets/stylesheets/functions/_px-to-em.scss
// Convert pixels to ems
// eg. for a relational value of 12px write em(12) when the parent is 16px
// if the parent is another value say 24px write em(12, 24)
@function em($pxval, $base: $em-base) { @if not unitless($pxval) { $pxval: strip-units($pxval); } @if not unitless($base) { $base: strip-units($base); } @return ($pxval / $base) * 1em;
}
// $$\ $$\ $$$$$$\ $$$$$$\ $$$$$$$\
// \$$\ $$ |\____$$\ $$ __$$\ $$ _____|
// \$$\$$ / $$$$$$$ |$$ | \__|\$$$$$$\
// \$$$ / $$ __$$ |$$ | \____$$\
// \$ / \$$$$$$$ |$$ | $$$$$$$ |
// \_/ \_______|\__| \_______/
$debug: false !default;
// COLORS ---------------------------------------------------------------------
$red: #da0426;
$yellow: #ffca00;
$green: #00af48;
$blue: #099cd8;
$purple: #27235e;
$white: #e5e5e5;
$gray: darken($white, 15%);
$primary: $blue;
$secondary: #074e83;
$tertiary: $purple;
$accent: $yellow;
$accent2: $green;
$bright: #fff;
$light: $white;
$dark: $purple;
$available-color: $green;
$occupied-color: $red;
$purgatory-color: $yellow;
$bg-color: $bright;
$text-color: $purple;
$link-color: $text-color;
$link-hover-color: $link-color;
// FONTS ----------------------------------------------------------------------
$sans-serif: Avenir, $helvetica; //https://typekit.com/fonts/brandon-grotesque
$base-font-family: $sans-serif;
$header-font-family: $base-font-family;
$font-size: 15px;
$base-font-size: em($font-size);
$line-height: em(18px, $font-size); //1.2, $minor-third
//type-scale.com/
$h1: 42px ; // 15px * 2.8
$h2: 36px ; // 15px * 2.4
$h3: 16px ; // 15px * 1.0667 or modular-scale(15px, 1, $minor-second);
$h4: 15px ; // 15px * 1
$h5: 12px ; // 15px * .8
$mobile-h1: 20px ;
$retina-font-size: $mobile-h1 * 2; //was 44
// GRID -----------------------------------------------------------------------
// @import "neat/neat-helpers";
$mobile: 480px; // em(480px)
$tablet: 768px; //
$desktop: 960px; // em(960px)
$desktop-columns: $grid-columns; // 12
//$tablet-columns: 10;
$mobile-columns: 6;
// because we are using codepen, some of these settings must go into https://codepen.io/alyda/pen/xfKGv due to bourbon/neat dependencies
// Change the grid settings
$gutter: em(20px, $font-size);
$max-width: em($desktop, $font-size);
$mobile-max: em(($tablet - 1));
//$tablet-max: em($desktop - 1);
// Define your breakpoints
$mobile-breakpoint: new-breakpoint(max-width $mobile-max $mobile-columns);
$tablet-breakpoint: new-breakpoint(min-width em($tablet) min-device-width em($tablet)); //tablet & up
$desktop-breakpoint: new-breakpoint(min-width em($desktop));
$retina-breakpoint: new-breakpoint(max-device-width $mobile-max -webkit-min-device-pixel-ratio 1.6 $mobile-columns);
// /* The version of Neat used in this Pen was 1.8.* */
@import "neat";
$em-base: $font-size; //http://bourbon.io/docs/#em-base
// Z-INDEX --------------------------------------------------------------------
$z-debug: 2147483647; //http://www.puidokas.com/max-z-index/
// PATHS -----------------------------------------------------------------------
$base-url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/129745/';
$img-path: ''; //_/css/img/
// $$\ $$\
// \__| \__|
// $$$$$$\$$$$\ $$\ $$\ $$\ $$\ $$$$$$$\ $$$$$$$\
// $$ _$$ _$$\ $$ |\$$\ $$ |$$ |$$ __$$\ $$ _____|
// $$ / $$ / $$ |$$ | \$$$$ / $$ |$$ | $$ |\$$$$$$\
// $$ | $$ | $$ |$$ | $$ $$< $$ |$$ | $$ | \____$$\
// $$ | $$ | $$ |$$ |$$ /\$$\ $$ |$$ | $$ |$$$$$$$ |
// \__| \__| \__|\__|\__/ \__|\__|\__| \__|\_______/
// debug Media Queries
@mixin media-debug($message, $color: rgba(0 ,0 ,0, 0.3), $font-color: white ) { //codepen.io/niklas-r/pen/sHaAy &::before { font: 300 1em/1.2em monospace; padding: .5em 0; content: $message; display: block; text-align: center; background: #{$color}; color: #{$font-color}; text-shadow: 0 1px grayscale(invert($font-color)); position: fixed; bottom: 0; left: 0; right: 0; z-index: $z-debug; }
} // end debug Media Queries
// @mixin svgs {
// [class$="-svg"] {
// & + & { //remember, this is an IF case, not a WHEN (as in we don't always expect this to occur)
// margin-left: ($gutter / 2) * 1px; //can't use ems because of hide-text()
// }
// }
// }
// @mixin svg($normal, $hover: false){
// cursor: pointer;
// display: block;
// background-image: url('#{$base-url}'+'#{$img-path}'+$normal+'.svg');
// background-repeat: no-repeat;
// //background-position: center; //background: url($normal) no-repeat center;
// @include hide-text;
// &:hover {
// @if type-of($hover) == string {
// $hover: unquote($hover);
// background-image: url('#{$base-url}'+'#{$img-path}'+$hover+'.svg');
// background-repeat: no-repeat;
// } @else {
// opacity: .9;
// }
// }
// }
// @mixin list-centered {
// //css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/
// // READ THE FIRST PARAGRAPH OF THAT ARTICLE
// text-align: center;
// li {
// float: none;
// display: inline-block;
// }
// }
// --------
@mixin respond-to($media) { @if $media == phones { @media screen and (max-device-width: $mobile-max), screen and (max-width: $mobile-max) { @content; } } @else if $media == retina { @include media($retina-breakpoint) { @content; } } @else if $media == tablet { // this could break, can we check the outer selector with @if? body.tablet & { @content; } } @else if $media == tablet-desktop { @include media($tablet-breakpoint) { @content; } } @else if $media == desktop { //@include media($desktop-breakpoint) { @content; //} } @else { @include media($media) { @content; } }
}
// --------
%reset { margin: 0; padding: 0; // border: 0; // font-size: 100%; // font: inherit; // vertical-align: baseline;
}
//table {
// border-collapse: collapse;
// border-spacing: 0;
//}
// $$\
// $$ |
// $$$$$$$\ $$$$$$\ $$$$$$$\ $$$$$$\
// $$ __$$\ \____$$\ $$ _____|$$ __$$\
// $$ | $$ | $$$$$$$ |\$$$$$$\ $$$$$$$$ |
// $$ | $$ |$$ __$$ | \____$$\ $$ ____|
// $$$$$$$ |\$$$$$$$ |$$$$$$$ |\$$$$$$$\
// \_______/ \_______|\_______/ \_______|
html, body { @extend %reset; // @include fill-parent; // min-width: 100% !important; // max-width: 100% !important;
}
html { // background: $bg-color; not needed, it's already white
}
body { // height: auto; color: $text-color; font-family: $base-font-family; font-size: $base-font-size; line-height: $line-height; -webkit-font-smoothing: antialiased; @include respond-to(retina) { // currently affecting tablets font-size: em($retina-font-size); }
}
#document { position: relative; /*firefox fix for details window*/ overflow: hidden; padding-bottom: $gutter * 2;
}
ul, figure { @extend %reset;
}
// Forms --------------------------------------------------
.form { // padding: $gutter;
}
@mixin form-reset { /* form elements reset */ color: inherit; font-size: 100%; font: inherit; vertical-align: baseline;
}
.form-element { @include form-reset; margin-bottom: $gutter; padding: $gutter / 2; border: em(1px) solid; /*idevices*/ border-radius: 0; -webkit-appearance: none;
}
.input { @include fill-parent; //width: 100%; @extend .form-element;
}
@mixin button-reset { // width: auto; background-color: transparent; // overflow: visible; @extend .form-element;
}
// %interactive {
// cursor: pointer;
// }
//css-tricks.com/snippets/css/give-clickable-elements-a-pointer-cursor/
@mixin interactive { cursor: pointer;
}
.button { }
.select { display: inline-block; @extend .form-element; background: url(#{$base-url}#{$img-path}dropdown-closed.svg) no-repeat 92% center; background-size: em(32px); @include interactive; // @extend %interactive &:hover { background-image: url(#{$base-url}#{$img-path}dropdown-closed.svg); } & + .options { display: none; }
}
.options { position: absolute; list-style-type: none; border: em(1px) solid; //z-index: 10; //use a variable li { padding: $gutter * 2; @include interactive; // @extend %interactive &:not(:last-child) { border-bottom: em(1px) solid; } }
}
@mixin forms { form { @extend .form !optional; } input { @extend %reset; @extend .input; } button { @extend %reset; @include button-reset; @extend .button !optional; @include interactive; // @extend %interactive }
}
@include forms;
// Other --------------------------------------------------
// @include svgs;
.close { position: absolute; right: 0; @include size(em(56px)); @include interactive; // @extend %interactive &:before, &:after { content: ''; position: absolute; @include size(em(40px) em(1)); background: $light; top: 50%; left: 50%; } &:hover { &:before, &:after { background: $yellow; } } &:before { @include transform(rotate(-45deg)); } &:after { @include transform(rotate(45deg)); }
}
// $$\
// $$ |
// $$$$$$\ $$\ $$\ $$$$$$\ $$$$$$\
// \_$$ _| $$ | $$ |$$ __$$\ $$ __$$\
// $$ | $$ | $$ |$$ / $$ |$$$$$$$$ |
// $$ |$$\ $$ | $$ |$$ | $$ |$$ ____|
// \$$$$ |\$$$$$$$ |$$$$$$$ |\$$$$$$$\
// \____/ \____$$ |$$ ____/ \_______|
// $$\ $$ |$$ |
// \$$$$$$ |$$ |
// \______/ \__|
@mixin typography { a { @extend .link; } h1 { @extend .h1; } // h2 { @extend .h2; } // h3 { @extend .h3; } // h4 { @extend .h4; } h5 { @extend .h5; } // h6 { @extend .h6; } .ruled { //@include fancy; }
}
@mixin fancy() { // https://css-tricks.com/line-on-sides-headers/ text-align: center; @include pad($gutter 0); overflow: hidden; span { display: inline-block; position: relative; &:before, &:after { content: ""; position: absolute; height: 5px; // border-top: 1px solid; // double border-bottom: em(2px) solid; top: 0; width: em(600px); //@include phone-retina { //margin-top: 20px; //} } &:before { right: 100%; margin-right: $gutter; } &:after { left: 100%; margin-left: $gutter; } }
}
@mixin uc { text-transform: uppercase; } //.uc { text-transform: uppercase; }
%reset-headline { }
.h1, .h2, .h3, .h4, .h5, .h6 { display: block; margin: 0; font-family: $header-font-family;
// font-weight: $heading-font-weight; line-height: $line-height; text-rendering: optimizeLegibility; // Fix the character spacing for headings // this is pretty cool, but it creates too much markup //& + & { // remember, this is an if case, not a when. // margin: 0 !important; //}
}
//.h1, .h3, .h4 { @include uc; }
//.h2, .h3, .h4, .h5 { font-weight: bold; }
.h1 { font-size: em($h1); /* letter-spacing: -2px;*/ font-weight: 900; @include uc; @include respond-to(phones) { font-size: em($mobile-h1); }
}
//.h2 { font-size: em($h2, $font-size); /*letter-spacing: -1px;*/ font-weight: bold; }
//.h3 { font-size: em($h3, $font-size); @include uc; font-weight: bold; }
//.h4 { font-size: em($h4, $font-size); @include uc; font-weight: bold; }
.h5 { font-size: em($h5); font-weight: bold; }
.link { color: $link-color; @include interactive; // @extend %interactive //&:visited { // color: $link-visited-color; //} &:hover, &:visited:hover, &:active, &:focus { color: $link-hover-color;
// outline: none; }
}
@include typography;
//.quiet { color: $quiet-color; }
//.loud { color: $loud-color; }
//.italic { font-style: italic; }
//.bold { font-weight: 700; @extend .loud; }
//.block-margins { margin: 1em 0; }
//.unordered-list { list-style-type: disc; }
//.ordered-list { list-style: decimal; }
//.list-unstyled { list-style-type: none; }
.tagline { font-weight: 900; font-size: em(18px); line-height: $line-height; text-transform: uppercase;
}
.form-title { //title or heading? font-weight: normal; text-transform: capitalize;
}
.option-heading { font-weight: bold; text-transform: uppercase;
}
.filter-title { //title or heading? display: block; margin-top: em(20, $h4); margin-bottom: em(10, $h4); text-transform: capitalize; @include respond-to(phones) { margin: 0; @include pad($base-font-size); background: black; color: $light; @include uc; }
}
// $$\ $$\
// \__| $$ |
// $$$$$$\ $$$$$$\ $$\ $$$$$$$ |
// $$ __$$\ $$ __$$\ $$ |$$ __$$ |
// $$ / $$ |$$ | \__|$$ |$$ / $$ |
// $$ | $$ |$$ | $$ |$$ | $$ |
// \$$$$$$$ |$$ | $$ |\$$$$$$$ |
// \____$$ |\__| \__| \_______|
// $$\ $$ |
// \$$$$$$ |
// \______/
.container { @include outer-container; max-width: $max-width;
}
.col { float: left; width: 50%; @include respond-to(phones) { @include fill-parent; //width: 100%; } // .col (mobile) & + & { // float: left; border-left: em(1px) solid; } // .col + .col
} // .col
//
// Utilities
// -------------------------------------------------------------------
@mixin color-scheme() { //dark, light
}
.utilities { display: none; @include fill-parent; //width: 100%; @include respond-to(tablet-desktop) { @include pad( ($gutter * 2) $gutter $gutter); } // .utilities (mobile) .col { @include pad(0 $gutter); & + .col { border-left-color: #4c4c4c; // dark? @include respond-to(phones) { background: black; border-top: em(1px) solid #4c4c4c; border-left: none; } // .utilities .col + .col (mobile) } // .utilities .col + .col } // .utilities .col .close { top: $gutter; right: $gutter; } // .utilities .close .form-title { margin-bottom: $gutter; @include respond-to(phones) { margin-top: $gutter; } } .select, button { width: 30%; & + .options { width: 30%; margin-top: -$gutter; } } .select ~ .select, .select ~ button { margin-left: 3.775%; } button { //same for dark & light background: $blue; border-color: $blue; color: $bright; &:hover { background: $yellow; color: $dark; } } @include respond-to(phones) { .close { top: 0; } .select { width: 48%; & + .options { width: 48%; } & ~ .select { margin-left: 2.7%; //3 } } button { width: 100%; margin-left: 0 !important; } }
}
.utilities.dark { background: #262626; color: #b2b2b2; .select, .input, input, button { border-color: #7f7f7f; } input { background-color: transparent; }
}
.utilities.light { color: #7f7f7f; .select, .input, input, button { border-color: #b2b2b2; } .select { background-color: $bright; }
}
#check-in { /* for #matches */ position: relative;
}
.matches, .options { .dark & { background: darken(#262626, 4%); border-color: #7f7f7f; } .light & { background: darken($bright, 4%); border-color: #b2b2b2; } li { .dark &, .light & { &:hover { background: $blue; color: $bright; } } .dark & { border-bottom-color: #7f7f7f; } .light & { border-bottom-color: #b2b2b2; } }
}
.matches { display: none; @extend .options; margin-top: -$gutter; width: 100%; z-index: 15; //in case multiple drop downs are open...
}
#room-ids { left: 34.8%; //try to calculate this... @include respond-to(phones) { left: 52%; //try to calculate this... }
}
#search-form { @include respond-to(phones) { padding-bottom: $gutter; } @include respond-to(tablet-desktop) { padding: $gutter; .dark & { background: #3f3f3f; } } .light & { background: #ccc; } input { margin-top: $gutter / 2; margin-bottom: $gutter / 2; }
}
//
// Header
// -------------------------------------------------------------------
@include respond-to(tablet-desktop) { body { background: $light url('#{$base-url}#{$img-path}header-bg.png') no-repeat center -85px; }
}
#header { // height: 210px; background: rgba(#00234a, .9); color: $light; border-bottom: em(1px) solid $blue; @include respond-to(phones) { border-bottom-color: $dark; }
}
.banner { @include span-columns(6); @include shift(3); //margin-right: 0 !important; //@include respond-to(tablet) { //@include span-columns(8); //@include shift(1); //} // .banner (tablet) background: url(#{$base-url}#{$img-path}logo.svg) no-repeat center -1em; background-size: em(90px); background-position-y: -$gutter; @include respond-to(phones) { @include fill-parent; //@include span-columns(12); @include shift(0); background-color: $bright; background-size: em(65px); background-position-x: -5px; background-position-y: -5px; } // .banner (mobile) text-align: center; letter-spacing: em(3px); .logo { @include pad(em(78, $h1) 0 em(12, $h1)); border-bottom: em(1, $h1) solid $blue; @include respond-to(phones) { @include pad(1em 0 .7em $line-height); color: $dark; }
// keep together ------------------------------------------ position: relative; &:after { content: ""; @include position(absolute, auto auto -7px 50%); margin-left: -6px; @include size(12px); // don't need ems because it won't be seen on retina phones border-radius: 50%; background: #00234a; border: em(1px) solid $blue; @include respond-to(phones) { display: none; //@include appearance(none); } // .banner .logo:after (mobile) } // .banner .logo:after
// end keep together -------------------------------------- .light { color: $blue; font-weight: 300; } // .banner .logo .light } // .banner .logo .tagline { display: block; @include pad(em(24, 18) 0 em(28, 18)); @include respond-to(phones) { display: none; //@include appearance(none); } // .banner .tagline (mobile) } // .banner .tagline
}
.toggle { //-utilities position: absolute; top: $gutter; right: $gutter; @include size( $gutter * 2 ); border: em(1px) solid; @include interactive; // @extend %interactive span { display: block; height: 100%; background-clip: content-box; @include pad(10px 8px); //can't use ems because of @include hide-text background-position-y: -2px; @include background-image(linear-gradient($light 1px, transparent 1px)); //http://lea.verou.me/css3patterns/#lined-paper background-size: 100% 7px; @include hide-text; @include respond-to(phones) { @include background-image(linear-gradient($purple 1px, transparent 1px)); //http://lea.verou.me/css3patterns/#lined-paper } // .toggle .span (mobile) @include respond-to(retina) { @include background-image(linear-gradient($purple 3px, transparent 3px)); //http://lea.verou.me/css3patterns/#lined-paper background-size: 100% 28px; } } &:hover { border-color: $yellow; span { @include background-image(linear-gradient($yellow 1px, transparent 1px)); //http://lea.verou.me/css3patterns/#lined-paper // background-size: 100% 7px; } // .toggle:hover span } @include respond-to(phones) { top: $gutter / 2; right: $gutter / 2; border: none; }
}
//
// Filter
// -------------------------------------------------------------------
.filters { li { float: left; @include pad( $gutter / 2 ); width: em(125px); text-align: center; white-space: nowrap; @include interactive; // @extend %interactive &.selected, &:hover { background: $dark; color: $light; } } // .filters li li:not(:last-child) { border-right: em(1px) solid; @include respond-to(phones) { border-right: none; } } // .filters li:not(:last-child) .type { float: left; } .status, .views { float: right; }
}
.filter-buttons { // .filters ul @include clearfix; list-style-type: none; border: em(1px) solid;
}
@include respond-to(phones) { .filters { position: absolute; //top: 0; @include fill-parent; // width: 100%;
// z-index: 10; //use a var .container { display: none; background: rgba(black,.80) } &.open .container { display: block; } li { width: auto; color: $light; } li, .status, .type { float: none; } .views li { float: left; } .status { margin: $base-font-size auto; width: 70%; max-width: em(320px); border-color: #555; li { width: 50%; float: right; &:hover { background-color: #555; } } } .type { border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: em(1px) solid #555 !important; li { margin-left: $gutter; padding: em(14px) em(10px) em(12px) em(30px); text-align: left; &.selected { background: url(#{$base-url}#{$img-path}check.svg) no-repeat left center; background-size: $gutter; } &:not(:last-child) { border-bottom: em(1px) solid #555; } &:hover { background: none; //bg-img ??? } } } } .done { display: block; margin: $gutter auto; padding: $gutter / 2; width: 30%; max-width: em(140px); color: $light; text-align: center; border: em(1px) solid #555; @include interactive; // @extend %interactive }
} // @include media($mobile)
//
// Footer
// -------------------------------------------------------------------
#footer { background: $bright; @include respond-to(phones) { background: none; padding: 0 $gutter; } .copy { @include pad($gutter ($gutter * 3)); background: url(#{$base-url}#{$img-path}logo.svg) no-repeat; background-size: 3em; }
}
//
// Subway
// -------------------------------------------------------------------
@mixin subway { .marker { @include marker(); }
}
@mixin station {
}
@mixin marker() {
}
@include subway;
.subway { background: rgba(#00234a, .9); color: $light; overflow: hidden; @include pad(($gutter * 2) 0); @include respond-to(phones) { padding-top: $gutter * 4; } //@include respond-to(tablet-desktop) { //.container { //min-width: em(960, $font-size); //} //} .marker { font-size: em(12px, 16px); font-weight: bold; //@extend h5; color: $primary; @include uc; white-space: nowrap; &.north, &.south { @include pad(($gutter / 2) ($gutter * 2)); } // .subway .marker.north, .subway .marker.south &.north { //@include fill-parent; //@include span-columns($desktop-columns); //margin-bottom: $gutter; //em(30, $h5); background: url(#{$base-url}#{$img-path}arrow.svg) no-repeat; background-size: 24px; //$gutter ? } // .subway .marker.north &.kitchen, &.front-desk { @include span-columns(2); @include pad($gutter); //margin-top: em(20px, $h5); //margin-bottom: em(20px, $h5); border: 1px dashed; //ems don't work here... text-align: center; } // .subway .marker.kitchen, .subway .marker.front-desk &.line { @include span-columns(8); padding-top: em(55); border-bottom: 1px dashed; //ems don't work here... } // .subway .marker.line &.front-desk { @include omega; } // .subway .marker.front-desk &.south, &.all-agency { @include span-columns(2); @include respond-to(tablet-desktop) { margin-top: $gutter; } } // .subway .marker.south, .subway .marker.all-agency &.south { //right: 0; background: url(#{$base-url}#{$img-path}arrow-down.svg) no-repeat; background-size: 24px; //can we use ems? } // .subway .marker.south &.all-agency { margin-left: 53%; padding-top: em(10, $h5); padding-bottom: em(30, $h5); background: url(#{$base-url}#{$img-path}dotted-arrow.svg) no-repeat center 2.4em; background-size: 24px; //can we use ems? //text-align: center; } // .subway .marker.all-agency } ul.north, ul.south { list-style-type: none; //@include fill-parent; //@include span-columns($desktop-columns); // @include omega; } ul.north { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAE0lEQVQIW2Nk923+z4AFMA6kBAChygsLkoq5hQAAAABJRU5ErkJggg==) repeat-x 0 $gutter; //http://www.patternify.com/ } // ul.north ------------------------------------------- li { //@extend .h4; float: left; position: relative; @include size(em(48px) em(65px)); text-align: center; @include respond-to(phones) { height: em(72); } @include transition (opacity .8s $ease-out-quad); &:after { display: block; content: ""; margin: em(8px) auto 0; @include size($gutter); border-radius: 50%; background: $dark; border: em(6px) solid $gray; //@include transition (all .8s $ease-out-quad); //http://bourbon.io/docs/#timing-functions @include respond-to(phones) { margin-top: 0; @include size(em(36px)); border-width: em(9px); } } // li:after ----------------------------------------- &.available:after { border-color: $available-color; } &.occupied:after { border-color: $occupied-color; } &.purgatory:after { border-color: $purgatory-color; } &.person-found { //&:hover, &.available:after { border-color: tint($available-color, 25%); } &.occupied:after { border-color: tint($occupied-color, 25%); } &.purgatory:after { border-color: tint($purgatory-color, 25%); } &:before { position: absolute; bottom: 1px; //can we use ems? left: 50%; margin-left: -22px; //can we use ems? display: block; content: ""; @include size(42px); //can we use ems? border-radius: 50%; border: 1px dashed; //can we use ems? @include respond-to(phones) { @include size(73px); //can we use ems? left: 20px; //can we use ems? top: -10px; //can we use ems? } } } // li.person-found ----------------------------------------- } // li ------------------------------------------------- @include respond-to(min-device-width 768px min-width 768px) { // desktop & tablet #N-1, #S-1 { margin-left: -($gutter / 2); //-10px } #N-2, #N-5, #N-9, #N-12 { margin-left: em(29px); //1.2em = 18px } #N-18 { margin-right: -($gutter / 2); //-10px } ul.south { position: relative; } #S-15, #S-16 { position: absolute; left: 609px; //74%; //can we use ems? width: 76px; //can we use ems? text-align: right; span { display: block; margin-top: $gutter; } &:after { margin-top: -25px; //can we use ems? margin-left: 0; } &:hover:before { left: 20%; bottom: 15px; //can we use ems? } } #S-15 { top: 64px; //can we use ems? } #S-16 { top: 111px; //can we use ems? } #S-17 { margin-left: 135px; //can we use ems? } } @include respond-to(phones) { }
}
//
// Grid
// -------------------------------------------------------------------
//
// Detail
// -------------------------------------------------------------------
.mobileonly { display: none !important; @include respond-to(phones) { display: block !important; }
}
@include respond-to(phones) { .mobilehide { // display: none !important; /*display:none breaks prevents updateSubway() from being called */ // visibility: hidden; // height: 0 !important; // padding: 0 !important; position: absolute; top: -9999px; left: -9999px; /*wish I didn't have to do it this way... https://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/*/ }
}
[hidden] { display: none;
}
// check to see if $debug is true...
body { @include media-debug('default (desktop?)'); @include respond-to(phones) { @include media-debug('mobile') } @include respond-to(retina) { @include media-debug('retina mobile') } &.tablet { //seems to override tablet-desktop @include media-debug('tablet only') } @include respond-to(tablet-desktop) { @include media-debug('tablet & up') }
}

Huddle Space | Collaborate At Will - Script Codes JS Codes

var huddlerooms = [], socket = io.connect('http://solr.t1p1.com:3000'); $(function() { function buildRooms(rooms) { var total = rooms.rooms.length; for(i = 0; i < total;++i) { var room = rooms.rooms[i] huddlerooms.push({ id: room.internal_name, name: room.display_name, features: rooms.categories[room.category_id].features, overrides: room.override }); $('.rooms #'+room.display_name).data('features', rooms.categories[room.category_id].features) $('.rooms #'+room.display_name).data('overrides', room.override) //features( room.display_name, rooms.categories[room.category_id].features, room.override ) } } // buildRooms() // function features(id, features, overrides) { // console.log(id) // console.log(features) // //console.log(features.length) // if( overrides ) { // console.log(overrides) // //console.log(overrides.length) // } // $('#N-1').data('features', features) // //for( j = 0; j < features.length; j++) { // //$('#'+id).data(features[j], true) // //console.log(" $('#N-1').data("+data(features[j]+",true) ") // //} // } // Get rooms json and populate HTML $.ajax({ url: 'https://codepen.io/alyda/pen/qClus.html', //rooms.json async: false, dataType: 'json', success: function (response) { buildRooms(response); //console.log(huddlerooms) } }); // $.ajax() socket.on('mqtt', function (msg) { //var message = msg.topic; //var timestamp = Math.round((new Date()).getTime() / 1000); $('#message').html(msg.topic + ', ' + msg.flag); // $('#room-'+msg.topic+' .log').html('(Switch value: ' + msg.flag + ')'); if (msg.flag == 2) { // OCCUPIED $('.room-'+msg.topic).removeClass('available purgatory').addClass('occupied') // console.log("now occupied: room-"+msg.topic) //if items have been filtered, filter again. but first, check to see if state has changed $('.subway li').hasClass('dim') ? // console.log('filter again, now occupied') : null) $('.rooms').mixItUp('filter', currentFilters, updateSubway) : null ; } else if(msg.flag == 1) { // PURGATORY $('.room-'+msg.topic).removeClass('occupied available').addClass('purgatory') // console.log("now in purgatory: room-"+msg.topic+" no need to filter again?") } else { // AVAILABLE $('.room-'+msg.topic).removeClass('occupied purgatory').addClass('available') // console.log("now available: room-"+msg.topic) //if items have been filtered, filter again $('.subway li').hasClass('dim') ? $('.rooms').mixItUp('filter', currentFilters, updateSubway) : null ; } }); // socket.on()
/* $$\ \__|
$$$$$$\$$$$\ $$\ $$\ $$\
$$ _$$ _$$\ $$ |\$$\ $$ |
$$ / $$ / $$ |$$ | \$$$$ /
$$ | $$ | $$ |$$ | $$ $$<
$$ | $$ | $$ |$$ |$$ /\$$\
\__| \__| \__|\__|\__/ \__| */ // 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 }); // watch for changes in animation self.$container.on('mixStart', function(e, state){ //console.log('started') $(this).addClass('mixing') // if details is open, reattach to correct position. // if mix item with class of details-open is now hidden, remove class and detach details }) self.$container.on('mixEnd', function(e, state){ //console.log('finished') $(this).removeClass('mixing') // if details was hidden via js (and not by css w/ parent class of mixing) then unhide }) }, // 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( // toggleClass??? function(e){ $(this).siblings().addClass('unfocus'); }, function(e){ $(this).siblings().removeClass('unfocus'); } ) // $('.rooms li').hover() $('.views li').click(function(e){ if ( $(this).hasClass('grid') ) { $('.subway').addClass('mobilehide') $('#grid-north, #grid-south').removeClass('mobilehide') } else if ( $(this).hasClass('map') ) { $('#grid-north, #grid-south').addClass('mobilehide') $('.subway').removeClass('mobilehide') } $(this).addClass('selected').siblings().removeClass('selected') }) // $('.views li').click() $('.done, .select').click(function(){ $('.filters').toggleClass('open') }) // $('.done, .select').click()
// ----------------------------------------------- $('.rooms li.mix').click(function(){ var $this = $(this), //cache value $details = $('.details'), $visibleItems = $(".mix[style*='block']"), //style="display: inline-block" OR style !empty filteredIndex, // = $visibleItems.filter($this).index() + 1; // convert from 0-based index to 1 columns = 6, // DESKTOP row, position; $.grep($visibleItems, function(e){ if( $(e).attr('id') == $this.attr('id') ) { //console.log( $visibleItems.index( e ) ) //return $visibleItems.index( e ) filteredIndex = $visibleItems.index( e ) + 1; // convert from 0-based index to 1 } }) updateDetails($this); //console.log(filteredIndex) // MOBILE if ( $('body').hasClass('mobile') ) { //this probably isn't reliable columns = 3 } row = Math.ceil(filteredIndex / columns), //rounding up position = (row*columns); //we are using after, so we don't need + 1 if($this.hasClass('details-open')) { $('#grid-north').after( $details ) $details.css('display', '') } else { if( position > $visibleItems.length ) { $('.rooms').append( $details ) //append to correct div/ul by checking parent // $('.mix:last').after( $details ) } else { $($.makeArray($visibleItems)[position - 1]).after( $details ) // have to subtract 1 to account for mix of zero-based and 1-based indices... } $details.css('display', 'inline-block') $('.rooms li').removeClass('details-open'); //might not be a sibling... $this.siblings() } $this.toggleClass('details-open'); // $this.siblings().removeClass('details-open'); // $this.toggleClass('details-open'); // if( $this.hasClass('details-open') ) { // $this.append( $('.details.dark') ) // } else { // $this.removeClass('details-open'); // } }); var updateDetails = function(selector) { var $this = selector, $details = $('.details'), room = $this.attr('id'), side = room.indexOf('N') > -1 ? 'North Side' : 'South Side', type, floorplan, features = $this.data('features'), overrides = $this.data('overrides'); switch(true) { case $this.hasClass('category-1'): type = 'standing' //floorplan = 'category-1' break; case $this.hasClass('category-2'): type = 'lounge' //floorplan = 'category-1' break; case $this.hasClass('category-3'): type = 'table' //floorplan = 'category-1' break; case $this.hasClass('category-4'): type = 'open' //floorplan = 'category-1' break; } $details.find('.room').text(room) $details.find('.location').text(side) $details.find('.details-type').text(type) $details.find('.floorplan').attr('class', 'floorplan') //http://stackoverflow.com/a/5363310 $details.find('.floorplan').addClass(type) $details.find('.amenities li:not(.h3)').remove() for( i = 0; i < features.length; i++ ) { //console.log(features[i]) $details.find('.amenities').append('<li>'+features[i]+'</li>') } if(overrides) { for( i = 0; i < overrides.length; i++ ) { // console.log(overrides[i]) if( overrides[i].indexOf('-') > -1 ) { // console.log('remove: '+overrides[i]) $details.find('.amenities li:contains('+overrides[i].substring(1,overrides[i].length)+')').remove() } else { $details.find('.amenities').append('<li>'+overrides[i]+'</li>') } } } } $('.close').click(function(){ var $details = $('.details'); $('#grid-north').after( $details ) $details.css('display', '') $('.rooms').find('.details-open').removeClass('details-open'); }) }); // $.ready
Huddle Space | Collaborate At Will - Script Codes
Huddle Space | Collaborate At Will - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 29,037 Kb
Views 24,288
Do you need developer help for Huddle Space | Collaborate At Will?

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
Bootstrap Grid Configurator
Huddle Subway Map
Wire up a Backend
Recommendation slider
Lexus Email Templates
Evolve Game
Evolve Error Pages
CSS Patterns
Evolve Patterns
Evolve Media Gallery
Create amazing SEO content 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!