I have the piece of code below that displays boxes, once you click on a box it expands and displays more information, which you can then close to view the boxes again. For some reason even though I have put 7 list items, not all of them appear and they don't appear in the order I put them in the html.
I followed a tutorial quite closely but I can't find the part of code that is causing it to only display a few of the boxes in this random order.
function openSchool() {
$('.school-container li .school-block').click(function() {
if (!$(this).hasClass('active')) {
$(this).addClass('active');
var setLeftPos = $('.school-container li .school-block.active').position().left,
setRightPos = -setLeftPos + $('.school-container').width() - $(this).width(),
schoolBlock = $(this);
state = $(this).children('.state');
$(schoolBlock).css('left', setLeftPos);
$(schoolBlock).css('right', setRightPos);
$(schoolBlock).animate({
'bottom': '0',
'top': '0',
'min-width': ''
}, {
duration: 250,
queue: false
});
$(schoolBlock).animate({
'left': '0',
'right': '0'
}, {
duration: 250,
queue: false
});
$(state).animate({
width: '40%'
}, {
duration: 250,
queue: false
});
setTimeout(function() {
$('.schools').css('width', '59%');
$('.school-list').addClass('fade');
$('.closeSchool').addClass('fade');
}, 300);
$('.closeSchool').click(function() {
$('.school-container li .school-block.active').dequeue().animate({
'bottom': '100%',
'top': '0',
'min-width': '200px',
'left': setLeftPos,
'right': setRightPos
}, 250, function() {
$('.school-container li .school-block.active').removeClass('active');
var setLeftPos = 0;
var setRightPos = 0;
});
$(state).animate({
width: '96%'
}, {
duration: 250,
queue: false
});
$('.schools').css('width', '1%');
$('.school-list').removeClass('fade');
$('.closeSchool').removeClass('fade');
$('.map').removeClass('slide');
});
} else {
console.log('doesnt');
}
});
$('.address').click(function() {
$('.map').addClass('slide');
$('.slide').click(function() {
$('.map').removeClass('slide');
});
});
}
function functionInit() {
openSchool();
}
$(function() {
functionInit();
});
body {
background: #2c3e50;
}
section.school-finder {
padding: 40px 0;
font-family: 'Open Sans', sans-serif;
width: 1260px;
margin: 0 auto;
}
section.school-finder h2 {
color: #ecf0f1;
}
section.school-finder .school-container {
position: relative;
height: 400px;
clear: both;
overflow: hidden;
margin-top: 30px;
}
section.school-finder li {
display: inline-block;
margin-left: .5%;
width: 200px;
min-height: 200px;
}
section.school-finder li .school-block {
position: absolute;
top: 0;
bottom: 100%;
min-height: 200px;
min-width: 200px;
right: auto;
cursor: pointer;
background: #1abc9c;
}
section.school-finder li .school-block .state {
color: #fff;
font-size: 1.4em;
text-align: center;
width: 96%;
display: inline-block;
vertical-align: middle;
}
section.school-finder li .school-block .state span {
display: block;
}
section.school-finder li .school-block .state .img {
min-height: 104px;
position: relative;
}
section.school-finder li .school-block .state img {
opacity: .4;
}
section.school-finder li .school-block.active {
z-index: 100;
cursor: inherit;
}
section.school-finder li .school-block .schools {
display: inline-block;
vertical-align: middle;
height: 100%;
width: 1%;
overflow: hidden scroll;
position: relative;
}
section.school-finder li .school-block .schools ul.school-list {
opacity: 0;
position: absolute;
width: 100%;
top: 5%;
}
section.school-finder li .school-block .schools ul.school-list li {
color: #fff;
display: block;
margin-right: 0;
width: 100%;
min-height: inherit;
padding: 35px 0;
border-bottom: 1px dashed #fff;
background-repeat: repeat no-repeat;
background-position: bottom;
}
section.school-finder li .school-block .schools ul.school-list li div.location {
display: inline-block;
vertical-align: middle;
max-width: 300px;
}
section.school-finder li .school-block .schools ul.school-list li div.location span.city {
display: block;
font-size: 1.2em;
margin-bottom: 10px;
}
section.school-finder li .school-block .schools ul.school-list li div.location span.address {
display: block;
font-size: .9em;
cursor: pointer;
}
section.school-finder li .school-block .schools ul.school-list li div.location span.address:hover {
opacity: .8;
}
section.school-finder li .school-block .schools ul.school-list li div.learn-more {
display: inline-block;
vertical-align: middle;
margin-right: 10%;
float: right;
color: #fff;
}
section.school-finder li .school-block .schools ul.school-list li div.learn-more a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
border: 1px solid #fff;
border-radius: 4px;
}
section.school-finder li .school-block .schools ul.school-list.fade {
opacity: 1;
top: 0;
transition: all 400ms ease-out;
}
section.school-finder .closeSchool {
cursor: pointer;
display: inline-block;
color: #ecf0f1;
font-size: 1em;
float: right;
margin-right: 14px;
margin-bottom: 20px;
position: relative;
top: 15px;
opacity: 0;
transition: top .8s ease,opacity 1s ease;
}
section.school-finder .closeSchool .icon-arrow-left {
font-size: 1.4em;
vertical-align: sub;
}
section.school-finder .closeSchool.fade {
opacity: 1;
top: 0;
}
section.school-finder .map {
display: inline-block;
position: absolute;
right: -100%;
top: 0;
height: 100%;
overflow: hidden;
transition: all 400ms ease-out;
z-index: 101;
width: 100%;
cursor: pointer;
}
section.school-finder .map img {
float: right;
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.42);
}
section.school-finder .map.slide {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="school-finder">
<div class="container">
<div class="closeSchool"><span class="icon-arrow-left"></span>Back to All Blocks</div>
<div class="school-container">
<ul>
<li>
<div class="school-block">
<div class="state">
<div class="img"><img src="" alt="" /></div>
<span>Test1</span>
</div>
<div class="schools">
<ul class="school-list">
<li>
<div class="location">
<span class="city">
</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="school-block">
<div class="state">
<div class="img"><img src="" alt="" /></div>
<span>Test2</span>
</div>
<div class="schools">
<ul class="school-list">
<li>
<div class="location">
<span class="city">
</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="school-block">
<div class="state">
<div class="img"><img src="" alt="" /></div>
<span>Test3</span>
</div>
<div class="schools">
<ul class="school-list">
<li>
<div class="location">
<span class="city">
</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="school-block">
<div class="state">
<div class="img"><img src="" alt="" /></div>
<span>Test4</span>
</div>
<div class="schools">
<ul class="school-list">
<li>
<div class="location">
<span class="city">
</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="school-block">
<div class="state">
<div class="img"><img src="" alt="" /></div>
<span>Test5</span>
</div>
<div class="schools">
<ul class="school-list">
<li>
<div class="location">
<span class="city">
</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="school-block">
<div class="state">
<div class="img"><img src="" alt="" /></div>
<span>Test6</span>
</div>
<div class="schools">
<ul class="school-list">
<li>
<div class="location">
<span class="city">
</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="school-block">
<div class="state">
<div class="img"><img src="" alt="" /></div>
<span>Test7</span>
</div>
<div class="schools">
<ul class="school-list">
<li>
<div class="location">
<span class="city">
</span>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="map">
<img src="/_assets/img/maps/map1.jpg" alt="" />
</div>
</div>
<!-- </> SCHOOL CONTAINER -->
</div>
</section>
I believe your problem is caused by some CSS rules:
section.school-finder li .school-block {
position: absolute;
top: 0;
...
}
you need to specify a different value for "top" on your blocks 6 & 7 (like top: 210px for exemple) because right now ther are displayed right over you blocks 1 & 7.
But this will force you to make changes on the JS part on the action that reset the block to it initial position and size for this particular blocks (6 & 7).
And i will become more difficult to manage if you add more blocks (any group of 5 blocks will needs a différent "top" value).
Related
I'm trying to animate the top value of my CSS in order to create a dropdown nav when the user clicks the hamburger button.
The CSS doesn't seem to be getting applied to the element when I view in the Chrome inspector, but I've tried the hide() function on the same element and that works fine.
HTML:
<div class="top section-reversed">
<div class="container">
<div class="row">
<div class="col-2">
<span class="icon icon-logo-ctr"></span>
</div>
<div class="col-2 ml-auto">
<a id="asdf" href="#" class="icon icon-hamburger"></a>
</div>
</div>
</div>
</div>
<div class="nav-mobile">
<div class="content">
<a class="icon icon-close" href="#"></a>
<div class="cta-consult">
<h5>000000</h5>
<span class="telephone">000000</span>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Prices</li>
<li>Furniture</li>
<li>Contact</li>
</ul>
<div class="social-header social-header-mobile">
<img src="image/social-whatsapp.png" alt="Placeholder" />
<img src="image/social-instagram.png" alt="Placeholder" />
<img src="image/social-facebook.png" alt="Placeholder" />
<img src="image/social-twitter.png" alt="Placeholder" />
</div>
</div>
</div>
JS:
$(document).ready(function() {
// nav-mobile
$('#asdf').click(function() {
$('.nav-mobile').animate({
'top': '+=540'
},
5000, function() {
// Animation complete.
});
});
});
CSS:
.nav-mobile {
background: #fff;
color: #000;
height: 100%;
left: auto;
overflow: hidden;
position: fixed;
/*top: 65px;*/
top: -605px;
width: 100%;
z-index: 1;
}
.nav-mobile > .content {
padding: 20px;
}
.nav-mobile .icon-close {
color: #797979;
float: right;
padding: 0;
}
.nav-mobile .cta-consult {
clear: both;
}
.nav-mobile .cta-consult h5 {
font-size: 14px;
margin: 0 0 2px;
letter-spacing: 0;
}
.nav-mobile .cta-consult .telephone {
font-size: 30px;
letter-spacing: .02em;
}
.nav-mobile ul {
border-top: #d0d0d0 solid 1px;
display: block;
list-style: none;
margin: 30px 0 20px;
padding: 20px 0 0;
width: 100%;
}
.nav-mobile a {
color: #000;
display: block;
text-transform: uppercase;
letter-spacing: .25em;
padding: 10px 0;
}
I'm trying to align cards that are wrapped up in divs. What I want to do is align those cards beside each other until it reaches maximum screen width, then I want it to move to the next line automatically.
The problem is that once I copy the html code, the new copied card spawns on top of the previous card rather than next to each other.
HTML:
<div class="fighter-card">
<div class="front active">
<div class="ranking-position">1</div>
<div class="more">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<div class="fighter-picture">
<img src="~/images/Resources/RankingsPhotos/Lomachenko.png" />
</div>
<ul class="information">
<li>
<div class="information-left">Name:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Weight:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Belts:</div>
<div class="information-right">aa</div>
</li>
</ul>
</div>
<div class="back">
<div class="go-back">
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
</div>
<ul class="information">
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">None of your business</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">aa</div>
<div class="information-right">9<sup>o</sup></div>
</li>
</ul>
</div>
</div>
<div class="fighter-card">
//Next div with the same content for testing
</div>
CSS:
.fighter-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
min-height: 400px;
}
.fighter-card .front {
width: 100%;
height: 100%;
background: #171717;
padding: 30px;
box-sizing: border-box;
transition: .5s;
transform-origin: right;
float: left;
}
.ranking-position {
font-weight: bold;
width: 50%;
text-align: left;
float: left;
color: #fff;
font-size: 40px;
}
.more {
width: 50%;
text-align: right;
cursor: pointer;
float: right;
font-size: 24px;
color: #fff;
display: block;
}
.fighter-picture {
background-size: cover;
}
.information {
margin: 0;
padding: 0;
}
.information li {
padding: 10px 0;
border-bottom: 2px solid #fff;
display: flex;
font-weight: bold;
cursor: pointer;
color: #fff;
}
.information li:last-child {
border-bottom: none;
}
.information li .information-left {
width: 50%;
}
.information li .information-right {
width: 50%;
text-align: right;
}
.fighter-card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background: rgba(0,0,0,0.7);
box-sizing: border-box;
transform-origin: left;
transition: .5s;
transform: translateX(100%) rotateY(90deg);
}
.fighter-card .back.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front {
transform: translateX(-100%) rotateY(90deg);
}
.go-back {
font-size: 24px;
color: #fff;
text-align: right;
}
.go-back .fa {
cursor: pointer;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.more').click(function () {
$('.back').addClass('active')
$('.front').removeClass('active')
});
$('.go-back').click(function () {
$('.back').removeClass('active')
$('.front').addClass('active')
});
});
I know it's a lot of code here entered. Just want to make sure that everything that could be related to this problem is included.
Thanks in advance.
If you use absolute positioning and specify the location, then you should do that for each card. If not, let the browser do the positioning by using display: inline-block or float: left (if there is other content on the line).
I am trying to add and remove a class based on vertical scroll (to the navbar) but there seems to be no effect.
I want the navbar to change background color on scroll and I cant understand why it has not effect.
I have tried adding just css using $(element).css but that doesnt seem to be making a difference either
Link: https://jsfiddle.net/r4Lxvqps/
HTML:
<!DOCTYPE html>
<title>A</title>
<body>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li id="logo">
Arshdeep
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt=""/>
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>
</body>
CSS:
* {
padding: 0px;
margin:0 auto;
-webkit-transition: all .2s ease-in-out;
}
html, body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin:0px;
}
.container {
position:relative;
height: 100%;
}
nav {
padding: 5px 0px;
position:fixed;
width: 100%;
top:0;
z-index: 9999;
color:black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin:0 15px;
}
nav a {
text-decoration: none;
color:white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
nav li:not(#logo) a {
opacity: .7;
}
nav li:not(#logo) a:hover {
opacity: 1;
}
#logo a {
font-size: 30px;
}
.scrolled {
background-color:white;
color:black !important;
}
/** Home Page **/
.home {
vertical-align: top;
background-color: #38A5DB;
color:black;
min-height: 100%;
position:relative;
}
.home > .container {
top: 85px;
padding: 50px 0px;
float:left;
width: 100%;
color:white;
}
.about, .contact, .portfolio {
min-height: 100%;
}
section {
float:left;
width: 48%;
position:relative;
text-align: center;
}
aside {
float:right;
width: 50%;
}
aside > img {
width: 80%;
}
/** About Me **/
Checks if offset is > 50 and then should add css (color:black)
JQuery:
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop;
if (scroll_offset > 50) {
$(".nav").css("color", "black");
}
});
});
var scroll_offset = $(window).scrollTop();
$.fn.scrollTop is a function. You forgot to invoke it.
Also can try this:
$(window).scroll(function() {
if ($(window).scrollTop() >= 50) {
$(".nav ul li a").css("color", "black");
} else {
$(".nav ul li a").css("color", "white");
}
});
JSFiddle
Invoke the scrollTop function (scrollTop())
Fix the selector: nav a instead of .nav
Add else statement to restore original color
jsFiddle demo
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop();
//alert(scroll_offset);
if (scroll_offset > 50) {
$("nav a").css("color", "black");
} else {
$("nav a").css("color", "white");
}
});
});
* {
padding: 0px;
margin: 0 auto;
-webkit-transition: all .2s ease-in-out;
}
html,
body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin: 0px;
}
.container {
position: relative;
height: 100%;
}
nav {
padding: 5px 0px;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
color: black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin: 0 15px;
}
nav a {
text-decoration: none;
color: white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
nav li:not(#logo) a {
opacity: .7;
}
nav li:not(#logo) a:hover {
opacity: 1;
}
#logo a {
font-size: 30px;
}
.scrolled {
background-color: white;
color: black !important;
}
/** Home Page **/
.home {
vertical-align: top;
background-color: #38A5DB;
color: black;
min-height: 100%;
position: relative;
}
.home > .container {
top: 85px;
padding: 50px 0px;
float: left;
width: 100%;
color: white;
}
.about,
.contact,
.portfolio {
min-height: 100%;
}
section {
float: left;
width: 48%;
position: relative;
text-align: center;
}
aside {
float: right;
width: 50%;
}
aside > img {
width: 80%;
}
/** About Me **/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li id="logo">
Arshdeep
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt="" />
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>
im trying to change a image to another image when the user clicks on the options they have of images or colors, i have a picture below to show what im trying to do
this are the links for second images
http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg
http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg
html
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>
css:
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}
First assign an ID to your T-shirt image:
<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
Then on your black & white buttons assign a data attribute with the URL of the image the t-shirt will be changed to:
<div class="inner" data-image-id="http://urltoblackimage.jpg"></div>
Then use jQuery to change the image src on click:
$('div.inner').click(function() {
var image = $(this).attr('data-image-id');
$('#t-shirt').attr('src', image);
});
Maybe give your div class="inner" a better trigger name with an ID or a more descriptive class name to avoid conflicts.
Here is the simplest way to do it in plain Javascript.
function switchImages(){
if(document.getElementById("mainImage").src != "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg") {
document.getElementById("mainImage").src = "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg";
document.getElementById("smallImage").src = "http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg";
}else{
document.getElementById("mainImage").src = "http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg";
document.getElementById("smallImage").src = "http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg";
}
}
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img id="mainImage" src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div onclick="switchImages();" class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div onclick="switchImages();" class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img onclick="switchImage();" id="smallImage" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>
Here's a simple way without changing anything in your existing code.
<script>
$().ready(function(){
$('#colorsAndAltContainer li').on('click',function()
{
if($(this).find('.rgbColor').data('color') === "000000")
{
$('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg");
$('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg");
}
else if($(this).find('.rgbColor').data('color') === "FFFFFF")
{
$('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg");
$('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg");
}
});
$('.alternativeImage').on('click',function()
{
var smallImageUrl = $(this).attr("src");
var mainImageUrl = $(".img-main img").attr("src");
$(this).attr("src",mainImageUrl);
$(".img-main img").attr("src",smallImageUrl);
$(".img-main img").css("width","300px");
});
});
</script>
Working link : http://jsfiddle.net/b2c5e19h/5/
Add an id to the relevant <a> tag, access it with
document.getElementById('idOfTag').setAttribute('href')='someOtherImage.jpg';
This would just be several lines within a javascript function. Make the button, or whatever the user is clicking, listen and execute this function by adding onclick="yourFunctionsName()
No jquery necessary!
I have been trying to make my slider stay in the same place when the side-menu of my page comes in from the left on the page. I have been searching for answers and there seems to be some people who have encountered the same problem in various situations.
I have tried to change the position properties of elements on the page without any success. Is there anyone who might be able to help me with this problem?
JSFiddle: https://jsfiddle.net/nekgunru/2/
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<title>Practice</title>
<!--Links to main Stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!--Links to "Oswald"-font-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Links to Javascript-file-->
<script type="text/javascript" src="app.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
The issue is that you are fading out .icon-menu which causes it to be set to display: none; when the fading animation has completed. This means that it no longer effects the position of the elements around it and so in this case they move up.
none
Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
display - (https://developer.mozilla.org/en-US/docs/Web/CSS/display)
One way to navigate around this problem would be to use fadeOuts callback to set visibility: hidden; instead as it makes the element invisible while still affecting the position of the elements around it.
hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
visibility (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
Alternative method
You could instead use animate and set the opacity to 0 as this will simply modify the transparency of the element, it will still effect the position of the elements around it.
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').animate({opacity: 0}, 100);
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').animate({opacity: 0}, 100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>