I'm working on a page where the user can scroll down. The scroll bar is hidden but functional (pushed to the side with inner&outer divs and "right: -17px;").
In this forum I saw some scroll-disappear solutions, but only in jQuery, but I want to learn pure/vanilla JavaScript before I use any library.
I tried to write my own simple JS code. It worked for the first when I haven't hide the scrollbar, seems I have to change something in the JS code.
Here is my code: (I also created a snippet below to simulate):
window.addEventListener("scroll", scrollEffectOne);
function scrollEffectOne()
{
var hidethis = document.getElementById("box");
hidethis.style.opacity = "0.1";
}
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#box
{
width: 350px;
height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: rgba(0,0,0,.3);
border-radius: 10px;
opacity: 1;
}
#box a
{
opacity: 1;
font-size: 15px;
color: white;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
}
#box b
{
color: rgba(255,255,255,.3);
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1">
<div id="box">
<a>Hide Me <b>while scrolling</b> !</a>
</div>
</div>
<div id="frame_2"></div>
<div id="frame_3"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1">
<div id="box">
<a>Hide Me <b>while scrolling</b> !</a>
</div>
</div>
<div id="frame_2"></div>
<div id="frame_3"></div>
</div>
</div>
</body>
<style>
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#box
{
width: 350px;
height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: rgba(0,0,0,.3);
border-radius: 10px;
opacity: 1;
}
#box a
{
opacity: 1;
font-size: 15px;
color: white;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
}
#box b
{
color: rgba(255,255,255,.3);
}
</style>
<script>
window.addEventListener("scroll", scrollEffectOne);
function scrollEffectOne()
{
var hidethis = document.getElementById("box");
hidethis.style.opacity = "0.1";
}
</script>
</html>
Your code looks right but it didnt work until i changed the useCapture option to true. To be honest, I dont know why it has do be true.
window.addEventListener("scroll", scrollEffectOne, true);
Read more that about here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Related
my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)
This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
I have making a simple skills block on my website. I have skillsWheel class on parent div and then I have an inner div with h2 with a class of Skills. skillsWheel also includes 8 more divs with a class of skill. I have skills div and all the skill div centred inside the skillsWheel with only skills div showing and skill divs hide behind the skills div. I want the skill divs to show with animation on page load to make a circle around the skills div and then start rotating clock or anti clock wise or both. Any idea what I have to do to accomplish this? So far I have done this much.
.skillsWheel {
width: 500px;
height: 500px;
background: #d7d7d7;
box-sizing: border-box;
padding: 15px;
position: relative;
}
div {
color: #fff;
border-radius: 50%;
}
.skill{
height: 70px;
width: 70px;
background: crimson;
line-height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
z-index: -5;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.skill:nth-child(2) {
top: 15%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(3) {
top: 25%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(4) {
top: 70%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(5) {
top: 85%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(6) {
top: 70%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(7) {
top: 45%;
left: 85%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(8) {
top: 25%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(9) {
top: 45%;
left: 15%;
margin-left: -40px;
z-index: 1;
}
.skills-main {
width: 100px;
height: 100px;
background: #98bf21;
text-align: center;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.skills-main h5 {
font-size: 22px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="skillsWheel">
<div class="skills-main">
<h5> Skills </h5>
</div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">jQuery</div>
<div class="skill">Sass</div>
<div class="skill">BootStrap</div>
<div class="skill">Git</div>
<div class="skill">Photoshop</div>
</div>
</body>
</html>
Simply add a keyframe (ensure you use prefixes for cross compatibility)
#keyframes rotate{
from {
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}
create a div with class skill_container and add all skill container inside.
and add an animation rules to your container with skill class (prefix is also required)
animation-name:rotate;
animation-duration:1s;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
Snippet below
$(document).ready(function() {
$(".skill").css({
width: "70px",
height: "70px"
})
})
.skillsWheel {
width: 500px;
height: 500px;
background: #d7d7d7;
box-sizing: border-box;
padding: 15px;
position: relative;
}
div {
color: #fff;
border-radius: 50%;
}
.skill {
height: 70px;
width: 70px;
background: crimson;
line-height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
z-index: -5;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.skill:nth-child(2) {
top: 15%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(3) {
top: 25%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(4) {
top: 70%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(5) {
top: 85%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(6) {
top: 70%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill_container {
position: absolute;
width: 100%;
height: 100%;
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.skill:nth-child(7) {
top: 45%;
left: 85%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(8) {
top: 25%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(9) {
top: 45%;
left: 15%;
margin-left: -40px;
z-index: 1;
}
.skills-main {
width: 100px;
height: 100px;
background: #98bf21;
text-align: center;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.skills-main h5 {
font-size: 22px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="skillsWheel">
<div class="skills-main">
<h5> Skills </h5>
</div>
<div class="skill_container">
<div></div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">jQuery</div>
<div class="skill">Sass</div>
<div class="skill">BootStrap</div>
<div class="skill">Git</div>
<div class="skill">Photoshop</div>
</div>
</div>
</div>
</body>
</html>
I want to give a sliding effect using left and right DIVs when user clicks in the middle DIV(blue). But it's not working.
The script code is not working. I think there is some error.
When I used hover in my stylesheet it also didn't work. I mean that I used hover on id inner/outer/power which will change css property of id left and right to create a sliding transition effect. But it didn't work. But when I used container to be hovered instead of the above ids then sliding effect was working. I'm totally depressed as it's not making any sense to me.
<script type="text/javascript" >
function slide()
{
document.getElementById("left").style.left = -100% ;
document.getElementById("right").style.right = -100% ;
}
</script>
html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
The value for your CSS effect needs to be in quotations.
function slide()
{
document.getElementById("left").style.left = "-100%";
document.getElementById("right").style.right = "-100%" ;
}
html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
As a side note, in code snippets, your JavaScript does not need to be inside of the script tag, as long as it is in the JavaScript section.
Try this:
document.getElementById("left").style.left = "-100px";
I have a loading div that I display, and I want to have the text in the <h1> below the <img> and I can get it aligned in the middle horizontally, but I cant get it aligned below the <img> here is my HTML
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
And my CSS
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-image {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
And I have included a fiddle here: http://jsfiddle.net/myh5f13q/
So how can I get the <h1> centered horizontally and below the <img>?
Thanks
Remove all the positioning and give this way:
#loading {
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#loading-image {
width: 10%;
display: block;
margin: auto;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
Preview
Full Screen
I would wrap the content in another <div> and use CSS transform and position absolute to centre both vertically and horizontally.
Source: https://css-tricks.com/centering-css-complete-guide/
#loading {
position: relative;
}
#loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="loading">
<div id="loading-content">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>
Add another container, and vertically center it within the #loading element.
http://jsfiddle.net/mblase75/gfv08q4z/
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#loading-image {
display: block;
margin: auto;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
<div id="loading">
<div id="loading-container">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>
I am trying to get different divs to fade in and out when I click a image with a <a href> in it and # to make it fade in and out. I can not get it to fade in and out no matter what I try. This is my code:
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#triggerButton').click(function (e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$('#casualshirt').fadeIn('fast');
});
});
});
body {
margin: 0;
padding: 0;
}
#background {
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 800px;
overflow: hidden;
z-index:0;
}
#Background {
left: 0px;
top: 0px;
position: absolute;
width: 600px;
height: 800px;
z-index:1;
}
#Layer1 {
left: 24px;
top: 16px;
position: absolute;
width: 285px;
height: 762px;
z-index:2;
}
#Rectangle1 {
left: 34px;
top: 59px;
position: absolute;
width: 260px;
height: 512px;
z-index:3;
}
#Layer6 {
left: 339px;
top: 541px;
position: absolute;
width: 98px;
height: 116px;
z-index:4;
}
#Shirts {
left: 391px;
top: 8px;
position: absolute;
width: 133px;
height: 42px;
z-index:5;
}
#Layer2 {
left: 258px;
top: 138px;
position: absolute;
width: 260px;
height: 139px;
z-index:6;
}
#Layer4 {
left: 252px;
top: 315px;
position: absolute;
width: 197px;
height: 188px;
z-index:7;
}
#Layer5 {
left: 498px;
top: 366px;
position: absolute;
width: 62px;
height: 86px;
z-index:8;
}
#Layer7 {
left: 407px;
top: 492px;
position: absolute;
width: 174px;
height: 165px;
z-index:9;
}
#Layer8 {
left: 366px;
top: 685px;
position: absolute;
width: 55px;
height: 108px;
z-index:10;
}
#Layer9 {
left: 490px;
top: 670px;
position: absolute;
width: 98px;
height: 101px;
z-index:11;
}
#Layer10 {
left: 221px;
top: 642px;
position: absolute;
width: 130px;
height: 117px;
z-index:13;
}
#Layer3 {
left: 368px;
top: 95px;
position: absolute;
width: 260px;
height: 182px;
z-index:14;
}
.overlay {
display: none;
}
#map {
/*right: -780px; removed for demo purposes */
width: 285px;
height: 762px;
padding: 29px;
background: url(http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer1.png) no-repeat;
}
#station_A {
top: 0%;
/* whatever you like */
left: 0%;
/* whatever you like */
position: absolute;
}
#station_B {
top: 0%;
/* whatever you like */
left: 0%;
/* whatever you like */
position: absolute;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background-image: url('/images/shirt_sprites.png');
display: block;
height: 72px;
padding: 0;
width: 72px;
}
#paradisetanktop + #paradisetanktop_s {
background-position: 72 0;
}
#paradisetanktop:checked + #paradisetanktop_s {
background-position: 0 0;
}
#bandanatop + #bandanatop_s {
background-position: 0 0;
}
#bandanatop:checked + #bandanatop_s {
background-position: 0 0;
}
button {
background-image: url(images/Next.png);
background-repeat: no-repeat;
background-position: 50% 50%;
/* put the height and width of your image here */
height: 27px;
width: 55px;
border: none;
}
button span {
display: none;
}
#casualshirt {
width: 384px;
height: 609px;
left: 350px;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
position: absolute;
display: none;
z-index: 15;
}
#firstscreen {
width: 384px;
height: 609px;
left: -30px;
position: absolute;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/firstscreen.png') no-repeat;
z-index: 12;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="firstscreen"></div>
<div id="background">
<div id="Background"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Background.png"></div>
<div id="Layer1"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer1.png"></div>
<div id="map"></div>
<div id="Rectangle1"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Rectangle1.png"></div>
<div id="shirts">
<div id="Shirts"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Shirts.png"></div>
<div id="Layer2"><a href="#" id="triggerbutton"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer2.png"></div>
<div id="Layer4"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer4.png"></div>
<div id="Layer5"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer5.png"></div>
<div id="Layer6"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer6.png"></div>
<div id="Layer7"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer7.png"></div>
<div id="Layer9"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Next.png"></div>
<div id="Layer10"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer10.png"></div>
<div id="Layer3"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer3.png"></div>
<div id="casualshirt"></div>
</div>
<div id="colors"></div>
</div>
I've researched this thoroughly and can not get it to work.
UPDATE: I did Include Fiddle but it got removed here is the fiddle
UPDATE: Updated Fiddle with fixed for the id.
You must remove trigger click function outside of document load. Because you added jquery lib inside body element.
Also you can fade out and fade in target parent div element for flashing thing.
$(document).on('click', '#triggerButton', function(e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$(e.toElement.parentElement).fadeOut().delay(200).fadeIn();
});
});
Try this fiddle: http://jsfiddle.net/aLrf1cLz/4/
UPDATE 1:
CSS:
#casualshirt {
top: 100px;
width: 384px;
height: 609px;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
position: absolute;
display: none;
z-index: 123123;
}
JS:
$(document).on('click', '#triggerButton', function(e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$(e.toElement.parentElement).fadeOut();
$('#casualshirt').fadeIn()
});
});
Fiddle: http://jsfiddle.net/aLrf1cLz/8/