Develop Reference

Div isn't showing up with no errors popping up

I'm trying to set up a menu but the div that toggles the menu isn't showing up
I'm trying to follow a tutorial where a guy sets up a menu, and he has a div in the top left with a menu icon. I've followed the code perfectly word for word in the html and css, and yet nothing appears on my screen. I do have the exact same image in the exact same folder that he does.
Link to YT HTML
& the
Link to YT CSS
.btn-toggle-nav {
width: 60px;
height: 100%;
background-color: #F98F39;
background-image: url("img/menu.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
cursor: pointer;
}
.btn-toggle-nav:hover {
opacity: 0.5;
}
<nav class="nav-main">
<div class="btn-toggle-nav"></div>
<ul>
<li>Home</li>
<li>Project</li>
<li>Biography</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
The expected result should be like he has in the video.
Link to that

Try this. Add height in pixels.
.btn-toggle-nav {
width: 60px;
height: 46px;
background-color: #F98F39;
background-image: url(img/menu.png);
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
cursor: pointer;
display: inline-block;
}
ul {
display: inline-block;
}
.btn-toggle-nav:hover {
opacity: 0.5;
}
<nav class="nav-main">
<div class="btn-toggle-nav"></div>
<ul>
<li>Home</li>
<li>Project</li>
<li>Biography</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>

how to add subtle transiton between images?

I created this question and was able to get my slider to work. Now I need to add a smooth transition between images. I tried transition/ animate in CSS but that has a weird effect - there is a blackness between images. I think the transition property needs to be added to JS.
Current situation - there is stark difference as images change suddenly
Expectation - I want images to ease in and out.
Any help in this direction is greatly appreciated!
P.S. -> copy-pasting code here for ease of use:
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image"+value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>

Use opacity instead of display to be able to add transition, and make your element position absolute to have them above each other:
let line = document.getElementById("line");
line.addEventListener("input", function(event) {
setNewImage(event.target.value);
});
function setNewImage(value) {
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image" + value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
}
.scrollbar input {
width: 380px;
}
ul {
position:relative; /*make them relative to ul not li*/
margin:0;
padding:0;
}
/* added this*/
ul li .image {
position:absolute;
top:0;
left:0;
}
/**/
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
opacity: 0;
transition:1s all;
}
.playing {
opacity:1;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li>
<div class="playing image image1"></div>
</li>
<li>
<div class="image image2"></div>
</li>
<li>
<div class="image image3"></div>
</li>
<li>
<div class="image image4"></div>
</li>
<li>
<div class="image image5"></div>
</li>
<li>
<div class="image image6"></div>
</li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max=6>
</div>
</div>

Slide delay for no apparent reason css slider jquery

so as per the jsfiddle http://jsfiddle.net/greggy_coding/013481b9/19/
For the purpose of this question the focus is between the first and second slide transition... when you get to the second transition the classes don't get added immediately on the slide they wait for about 1 second the slider area... Can someone explain why as I want to have the classes added immediately on slide load.
p.s I am using getscript from another part of the site to load the script ... this is the script , (slider-animation.js)..
$(function() {
var $slides = $(".slides");
$slides.first().addClass("new-class");
$(".slide-container")
.on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
// do something here
$slides.find(".slide-container [class^='add-anim']").removeClass("animat fadeInUpBig bounceInUp");
var $radio = $slides.find(":radio[name='radio-btn']:checked");
and this is the getscript just after the loading of the slider, (.slides) to another page....
$(".tile-area-main").css({width: "720px"}).load("what.html .slides");
$.getScript("js/slider/slider-animations.js");

So I finally found the solution: http://jsfiddle.net/ea55zpe3/
Don't forget the line: overflow: hidden;in body, this gets rid of the scroll bar appearing for a second.
HTML
<div class="tile-area-main" id="tam-content">
<ul class="slides animated bounceInUp">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slideM">
<p class="add-anim-up">thisis an area for some text</p>
<p class="add-anim-left">Thisthis is another text area</p>
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slideM">
<p class="add-anim-up">some more text to have some classes added to</p>
<p class="add-anim-up">some more text with something to do</p>
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slideM">
<div id="referrals" class="add-anim-up">
<div id="company-title">
<h2>Referrals</h2>
</div>
<p class="add-anim-up">herapist or speech and language therapist) referrals are accepted, music therapy is unfortunately not currently available on the NHS. Schools are able tssions. If you have any questions or enquiries about musitate to contact us. (contact icon)</p>
</div>
<div id="local-links" class="add-anim-up">
<div id="company-title">
<h2>Local Links</h2>
</div>
<br/>
<p class="add-anim-left">MusAbility are always interested in networking and making local links with other businesses, charities and organisations in the North-West. Please send us a message to tell us about yourselves or to arrange to meet for a coffee and a chat (other beverages are accepted!) If you are interested in building a more formal partnership or co-promoting, please get in touch.</p>
</div>
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
</ul>
CSS
body {
background-color:#000;
overflow:hidden;
}
.metro .tile-area-main {
position: fixed;
left: 290px;
top: 150px;
display: inline-block;
color: #ffffff;
cursor: pointer;
width: 780px;
height: 450px;
overflow: hidden;
z-index : 3000;
}
.metro .tile-area-main p {
margin: 0;
padding: 0 2.4em 0.6em;
font-size: 1.2em;
line-height: 1.5;
color : #fff;
cursor: pointer;
}
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input {
display: none;
}
.slide-container {
display: block;
}
.slideM {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slideM img {
width: 100%;
height: 100%;
}
.slideM p {
color: #fff;
font-size : 22px;
}
.nav {
z-index:9999;
top:0;
}
.nav .prev {
margin-left:-80px
}
.nav .next {
right: -80px;
}
.nav label {
width: 100px;
height: 100%;
display: none;
position: absolute;
opacity: 1;
z-index: 9999;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 56pt;
text-align: center;
line-height: 20px;
font-family:"Varela Round", sans-serif;
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slideM:hover + .nav label {
opacity: 0.5;
}
.nav label:hover {
opacity: 1;
}
input:checked + .slide-container .slideM {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label {
display: block;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
opacity: 0.3;
background-color: rgba(0, 0, 0, 0.3);
}
.new-class .slideM {
border: 2px solid red;
}
JS
$(function () {
var $slides = $(".slides");
$slides.first().addClass("new-class");
$(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");
$(".nav").on("click", function () {
$(".add-anim-up").removeClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").removeClass("animated fadeInUpBig bounceInUp");
if ($(".add-anim-up").css('opacity') == '1') {
$(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");
};
});
});

If you switch your removeClass to after the addClass statements, you shouldn't see this behavior (http://jsfiddle.net/013481b9/25/):
var $radio = $slides.find(":radio[name='radio-btn']:checked");
$radio.next(".slide-container").find(".add-anim-up").addClass("animated fadeInUpBig");
$radio.next(".slide-container").find(".add-anim-left").addClass("animated fadeInUpBig");
$slides.find(".slide-container [class^='add-anim']").removeClass("animated fadeInUpBig bounceInUp");
The pause/flicker you were seeing was the classes being removed before the next animation was added.
Another thing I noticed (but that was not causing this specific behavior) was that the transitionend event was being run multiple times (for each change css change to the box), so I added a check for the transform event:
if (e.originalEvent.propertyName == 'transform') {
// do stuff
}
Hopefully that's helpful. Best of luck!

Smooth transition on collapsing element with angular & css only

I am trying to add a collapsable element to my app. I don't want to use jQuery or any other dependency than Angular.
I have built a very simple demo here: http://jsfiddle.net/eg69cfub/2/
The elements are displayed/hidden properly the only problem is the transition.
I don't understand why it is so abrupt, I'd like it to be smooth.
How can I fix this please?
HTML:
<div ng-app>
<div>
<ul>
<li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
<div class='header' ng-click='isVisible = !isVisible'> Hello {{ test }}</div>
<div class='body' ng-class='{ collapsed: isVisible }'> Goodbye </div>
</li>
</ul>
</div>
</div>
CSS:
li {
list-style: none;
}
.header {
width: 100%;
background-color: red;
}
.body {
width 100%;
background-color: blue;
display: block;
min-height: 1px;
transition: all ease 3s;
overflow: hidden;
}
.collapsed {
min-height: 0;
height: 0;
}
JS:
var myApp = angular.module('myApp',[]);
function accordionCtrl($scope) {
$scope.isVisible = false;
}

In Angular, you can use ng-animate to perform smooth animations with ng-show directive (along with many other directives). Here is your fiddler with animations: http://jsfiddle.net/fu2jw6j1/
Your HTML:
<div ng-app>
<div>
<ul>
<li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
<div class='header' ng-click='$scope.isVisible=!$scope.isVisible'> Hello {{ test }}</div>
<div class='box' ng-show="$scope.isVisible" ng-animate="'box'"> Goodbye </div>
</li>
</ul>
</div>
And here's the CSS:
li {
list-style: none;
}
.header {
width: 100%;
background-color: red;
}
.box {
width 100%;
background-color: blue;
display: block;
min-height: 1px;
transition: all ease 3s;
overflow: hidden;
height: 20px;
}
.box-show-setup, .box-hide-setup {
-webkit-transition:all linear 0.3s;
-moz-transition:all linear 0.3s;
-ms-transition:all linear 0.3s;
-o-transition:all linear 0.3s;
transition:all linear 0.3s;
}
.box-show-setup { height: 0; }
.box-show-setup.box-show-start { height:20px }
.box-hide-setup {height: 0; }
.box-hide-setup.box-hide-start { height: 0px; }
You can find more about ng-animate directive in Angular's documentation: https://docs.angularjs.org/api/ngAnimate

Change of icon using jquery

I am trying to change the list icon. Once the list icon is clicked then a list will open and the icon should change the icon to close icon. again on click on close it should change to list icon.
Here is the code what I have tried:
HTML:
<div id="menuLayout">
<a href="#menuLayout" id="openMenuLayout">
<img src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' />
<img src="http://seotobiz.com/images/icon_close.png" style='display:none;'/></a>
<nav id="menuLayoutList">
<ul>
<li>
<form id="search">
<input type="search" placeholder="Search...">
</form>
</li>
<li>Home</li>
<li>About Us</li>
<li>Key Facts</li>
<li>Team</li>
<li>Register</li>
<li>Contact</li>
</ul>
</nav>
</div>
Jquery:
$("#openMenuLayout").click(function(e){
debugger;
if ($('#menuLayout').hasClass('open-menu')){
$('#menuLayout').removeClass('open-menu');
$('#openMenuLayout').find('img').removeClass().addClass('opened_icon');
$(this).css('display','block');
} else {
$('#menuLayout').addClass('open-menu');
$('#openMenuLayout').find('img').removeClass().addClass('open-menu_icon');
$(this).css('display','block');
}
e.preventDefault();
});
Css:
#menuLayout {
display: block;
position: fixed;
width: 280px;
height: 100%;
z-index: 99;
top: 0;
left: -280px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
transition: left 0.2s ease-in-out;
-ms-transition: left 0.2s ease-in-out;
-o-transition: left 0.2s ease-in-out;
-moz-transition: left 0.2s ease-in-out;
-webkit-transition: left 0.2s ease-in-out;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0px, 0px);
background-color: #b11c1c;
background-image: -moz-linear-gradient(center top , #b11c1c, #AD3335);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b11c1c), to(#AD3335));
background-image: -webkit-linear-gradient(top, #b11c1c, #6A0001);
background-image: -o-linear-gradient(top, #b11c1c, #6A0001);
background-image: linear-gradient(to bottom, #b11c1c, #6A0001);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffb11c1c', endColorstr='#ffAD3335', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
#openMenuLayout {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
width: 32px;
height: 32px;
font-size: 16px;
color: #FFF;
line-height: 32px;
text-align: left;
z-index: 999;
top: 20px;
right: -52px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
img {
max-width: 100%;
}
#menuLayout.open-menu {
left: 0;
}
#menuLayout.open-menu #openMenuLayout {
left: 20px;
right: auto;
}
nav#menuLayoutList {
position: relative;
margin: 70px 0;
}
nav#menuLayoutList ul {
position: relative;
margin: 0;
}
New Link

What you want to achieve is not that hard.
I suggest you to use div elements instead of image elements and, use the css property background-image to define it.
This enables you to use two seperate css classes (with different background images), one for the opened menu and one for the closed one.
Further, it is now possible to use css sprites to avoid image flickering due not loaded resources and to avoid multiple http requests.
Your implementation should look similar to this. Just replace background-color with background-image. If you deploy your application remember that you can avoid image flickering with the sprite technique.
http://jsfiddle.net/V5vg9/

I think you search toggleClass:
$("#openMenuLayout").click(function(e){
$(this).toggleClass('close');
}
then define in CSS a open class and a close class with the open and close background-image.

Why not use hide and show functions? is ver most simple
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<div id="menuLayout">
<a href="#menuLayout" id="openMenuLayout">
<img class="list" src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' style='display:none;' />
<img class="close" src="http://seotobiz.com/images/icon_close.png" /></a>
<nav id="menuLayoutList">
<ul>
<li>
<form id="search">
<input type="search" placeholder="Search...">
</form>
</li>
<li><a class="a" href="javascript:;" id="home">Home</a></li>
<li><a class="a" href="javascript:;" id="aboutLayout">About Us</a></li>
<li><a class="a" href="javascript:;" id="KeyLayout">Key Facts</a></li>
<li><a class="a" href="javascript:;" id="teamLayout">Team</a></li>
<li><a class="a" href="javascript:;" id="#">Register</a></li>
<li><a class="a" href="javascript:;" id="contactLayout">Contact</a></li>
</ul>
</nav>
</div>
<script type="text/javascript">
$('.a').click(function(){
if($(this).hasClass("v")){
$('.list').hide();
$('.close').show();
$(this).toggleClass("v");
}else{
$('.list').show();
$('.close').hide();
$(this).toggleClass("v");
}
});
</script>
Now, u need detect with $(this).attr("id"); for anchor