I'd like to make a two page slider to move through the content. Is it possible to make a CSS code to do the animation like in this example?
Like this
demo
css
body {
font:normal 1.25em/1.5 Arial, sans-serif;
}
.demo-wrapper {
max-width: 640px;
margin: 0 0 1em;
padding: 5px;
border: 1px solid #CCC;
background: #F4F4F4;
}
/**
* Slider CSS
*/
.slider {
/* For no JS situations */
overflow: auto;
}
.slider > ul {
margin: 0;
padding: 0;
/* Force list items onto a single line and remove white space */
font-size: 0;
white-space: nowrap;
/* Only WebKit requires prefix */
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.slider > ul > li {
display: inline-block;
}
.slider .next,
.slider .prev {
position: absolute;
top: 50%;
margin-top: -1em;
padding: .5em;
line-height: 1;
text-decoration: none;
color: white;
background: rgba(0, 0, 0, .25);
cursor: pointer;
}
.slider .next {
right: 0;
}
.slider .prev {
left: 0;
}
.slider .prev.is-disabled,
.slider .next.is-disabled {
opacity: .25;
}
/* Full width variation */
.slider--fit li {
width: 100%;
}
demo1
Related
I'm still new to this website making, and I'm having trouble with w3 schools Light box. I'm trying to move the images around but every time I do manage to move them it seems to look worse and worse. I have messed around with the CSS but still can't figure it out.
im trying so that the images look something like this gallerybut still make it use the lightbox.
source code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>alithroughthelens</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap" rel="stylesheet">
</head>
<body class="body">
<div id="sideNavigation" class="sidenav"><script>
function openNav() {
document.getElementById("sideNavigation").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sideNavigation").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
×
Home
Cuando Sale el Sol
Obscurité et la Lumiere
la Vie en Couleur
Vacante
About Me
</div>
<nav class="topnav">
<a href="#" onclick="openNav()">
<svg width="30" height="30" id="icoOpen">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</nav>
<div id="main">
<h1 class="header">Alithroughthelens</h1>
<img src="Home/Artist copy.png" alt="" width="5918" height="3945" class="homeimg"/> </div>
</body>
</html>
css:
html, body,{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #B7B7A4;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #6B705C;
display: block;
transition: 0.3s;
font-family: 'Cinzel Decorative', cursive;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #FFE8D6;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
overflow:hidden;
width:100%;
}
body {
overflow-x: hidden;
}
/* Add a black background color to the top navigation */
.topnav {
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color:#6B705C;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color:#6B705C;
color:#6B705C;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
a svg{
transition:all .5s ease;
&:hover{
#transform:rotate(180deg);
}
}
#ico{
display: none;
}
.menu{
background: #000;
display: none;
padding: 5px;
width: 320px;
#include border-radius(5px);
#transition: all 0.5s ease;
a{
display: block;
color: #fff;
text-align: center;
padding: 10px 2px;
margin: 3px 0;
text-decoration: none;
background: #444;
&:nth-child(1){
margin-top: 0;
#include border-radius(3px 3px 0 0 );
}
&:nth-child(5){
margin-bottom: 0;
#include border-radius(0 0 3px 3px);
}
&:hover{
background: #555;
}
}
}
.body {
background-color: #FFE8D6;
}
.header {
font-family: 'Cinzel Decorative', cursive;
padding-right: 64px;
position: static;
left: 41px;
padding-left: 64px;
text-align: center;
color: #6B705C;
padding-top: 0px;
margin-top: -10px;
font-size: 35px;
font-size: 5vw;
}
.homeimg {
display: block;
margin-left: auto;
margin-right: auto;
width: 60%;
height: auto;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
height: auto;
width: 24%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #6B705C;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
background-color: #6B705C;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: #000000;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: #FFE8D6;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: #6B705C;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
width: 40%;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.pimg {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
margin-top: -20px;
}
.csimg {
width: 80%;
display: block;
position: static;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.pimgl {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
height: auto;
width: 30%;
}
Here is my codepen or view below the code.
If you click on a tab, its content will show successfully, then click on another tab, that content will also show successfully, however after that, if you go back to the previous tab that you just clicked, then that previous tab's content won't show, instead, the second tab's content will simply remain there. Why is this the case?
JS:
$k('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//new tab
console.log(e.target);
//previous tab
console.log(e.relatedTarget);
})
CSS:
/*nice Menu*/
.rotate {
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.rotate.down {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
a {
text-decoration: none;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pad-15 {
padding: 15px;
}
.clear {
clear: both;
}
.clear:after, .clear:before{
content: " ";
display: table;
}
a.toggle-nav {
top: 12px;
right: 15px;
position: absolute;
color: #fff;
line-height: 25px;
font-size: 22px;
background: #DE5939;
padding: 3px 5px;
border-radius: 1px;
transform: rotate(90deg);
}
.nice-nav {
width: 250px;
height: 100%;
transition:all 0.4s ease-in-out 0s;
float:left;
font-size: 15px;
}
.nice-nav li.child-menu span.toggle-right {
bottom: 0;
display: inline-block;
float: right;
padding: 15px;
position: absolute;
right: 0;
text-align: right;
top: 3px;
}
.nice-nav ul li a {
background: #fff none repeat scroll 0 0;
border: 1px solid #f6f6f6;
color: #333;
display: block;
padding: 12px;
position: relative;
}
.nice-nav ul li.child-menu ul {
background: #fff;
display: none;
}
.nice-nav ul li.child-menu ul li a {
background: #f6f6f6;
padding: 10px 20px;
}
.nice-nav > ul {
margin: 0;
padding: 0;
}
.nice-nav > ul li{
list-style: none;
margin: 2px auto;
}
.nice-nav ul li ul {
padding: 0;
}
.modal-backdrop.fade.show{
display: none;
}
/*nice Menu*/
You forgot to add nav in your ul class.
From your code from this:
<!--nice menu-->
<div class="nice-nav">
<ul>
To this:
<!--nice menu-->
<div class="nice-nav">
<ul class="nav d-block" aria-orientation="vertical">
Here's my problem:
I'm trying to animate a nav list (ul) and in my mind, I want to move it on click like that:
$('#top-nav-more').click(function() {
$('.hidden').toggleClass('hidden-click');
$(this).find('img').toggleClass('rotate');
});
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: relative;
left: 321px;
display: none!important;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
display: inline!important;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -- Red bar -->
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<ul class="top-nav-right">
<li class="hidden">Health Care</li>
<li class="hidden">My Account</li>
<li class="hidden">Student Portal</li>
<li id="top-nav-more">More</li>
<li id="top-nav-no">Phone number</li>
<li id="top-nav-book">Book a Tour</li>
</ul>
</div>
</div>
Essentially, when you click more, the bar will change the position from some certain pixels to the left to 0 pixels on the left.
I added the transition effect to do it smoothly but for some reason, the effect happens right away. So technically it works but it doesn't work as I wish.
Something has to be wrong on my css transition. I read that it is possible to animate the position, so it is not a problem of position, it has to be something different. I've already use the property transition somewhere else in my code, so I have no clue of what is wrong, any idea?
This might get you close. I imagine there might be more to the animation you're looking for. It's hard to manipulate elements that are set to display none. Visibility: hidden and position: absolute is an equivalent you can manipulate:
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: absolute;
left: 321px;
visibility: hidden;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
visibility: visible;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
Working/semi-working example:
https://jsfiddle.net/qLpfynks/
I believe the reason is because you are switching from display:none to display: inline. CSS cannot transition display and so it will show the "transition" immediately.
To fix this and still achieve the desired effect change it to
.hidden {
position: relative;
left: 321px;
display: inline!important;
opacity:0; /*makes it invisible*/
transition:all 1s linear;
/*transition:left 1s linear*/
}
.hidden-click {
transition:all 1s linear;
/*transition:left 1s linear*/
position: relative;
left: 0;
opacity: 1; /*makes it visible*/
display: inline!important;
}
Note that if you use the specificier all for your transition you will see a fade in and out animation. If you don't want this, specify only left (see commented CSS code)
Basically, I want to press a button (matched to a person) that brings up a pop-up (right now using a modal) of an of another page which will vary based on which person it is. I am using a basic template from the w3school and I can get one button working, but when I try and add a button into the list to match a person, the modal does not open. Obviously for each button to be assigned to one person they will need to have their own element id, but why cant I get even one button to work?
Its the "show on map" button in the snippet below.
The top most "show on map" button works in the sense that it brings up the modal, but the same buttons in the list do nothing.
Thank you in advance.
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/*DESKTOP*/
/* The Modal (background) */
#media screen and (min-width: 801px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
/*MOBILE*/
/* The Modal (background) */
#media screen and (max-width: 800px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background-color: #810008;
}
a.menu-link {
color: #ffc948;
display: block;
text-decoration: none;
padding-top: 25px;
}
.menu-link span {
border-bottom: solid 3px #000;
border-top: double 10px #000;
display: inline-block;
height: 4px;
margin: 0 5px -3px 0;
width: 30px;
}
.menu-link:hover span {
border-color: #666;
}
.menu,
.menu > ul,
.menu > ul ul {
clear: both;
display: flex;
flex-flow: column;
margin: 0;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-left: 15%;
}
.menu.active {
background: #640006;
border-bottom: 1px solid #64006;
border-top: 1px solid #64006;
margin: 1em 0 1em -12px;
max-height: 55em;
width: 100vw;
}
.js .menu > ul ul.active {
margin: 0;
max-height: 55em;
padding: 0;
}
.menu > ul {
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
.menu li a {
color: #ffc948;
display: inline-block;
font-size: 1.04em;
letter-spacing: .05em;
line-height: 2.5em;
text-decoration: none;
}
span.has-subnav {
display: block;
font-size: 1em;
line-height: 2.5em;
position: absolute;
right: 20px;
padding: 0 0.5em;
top: 0;
}
/*NAV MENU CSS MOBILE */
#media screen and (max-width: 800px) {
.menu,
.menu > ul ul {
margin: 0;
max-height: 0;
overflow: hidden;
}
.menu li a {
border-bottom: 1px solid #ffc948;
display: block;
padding-left: 15px;
}
.menu li li a {
padding-left: 50px;
}
.menu li:last-child a {
border: none;
}
.menu li li:last-child a {
border-bottom: 1px solid #ffc948;
}
.menu li:hover {
background: #640006;
}
}
.menu li a:hover {
background: #ffc948;
color: black;
}
/*NAV MENU CSS DESKTOP*/
#media screen and (min-width: 801px) {
nav {
border-bottom: 1px solid #ffc948;
}
a.menu-link {
display: none;
}
.js .menu,
.js .menu > ul ul {
max-height: none;
overflow: visible;
}
.js .menu > ul li:hover > ul {
display: flex;
}
.menu ul {
display: flex;
flex-flow: row;
height: 44px;
justify-content: space-between;
margin: 0;
padding: 0;
}
.menu span.has-subnav {
display: none;
}
.menu li a:hover {
color: rgb(0, 0, 0);
}
.menu li li a:hover {
background: rgba(0, 0, 0, 0.1);
color: #fff;
}
.menu ul ul {
background: #640006;
border: solid 1px rgba(0, 0, 0, 1);
border-radius: 2px 2px 5px 5px;
border-top: solid 2px transparent;
display: none;
height: auto;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
top: 43px;
width: 150px;
z-index: 999;
}
.chrome .js .menu > ul ul {
top: 43px;
}
.menu ul ul.wide {
width: 300px;
}
.menu ul ul li {
border-bottom: solid 1px rgba(0, 0, 0, 0.5);
display: inline-block;
position: relative;
}
.menu > ul ul li:last-child {
border-bottom: none;
}
.menu ul ul li a {
display: block;
padding-left: 10px;
}
}
a {
text-decoration: none;
color: #ffc948;
}
ul,
li {
list-style: none;
vertical-align: middle;
}
ul.list {
padding-left: 20px;
}
.alphalist {
position: fixed;
right: 0;
font-size: 12px;
text-align: center;
display: inline-block;
z-index: 2;
top: auto;
height: 100%;
}
.list li {
border-bottom: 1px solid #ffc948;
line-height: 44px;
height: 44px;
}
.list .divider {
font-size: 20px;
font-weight: bold;
background: #fafafa;
box-shadow: -60px 0 0 #fafafa;
line-height: 28px;
height: 28px;
margin-top: -1px;
position: -webkit-sticky;
top: 44px;
}
h1 {
color: #ffc948;
font-size: 30px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: 30px;
}
h2 {
color: #ffc948;
font-size: 20px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: auto;
margin: auto;
}
h3 {
line-height: 44px;
height: 44px;
color: #ffc948;
width: 100%;
position: absolute;
text-align: center;
z-index: 10;
}
#scrolling {
padding-top: 44px;
padding-right: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
#media (-webkit-min-device-pixel-ratio: 2) {
.list .divider {
top: 0;
}
}
.modal-button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
.button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
<button id="myBtn">Show on Map</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Career Fair Map</h2>
</div>
<div class="modal-body">
<iframe src="map.html" width="500px" height="700px">
</iframe>
</div>
</div>
</div>
<div id="scrolling">
<ul class="list">
<li class="divider" id="a">A</li>
<li>Amelia Webster
<button class="button" onclick="alert('## has been added to favorites.')">Favorite</button>
<button class="button" id="myBtn">Show on Map</button>
<li>Andrew WifKinson
</li>
<li>Archibald Carrington
<button class="modal-button" id="myBtn">Show on Map</button>
</li>
<li>Ariana Clapton
</li>
<li>Ashley Carter
</li>
<li class="divider" id="b">B</li>
<li>Barney Mercer
</li>
<li>Barry Goodman
</li>
<li>Brenda Brown
</li>
<li>Brooke Creighton
</li>
<li class="divider" id="c">C</li>
<li>Camilla Kapinksy
</li>
<li>Caroline Miller
</li>
<li>Charlotte Gardner
</li>
<li>Cynthia Monroe
</li>
<li class="divider" id="e">E</li>
<li>Elizabeth Abramson
</li>
<li>Elizabeth Cook
</li>
<li>Ernie Carter
</li>
<li>Evelyn Nash
</li>
<li class="divider" id="f">F</li>
<li>Fyodor Dostoevsky
</li>
</ul>
</div>
Id's should always be unique.
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
That is also the origin of your problem. document.getElementById("theid"); will return the first element (and also the only element expected to use this id). However you want to assign your onclick method to multiple buttons.
You should consider to use the name attribute instead. Then you can use document.getElementsByName("myBtn") in order to loop through all buttons and register your listener. The code below contains comments that should explain my changes.
// Get the modal
var modal = document.getElementById('myModal');
// Get all buttons that should opens the modal
var btns = document.getElementsByName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// The iframe inside of the Modal
var modalIFrame = document.getElementById("modal-iframe");
// When the user clicks the button, open the modal
for(var i = 0; i < btns.length; i++) {
(function(i) {
var btn = btns[i];
// you should use addEventListener("click", function() {}); here
btn.onclick = function() {
// this will set the iframe url every time you press a button and add the "id" of the button that was pressed as a parameter. "id" is just the current index of the for loop for now.
modalIFrame.setAttribute("src", "map.html?id=" + i);
modal.style.display = "block";
}
})(i);
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/*DESKTOP*/
/* The Modal (background) */
#media screen and (min-width: 801px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
/*MOBILE*/
/* The Modal (background) */
#media screen and (max-width: 800px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background-color: #810008;
}
a.menu-link {
color: #ffc948;
display: block;
text-decoration: none;
padding-top: 25px;
}
.menu-link span {
border-bottom: solid 3px #000;
border-top: double 10px #000;
display: inline-block;
height: 4px;
margin: 0 5px -3px 0;
width: 30px;
}
.menu-link:hover span {
border-color: #666;
}
.menu,
.menu > ul,
.menu > ul ul {
clear: both;
display: flex;
flex-flow: column;
margin: 0;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-left: 15%;
}
.menu.active {
background: #640006;
border-bottom: 1px solid #64006;
border-top: 1px solid #64006;
margin: 1em 0 1em -12px;
max-height: 55em;
width: 100vw;
}
.js .menu > ul ul.active {
margin: 0;
max-height: 55em;
padding: 0;
}
.menu > ul {
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
.menu li a {
color: #ffc948;
display: inline-block;
font-size: 1.04em;
letter-spacing: .05em;
line-height: 2.5em;
text-decoration: none;
}
span.has-subnav {
display: block;
font-size: 1em;
line-height: 2.5em;
position: absolute;
right: 20px;
padding: 0 0.5em;
top: 0;
}
/*NAV MENU CSS MOBILE */
#media screen and (max-width: 800px) {
.menu,
.menu > ul ul {
margin: 0;
max-height: 0;
overflow: hidden;
}
.menu li a {
border-bottom: 1px solid #ffc948;
display: block;
padding-left: 15px;
}
.menu li li a {
padding-left: 50px;
}
.menu li:last-child a {
border: none;
}
.menu li li:last-child a {
border-bottom: 1px solid #ffc948;
}
.menu li:hover {
background: #640006;
}
}
.menu li a:hover {
background: #ffc948;
color: black;
}
/*NAV MENU CSS DESKTOP*/
#media screen and (min-width: 801px) {
nav {
border-bottom: 1px solid #ffc948;
}
a.menu-link {
display: none;
}
.js .menu,
.js .menu > ul ul {
max-height: none;
overflow: visible;
}
.js .menu > ul li:hover > ul {
display: flex;
}
.menu ul {
display: flex;
flex-flow: row;
height: 44px;
justify-content: space-between;
margin: 0;
padding: 0;
}
.menu span.has-subnav {
display: none;
}
.menu li a:hover {
color: rgb(0, 0, 0);
}
.menu li li a:hover {
background: rgba(0, 0, 0, 0.1);
color: #fff;
}
.menu ul ul {
background: #640006;
border: solid 1px rgba(0, 0, 0, 1);
border-radius: 2px 2px 5px 5px;
border-top: solid 2px transparent;
display: none;
height: auto;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
top: 43px;
width: 150px;
z-index: 999;
}
.chrome .js .menu > ul ul {
top: 43px;
}
.menu ul ul.wide {
width: 300px;
}
.menu ul ul li {
border-bottom: solid 1px rgba(0, 0, 0, 0.5);
display: inline-block;
position: relative;
}
.menu > ul ul li:last-child {
border-bottom: none;
}
.menu ul ul li a {
display: block;
padding-left: 10px;
}
}
a {
text-decoration: none;
color: #ffc948;
}
ul,
li {
list-style: none;
vertical-align: middle;
}
ul.list {
padding-left: 20px;
}
.alphalist {
position: fixed;
right: 0;
font-size: 12px;
text-align: center;
display: inline-block;
z-index: 2;
top: auto;
height: 100%;
}
.list li {
border-bottom: 1px solid #ffc948;
line-height: 44px;
height: 44px;
}
.list .divider {
font-size: 20px;
font-weight: bold;
background: #fafafa;
box-shadow: -60px 0 0 #fafafa;
line-height: 28px;
height: 28px;
margin-top: -1px;
position: -webkit-sticky;
top: 44px;
}
h1 {
color: #ffc948;
font-size: 30px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: 30px;
}
h2 {
color: #ffc948;
font-size: 20px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: auto;
margin: auto;
}
h3 {
line-height: 44px;
height: 44px;
color: #ffc948;
width: 100%;
position: absolute;
text-align: center;
z-index: 10;
}
#scrolling {
padding-top: 44px;
padding-right: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
#media (-webkit-min-device-pixel-ratio: 2) {
.list .divider {
top: 0;
}
}
.modal-button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
.button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
<!-- Changed id="myBtn" to name="myBtn" -->
<button name="myBtn">Show on Map</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Career Fair Map</h2>
</div>
<div class="modal-body">
<iframe id="modal-iframe" src="map.html" width="500px" height="700px">
</iframe>
</div>
</div>
</div>
<div id="scrolling">
<ul class="list">
<li class="divider" id="a">A</li>
<li>Amelia Webster
<button class="button" onclick="alert('## has been added to favorites.')">Favorite</button>
<!-- Changed id="myBtn" to name="myBtn" -->
<button class="button" name="myBtn">Show on Map</button>
<li>Andrew WifKinson
</li>
<li>Archibald Carrington
<!-- Changed id="myBtn" to name="myBtn" -->
<button class="modal-button" name="myBtn">Show on Map</button>
</li>
<li>Ariana Clapton
</li>
<li>Ashley Carter
</li>
<li class="divider" id="b">B</li>
<li>Barney Mercer
</li>
<li>Barry Goodman
</li>
<li>Brenda Brown
</li>
<li>Brooke Creighton
</li>
<li class="divider" id="c">C</li>
<li>Camilla Kapinksy
</li>
<li>Caroline Miller
</li>
<li>Charlotte Gardner
</li>
<li>Cynthia Monroe
</li>
<li class="divider" id="e">E</li>
<li>Elizabeth Abramson
</li>
<li>Elizabeth Cook
</li>
<li>Ernie Carter
</li>
<li>Evelyn Nash
</li>
<li class="divider" id="f">F</li>
<li>Fyodor Dostoevsky
</li>
</ul>
</div>
In HTML the id attribute is unique. As such, you are only ever binding to the first button with the id of myBtn (I go and get the element by id and I only get one because that's what's expected).
You will need to make the IDs unique and bind each one's click event, that or apply a class, get an array of buttons by class, and bind each button in the array.
If you had a class named showModalButton set on each button you could get the references with:
var elements = document.getElementsByClassName('showModalButton');
and then iterate over the elements and bind:
for(var i = 0; i < elements.length; ++i) {
elements[i].onclick = function() {
modal.style.display = "block";
}
}
I found a tutorial that is exactly the way I want the slider to look with the exception that I do not want to have multiple slides in each slide. And I simply want the text to change as I click different links.
Also I want the slides to transition by fading in.
I tried playing around with the code, but it seems to be way too complex for my understanding to fix. Because it seems to use Movefromleft movefromright .. for each movement.
I need some help to either fix this or guide me to a less complex version of a nice interface (like this) tutorial that does the same.
http://jsfiddle.net/itsnamitashetty/73pffnx9/2/
.mi-slider ul.mi-moveFromRight li {
-webkit-animation: moveFromRight 350ms ease-in-out both;
animation: moveFromRight 350ms ease-in-out both;
visibility:visible !important;
}
I am not sure why and how to get the fiddle to show up what its doing right now. But basically it doesn;t show up the first slide, and then works for the second and third but after the first clicks it doesnt work..
here is the original tutorial
http://tympanus.net/Tutorials/ItemSlider/
So I was able to find another content slider that did what I wanted but I had to make it work with the other tutorial.
HERE is what I came up with
Unfortunately the codepen in not showing how it works.
But anyways for someone looking to achieve the same thing
here are the two tutorials that I used,
Item slider & Full Width Tabs
I basically worked around the CSS of Full Width Tabs to make it interface pretty much like Item slider
.container {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {text-decoration: none;
outline: none;}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container{width:60%; margin:2% 20%;}
.tabs {
position: relative;
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
font-weight: 300;
}
/* Nav */
.tabs nav {
text-align: center;
border-top: 5px solid transparent;
}
.tabs nav a.tab-current {
/* border: 1px solid #47a3da;
box-shadow: inset 0 2px #47a3da;*/
border-bottom: none;
z-index: 100;
}
.tabs nav a {
display: inline-block;
text-transform: uppercase;
letter-spacing: 5px;
padding: 40px 30px 30px 34px;
position: relative;
color: #888;
outline: none;
-webkit-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.tabs nav a:hover, .tabs nav a.tab-current {
color: #000;
}
.content{background:rgba(0,0,0,0.8)}
/* Content */
.content section {
font-size: 1.25em;
padding: 3em 1em;
display: none;
max-width: 1230px;
margin: 0 auto;
}
.content section:before,
.content section:after {
content: '';
display: table;
}
.content section:after {
clear: both;
}
/* Fallback example */
.no-js .content section {
display: block;
padding-bottom: 2em;
border-bottom: 1px solid #47a3da;
}
.content section.content-current {
display: block;
}
nav a.tab-current:after,
nav a.tab-current:before {
content: '';
position: absolute;
top: -5px;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
nav a.tab-current:after {
border-color: transparent;
border-top-color: rgba(0,0,0,0.8);
border-width: 20px;
left: 50%;
margin-left: -20px;
}
nav a.tab-current:before {
border-color: transparent;
border-width: 27px;
left: 50%;
margin-left: -27px;
}