Center div with items laid out using grid on mobile version - javascript

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>

Related

Dynamic Image Modal with active state

I have image folders that expand when clicked on to view the whole album. I've been able to make the first album work, but I cant seem to get the active state to carry over to the other albums.
My JavaScript knowledge is quite limited so I'm unsure where I'm going wrong with this, but the goal here is to have a grid showcasing thumbnails for different image collections and when a collection is clicked on, the modal will popup and dynamically display the collection of images that was clicked on.
const modal = document.querySelector(".modal");
const buttons = document.querySelectorAll("[data-carousel-button]");
const carousel = document.querySelector(".carousel");
const closeButton = document.querySelector(".close");
const gridImages = document.querySelectorAll(".grid-img img");
const slide = document.querySelector(".slide");
const blueLotusFineArt = document.querySelector(".one");
const blueLotusModal = document.querySelector(".blue-lotus");
const greenWomenFineArt = document.querySelector(".two");
const greenWomenModal = document.querySelector(".green-women");
buttons.forEach((button) => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1;
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]");
const activeSlide = slides.querySelector("[data-active]");
let newIndex = [...slides.children].indexOf(activeSlide) + offset;
if (newIndex < 0) newIndex = slides.children.length - 1;
if (newIndex >= slides.children.length) newIndex = 0;
slides.children[newIndex].dataset.active = true;
delete activeSlide.dataset.active;
});
});
// select image from grid
// only display selected gallery
gridImages.forEach((gridImage) => {
gridImage.addEventListener("click", () => {
modal.classList.add("open");
closeButton.classList.add("open");
carousel.style.display = "block";
});
});
blueLotusFineArt.addEventListener("click", () => {
blueLotusModal.style.display = "block";
});
greenWomenFineArt.addEventListener("click", () => {
greenWomenModal.style.display = "block";
slide.style.opacity = "1";
});
closeButton.addEventListener("click", () => {
carousel.style.display = "none";
closeButton.classList.remove("open");
modal.classList.remove("open");
blueLotusModal.style.display = "none";
greenWomenModal.style.display = "none";
});
section {
min-height: 100vh;
}
img,
picture {
max-width: 100%;
display: block;
}
.flex {
display: flex;
gap: 4rem;
}
#fine-art {
position: relative;
z-index: 2;
background-color: var(--clr-primary);
min-height: auto;
}
.container {
padding-inline: 4em;
margin-inline: auto;
max-width: 120rem;
}
.wrapper {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 2rem;
padding: 4rem 0;
}
.grid {
display: grid;
gap: var(--gap, 1rem);
}
.modal {
opacity: 0;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(43, 43, 43, 0.5);
transition: all 300ms ease-in-out;
pointer-events: none;
backdrop-filter: blur(10px);
display: grid;
place-items: center;
}
.modal.open {
opacity: 1;
pointer-events: all;
}
.close {
position: fixed;
right: 32px;
top: 50px;
width: 50px;
height: 32px;
opacity: 0;
z-index: 20;
pointer-events: none;
transition: all 300ms ease-in-out;
cursor: pointer;
}
.close.open {
opacity: 1;
pointer-events: all;
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 50px;
width: 5px;
background-color: var(--clr-primary);
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.blue-lotus,
.green-women {
display: none;
pointer-events: none;
}
.carousel {
width: 100vw;
height: 80vh;
position: absolute;
z-index: 10;
display: none;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide > img {
height: 100%;
object-fit: contain;
object-position: center;
border-radius: 4px;
}
.slide[data-active] {
opacity: 1;
transition-delay: 0ms;
}
.carousel-button {
position: absolute;
background: none;
border: none;
font-size: 4rem;
top: 50%;
z-index: 11;
transform: translateY(-50%);
color: rgba(241, 242, 245, 0.5);
cursor: pointer;
border-radius: 0.25rem;
padding: 0 0.5rem;
background-color: rgba(43, 43, 43, 0.1);
}
.carousel-button:hover,
.carousel-button:focus {
color: rgba(241, 242, 245, 1);
background-color: rgba(43, 43, 43, 0.2);
}
.carousel-button.prev {
left: 1rem;
}
.carousel-button.next {
right: 1rem;
}
<section id="fine-art">
<div class="container fine-art">
<div class="wrapper grid">
<div class="grid-img one">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Blue Lotus</p>
</div>
<div class="grid-img two">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Green Women</p>
</div>
<div class="grid-img three">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Studio</p>
</div>
<div class="grid-img four">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Starlet</p>
</div>
<div class="grid-img five">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Portraits</p>
</div>
<div class="grid-img six">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Chameleon</p>
</div>
<div class="grid-img seven">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>De Kelders</p>
</div>
<div class="grid-img eight">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Elementals</p>
</div>
<div class="grid-img nine">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Mosaic</p>
</div>
</div>
</div>
</section>
<a class="close"></a>
<div class="modal">
<div class="carousel" data-carousel>
<button class="carousel-button next" data-carousel-button="next">
⇨
</button>
<button class="carousel-button prev" data-carousel-button="prev">
⇦
</button>
<ul class="blue-lotus" data-slides>
<li class="slide" data-active>
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 1"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 2"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 3"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 4"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 5"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 6"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
</ul>
<ul class="green-women" data-slides>
<li class="slide" data-active>
<img
src="https://source.unsplash.com/random"
alt="Green Women 1"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Green Women 2"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Green Women 3"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
</ul>
</div>
</div>

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>

Slider bad shifting

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/

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.

Hide all divs by default on pageload, display:none doesn't appear to work

For some reason, i can't get this div to be hidden by default. I want the page to be loaded and no divs to be visible until the user clicks one of the 3 links however by default the first div 'newboxes1' is always visible.
the div id id 'newboxes' and the class is telling 'newboxes' to 'display:none' so I can't see why it wouldn't work.
HTML
<div style="background-color: #ffffff; padding: 5px; width: 100px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" ><strong>1</strong> </a>
</div>
<div class="newboxes" id="newboxes1" style="background-color: #ffffff; display: block;padding: 5px; width: 426px; margin-left:6px; background-color:#f4f2f2;">
<img src="" width="241" height="36">
<p class="intro">title</p><br>
<p>text here<br><br>
<img src="" alt="" width="200" height="31" style="float:left;">
<img class="reg_box" src="" alt="" width="200" height="31"><br>
</div>
<div style="background-color: #ffffff; padding: 5px; width: 240px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" ><strong>2</strong> </a>
</div>
<div class="newboxes" id="newboxes3" style="background-color: #ffffff; display: none;padding: 5px; width: 426px; margin-left:6px;">
<img src="" width="241" height="36">
<p class="intro">title 2</p><br>
<p>text here<br><br>
<img src="" alt="" width="200" height="31" style="float:left;">
<img class="reg_box" src="" alt="" width="200" height="31"><br>
</div>
<div style="background-color: #ffffff; padding: 5px; width: 100px;">
<a id="myHeader4" href="javascript:showonlyone('newboxes4');" ><strong>3</strong> </a>
</div>
<div class="newboxes" id="newboxes4" style="background-color: #ffffff; display: none;padding: 5px; width: 426px; margin-left:6px;">
<img src="" width="350" height="36">
<p class="intro">test 3</p><br>
<p>text here<br><br>
<img src="" alt="" width="200" height="31" style="float:left;">
<img class="reg_box" src="" alt="cis register" width="200" height="31"> <br>
</div>
JS
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
CSS
#newboxes {
display:none;
}

newboxes is a class and in the css must me declared as a class not as an id.
You should start by changing this:
#newboxes {
display:none;
}
into this:
.newboxes {
display:none;
}
You need also to remove display: block; from inline style of newboxes1.

check your css style you are using #newboxes { display:none; }
goes for id, you should use .newboxes { display:none; } since . will get all the classes.

Categories

Resources