Slider bad shifting - javascript

I have this slider that i'm using, whenever i click the next or previous buttons it shifts in a way covering some elements of my website. I believe the problem in the #mask and i tried to change a bit in it but without any difference, any idea on if it's causing the problem or something else? and any solution?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gallery</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="">
<style>
body {
margin: 0;
}
#wrapper {
width: 100%;
height: 350px;
/*position: absolute;*/
top: 0;
left: 0;
background-color: white;
overflow: hidden;
}
#nav p {
position: absolute;
top: 100px;
cursor:pointer;
color:grey;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 50000px;
height: 100%;
background-color: white;
}
.item {
width: 1200px;
height: 100%;
float: left;
background-color: white;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
.content {
width: 50%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<h1><p id="prev"><</p></h1>
<h1><p id="next">></p></h1>
</div>
<div id="mask">
<div id="item1" class="item"> <a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot1" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var newItem = 0;
var itemCount = $('.item').length;
function shift(direction) {
var $mask = $('#mask'),
$items = $('.item'),
currentItem = $mask.data('currentItem');
if (currentItem === undefined) {
currentItem = 0;
}
$mask.data('currentItem', newItem).animate({
marginLeft: -newItem * $items.eq(0).width()
});
}
$('#prev').click(function () {
if (newItem === 0) {
newItem = itemCount - 1;
} else {
newItem--;
}
return shift();
});
$('#next').click(function () {
if (newItem === itemCount - 1) {
newItem = 0;
} else {
newItem++;
}
return shift();
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
$('#wrapper, .item').css({
width: width,
height: height
});
}
$(window).resize(function () {
resizePanel();
});
resizePanel();
});
</script>
</body>
</html>
JSFIDDLE: https://jsfiddle.net/ew98y5fv/


I have modified you html:
<body>
<div id="wrapper">
<div id="slider-container">
<div id="nav">
<p id="prev"><</p>
<p id="next">></p>
</div>
<div class="slider-view-area">
<div id="mask">
<div id="item1" class="item"> <a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot1" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is the css:
body {
margin: 0;
}
#wrapper {
background-color: blue;
padding: 20px 0;
}
#slider-container {
padding: 20px 50px;
height: 350px;
background-color: white;
overflow: hidden;
position: relative;
}
.slider-view-area {
overflow: hidden;
}
#nav p {
position: absolute;
top: 100px;
cursor:pointer;
color:grey;
}
#prev {
left: 20px;
font-size: 30px;
}
#next {
right: 20px;
font-size: 30px;
}
#mask {
width: 50000px;
height: 100%;
background-color: white;
}
.item {
width: 1200px;
height: 100%;
float: left;
background-color: white;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
.content {
width: 50%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
I removed h1 tags around your navigation elements because you should not use header tags for display changes like making the icons look bigger. For that you should use css. h1 tags will be semantically incorrect in this case, because a navigation element is not a primary header.
I have just gone for a quick fix. But its the direction you should take if you want to make the slider into an independent component in your page.
Here is the jsfiddle: https://jsfiddle.net/ew98y5fv/3/

Related

Image on back card not showing when flipped, JS memory game

When the user clicks on one of playing cards in this memory game, it fires off a flipCard function that transforms the card along the Y axis by 180deg, essentially showing the rotating the image that is hidden on the back and making it visible in the front. My eventListener and the flipCard function is working but there's a problem with the CSS because the back image won't appear. Despite it only supposed to rotate 180deg, the image on the front rotates and still appears on the front after flipCard is invoked. Can someone take a look at my CSS and suggest how to make the back image appear?
const cards = document.querySelectorAll('.card');
function flipCard(){
this.classList.toggle('flip');
}
cards.forEach(card => card.addEventListener('click', flipCard));
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bungee Shade', cursive;
background-color: cornflowerblue;
}
body{
height: 100vh;
text-align: center;
font-size: 40px;
overflow: hidden;
}
h1{
color: black
}
h1:hover{
color:blue;
}
.card{
display: inline-block;
position: relative;
transform: scale(1);
transition: transform .5s;
width: 130px;
height: 130px;
background-color: black;
border: 5px double #000000;
border-radius: 10px;
cursor: pointer;
margin: auto;
perspective: 500px;
transition: transform 500ms ease-in-out;
}
.card.flip {
transform: rotateY(-180deg);
}
.card-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
background-color: black;
transform: rotateY(180deg);
}
/*
.card .card-back,
.card .card-front{
transition: transform 300ms ease-in;
}
.card-front, .card-back{
position: absolute;
justify-content: center;
align-items: center;
display: flex;
backface-visibility: hidden;
}
*/
.overlay{
font-size: 20px;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<h1>Memory Game</h1>
<section class="gameboard">
<div class="row">
<div class="card" id = "monster1">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="1" img src="monster1.png">
</div>
<div class="card" id = "monster8">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id = "monster3">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id = "monster5">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
</div>
<div class="row">
<div class="card" id = "monster6" >
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="6" img src="monster6.png">
</div>
<div class="card" id = "monster4">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id = "monster8">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id = "monster1">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="1" img src="monster1.png">
</div>
</div>
<div class="row">
<div class="card" id = "monster3">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id = "monster5">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
<div class="card" id = "monster4">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id = "monster6">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="6" img src="monster6.png">
</div>
</div>
</section>
<div class="overlay">
<h1>Great job! đŸ„ł </h1>
</div>
<script src="index.js"></script>
</body>
</html>

Center div with items laid out using grid on mobile version

I have the following code:
function seeMore() {
window.location("https://inderatech.com/index.html")
}
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
place-items: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<input type="submit" class="btn btn-defeault btn-send" value="See More">
</div>
On the desktop version, it looks okay, but if it is rendered on narrower screen, then you can see it is not horizontally centered on the page properly. What should I change in my CSS to center the div on the page?

Using flexbox allows you to automatically wrap the items. (See CSS under your “Irrelevant styling” comment.)
Using grid could seem to be good idea, because it is “modern”, but using grid usually makes sense when you want to create layout with multiple item types. Flexboxes are typically useful when you want to lay out something into columns or rows automatically without setting fixed column count.
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<input type="submit" class="btn btn-defeault btn-send" value="See More">
</div>
<script>
function seeMore() {
window.location("https://inderatech.com/index.html")
}
</script>

Icon appears when selecting an image

I'm working on the palette project and trying to appear icon when selecting an image.
Icon is now placed next to beige, but I'm struggling to make it disappear when not selecting an image.
Below images describe how I imagine for this project.
Please help.
* {
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;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
<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">Warm<i class="material-icons">keyboard_arrow_down</i></div>
<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>

1st you can add same event to different selector like this:
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item") seperate by ,
2nd I check if the clicked one already has class means it is active already, then I deactive all. If not active yet, deactive all then active this one.
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() {
if ($(this).hasClass("pick-palette")) {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
} else {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
}
});
* {
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;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
<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">Warm<i class="material-icons">keyboard_arrow_down</i></div>
<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-pattern-board, .board-pages .grid-item").on("click", function() {
if ($(this).hasClass("pick-palette")) {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
} else {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
}
});
</script>

How to display multiple images just below the "main image" in same page

I have created one "main image" in Html. Now i wanted to display multiple images just below the "main image" when i click on "main image" on the same page. this is my below code which create one "main image" in Html.
<html>
<body>
<p>The image is a link.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>
How to display multiple images just below the "main image" in same page?

$(document).ready(function() {
$('.thumbs').hide();
$('.main-image').on('click', function(){
$('.thumbs').show();
});
});
.outer {
width:600px;
float:left;
}
.main-image ,
.main-image img {
width:100%;
float:left;
overflow:hidden;
}
.thumbs {
width:100%;
float:left;
margin-top:15px;
}
.thumbs img {
display:inline-block;
width:100px;
margin-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
<div class="main-image">
<img src="about.jpg" alt="about" />
</div>
<div class="thumbs">
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
</div>
</div>
this is work for me

this is what you want ?
https://jsfiddle.net/bfahmi/2m16vjj1/3/
$(document).ready(function() {
$('.featured-image').on('click', '#btn-display', function() {
if ($('.gallery').is(':visible')) $('.gallery').hide();
else $('.gallery').show();
});
});
.images {
width: 50%;
padding: 0 auto;
}
.featured-image,
.gallery {
width: 100%;
text-align: center;
}
.gallery {
display: none;
margin: 10px 0;
}
.featured-image img {
width: 100%;
max-width: 300px;
}
.gallery img {
width: 20%;
max-width: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="images">
<div class="featured-image">
<a id="btn-display" href="#">
<img src="https://placehold.it/300x300/?text=featured-image">
</a>
</div>
<div class="gallery">
<img src="https://placehold.it/300x300/?text=image-1">
<img src="https://placehold.it/300x300/?text=image-2">
<img src="https://placehold.it/300x300/?text=image-3">
<img src="https://placehold.it/300x300/?text=image-4">
</div>
</div>

You can achieve your goal with a following code:
img {
width:42px;
height:42px;
border:0;
}
a {
text-decoration:none;
}
<p>The image is a link.</p>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<div>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
</div>

Manipulate a slider with next and previous

Can this slider be manipulated so that by clicking on a button it'll go to the previous item, and next to the next item?
Currently it's possible to move between dividers through links ("1 2 3 4 5") in the first divider, and go back to the first divider through a "back" link on each divider.
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
1
2
3
4
5
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">back</div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">back</div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">back</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JavaScript:
$(document).ready(function () {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({
width: width,
height: height
});
$('#mask').css({
width: mask_width,
height: height
});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}

You need to remove nav links from items and create separated nav panel with buttons.
$(document).ready(function () {
function shift(direction) {
var
$mask = $('#mask'),
items = $('.item').size(),
currentItem = $mask.data('currentItem'),
newItem;
if (currentItem == undefined) {
currentItem = 0;
}
newItem = currentItem + direction;
$mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem});
if (newItem == 0) {
$("#prev").prop('disabled', true);
} else {
$("#prev").prop('disabled', false);
}
if (newItem == items - 1) {
$("#next").prop('disabled', true);
} else {
$("#next").prop('disabled', false);
}
}
$('#prev').click(function() {
return shift(-1);
});
$('#next').click(function() {
return shift(1);
});
});
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#nav button {
position: absolute;
top: 100px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="nav">
<button id="prev" disabled><<<</button>
<button id="next">>>></button>
</div>
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
</div>
</div>
This solution is not finished. It doesn't cosider window resizing.

Categories

Resources