masonry leaves a lot of spaces

masonry leaves a lot of spaces - javascript

I'm trying to use Masonry, but it doesn't seem to work well. It leaves a lot of empty spaces. as you can see here
I already tried various other ways to implement Masonry, but this one leans the most to the result. Can someone help this rookie?
Here what I think is important of my HTML/ CSS/ JAVASCRIPT
<script src="masonry-docs/js/masonry.pkgd.min.js"></script>
<script type="text/javascript">// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
// options
columnWidth: 33%,
itemSelector: '.grid-item'
});</script>
.grid-item{width: 33%;}
.grid-item--width2{width: 33%;}
.grid-item--width3{width: 33%;}
*{box-sizing:border-box;}
.box-sizing:border-box;
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-item {
width: 33%;
float: left;
border: 5px solid #FFFFFF;
}
.grid-sizer,
.grid-item {
width: 33%;
}
<section id="werk">
<div class="container">
<div class="grid">
<div class="item">
<div id="masonry-grid">
<div class="grid-item">
<h3>Manifesta 10</h3>
<span class="category">huisstijl</span>
<img src="images/manifesta.jpg" alt="" />
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Deutsche Grammophon</h3>
<span class="category">platenhoezen</span>
<img src="images/GIF_1.gif" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width3">
<h3>Ghent Art Book Fair</h3>
<span class="category">poster</span>
<img src="images/boekposter.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item">
<h3>teaser masterproef</h3>
<span class="category">foto</span>
<img src="images/masterproef.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Mundaneum</h3>
<span class="category">publicatie</span>
<img src="images/Mundaneum.gif" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>

Your h3 Element has a margin, add this a the beginning of your CSS-Code:
h3 { margin: 0px; }
Your .grid-item has a border of 5px, change it in your CSS-Code:
.grid-item {
width: 33%;
float: left;
border: 0px solid #FFFFFF;
}

Related

How to get the images to be the same size using Isotope JS

I am using Isotope JS and I am trying to get an evenly spaced, proportional gallery layout but I am not sure what is wrong. My code isn't cooperating with isotope. I would be very grateful if someone could help me figure out what I am doing wrong.
I created a codepen if that would help as well: https://codepen.io/jaytb95/pen/vYxMGqP
$(document).ready(function() {
$grid = $('.grid').isotope({
filter: '*',
itemSelector: '.grid-item',
layoutMode: 'fitRows',
percentPosition: true
});
$filters = $('.list');
$filters.click(function() {
$value = $(this).attr('data-filter');
if ($value == 'all') {
$grid.isotope({ filter: '*' });
} else {
$grid.isotope({ filter: '.' + $value });
}
});
});
ul {
display: flex;
list-style: none;
justify-content: center;
margin-top: 25px;
}
ul > li {
margin-left: 15px;
cursor: pointer;
padding: 0.5rem 1rem;
background-color: crimson;
color: white;
font-family: 'Calibri',sans-serif;
}
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vh;
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout#3.0.6/dist/isotope.pkgd.min.js"></script>
<ul>
<li class="list" data-filter="all">All</li>
<li class="list" data-filter="phone">Phone</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
</ul>
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>

You should initialize Isotope after all the images have loaded. This means that you also have to include the imagesLoaded library in your code.
Also, to make the images proportional and evenly spaced, set the width of each .grid-item class to 50%, set the width of each image to calc(100% - 0.25rem), and change the layout mode to masonry. Your "image gallery" should work just fine after this:
$(document).ready(function() {
$grid = $(".grid").imagesLoaded(function() {
$grid.isotope({
filter: "*",
itemSelector: ".grid-item",
layoutMode: "masonry",
percentPosition: true
});
});
$filters = $(".list");
$filters.click(function() {
$value = $(this).attr("data-filter");
if ($value == "all") {
$grid.imagesLoaded(function() {
$grid.isotope({ filter: "*" });
});
} else {
$grid.imagesLoaded(function() {
$grid.isotope({ filter: "." + $value });
});
}
});
});
ul {
display: flex;
list-style: none;
justify-content: center;
margin-top: 25px;
}
ul > li {
margin-left: 15px;
cursor: pointer;
padding: 0.5rem 1rem;
background-color: #dc143c; /* crimson */
color: #fff; /* white */
font-family: "Calibri", sans-serif;
}
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vw;
}
.grid-item {
width: 50%;
}
.grid-item img {
object-fit: cover;
-o-object-fit: cover;
width: calc(100% - 0.25rem);
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout#3.0.6/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4.1.4/imagesloaded.pkgd.min.js"></script>
<ul>
<li class="list" data-filter="all">All</li>
<li class="list" data-filter="phone">Phone</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
</ul>
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
</div>
</div>

Bootstrap + Masonry Incorrect Stacked Images

Hello and thanks in advance for the help. Here's a link to the site in question: caulfield.co/test/originals.html
I'm attempting to use Masonry to create a gallery on a Bootstrap 4 built site. When loading on local server, the masonry shows as desired, see image:
But when uploading the site to a shared hosting account, the images display incorrectly. See the first link here.
My html, css, and js is a slight customization of Masonry's original code:
HTML:
<section id="available">
<h1>Originals</h1>
<div class="line-separator-sm"></div>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item two-to-one">
<img src="images/available/1.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/2.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-one">
<img src="images/available/3.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item four-to-five">
<img src="images/available/4.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/5.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-two">
<img src="images/available/6.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-one">
<img src="images/available/7.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/8.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item five-to-eight">
<img src="images/available/9.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-one">
<img src="images/available/10.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item two-to-three">
<img src="images/available/11.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/12.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-one">
<img src="images/available/13.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item two-to-one">
<img src="images/available/14.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/15.jpg" width="100%" height="auto"/>
</div>
</div>
</section>
CSS:
/* ---- grid ---- */
.grid {
max-width: 1200px;
margin: 0 auto;
box-shadow:0px 0px 2px #888;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-sizer,
.grid-item {
width:20px;
}
.grid-item {
margin:5px;
}
.one-to-one { width: 150px; height: 150px; }
.one-to-two { width: 150px; height: 300px; }
.two-to-one { width: 300px; height: 150px; }
.two-to-three { width: 150px; height: 225px; }
.three-to-two { width: 225px; height: 150px; }
.three-to-five{ width: 150px; height: 250px; }
.five-to-three{ width: 250px; height: 150px; }
.four-to-five { width: 150px; height: 187.5px; }
.five-to-four { width: 187.5px; height: 150px; }
.five-to-eight{ width: 150px; height: 240px; }
.eight-to-five{ width: 240px; height: 150px; }
JS:
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
horizontalOrder: true,
fitWidth: true
});
Any ideas what I've done wrong?

The answer is simple. Thanks to #ksav I used the inspector to discover the 404 errors caused by an incorrect <script> paths. They were written as /js/... and correcting them to js/... did the trick. Thank you!

Create slider like infinite scrolling with CSS

I am trying to create CSS slider infinite scroll, but without appending/adding/creating DOM elements. Infinite scroll as in when the last slide is reached, the first slide should be shown again after it.
I have a fixed width slide, so the use of slick and box slider plugin does not work for me.
.slider-wrap {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid red;
}
.slider-wrap .slide {
display: inline-block;
width: 200px;
margin: 5px;
}
.slider-wrap .slide img {
width: 100%;
}
<div class="slider-wrap">
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
</div>

Here are two options:
clone the items: you get a more natural approach (cloning isn't that bad). That's the system you would usually find on websites to add more content.
revert the position scroll position to another position to make it seem the slider never ends. Beware this will not make the scroll bar smaller as the content of the slider never gets changed
(a) Cloning
As you said you can clone the images.
The trick is to determine when the scroll has reached the end of the slider to clone more images in:
$(function() {
$('.slider-wrap').scroll(function() {
const slider = $(this);
width = slider.innerWidth()
scrollWidth = slider[0].scrollWidth;
scrollLeft = slider.scrollLeft();
if(scrollWidth - width == scrollLeft) {
slider.children().clone().appendTo(slider);
}
});
});
.slider-wrap {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid red;
}
.slider-wrap .slide {
display: inline-block;
width: 200px;
margin: 5px;
}
.slider-wrap .slide img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrap">
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
And here's a demo:
$(function(){$('.slider-wrap').scroll(function(){const slider=$(this);var $width=slider.innerWidth()
var $scrollWidth=slider[0].scrollWidth;var $scrollLeft=slider.scrollLeft();if($scrollWidth-$width==$scrollLeft){slider.children().clone().appendTo(slider)}})})
.slider-wrap{white-space:nowrap;overflow-x:auto;overflow-y:hidden;border:1px solid red}.slider-wrap .slide{display:inline-block;margin:5px}.slider-wrap .slide img{height:120px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="slider-wrap"> <div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4e2VF6cfou9oL0cc5OAzVTEbmAgFjIW2r-7lTkpOljG9k38N"> </div><div class="slide"> <img src="https://nbocdn.akamaized.net/Assets/Images_Upload/2018/01/06/0060bbce-f2f2-11e7-bf60-029def90d6d6_web_scale_0.0542636_0.0542636__.jpg?maxheight=460&maxwidth=638&scale=both"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr0xQ-gVF1Sy1a1sHoUyfGdrBwyz-5u0Tirkt-uNCKd-AzNXY1ww"> </div><div class="slide"> <img src="https://cdn.pixabay.com/photo/2017/05/29/15/34/kitten-2354016_960_720.jpg"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJLwVbVu6tjubsduR43je-Muk7p8lAKDu569GuL_yDWGzrZwp2"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRHeW6zNDdDQBwtpuu3RvLW1ihM3Za-OLBoOMRR_4z7GvwYor2eQ"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKeCmurlUrTtd4CjvXYskGVAUAiDq5X49iNb3XhOcMss2vN8c6"> </div></div>
(b) A hack with scrollLeft
You could also go straight back to the first slide container by setting the scrollLeft to the position when it first added a new slide container:
let firstPos = undefined;
$('.slider').scroll(function() {
const slider = $(this);
width = slider.innerWidth()
scrollWidth = slider[0].scrollWidth;
scrollLeft = slider.scrollLeft();
isEndOfSlider = (scrollWidth - width) == scrollLeft;
numberOfWraps = slider.children().length;
if(isEndOfSlider) {
if(numberOfWraps == 1) {
firstPos = scrollLeft;
slider.children().first().clone().appendTo(slider);
} else {
slider.scrollLeft(firstPos);
}
}
});
.slider {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid red;
}
.slider-wrap {
display: inline-block;
}
.slider-wrap .slide {
display: inline-block;
width: 200px;
margin: 5px;
}
.slider-wrap .slide img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider-wrap">
<div class="slide">1
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">2
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">3
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">...
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">...
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">-2
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">-1
<img src="http://via.placeholder.com/350x150">
</div>
</div>
</div>
Here's a demo:
let firstPos=undefined;$('.slider').scroll(function(){const slider=$(this);width=slider.innerWidth()
scrollWidth=slider[0].scrollWidth;scrollLeft=slider.scrollLeft();isEndOfSlider=(scrollWidth-width)==scrollLeft;numberOfWraps=slider.children().length;if(isEndOfSlider){if(numberOfWraps==1){firstPos=scrollLeft;slider.children().first().clone().appendTo(slider)}else{slider.scrollLeft(firstPos)}}})
.slider{white-space:nowrap;overflow-x:auto;overflow-y:hidden;border:1px solid red}.slider-wrap{display:inline-block}.slider-wrap .slide{display:inline-block;margin:5px}.slider-wrap .slide img{width:auto;height:120px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="slider"> <div class="slider-wrap"> <div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4e2VF6cfou9oL0cc5OAzVTEbmAgFjIW2r-7lTkpOljG9k38N"> </div><div class="slide"> <img src="https://nbocdn.akamaized.net/Assets/Images_Upload/2018/01/06/0060bbce-f2f2-11e7-bf60-029def90d6d6_web_scale_0.0542636_0.0542636__.jpg?maxheight=460&maxwidth=638&scale=both"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr0xQ-gVF1Sy1a1sHoUyfGdrBwyz-5u0Tirkt-uNCKd-AzNXY1ww"> </div><div class="slide"> <img src="https://cdn.pixabay.com/photo/2017/05/29/15/34/kitten-2354016_960_720.jpg"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJLwVbVu6tjubsduR43je-Muk7p8lAKDu569GuL_yDWGzrZwp2"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRHeW6zNDdDQBwtpuu3RvLW1ihM3Za-OLBoOMRR_4z7GvwYor2eQ"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKeCmurlUrTtd4CjvXYskGVAUAiDq5X49iNb3XhOcMss2vN8c6"> </div></div></div>

How to change content after clicking

I'm working on palette board project and struggling when changing to the different theme.
Initial page will have a warm color palette, but I want to change this after clicking All theme.
You will have the option to choose differently if you tab warm drop-down menu.
Below you will find images that I imagine.
* {
box-sizing:border-box;
}
body {
margin:0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition:all 0.3s;
transform:translateX(0);
z-index:1;
}
[data-page='0'] .board-nav-indicator {
transform:translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform:translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform:translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position:relative;
z-index:2;
}
.board-pages {
position:absolute;
top:75px;
left:0;
width:100%;
height:calc(100% - 75px);
overflow:hidden;
}
.board-page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 0.4s;
transform:translateX(0);
overflow:auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex:0 1 25%;
padding:6px;
}
.grid-item-theme {
flex:0 1 25%;
padding:6px;
}
.grid-row {
overflow-x:auto;
white-space:nowrap;
}
.grid-row .grid-item {
display:inline-block;
max-width:110px;
}
.grid-item-content {
text-align:left;
font-family: "mr-eaves-modern";
font-size:0.3rem;
text-transform:uppercase;
}
.pick-palette img{
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
/* The Modal (background) */
.modal-inside {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content-theme {
background-color: #fff;
margin: 10% auto; /* 15% from the top and centered */
padding: 20px;
border-radius:4px 4px 4px 4px;
width: 70%;
height: 430px;
}
/* The Close Button */
.close-theme {
color: #000000;
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
font-size: 28px;
font-weight: bold;
}
.close-theme:hover,
.close-theme:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.theme-list-dropdown {
color: #BDBEC1;
text-transform: uppercase;
font-family: "mr-eaves-modern";
font-size: 0.9rem;
text-align: center;
}
.theme-list-name {
padding: 20.5px;
}
#all-theme-list-name {
margin-top: -5px;
}
#warm-theme-list-name {
color: #262931;
/* background-color: #EEEEEF;*/
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu"><div id="themeBtn" class="theme-warm">Warm</div><i class="material-icons">keyboard_arrow_down</i></div>
<!-- The Modal -->
<div id="myModal" class="modal-inside">
<span class="close-theme">×</span>
<div class="modal-content-theme">
<div class="theme-list-dropdown">
<div class="theme-list-name" id="all-theme-list-name">All</div>
<div class="theme-list-name">Bright</div>
<div class="theme-list-name">Dark</div>
<div class="theme-list-name" id="warm-theme-list-name">Warm</div>
<div class="theme-list-name">Cool</div>
<div class="theme-list-name">Pastel</div>
<div class="theme-list-name">Neon</div>
</div>
</div>
</div>
<!-- End: The Modal -->
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<!-- <i class="material-icons more-icon">more_horiz</i> -->
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">Newly added</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-pale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Pale Blue
</div>
</div>
<div class="grid-item grid-moss">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Moss Green
</div>
</div>
<div class="grid-item grid-melon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Melon
</div>
</div>
<div class="grid-item grid-chiffon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Chiffon
</div>
</div>
<div class="grid-item grid-island">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Island
</div>
</div>
<div class="grid-item grid-dogwood">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Dogwood
</div>
</div>
<div class="grid-item grid-greenery">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Greenery
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">All Warm Colors</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-ivory">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Ivory
</div>
</div>
<div class="grid-item grid-honeydew">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Honeydew
</div>
</div>
<div class="grid-item grid-lavender">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lavender
</div>
</div>
<div class="grid-item grid-canary">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Canary
</div>
</div>
<div class="grid-item grid-hazelnut">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Hazelnut
</div>
</div>
<div class="grid-item grid-kale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Kale
</div>
</div>
<div class="grid-item grid-sharkskin">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content sharkskin">
Sharkskin
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
$(".board-pages .grid-item").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
$(".board-pages .grid-item-pattern-board").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
</script>
<!-- Dropdown Theme -->
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
// var btn = document.getElementById("themeBtn");
var btn = document.getElementById("themeBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-theme")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Header not staying in place

I've positioned the header of my page to be always at the top by using
position:fixed;
This works perfectly fine, but not on Chrome on my android devices. The header get's pushed away by something and is placed where it shouldn't be: a few 100 pixels from the top instead of 0 pixels from the top.
My guess is that it's caused because of some javascript i'm using. The first piece of javascript is when a user presses an icon a menu shows up, this is the code:
<script type="text/javascript">
$(document).ready(function() {
$('#toggle').click(function(){
$('div.showhide').toggle();
});
});
</script>
The second code is when a user scrolls away from the header the header closes:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function() { $('.showhide').fadeOut("fast");
});
});//]]>
</script>
This is my page code:
<div class="showhide">
<div class="menubg">
<div class="menu">
<div class="container">
<div class="item">
<div class="img">
<a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;" src="img/conversations.png" alt="conversations" />
</div>
<p>Gesprekken</a></p>
</div>
<div class="item">
<div class="img">
<a href="home.cfm" style="color: white; text-decoration: none;"> <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
</div>
<p>Vrienden</a></p>
</div>
<div class="item">
<div class="img">
<a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
</div>
<p>Ik</a></p>
</div>
<div class="clear"></div>
<div class="item">
<div class="img">
<img src="img/HC.gif" alt="reception" />
</div>
<p>Receptie</p>
</div>
<div class="item">
<div class="img">
<a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
</div>
<p>Instellingen</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="headbg">
<div class="header">
<a href="#">
<img src="img/conversations.png" alt="conversations" class="nav left" />
</a>
<a href="#">
<img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
</a>
<a href="#">
<img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
</a>
</div>
</div>
<div class="content">
</div>
// Page continues after this but it isn't causing the problem
Forgot to add it, but this is my css code:
.menubg {
width: 100%;
background-color: #201d19;
}
.menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
}
.showhide {
display: none;
}
.container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
}
// This is not all the css, if it's needed i'll add it
If anyone could help me out with this problem i would appreciate it!

I've created a sample fiddle with header and content div.
#header
{
position:fixed;
...
top:0;
left:0;
}
#content
{
margin-top:set your header height;
}

Develop Reference

JavaScript is the programming language of the Web.

masonry leaves a lot of spaces - javascript

Your h3 Element has a margin, add this a the beginning of your CSS-Code: h3 { margin: 0px; } Your .grid-item has a border of 5px, change it in your CSS-Code: .grid-item { width: 33%; float: left; border: 0px solid #FFFFFF; }

Related

How to get the images to be the same size using Isotope JS

Bootstrap + Masonry Incorrect Stacked Images

Create slider like infinite scrolling with CSS

How to change content after clicking

Header not staying in place

Categories

Resources