i want to have 4 links over a list of images inside a flexbox but when i resize the page the links go through the images, i believe its because the images and the links arent "related" and therefore padding and margin doesnt work between them, but i dont know how to fix it. im guessing i have to add specific position: commands to them both to make them related but i dont know.
const chapter1 = [];
for (let i = 1; i <= 49; i++){
chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}];
const chapter3 = [{src: '../images/maps/64.jpg'}];
const chapter4 = [{src: '../images/maps/98.jpg'}];
// Function to display images for the chosen chapter
function showImages(chapter) {
const img_list = document.getElementById('imageList');
img_list.replaceChildren();
// Loop through the images in the selected chapter
chapter.forEach(image => {
const li = document.createElement('li');
const img = new Image();
img.src= image.src;
img.alt=image.alt;
li.append(img);
const span = document.createElement('span');
span.textContent = "Image";
li.append(span);
img_list.appendChild(li);
});
}
// Add click event to the Chapter 1 link
document.querySelector('#chapter1').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter1);
});
// Add click event to the Chapter 2 link
document.querySelector('#chapter2').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter2);
});
document.querySelector('#chapter3').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter3);
});
document.querySelector('#chapter4').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter4);
});
window.onload = function(){
document.body.style.opacity = 1
showImages(chapter1);
}
#charset "utf-8";
/* CSS Document */
body {
background-image: url("../images/background-maps.jpg");
background-repeat: no-repeat;
background-size: cover;
padding:0;
margin:0;
opacity: 0;
transition: opacity 1s;
/*animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;*/
}
/*#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}*/
.menu{
background-color: rgba(255,255,255,0.5);
justify-content: center;
display: flex;
margin: 0 auto;
width:55%;
height: 100%;
padding:10px;
position: relative;
}
.menu ul{
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu li{
width: 20%;
min-width: 200px;
margin: 15px;
text-align: center;
}
.menu img{
width: 100%;
height: 100%;
object-fit: cover;
}
.menu li span{
padding: 5px;
}
a{
font-size: 20px;
font-weight: 200;
padding:5px;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600;
font-size: 75px;
text-align: center;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
margin: auto;
padding: 5px;
}
.mappages{
padding: 5px;
position: absolute;
top: 8px;
left: 16px;
}
<header>
<h1>Map Gallery</h1>
</header>
<div class="menu">
<ul id="imageList"></ul>
<div class="mappages">
Chapter 1
Chapter 2
Chapter 3
Chapter 4
</div>
</div>
Put "mappages" above the "imageList" and remove the absolute position from "mappages". Also you have to add "flex-wrap: wrap" to "menu".
<div class="menu">
<div class="mappages"></div>
<ul id="imageList"></ul>
</div>
or
If you want to keep the order of the elements as it's now, then you can still use absolute position but you have to add padding-top at least 50-60px to the parent's element "menu" to fix the overlapping
Related
I have a page with a menu in the middle, and inside of the menu there are images correctly aligned in a ul, however I want to add text under every image but when i try, the text for some reason end up in the middle all the way to the right of the menu, why? also it feels like I should just remove all the javascript code and start from scratch and use the simpler option to implement my images in html file instead. I've been sitting up for 10 straight hours designing my website and learning so i might just be tired but any help is appreciated.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map Gallery</title>
<link rel="stylesheet" href="stylemaps.css">
</head>
<body onload="document.body.style.opacity='1'">
<header>
<h1>Map Gallery</h1>
</header>
<div class="menu">
<ul id="imageList"></ul>
</div>
<div class="mappages">
Chapter 1
Chapter 2
Chapter 3
Chapter 4
</div>
<script src="fadeAnim.js"></script>
<script src="mapscript.js"></script>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
body {
background-image: url("../images/background-maps.jpg");
background-repeat: no-repeat;
background-size: cover;
padding:0;
margin:0;
opacity: 0;
transition: opacity 1s;
/*animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;*/
}
/*#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}*/
.menu{
background-color: rgba(255,255,255,0.5);
justify-content: center;
display: flex;
align-items: center;
margin: 0 auto;
width:55%;
height: 100%;
}
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu li{
width: 20%;
min-width: 200px;
margin: 10px;
text-align: center;
}
.menu img{
width: 100%;
height: 100%;
object-fit: cover;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600;
font-size: 75px;
text-align: center;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
margin: auto;
}
js:
const chapter1 = [];
for (let i = 1; i <= 49; i++){
chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}]; //not used yet
const chapter3 = [{src: '../images/maps/64.jpg'}]; //not used yet
const chapter4 = [{src: '../images/maps/98.jpg'}]; //not used yet
// Function to display images for the chosen chapter
function showImages(chapter) {
document.querySelector('#imageList').innerHTML = '';
// Loop through the images in the selected chapter
chapter.forEach(image => {
const li = document.createElement('li');
li.innerHTML = `<img src="${image.src}" alt="${image.alt}">`;
document.querySelector('#imageList').appendChild(li);
});
}
// Add click event to the Chapter 1 link
document.querySelector('#chapter1').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter1);
});
// Add click event to the Chapter 2 link
document.querySelector('#chapter2').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter2);
});
document.querySelector('#chapter3').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter3);
});
document.querySelector('#chapter4').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter4);
});
showImages(chapter1);
Welcome to stckoverflow #ginger, I made some corrections and placed the sample text under the image.
const chapter1 = [{src: 'https://images.unsplash.com/photo-1558383331-f520f2888351?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'},
{src: 'https://images.unsplash.com/photo-1558383331-f520f2888351?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'}];
/*for (let i = 1; i <= 49; i++){
chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}*/
const chapter2 = [{src: 'https://images.unsplash.com/photo-1616020453784-a24fa9845b05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'}]; //not used yet
const chapter3 = [{src: 'https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'}]; //not used yet
const chapter4 = [{src: 'https://images.unsplash.com/photo-1612528443702-f6741f70a049?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'}]; //not used yet
// Function to display images for the chosen chapter
function showImages(chapter) {
const img_list = document.getElementById('imageList');
img_list.replaceChildren();// equal to innerHtml = '';
// Loop through the images in the selected chapter
chapter.forEach(image => {
const li = document.createElement('li');
const img = new Image();
img.src = image.src;
img.alt = image.alt;
li.append(img);
const span = document.createElement('span');
span.textContent = "Image Title";
li.append(span);
img_list.appendChild(li);
});
}
// Add click event to the Chapter 1 link
document.querySelector('#chapter1').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter1);
});
// Add click event to the Chapter 2 link
document.querySelector('#chapter2').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter2);
});
document.querySelector('#chapter3').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter3);
});
document.querySelector('#chapter4').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter4);
});
window.onload = function(){
document.body.style.opacity = 1
showImages(chapter1);
}
#charset "utf-8";
/* CSS Document */
body {
background-image: url("../images/background-maps.jpg");
background-repeat: no-repeat;
background-size: cover;
padding:0;
margin:0;
opacity: 0;
transition: opacity 1s;
/*animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;*/
}
/*#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}*/
.menu{
background-color: rgba(255,255,255,0.5);
justify-content: center;
display: flex;
align-items: center;
margin: 0 auto;
width:55%;
height: 100%;
padding:10px;
}
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu li{
width: 20%;
min-width: 200px;
margin: 15px;
text-align: center;
}
.menu li span{
padding:5px;
}
.menu img{
width: 100%;
height: 100%;
object-fit: cover;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600;
font-size: 75px;
text-align: center;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
margin: auto;
}
.mappages{
padding:5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map Gallery</title>
<link rel="stylesheet" href="stylemaps.css">
</head>
<body onload="document.body.style.opacity='1'">
<header>
<h1>Map Gallery</h1>
</header>
<div class="menu">
<ul id="imageList"></ul>
</div>
<div class="mappages">
Chapter 1
Chapter 2
Chapter 3
Chapter 4
</div>
<script src="fadeAnim.js"></script>
<script src="mapscript.js"></script>
</body>
</html>
trying to do event 'scroll' and when in the callback function the record of position div only record of last position, i want to know if that div in the center target i want
const slide = document.querySelector(".slides")
slide.addEventListener('scroll', function(e) {
const slide2 = document.querySelector("#slide-2")
console.log(slide2.offsetLeft)
})
<div class="slider">
1
2
3
4
5
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
</div>
my goal here I want to know if a user on that div to Right and Left for my slider
so i can make active dots , i am trying to just use native javascript here :)
here is my Codepen example
https://codepen.io/lpllplp222/pen/BaRvwKm
I have used jQuery to achieve the same.
position() function from the jQuery provides the current position of an element from its top and left, I am using the left value to calculate the current active element and get its index, thereby providing an active class to the corresponding dot.
const slide = document.querySelector(".slides")
$('#slider-dots a').on('click', function(event) {
event.stopPropagation();
})
slide.addEventListener('scroll', function(e) {
var scrollLeft = $('#slides-wrapper').scrollLeft();
var currIndex = -1;
$('#slider-dots a').removeClass('active');
for(var i = 0; i<$('#slides-wrapper div').length; i++) {
if($($('#slides-wrapper div')[i]).position().left >= 0 && currIndex === -1) {
currIndex = i;
}
}
$($('#slider-dots a')[currIndex]).addClass('active');
})
* {
box-sizing: border-box;
}
.slider {
width: 400px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#slider-dots a.active {
color: violet;
background-color: #000;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 200px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74abe2, #5563de);
font-family: "Ropa Sans", sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider" id='slider-dots'>
1
2
3
4
5
<div id='slides-wrapper' class="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>
I have a plus sign that appears if you push the space button. But now it appears once. Can you help me to make it appear every time I press the space button? Here is my Code Pen.
import './style.scss';
let counter = 0;
document.addEventListener('keydown', ({ keyCode }) => {
const increment = document.getElementsByClassName('increment')[0];
if (keyCode === 32) {
counter++;
document.getElementsByClassName('counter')[0].innerText = counter;
increment.classList.remove('hidden');
increment.classList.add('move-increment');
}
});
.container {
/* ... */
.counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
.move-increment {
margin-top: -20px;
opacity: 0;
}
.hidden {
visibility: hidden;
}
.increment {
position: absolute;
margin-left: -33px;
z-index: 1;
transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1),
opacity 1s ease-in-out;
}
}
Although I consider #ikiK's answer as the correct answer because the question was specifically about using CSS transitions, I would like to share a different approach. I think the goal of the 'plus' icon is to be displayed each time the counter increments. But when the counter increments while the transition of the previous increment is still playing it is impossible to display a second 'plus' symbol.
My suggestion would be to use some jQuery and, on each increment, append a new li item to an unordered list that is positioned right on top of the counter. Animate that li, fading it out to the top. And then use the callback function of animate() to remove the li element from the DOM once it has faded out of view.
let counter = 1;
$(document).on( 'keypress',function(e) {
if( e.which == 32 ) {
$('.counter').text(counter++);
let increment = $('<li><span class="increment">+</span></li>');
$('#increments').append(increment);
increment.animate({
opacity: 0,
top: '-=30px'
}, 500, function() {
increment.remove();
});
}
});
.container {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bold;
display: flex;
height: 500px;
align-items: top;
justify-content: center;
position: relative;
overflow: hidden;
height: 100px;
}
.counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
#increments {
padding: 0px;
z-index: 1;
float: left;
margin-left: -33px;
list-style: none;
}
#increments li {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p>Counter: <span class="counter">0</span></p>
<ul id="increments"></ul>
</div>
Remove added .move-increment and add again removed hidden classes with slight delay, this will re-apply your transition: margin-top (read in provided links why delay):
setTimeout(function() {increment.classList.add('hidden');
increment.classList.remove('move-increment');}, 600);
Solution (changed key-code to arrow up: ↑ ):
let counter = 0;
document.addEventListener('keydown', ({
keyCode
}) =>
{
const increment = document.getElementsByClassName('increment')[0];
if (keyCode === 38) {
counter++;
document.getElementsByClassName('counter')[0].innerText = counter;
increment.classList.remove('hidden');
increment.classList.add('move-increment');
setTimeout(function() {
increment.classList.add('hidden');
increment.classList.remove('move-increment');
}, 600);
}
});
.container {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bold;
display: flex;
height: 100px;
align-items: center;
justify-content: center;
}
.counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
.move-increment {
margin-top: -20px;
opacity: 0;
}
.hidden {
visibility: hidden;
}
.increment {
position: absolute;
margin-left: -33px;
z-index: 1;
transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1), opacity 1s ease-in-out;
}
<div class="container">
<div>
Counter: <span class="counter">0</span>
<span class="increment hidden">+</span>
</div>
</div>
But however, this is not working perfectly when pressing key too fast. Try changing setTimeout duration and see what suits your need.
In links provided you have examples how to reset animation (not transition) all together and would solve this fast key press issues.
Read about this here, few really useful info's:
Restart CSS Animation
Controlling CSS Animations and Transitions with JavaScript
I think you don't need to hidden class, Simply you can use setTimeout for reset class, like this:
let counter = 0;
document.addEventListener("keydown", ({ keyCode }) => {
const increment = document.getElementsByClassName("increment")[0];
if (keyCode === 32) {
counter++;
document.getElementsByClassName("counter")[0].innerText = counter;
increment.classList.add("move-increment");
setTimeout(function () {
increment.classList.remove("move-increment");
}, 1000);
}
});
.container {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bold;
display: flex;
height: 500px;
align-items: center;
justify-content: center;
}
.container .counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
.container .increment {
position: absolute;
margin-left: -33px;
z-index: 1;
visibility: hidden;
margin-top: 0;
opacity: 1;
transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1), opacity 1s ease-in-out;
}
.container .increment.move-increment {
visibility: visible;
margin-top: -20px;
opacity: 0;
}
<div class="container">
<div>
Counter: <span class="counter">0</span>
<span class="increment">+</span>
</div>
</div>
Before I put the html and css, I am having 2 problems, please keep in my that I am almost a complete amateur at html and css, and have no idea what the javascript means.
Problems:
My 1st problem is that the content sider, doesnt slide far enough to the next content, but instead when clicking the button only brings the content over halfway (you will see what I mean when you paste the html and css into a page).
My second problem is that the buttons are meant to be horizontal with eachother, and I also want to add more in the future
so if someone could tell me how to do that in elaboration with the javascript problem that would be great!
here is the working demo jsfiddle please check-out
Working code
Thank-you in Advance..!!
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 1250px;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
width: 22.5%;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 100px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
</body>
The main areas to update;
1) your "#contentContainer". This is basically the window of your slider. The height and width need to be updated to match the slider items.
2) the "data-pos" values of your list items. This should be the same as their width * their index starting at 0 and negative.
3) the list container is too narrow. make it as wide as your #contentContainer.
CSS Changes:
#contentContainer {
width: 1250px;
height: 600px;
}
#navLinks {
width:1250px;
}
#navLinks ul li {
width:80px;
}
HTML change:
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-1250px"></li>
<li class="itemLinks" data-pos="-2500px"></li>
<li class="itemLinks" data-pos="-3750px"></li>
https://jsfiddle.net/partypete25/9gpyL6o1/7/embedded/result/
I assume that the CSS posted in the bottom of your question is the content of the main.css file. As matt points out in the comments, experiment with changing the sizes of the divs. Particularly the #wrapper, which is specified by it's ID using tha hash tag (#):
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
And referenced in the javascript here:
var wrapper = document.querySelector("#wrapper");
where it is assigned to the variable wrapper. It is 5000 pixels wide. The typical desktop web screen is around 1200 - 1700 pixels wide, I believe, for reference. This is about the size you want the .content, referenced by class using a . and what holds each displayed "slide" to be - keeping in mind that a responsive site that displays properly on phones and other mobile devices would need to have variations on the size using #media queries.
So I would add visible css borders where applicable (for development and to be removed later) and change around the numerical variables (data-pos, #wrapper and .container sizes) to find the optimal solution. As mentioned above, jsfiddle is a great resource, whether or not you're needing to share publicly.
For the navlinks, which should be displayed in a row, try the following CSS on the div that holds the list (<ul>):
#navLinks {
text-align: center;
width: 90.5%;
border:1px solid white;
}
The border:1px solid white; will help you to see where the div is. Then experiment with a smaller padding size in #navLinks ul li to be sure you have room on the page to display horizontally.
I believe the last step is to adjust the <li class="itemLinks" data-pos="0px"></li>, where the data-pos attributes are just holding information for the javascript to use in the changePosition function, which is the last few lines of the javascript.
eloquentjavascript.net is a wonderful, free source to learn all of this.
<!DOCTYPE html>
<html>
<head>
<title>Dinosaurs 4 Kids!</title>
<style>
#wrapper {
width: 98%;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 100%;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
background-position: center;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 20px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
</style>
</head>
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
</script>
</body>
</html>
I'm trying to mouse over to bring down a menu. The javascript I have works somewhat right. When I mouse over the link or the menu, the menu stays displayed. However, when I mouse out i encounter the problem. My menu div disappears as it should, but the links stay for longer a second longer than the should.
Here is my javascript:
var timeout = 500;
var closetimer = null;
var menu = null;
function showTeams() {
cancelClose(); // keep showing menu
if (menu)
menu = menu.style.visiblity = 'hidden';
menu = document.getElementById('teams');
menu.style.visibility = 'visible';
}
function close() {
if (menu) {
menu.style.visibility = 'hidden';
}
}
function closeTeams() {
closetimer = window.setTimeout(close, timeout);
}
function cancelClose() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
My CSS:
#links {
width: 533px;
height: 40px;
position: absolute;
top: 105px;
left: 439px;
text-align: justify;
}
#links li {
display: inline;
}
#links ul {
display: inline;
}
#links span {
display: inline-block;
width: 100%;
}
#links a {
display: inline-block;
color: white;
text-decoration: none;
/* alternate browser support */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* normal statement */
transition:.5s;
}
#links a:hover {
display: inline-block;
color: #70fc80;
text-decoration: none;
text-shadow: 0px 1px #707070;
}
#teams {
visibility: hidden;
position: absolute;
margin-left: 345px;
top: 31px;
border: #5260e5 3px solid;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #b4bcfb;
padding: 2px;
}
#teams a{
font-size: x-large;
position: relative;
color: #5260e5;
display: block;
margin: 0 auto;
width: 100px;
text-align: center;
text-decoration: none
}
#teams a:hover {
color: white;
text-shadow: 0 0 #000;
background-color: #5260e5;
display: block;
}
and my HTML:
<div id="links">
<ul>
<li>Home</li>
<li>Schedule</li>
<li>Standings</li>
<li>
Teams
<div id="teams" onmouseover="showTeams()" onmouseout="closeTeams()">
Team 1
Team 2
Team 3
Team 5
Team 6
Team 7
</div>
</li>
<li>Contact</li>
</ul>
<span></span>
</div>
Any ideas as to why the links are sticking around after the div closes?
You have transitions on your links:
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* normal statement */
transition:.5s;
This means that there will be a delay in changes. What do you want the transitions for?
See this fiddle with the transitions removed. You will need to scroll across to teams.
I think you just want to keep the transitions for when you hover. See this fiddle. In that case, move the transitions to hover:
#links a:hover {
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* normal statement*/
transition:.5s;
}