So for My navbar I want to let my arrow rotate 180 degrees when clicked, although I have tried many things with CSS or JavaScript, I don't know what is the most efficient way to go about this. The icon I chose is imported from font-awesome.
I tried implementing javascript to get it done, didn't figure it out yet. Should CSS do the trick or do am I doing something majorly wrong here?
const acc = document.getElementsByClassName("switch");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.classList.toggle("iconUp");
});
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
.switchIconRotate {
transform-origin: center;
transition: all 0.2s linear;
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}
<header>
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<img class="logo" src="images/logo_image.svg" alt="logo"> <!-- Svg needs to work -->
<nav> <!-- Navigation menu -->
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
I added a tiny js script and 2 css class. Also changed the icon to an arrow so you can see it moving.
document.querySelector('#Demobutton').addEventListener("click",
(e)=>{
document.querySelector('header .logo').classList.toggle('rotate');
}, false)
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
.switchIconRotate {
transform-origin: center;
transition: all 0.2s linear;
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}
/*my code*/
img.logo {
transition: transform 1s ease-in;
}
img.logo.rotate {
transform: rotate(360deg);
}
<header>
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<img class="logo" src="https://uxwing.com/wp-content/themes/uxwing/download/02-arrow-direction/arrow-left.svg" alt="logo"> <!-- Svg needs to work -->
<nav> <!-- Navigation menu -->
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
I am building currently my web-page on Github (Githug Page), and I am having some troubles with the top-nav menu. As you can see, when you scroll down, the menu disappears, and when you scroll up, it appears again. Nevertheless, I would like to make the behaviour much more simpler, and that is, to make it fixed with respect the header. In other words, I just want the menu to appear on top of the page, like another element more. I do not want the menu to follow the scrolling. Looks simple but I do not end up getting the result.
This is my current main.js.
(function($) {
var $window = $(window),
$body = $('body');
// Breakpoints.
breakpoints({
xlarge: [ '1141px', '1680px' ],
large: [ '981px', '1140px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ '321px', '480px' ],
xxsmall: [ null, '320px' ]
});
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Scrolly.
$('.scrolly').scrolly();
})(jQuery);
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header_nav").style.top = "0";
} else {
document.getElementById("header_nav").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
The index.html file, where you can see, the important sections are header and header_nav.
<!DOCTYPE HTML>
<!--
Photon by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Eduardo Alvarado</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="is-preload">
<!-- Header Menu -->
<section id="header_nav">
<nav id="nav">
<div id="navbar">
<ul>
<li><p style="color:white">Home</p></li>
<li><p style="color:white">Research</p></li>
<li><p style="color:white">Game-dev</p></li>
<li><p style="color:white">Photography</p></li>
</ul>
</div>
</nav>
</section>
<!-- Header -->
<section id="header">
<div class="inner">
<span><img src="/images/car_final_256_header.gif"></span>
<h1>Hi, I'm <strong>Eduardo Alvarado</strong>.</h1>
<h1>A passionate software engineer who develops intelligent<br />
cars during the day and loves to design<br />
game-focus art and applications in his spare-time.</h1>
<br />
<p>Want to contact me? Send me a message at alvaradopinero.eduardo#gmail.com.</p>
<ul class="actions special">
<li>Discover</li>
</ul>
</div>
</section>
<!-- One -->
<section id="one" class="main style1">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium imp-medium">
<header class="major">
<h2>Background</h2>
</header>
<p align="justify">I am a first year PhD Researcher at <a href='https://www.daimler.com/career/about-us/insights/research-development/'>Daimler AG</a> in Stuttgart, Germany. My research is centered on robust perception for human activity recognition. Prior joininig Daimler, I graduated with a master's degree in <b>Embedded Systems Engineering</b>, with a major in Artificial Intelligence and Autonomous Intelligent Systems from <a href='https://www.uni-freiburg.de/'>Albert-Ludwigs-Universität Freiburg</a>, and with a bachelor's degree in <b>Electronics and Automation Engineering</b> from <a href='https://www.uc3m.es/home'>Universidad Carlos III</a> in Madrid.</p>
</div>
<div class="col-6 col-12-medium">
<span class="image fit"><img src="images/profile_bg_1920_1080.png" alt="" style="padding-top: 12px" /></span>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="main style2">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<ul class="major-icons">
<li><span class="icon solid style4 major fa-laptop-code"></span></li>
<li><span class="icon solid style2 major fa-microchip"></span></li>
<li><span class="icon solid style3 major fa-brain"></span></li>
<li><span class="icon solid style5 major fa-gamepad"></span></li>
</ul>
</div>
<div class="col-6 col-12-medium">
<p align="justify">I have dedicated my academic career to the field of robotics, with special interest in AI-based Perception and Behavior Planning applied to intelligent-mobility. I wrote my master's thesis at <a href='https://www.bosch.com/research/'>Robert Bosch GmbH</a> on DL sensor-fusion architectures for Object Detection and Tracking, under the supervision from <a href='https://scholar.google.com/citations?user=2mv2dDkAAAAJ&hl=en'>Prof. Dr. Joschka Boedecker</a> and <a href='https://scholar.google.com/citations?user=LcARjz0AAAAJ&hl=en'>Prof. Dr. Abnihav Valada</a>. I also worked as development-intern at <a href='https://www.zf.com/mobile/en/homepage/homepage.html'>ZF Friedrichshafen</a> on the design of ROS SW-tools for self-driving vehicles. Additionally, I have been working as research assistant for Autonomous Intelligent Systems at the university, on the development of SLAM algorithms and Autonomous Driving simulations.</p>
<p align="justify">I dedicate my day to day to my other great passion too, game-related development and 2D/3D design. Since I was a child, I have always loved bringing to reality dream worlds, characters and landscapes only possible in one's imagination. Little by little, I try to learn more about design, gameplay and visual programming.</p> </div>
</div>
</div>
</div>
</section>
<!-- Three -->
<section id="three" class="main style1 special">
<div class="container">
<header class="major">
<h2>My work</h2>
</header>
<div class="row gtr-150">
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic02.jpg" alt="" /></span>
<h3>Research and Academic Service</h3>
<p>Publications, preprints, SW/HW proyects and news.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic03.jpg" alt="" /></span>
<h3>Game Development</h3>
<p>Game applications, 2D/3D design and visual programming.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic04.jpg" alt="" /></span>
<h3>Photography</h3>
<p>A small portfolio of my favorite trips and places.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Four -->
<!--
<section id="four" class="main style2 special">
<div class="container">
<header class="major">
<h2>Ipsum feugiat consequat?</h2>
</header>
<p>Sed lacus nascetur ac ante amet sapien.</p>
<ul class="actions special">
<li>Sign Up</li>
<li>Learn More</li>
</ul>
</div>
</section>
-->
<!-- Footer -->
<section id="footer">
<ul class="icons">
<li><span class="label">CV</span></li>
<li><span class="label">Email</span></li>
<li><span class="label">GitHub</span></li>
<li><span class="label">Google Scholar</span></li>
</ul>
<ul class="copyright">
<li>© Untitled</li><li>Design: HTML5 UP</li>
</ul>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
And finally, the respective part of the css.
/* Header */
#header {
padding: 9em 0 9em 0 ;
background-color: #4686a0;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed, fixed, fixed;
background-image: url("images/overlay2.png"), url("images/overlay3.svg"), linear-gradient(45deg, #9dc66b 5%, #4fa49a 30%, #4361c2);
background-position: top left, center center, center center;
background-size: auto, cover, cover;
overflow: hidden;
position: relative;
text-align: center;
}
#header a {
border-bottom-color: rgba(255, 255, 255, 0.5);
}
#header a:hover {
color: #ffffff;
}
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header strong, #header b {
color: #ffffff;
}
#header header p {
color: #ffffff;
}
#header header.major:after {
background: #ffffff;
}
#header input[type="submit"],
#header input[type="reset"],
#header input[type="button"],
#header button,
#header .button {
box-shadow: inset 0 0 0 1px #ffffff;
color: #ffffff !important;
}
#header input[type="submit"]:hover,
#header input[type="reset"]:hover,
#header input[type="button"]:hover,
#header button:hover,
#header .button:hover {
background-color: rgba(255, 255, 255, 0.125);
}
#header input[type="submit"]:active,
#header input[type="reset"]:active,
#header input[type="button"]:active,
#header button:active,
#header .button:active {
background-color: rgba(255, 255, 255, 0.25);
}
#header input[type="submit"].primary,
#header input[type="reset"].primary,
#header input[type="button"].primary,
#header button.primary,
#header .button.primary {
background-color: #ffffff;
box-shadow: inset 0 0 0 1px #ffffff !important;
color: #4686a0 !important;
}
#header input[type="submit"].primary:hover,
#header input[type="reset"].primary:hover,
#header input[type="button"].primary:hover,
#header button.primary:hover,
#header .button.primary:hover {
background-color: rgba(255, 255, 255, 0.125) !important;
color: #ffffff !important;
}
#header input[type="submit"].primary:active,
#header input[type="reset"].primary:active,
#header input[type="button"].primary:active,
#header button.primary:active,
#header .button.primary:active {
background-color: rgba(255, 255, 255, 0.25) !important;
}
#header ul.major-icons li .icon {
border-color: #ffffff;
}
#header .icon.major {
color: #ffffff;
}
#header h1 {
margin: 0;
}
#header p {
margin: 1em 0 0 0;
}
#header .actions {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
margin-top: 2.5em;
margin-left: 0;
position: relative;
}
#header .actions li:first-child {
padding-left: 0;
}
#header .actions:after {
background: #ffffff;
content: '';
height: 100vh;
left: 50%;
position: absolute;
top: 100%;
width: 1px;
}
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#header .inner .actions {
-moz-transition: -moz-transform 1.25s ease;
-webkit-transition: -webkit-transform 1.25s ease;
-ms-transition: -ms-transform 1.25s ease;
transition: transform 1.25s ease;
-moz-transition-delay: 1s;
-webkit-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
#header:after {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
background-image: linear-gradient(45deg, #4fa49a, #4361c2);
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
body.is-preload #header .inner {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 0;
}
body.is-preload #header .inner .actions {
-moz-transform: translateY(30em);
-webkit-transform: translateY(30em);
-ms-transform: translateY(30em);
transform: translateY(30em);
opacity: 0;
}
body.is-preload #header:after {
opacity: 1;
}
/* Header_nav */
#page-wrapper {
padding-top: 3.5em;
}
#header_nav {
background: rgba(0, 0, 0, 0);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0);
cursor: default;
height: 3.5em;
left: 0;
line-height: 3.5em;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
#header_nav h1 {
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
position: absolute;
top: 0;
}
#header_nav nav {
position: absolute;
right: 1em;
top: 0;
}
#header_nav nav ul {
margin: 0;
}
#header_nav nav ul li {
display: inline-block;
margin-left: 1em;
}
#header_nav nav ul li a, #header_nav nav ul li span {
border: 0;
color: inherit;
display: inline-block;
height: inherit;
line-height: inherit;
outline: 0;
}
#header_nav nav ul li a.button, #header_nav nav ul li span.button {
height: 2em;
line-height: 2em;
padding: 0 1.25em;
}
#header_nav nav ul li a:not(.button):before, #header_nav nav ul li span:not(.button):before {
margin-right: 0.5em;
}
#header_nav nav ul li.active > a, #header_nav nav ul li.active > span {
color: #e44c65;
}
#header_nav nav ul li > ul {
display: none;
}
body.landing #page-wrapper {
padding-top: 0;
}
body.landing #header_nav {
background: transparent;
box-shadow: none;
position: absolute;
}
To summarize, I would like the menu to be only on the top of the page, over the header, nothing more. I would really appreciate your help. I have tried several things but I still not very experimented in web-design, I am sorry.
Thank you very much in advance.
In the styling for #header_nav, set position to absolute instead of fixed. Then remove the following from main.js:
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header_nav").style.top = "0";
} else {
document.getElementById("header_nav").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
This way, the menu will render over the header but not stay at the top of the page when the user scrolls down.
Edit: If you want the menu to render above the header, not on top of it, remove the position line completely.
How do I move the "logout" to the extreme right of the tabs ?
I dont want to include it as list item and align the items ,with logout button to the extreme right of the nav bar.
Current scenario :
html involved with the nav bar and css of logout button:
#logout {
background:url('https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login-hover.png') no-repeat 5px 5px #484B4F;
width: 100px;
cursor:pointer;
border-radius:50px;
padding:10px 20px 10px 0;
color:White;
font-size:14px;
text-align:left;
text-indent:40px;
display:block;
margin:0 auto;
display: inline-block;
/* Animations: */
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-duration: .4s;
-webkit-transition-property: all;
-moz-transition-timing-function: ease-in-out;
-moz-transition-duration: .4s;
-moz-transition-property: all;
}
#logout:hover {
background-image: url( 'https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login.png' );
background-position: 65px 5px;
text-indent: 15px;
}
<nav class="main-nav-outer" id="test"><!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Bulletin Board</li>
<li>Leaderboard</li>
<!-- changed the name of tyhe services here -->
<li>Badges</li>
<li class="small-logo"><img src="img/small-logo.png" alt=""></li>
<li>Medals</li>
<li>Statistics</li>
<li>Contact</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>
</nav><!--main-nav-end-->
Try to add #logout {float:right;}
It will work!
#logout{ float:right; }
You can do it with float: right; In #logout and that will send you right
Define the following rules in the CSS
.main-nav{
float:left;
}
#right {
float: right;
}
And adapt the HTML part as follow:
<div id="right">
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>
#logout {
background:url('https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login-hover.png') no-repeat 5px 5px #484B4F;
width: 100px;
cursor:pointer;
border-radius:50px;
padding:10px 20px 10px 0;
color:White;
font-size:14px;
text-align:left;
text-indent:40px;
/*display:block; */
margin:0 auto;
display: inline-block;
/* add This Code */
position: absolute;
right:0;
top: 0;
/* Animations: */
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-duration: .4s;
-webkit-transition-property: all;
-moz-transition-timing-function: ease-in-out;
-moz-transition-duration: .4s;
-moz-transition-property: all;
}
#logout:hover {
background-image: url( 'https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login.png' );
background-position: 65px 5px;
text-indent: 15px;
}
<nav class="main-nav-outer" id="test"><!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Bulletin Board</li>
<li>Leaderboard</li>
<!-- changed the name of tyhe services here -->
<li>Badges</li>
<li class="small-logo"><img src="img/small-logo.png" alt=""></li>
<li>Medals</li>
<li>Statistics</li>
<li>Contact</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>
</nav><!--main-nav-end-->
I'm trying to delay each by instant then 300, then 600, then 900 etc
i want each element to slide in one after the other separated by 0.3s.
Here is the code:
HTML:
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="fourth">
</div>
<div class="fifth">
</div>
CSS:
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.first,
.second,
.third,
.fourth,
.fifth {
width: 960px;
padding:10px;
margin: 20px auto;
min-height: 50px;
background: white;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.15);
transform: translateX(-150%);
transition: 0.5s ease;
background:orange;
.trans {
transform: translate(0);
transition:0.5s ease;
}
}
jQuery:
$(document).ready(function(){
$(".first").toggleClass("trans");
}).delay(300).queue(function(){
$(".second").toggleClass("trans");
}).delay(600).queue(function(){
$(".third").toggleClass("trans");
});
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.first,
.second,
.third,
.fourth,
.fifth {
width: 960px;
height:50px;
padding:10px;
margin: 20px auto;
min-height: 50px;
background: white;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.15);
transform: translateX(-150%);
transition: 0.5s ease;
background:orange;
}
.trans {
transform: translate(0);
transition:0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="fourth">
</div>
<div class="fifth">
</div>
I understand there is something called dequeuing? Although I do not know how to implement this into the code at all.
I tried adding .dequeue() before each .delay() but it didn't do anything, the elements third, fourth and fifth still weren't showing :(
Send help, please!
Here is the code pen: http://codepen.io/anon/pen/vyawXm
I've added a snippet too.
I've only put jQuery in for the third class, but that doesn't even show, and neither does fourth and fifth when they're added.
you need to add this line: $(this).dequeue();
in every queue callback function, after you call toggleClass function.
What I want to do something like this bad example, I tried by CSS3 but field to change the picture, at least I made everything in jQuery, but no animation or something wrong, actually I don't know, here is my Attempt BY CSS3.
Here is my code
#maged{
width:198px; /*140px * 5*/
height:591px;
background-color:#0C9;
position: absolute;
overflow:hidden;
top: 14px;
left: 41px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
#maged:hover {
opacity:0;
filter:alpha(opacity=0);
-moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
-webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
background-color:#36F;
}
#cc_item img{
position:absolute;
width:195px;
height:591px;
top:-562px;
left:54px;
}
#cc_title{
color:#fff;
line-height:46px;
font-size:30px;
top:472px;
left:59px;
position:absolute;
background:#272727;
width:167px;
display:block;
z-index:11;
}
-->
</style>
<script type="text/javascript">
$(function(evt) {
$("#maged").click(function() {
alert("loool");
$("#cc_item").slideDown("slow");
$("#cc_title").fadeIn("slow");
return false;
});
});
</script>
</head>
<body>
<div id="maged"></div>
<div id="cc_title">Main page</div>
<div id="cc_item" style="z-index:5;">
<img src="img30000.jpg" alt="" />
</div>
</body>
</html>
This solution is very CSS heavy, as I wanted to focus on making the HTML cleaner and making sure the general effect worked (though to a lesser degree) when JavaScript is off.
To my knowledge, there's no CSS3 per se, though the CSS may seem advanced. (it's not!)
The most important point for me what that those images really aren't content so I don't think you need to use <img> elements for them; instead use CSS background images... but to animate those background images easily I did have to use a jQuery plugin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>javascript - Help in jQuery animation</title>
<style type="text/css">
<!--
body {
background:url(http://osc4.template-help.com/wt_32608/images/bg.gif);
text-align:center;
}
ul#menu {
background:#171717;
margin:auto;
overflow:hidden;
width:985px;
list-style:none;
padding:0px;
}
ul#menu li {
list-style:none;
background:transparent;
float:left;
text-align:center;
width:195px;
height:591px;
padding:0px;
position:relative;
border:1px solid #FFFFFF;
}
ul#menu li a {
text-decoration:none;
color:#FFFFFF;
display:block;
background:transparent;
height:591px;
width:195px;
position:relative;
}
ul#menu li a .menu-text {
background:#272727;
width:167px;
font-size:30px;
font-family:Arial,Helvetica,sans-serif;
font-variant:small-caps;
position:absolute;
top:224px;
left:14px;
}
ul#menu li a .menu-text .title {
line-height:46px;
}
ul#menu li a .description {
display:none;
font-size:smaller;
text-align:left;
line-height:auto;
}
ul#menu li a:hover .menu-text {
top:auto;
width:195px;
height:152px;
left:0px;
bottom:0px;
}
body.javascript-enabled ul#menu li a:hover .menu-text {
top:224px;
bottom:auto;
width:167px;
height:auto;
left:14px;
}
ul#menu li a:hover .description {
display:block;
padding-left:30px;
}
body.javascript-enabled ul#menu li a:hover .description {
display:none;
}
ul#menu #main-page a {
background:url(http://osc4.template-help.com/wt_32608/images/img1.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #about-us a {
background:url(http://osc4.template-help.com/wt_32608/images/img2.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #services a {
background:url(http://osc4.template-help.com/wt_32608/images/img3.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #partners a {
background:url(http://osc4.template-help.com/wt_32608/images/img4.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #locations a {
background:url(http://osc4.template-help.com/wt_32608/images/img5.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #main-page a:hover {
background-position:top center;
}
ul#menu #about-us a:hover {
background-position:top center;
}
ul#menu #services a:hover {
background-position:top center;
}
ul#menu #partners a:hover {
background-position:top center;
}
ul#menu #locations a:hover {
background-position:top center;
}
body.javascript-enabled ul#menu #main-page a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #about-us a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #services a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #partners a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #locations a:hover {
background-position:center -1000px;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.backgroundPosition.js_7.txt" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("body").addClass("javascript-enabled");
$("ul#menu li a")
.css({backgroundPosition: '0px -591px'})
.mouseenter(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px 0px'}, 500, function() {
$(this).css({backgroundPosition: '0px 0px'});
$(this).find(".description").css({display:'block'});
$(this).find(".menu-text").css({top:'auto',width:'195px',height:'152px',left:'0px',bottom:'0px'}).fadeIn('slow');
});
})
.mouseleave(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px -591px'}, 250, function() {
$(this).css({backgroundPosition: '0px -591px'});
$(this).find(".description").css({display:''});
$(this).find(".menu-text").css({top:'',width:'',height:'',left:'',bottom:''}).fadeIn('slow');
});
})
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li id="main-page">
<span class="menu-text"><span class="title">Main page</span> <span class="description">Welcome to our site</span></span>
</li>
<li id="about-us">
<span class="menu-text"><span class="title">About us</span> <span class="description">Who we are</span></span>
</li>
<li id="services">
<span class="menu-text"><span class="title">Services</span> <span class="description">& solutions</span></span>
</li>
<li id="partners">
<span class="menu-text"><span class="title">Partners</span> <span class="description">Partners list</span></span>
</li>
<li id="locations">
<span class="menu-text"><span class="title">Locations</span> <span class="description">Our contacts</span></span>
</li>
</ul>
</body>
</html>
Heres my solution to your problem without using css3. It´s all in the 1.html file, jquery and images are poiting to external sources, so you can just run it. Hope this can help you :)
<html>
<head>
<style>
#container{
overflow: hidden;
width: 800px;
height: 600px;
border: 1px solid black;
cursor: pointer;
}
.maged{
width:200px;
height:600px;
float:left;
display: none;
}
.cc_item{
text-align:center;
width:200px;
height:600px;
background:#171717;
float:left;
}
span.cc_title{
color:#fff;
line-height:46px;
font-size:30px;
margin: 250px 10px 0px;
float: left;
background:#272727;
width:180px;
z-index:11;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(evt) {
$(".cc_item").hover(function() {
$(this).find(".maged").stop(true,true).slideDown(300);
$(this).find(".cc_title").fadeOut("slow");
},function(){
$(this).find(".maged").stop(true,true).slideUp(300);
$(this).find(".cc_title").fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="container">
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/richardnicoll08-711189.jpg" alt="" />
</div>
<span class="cc_title">Main page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/brunopieters05-717446.jpg" alt="" />
</div>
<span class="cc_title">Second page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.delhierro.ca/wp-content/uploads/2010/11/Fashion-Studio-01S.jpg" alt="" />
</div>
<span class="cc_title">Third page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://lockdownmodels.files.wordpress.com/2009/05/kell-1.jpg?w=200&h=600" alt="" />
</div>
<span class="cc_title">Fourth page</span>
</div>
</div>
</body>
</html>