In the head tags i did:
<head>
<link rel="stylesheet" type="text/css" href="carousel.css">
<link rel="stylesheet" type="text/css" href="vertical_slider.css">
<link rel="stylesheet" type="text/css" href="glow-effect.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
<script src="java_script.js"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
In the bottom in the body tags i did:
<div class="vertical-slider-container">
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
<div class="slideshow"
data-cycle-fx="carousel"
data-cycle-timeout="3000"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-carousel-visible="3"
data-cycle-carousel-vertical="true">
<img src="http://malsup.github.io/images/beach1.jpg" />
<img src="http://malsup.github.io/images/beach2.jpg" />
<img src="http://malsup.github.io/images/beach3.jpg" />
<img src="http://malsup.github.io/images/beach4.jpg" />
<img src="http://malsup.github.io/images/beach5.jpg" />
<img src="http://malsup.github.io/images/beach9.jpg" />
</div>
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>
Then in the vertical_slider css file i did:
.vertical-slider-container {
background: #fff;
border: 20px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
margin: 40px auto;
position: relative;
width: 120px;
}
.slideshow {
background: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.slideshow img {
display: block;
width: 100px;
height: 100px;
padding: 10px;
}
.vertical-slider-nav {
color: rgba(0,0,0,0.8);
cursor: pointer;
display: block;
height: 40px;
margin-left: -20px;
left: 50%;
z-index: 10;
position: absolute;
overflow: hidden;
opacity: 0;
text-decoration: none;
width: 40px;
transition: all .3s ease;
}
.vertical-slider-nav-up {
top: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-up:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-up {
top: -20px;
opacity: 0.7;
}
.vertical-slider-nav-down {
bottom: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-down:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-down {
bottom: -20px;
opacity: 0.7;
}
And in the java_script.js file top i did:
$(function() {
$('.slideshow').cycle();
The way it is now i see one image and the next image replacing the other one on same place like fade in.
But in the javascript file if i change the function to:
$('.slideshow').cycle({
fx: 'scrollUp'
});
I see the images move up scrolling up one by one.
The problem is that the arrows not working and not in place and i see each time one image and not 3 images.
It should be working like this jsfiddler and i can't figure out why it's not. I don't get any errors.
Vertical Slider
Well if you want a carousel you have the wrong script included it should be from cycle2 plugin plus the script for the carousel. And then it will work like in the snippet below :)
It should be this two scripts
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
Instead of
<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
$('.slideshow').cycle();
.vertical-slider-container {
background: #fff;
border: 20px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
margin: 40px auto;
position: relative;
width: 120px;
}
.slideshow {
background: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.slideshow img {
display: block;
width: 100px;
height: 100px;
padding: 10px;
}
.vertical-slider-nav {
color: rgba(0,0,0,0.8);
cursor: pointer;
display: block;
height: 40px;
margin-left: -20px;
left: 50%;
z-index: 10;
position: absolute;
overflow: hidden;
opacity: 0;
text-decoration: none;
width: 40px;
transition: all .3s ease;
}
.vertical-slider-nav-up {
top: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-up:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-up {
top: -20px;
opacity: 0.7;
}
.vertical-slider-nav-down {
bottom: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-down:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-down {
bottom: -20px;
opacity: 0.7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<div class="vertical-slider-container">
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
<div class="slideshow"
data-cycle-fx="carousel"
data-cycle-timeout="3000"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-carousel-visible="3"
data-cycle-carousel-vertical="true">
<img src="http://malsup.github.io/images/beach1.jpg" />
<img src="http://malsup.github.io/images/beach2.jpg" />
<img src="http://malsup.github.io/images/beach3.jpg" />
<img src="http://malsup.github.io/images/beach4.jpg" />
<img src="http://malsup.github.io/images/beach5.jpg" />
<img src="http://malsup.github.io/images/beach9.jpg" />
</div>
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>
Please try this. It is working.
Updated fiddle[1]: http://jsfiddle.net/uncb4bs9/8/
have you put
<script type='text/javascript' src="http://malsup.github.io/jquery.cycle2.js"></script>
<script type='text/javascript' src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
in your code????
please put that and try again. it will work.
for full example please have a look to this http://fiddle.jshell.net/uncb4bs9/3/show/light/ and go to its source code by ctrl+U.
Related
i wanna make a image slider in which png will slide from left to right or right to left depending on the user decision. the design is like a wrapper div . Inside are three divs two for the left and right toggle buttons and one for the img in the middle
Here is the answer
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Images</title>
<style>
.slider {
width: 500px;
height: 300px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-container {
width: 1500px;
background-color: pink;
height: 300px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target ~ .image-container {
left: 0px;
}
#slide-2:target ~ .image-container {
left: -500px;
}
#slide-3:target ~ .image-container {
left: -1000px;
}
.buttons {
position: relative;
top: -20px;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="slider">
<span id="slide-1"></span>
<span id="slide-2"></span>
<span id="slide-3"></span>
<div class="image-container">
<img src="https://i.ibb.co/j89STLM/drb-flowrt-by-gleb-1.webp" class="slide" width="500" height="300" />
<img src="https://i.ibb.co/kmnTxRQ/Neon-Backgrounds-Pictures-4k-1536x864.jpg" class="slide" width="500" height="300" />
<img src="https://i.ibb.co/Ks5DNqf/Neon-4k-Wallpaper-1536x864.jpg" class="slide" width="500" height="300" />
</div>
<div class="buttons">
</div>
</div>
</body>
</html>
I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
I'm working on a slideShow and I'm trying to make .slidesTextes have a translation from the bottom and an opacity change, all controlled by a button that call a JS function.
However, it only works once : when the page is fully loaded. I tried to find out why, but I'm stuck. All I can say is that when I use the console and type my JS code ligne by ligne, it works perfectly. But if I type the full JS code at once in the console, it doesn't work anymore...
Please find the code below :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="">
<link rel="stylesheet" href="styleSheet.css">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</head>
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
</html>
Here is the script I use:
<script>
var numeroSlide=1;
afficherSlide(numeroSlide);
function changeSlide(numero){
numeroSlide=numeroSlide+numero;
if(numeroSlide<1){numeroSlide=4;}
if(numeroSlide>4){numeroSlide=1;}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide){
listImages=document.getElementsByClassName("image");
listTitres=document.getElementsByClassName("slidesTitre");
for(i=0;i<listImages.length;i++){
listImages[i].style.display="none";
listTitres[i].style.display="none";
}
listImages[numeroSlide-1].style.display="";
listTitres[numeroSlide-1].style.display="";
document.getElementById("slidesNumeros").innerHTML=numeroSlide+"/"+listImages.length;
apparaitre();
}
function apparaitre(){
document.getElementsByClassName("slidesTextes")[0].style.display="none";
document.getElementsByClassName("slidesTextes")[0].style.display="";
}
</script>
And here is the CSS file:
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
animation: apparition 1s;
border: 1px solid red;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
The browser is acting correctly; the animation is only triggered when the node renders, and it renders once. You have to remove the animation and re-add it whenever an arrow button gets clicked. The easiest way is to make it its own class (run code snippet):
var numeroSlide = 1;
afficherSlide(numeroSlide);
function changeSlide(numero) {
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
numeroSlide = numeroSlide + numero;
if (numeroSlide < 1) {
numeroSlide = 4;
}
if (numeroSlide > 4) {
numeroSlide = 1;
}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide) {
listImages = document.getElementsByClassName("image");
listTitres = document.getElementsByClassName("slidesTitre");
for (i = 0; i < listImages.length; i++) {
listImages[i].style.display = "none";
listTitres[i].style.display = "none";
}
listImages[numeroSlide - 1].style.display = "";
listTitres[numeroSlide - 1].style.display = "";
document.getElementById("slidesNumeros").innerHTML = numeroSlide + "/" + listImages.length;
apparaitre();
}
function apparaitre() {
document.getElementsByClassName("slidesTextes")[0].style.display = "none";
document.getElementsByClassName("slidesTextes")[0].style.display = "";
}
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
border: 1px solid red;
}
.animation {
animation: apparition 1s;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes animation">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
html
<div class="slidesTextes animation">
javascript
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
css
.animation {
animation: apparition 1s;
}
$(".menu").click(function () {
if ('.pagelinks').style.display = 'none';
{
$('.pagelinks').style.display = 'block';
}
else
{
$('.pagelinks').style.display = 'none';
}
})
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
.heading1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 675px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 75%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.pagelinks
{
margin: auto;
margin-left: 49%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
transition: 0.3;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="main.js" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<a href="" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
</div>
<nav class="pagelinks">
<ul>
<li>About</li>
<li>Contact</li>
<li>Calculators</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="heading1">
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.
First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead.
Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE
I'm trying to use jQuery to animate a menu, making it enter the page from off screen when clicked. When I click on the menu button, the button just highlights. It's not working, what am I missing? Here's the code:
HTML
<html>
<head>
<title>Mrs. Rogers Math</title>
<link type="text/css" rel="stylesheet" href="mrm2.css"/>
<!--LINK TO JQUERY & FILE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
<img id="logoImg" src="http://www.mrsrogersmath.net/SVG_logo_2.png" alt="logoImg">
<img class="menuButton" src="http://www.mrsrogersmath.net/menuButton.png" alt="menuButton">
<ul class="menu">
<li id="menuLinks">Home </li>
<li id="menuLinks">Math Fun </li>
<li id="menuLinks">Helpful Links </li>
<li id="menuLinks">Contact Me </li>
</ul>
</div>
<script>document.write(jQuery.now());</script>
</body>
</html>
CSS
#header{
position: relative;
background-color:#636363;
width: auto;
height: 106px;
z-index: -1;
}
#logoImg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.menuButton{
position: absolute;
right: 10px;
top: 20px;
z-index: 1;
background-color: none;
cursor: pointer;
}
.menu{
position: absolute;
right:-300px;
top:-18px;
z-index: 1;
width: 250px;
height: 400px;
background-color: #636363;
list-style-type: none;
border-radius:25px;
}
#menuLinks{
/*display:inline;*/
font-size: 15px;
color: white;
font-size:35px;
margin-right: 10px;
margin-top: 20px;
background-color:none;
}
JQUERY
var main = function() {
$('.menuButton').click(function() {
$('.menu').animate({
right: "10px"
}, 200);
});
};
$(document).ready(main);
It's about your #header having a negative z-index. It's "hidden" behind the body which results in you not being able to actually click the .menuButton.
Longer explaination: Giving the menu button a higher z-index than one of its parent elements (in this case, the #header) doesn't have any effect - it will still compete successfully with other descendants of the #header but it will not be displayed on top of the #headers parents or siblings. The #header's z-index will be the "dominant" one.
See also: stacking context as referred by #ajp15243 in the comments.
var main = function() {
$('.menuButton').click(function() {
$('.menu').animate({
right: "10px"}, 200);
});
};
$(document).ready(main);
#header{
position: relative;
background-color:#636363;
width: auto;
height: 106px;
z-index: 0;
}
#logoImg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.menuButton{
position: absolute;
right: 10px;
top: 20px;
z-index: 5;
background-color: none;
cursor: pointer;
}
.menu{
position: absolute;
right:-300px;
top:-18px;
z-index: 1;
width: 250px;
height: 400px;
background-color: #636363;
list-style-type: none;
border-radius:25px;
}
#menuLinks{
/*display:inline;*/
font-size: 15px;
color: white;
font-size:35px;
margin-right: 10px;
margin-top: 20px;
background-color:none;
}
<html>
<head>
<title>Mrs. Rogers Math</title>
<link type="text/css" rel="stylesheet" href="mrm2.css"/>
<!--LINK TO JQUERY & FILE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
<img id="logoImg" src="http://www.mrsrogersmath.net/SVG_logo_2.png" alt="logoImg">
<img class="menuButton" src="http://www.mrsrogersmath.net/menuButton.png" alt="menuButton">
<ul class="menu">
<li id="menuLinks">Home </li>
<li id="menuLinks">Math Fun </li>
<li id="menuLinks">Helpful Links </li>
<li id="menuLinks">Contact Me </li>
</ul>
</div>
<script>document.write(jQuery.now());</script>
</body>
</html>
here, fixed for you.