I wish that when I'm with the mouse over the link, that blur will disappear and work properly if I don't add the line class.
When I add the line class, everything breaks down, the links change position on the x-axis and only the Contact link is visible.
How can I add that line for all 3 links without affecting the position and disappearance of the link blur?
And why does that navbar overflow-x occur?
its width in css is 100 vw.
I think it's from the mouseover event, but how can I prevent that overflow-x? Why does the navbar have that width?
const cursor = document.querySelector('.cursor');
const navLinks = document.querySelectorAll('nav ul li a');
const nav = document.querySelector('nav') ;
navLinks.forEach(link =>{
nav.style.overflow='hidden' ;
link.addEventListener('mouseover',e=>{
e.target.classList.add('line');
e.target.classList.remove('blur') ;
})}) ;
navLinks.forEach(link =>{
link.addEventListener('mouseleave',e=>{
e.target.classList.add('blur') ;
})}) ;
nav.addEventListener('mousemove' , function(mouse){
const x = mouse.pageX +'px';
const y = mouse.pageY +'px';
cursor.style.left = x ;
cursor.style.top = y ;
}) ;
nav {
height:10vh;
width:100vw;
box-shadow:5px 0px 10px rgba(0,0,0,1);
display:flex;
align-items:center;
background:gray;
overflow:hidden;
cursor:none;
}
.cursor{
width:3vw;
height:3vw;
background:brown;
border-radius:50%;
position:absolute;
pointer-events:none;
transform:translate(-50%,-50%) ;
}
.logo{
position:relative;
width:10vw;
height:100%;
}
.logo h2{
position:absolute;
top:50%;
font-size:1rem;
}
nav ul {
display:flex;
height:100%;
width:90vw;
position:relative;
}
nav ul li {
list-style:none;
padding-left:15vw;
position:relative;
top:50%;
}
nav ul li a{
text-decoration:none;
font-size:1rem;
position:relative;
cursor:none;
}
.blur{
filter:blur(3px);
}
.section{
position:relative;
top:3vh;
width:100%;
height:100vh;
}
.section1{
background:red;
}
.section2{
background:blue;
}
.section3{
background:purple;
}
.line{
width:1px;
height:100%;
position:absolute;
background:black;
animation:anime 1.5s linear infinite;
}
#keyframes anime {
0%{
transform:translateX(0);
}
100%{
transform:translateX(100%);
}
}
<nav>
<div class ="logo">
<h2 class ='logo'>logo</h2>
</div>
<div class ='cursor'></div>
<ul>
<li><a class="blur " href ="#">Home</a></a></li>
<li><a class="blur " href ="#">About</a></a></li>
<li><a class="blur " href ="#">Contact</a></a></li>
</ul>
</nav>
<div class ="section section1" >
</div>
<div class ="section section2" >
</div>
<div class ="section section3" >
</div>
</div>
I formatted your code a bit.
The problem was, that your anchor was just 1px wide, that was too small for the event listeners to react.
I changed the line to a pseudo element ::before.
The rest of your code I left untouched.
const cursor = document.querySelector('.cursor');
const navLinks = document.querySelectorAll('nav ul li a');
const nav = document.querySelector('nav');
navLinks.forEach(link => {
nav.style.overflow = 'hidden';
link.addEventListener('mouseover', e => {
e.target.classList.remove('blur');
})
link.addEventListener('mouseleave', e => {
e.target.classList.add('blur');
});
});
nav.addEventListener('mousemove', function(mouse) {
const x = mouse.pageX + 'px';
const y = mouse.pageY + 'px';
cursor.style.left = x;
cursor.style.top = y;
});
nav {
height: 10vh;
width: 100vw;
box-shadow: 5px 0px 10px rgba(0, 0, 0, 1);
display: flex;
align-items: center;
background: gray;
overflow: hidden;
cursor: none;
}
.cursor {
width: 3vw;
height: 3vw;
background: brown;
border-radius: 50%;
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
}
.logo {
position: relative;
width: 10vw;
height: 100%;
}
.logo h2 {
position: absolute;
top: 50%;
font-size: 1rem;
}
nav ul {
display: flex;
height: 100%;
width: 90vw;
position: relative;
}
nav ul li {
list-style: none;
padding-left: 15vw;
position: relative;
top: 50%;
}
nav ul li a {
text-decoration: none;
font-size: 1rem;
position: relative;
cursor: none;
height: 100%;
display: block;
}
.blur {
filter: blur(3px);
}
.section {
position: relative;
top: 3vh;
width: 100%;
height: 100vh;
}
.section1 {
background: red;
}
.section2 {
background: blue;
}
.section3 {
background: purple;
}
nav a::before {
content: " ";
width: 1px;
height: 100%;
position: absolute;
background: black;
animation: anime 1.5s linear infinite;
}
#keyframes anime {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
<nav>
<div class="logo">
<h2 class="logo">logo</h2>
</div>
<div class='cursor'></div>
<ul>
<li><a class="blur" href="#">Home</a>
</li>
<li><a class="blur" href="#">About</a>
</li>
<li><a class="blur" href="#">Contact</a>
</li>
</ul>
</nav>
<div class="section section1">
</div>
<div class="section section2">
</div>
<div class="section section3">
</div>
Related
I am running the following code, It seems to center in mobile view, but not in Desktop why ? and solution ?
I tried to solve it by using display: block; margin: auto; width:100%; and no use it remains the same. also tried text-align: center; no use again.
let $slides, interval, $selectors, $btns, currentIndex, nextIndex;
let cycle = index => {
let $currentSlide, $nextSlide, $currentSelector, $nextSelector;
nextIndex = index !== undefined ? index : nextIndex;
$currentSlide = $($slides.get(currentIndex));
$currentSelector = $($selectors.get(currentIndex));
$nextSlide = $($slides.get(nextIndex));
$nextSelector = $($selectors.get(nextIndex));
$currentSlide.removeClass("active").css("z-index", "0");
$nextSlide.addClass("active").css("z-index", "1");
$currentSelector.removeClass("current");
$nextSelector.addClass("current");
currentIndex = index !== undefined ?
nextIndex :
currentIndex < $slides.length - 1 ?
currentIndex + 1 :
0;
nextIndex = currentIndex + 1 < $slides.length ? currentIndex + 1 : 0;
};
$(() => {
currentIndex = 0;
nextIndex = 1;
$slides = $(".slide");
$selectors = $(".selector");
$btns = $(".btn");
$slides.first().addClass("active");
$selectors.first().addClass("current");
interval = window.setInterval(cycle, 6000);
$selectors.on("click", e => {
let target = $selectors.index(e.target);
if (target !== currentIndex) {
window.clearInterval(interval);
cycle(target);
interval = window.setInterval(cycle, 6000);
}
});
$btns.on("click", e => {
window.clearInterval(interval);
if ($(e.target).hasClass("prev")) {
let target = currentIndex > 0 ? currentIndex - 1 : $slides.length - 1;
cycle(target);
} else if ($(e.target).hasClass("next")) {
cycle();
}
interval = window.setInterval(cycle, 6000);
});
});
#container {
position: absolute;
width: 300px;
height: 300px;
overflow: hidden;
background: red;
text-align: center;
display: inline-block;
margin: auto;
margin-left: -40%;
}
#slides .slide .slide-partial {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
transition: transform 1s ease-in-out;
display: block;
margin: auto;
}
#slides .slide .slide-partial img {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 1s ease-in-out;
display: block;
margin: auto;
}
#slides .slide .slide-left {
top: 0;
left: 0;
transform: translateX(-100%);
display: block;
margin: auto;
}
#slides .slide .slide-left img {
top: 0;
right: 0;
-o-object-position: 100% 50%;
object-position: 100% 50%;
transform: translateX(50%);
display: block;
margin: auto;
}
#slides .slide.active .slide-partial,
#slides .slide.active .slide-partial img {
transform: translateX(0);
display: block;
margin: auto;
}
#slide-select {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-around;
font-family: "Reem Kufi", sans-serif;
font-size: 1.5em;
font-weight: lighter;
color: white;
}
#slide-select li {
position: relative;
cursor: pointer;
margin: 0 5px;
}
#slide-select li.prev:hover {
transform: translateX(-2px);
}
#slide-select li.next:hover {
transform: translateX(2px);
}
#slide-select .selector {
height: 14px;
width: 14px;
border: 2px solid white;
background-color: transparent;
transition: background-color 0.5s ease-in-out;
}
#slide-select .selector.current {
background-color: white;
}
<div id="mode">
<div id="container">
<ul id="slides">
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
</ul>
<ul id="slide-select">
<li class="btn prev">
<</li>
<li class="selector"></li>
<li class="selector"></li>
<li class="selector"></li>
<li class="btn next">></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Output am getting,
Image slide with partially left floating
I tried,
display: inline-block;
margin: auto;
width: 100%;
text-align: center;
/* result: no use /*
What do I need the output to be,
proper centered image slide
If possible please explain with a solution.
The best way to place something dead center is to use display: grid; and place-items: center; this will set all items on the grid to the center given the div has a specific with and height.
You also need to remove all styles from the li and ul, they have maring that can change the position of the elements inside
Current setup (plain HTML/CSS):
I've currently got this plain HTML/CSS setup, which is basically using a checkbox with no opacity, with labels acting as buttons (which they in fact are not).
Codepen: https://codepen.io/MikaTheDesigner/pen/MWVYGoz
Video of my current HTML/CSS-demo (and the result goal): https://i.imgur.com/ha3NL0V.mp4
<div class="nav">
<input class="menuBtn" type="checkbox">
<label class="menuLabel open">Menu</label>
<label class="menuLabel close">Close</label>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav {
pointer-events: none;
position: fixed;
z-index: 100;
width: 100vw;
height: 100vh;
}
.nav > .menuBtn {
cursor: pointer;
width: 122.43px;
height: 122.43px;
margin: 0 0 0 3rem;
pointer-events: initial;
position: absolute;
z-index: 99;
opacity: 0;
}
.nav > .menuBtn:checked ~ .menuLabel.open {opacity: 0;}
.nav > .menuBtn:checked ~ .menuLabel.close {opacity: 100%;}
.nav > .menuBtn:checked ~ .menuBox.transitionBox {left: 100%;}
.nav > .menuBtn:checked ~ .menuBox.BG {left: 0;}
.nav > .menuLabel {
color: black;
font-size: 1.5rem;
position: absolute;
z-index: 98;
margin: 3rem 0 0 3rem;
text-align: center;
transition: all 0.2s ease-in-out;
}
.nav > .menuLabel.open {
text-shadow: 0 0 2rem rgba(0,0,0,.5);
width: 122.43px;
}
.nav > .menuLabel.close {
opacity: 0;
}
.nav > .menuBox.transitionBox {
background-color: black;
width: 200%;
height: 100%;
position: absolute;
z-index: 100;
left: -200%;
transition: all 2000ms;
}
.nav > .menuBox.BG {
background: linear-gradient(to bottom, white, black);
background-size: cover;
width: 100%;
height: 100%;
pointer-events: auto;
position: absolute;
z-index: 96;
left: -100%;
transition-delay: 500ms !important;
transition: all 200ms;
}
.nav > .menuBox.BG > nav {
position: absolute;
z-index: 97;
width: 100%;
height: 100%;
}
.nav > .menuBox.BG > nav > ul {
list-style: none;
padding: 122.43px 3rem 3rem calc(6rem + 122.43px);
}
.nav > .menuBox.BG > nav > ul li {
color: white;
font-size: 2rem;
line-height: 2rem;
margin-bottom: 1.5rem;
}
.nav > .menuBox.BG > nav > ul li > a {
color: inherit;
display: block;
text-decoration: none;
transition: all 0.2s ease-in-out;
width: max-content;
}
.nav > .menuBox.BG > nav > ul li > a:hover {cursor: pointer;}
Goal:
My goal is for the menu to act in the exact same way, when clicking the labels .menulabel.open and .menuLabel.close, but using javascript instead of plain HTML/CSS.
I would change these current labels to a-tags or p-tags and using onClick-functions, when I get the javascript working.
Like linked at the top of the thread, this is my goal, but using javascript to make it react, and not using a plain checkbox:
https://i.imgur.com/ha3NL0V.mp4
What have I tried so far?
Besides the plain HTML/CSS-solution I have tried setting up, which I wouldn't argue is the right way to make the menu, I have also tried setting this script up in my HTML-document, inwhich does not seem to work as I want it to:
function openNav() {
document.getElementsByClassName("menuTransition").style.left = "100%";
document.getElementsByClassName("menuBox").style.left = "0";
}
function closeNav() {
document.getElementsByClassName("menuTransition").style.left = "-200%";
document.getElementsByClassName("menuBox").style.left = "-100%";
}
(the javascript was supposed to just style the two elements when clicking on one of the a-tags the exact same way the CSS reacts, when checking the checkbox and "activating" the menu)
<div class="nav">
<a class="menuLabel open" onClick="openNav()">Menu</a>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<a class="menuLabel close" onClick="closeNav()">Close</a>
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
</div>
(basically the same HTML as above, just removing the labels and replacing them with a-tags)
You can use a single class and toggle that class on the click of a button, something like this:
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
document.getElementsByClassName("menuBox") return an array object .
you need to add the index , such as document.getElementsByClassName("menuBox")[0]
I'm fairly new to JS so I'm sorry if this has been answered.
I've siphoned through most answers and they didn't specifically fall in line with mine.
I'm not understanding why the element cant is called upon when it's there.
I don't think it seems to be anything with the CSS but I'm not completely sure.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav-links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
display: flex;
justify-content:space-around;
align-items: center;
min-height: 8vh;
background-color: var(--mainBg);
}
.nav-links li{
list-style: none;
}
.nav-links{
display: flex;
justify-content: space-evenly;
width: 20%;
font-size: 20px;
}
.nav-links a{
letter-spacing: 2px;
color:var(--mainText);
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: var(--mainText);
margin:3px;
padding: 0;
}
.showacase-hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("img/D1.jpg");
height: 600px;
background-position:center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-container{
text-align: center;
position: absolute;
top: 50%;
left: 28%;
color: var(--mainBanner);
font-size: 20px;
}
/* Media Queries*/
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:728px){
body{
overflow-x: hidden;
}
.nav-links{
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color:var(--mainBg);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
margin-left: 28em;
}
.nav-active{
transform: translateX(0%);
}
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
#media screen and(max-width:566px){
}
<body>
<nav>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="showacase-hero">
<div class="hero-container">
<h1>Yade's Pet</h1>
<span class="banner"><p>Petcare Specialist/Dog Walker</p></span>
<form action="https://www.w3docs.com/">
<button class="btn" type="submit">Let's Take a Stroll</button>
</form>
</div>
</div>
<script type="text/javascript" src="app2.js"></script>
</body>
</html>
nav-links is a class, not a tag, so add a dot before the class name:
document.querySelector( '.nav-links' );
PS: It's a bad practice to use variables const navSlide = () => { instead of a clear function declarations:
function navSlide () {
...
}
I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.
The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.
SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});
You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
I am trying to move a div to the center of the parent div when a link is clicked.
I currently have 3 links and they correspond to 3 divs. When you click on a link, the div it corresponds to is enlarged (using css transitions). This is working well so far. The correct link enlarges the correct div.
After the div has been enlarged (to make it stand out) I need the div to move to the center and I need the div that was already in the center to take the other divs place. This is what I am struggling to achieve. I have tried using jQuery's append, prepend, animate and using closest but I am not sure how to get the div to move to the center and have the div in the center move to its closest divs place.
I hope this is making sense so far. I found this fiddle link (from a question on SO) and it moves divs but its not quite right.
Here is my HTML Structure:
<div class="test">
<div class="test-links">
<ul>
<li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
<li><a data-target=".cloud" href="#">Cloud</a></li>
<li><a data-target=".amazon" href="#">Amazon</a></li>
</ul>
</div>
<div class="test-slider">
<div class="test-slide ecommerce">
Ecommerce
</div>
<div class="test-slide cloud">
Cloud
</div>
<div class="test-slide amazon">
Amazon
</div>
</div>
</div>
This is the corresponding jQuery:
$(document).ready(function() {
$(".test-links a").click(function() {
var $target = $($(this).data('target'));
$(".test-slide").not($target).removeClass('active');
$target.addClass('active');
return false
});
});
Here is a link to the full working example so far.
Try this.
Find the index of the element clicked in the div elements inside .test-slider div and insert it on the middle position.
$(document).ready(function() {
$(".test-links a").click(function() {
var $target = $($(this).data('target'));
$(".test-slide").not($target).removeClass('active');
$target.addClass('active');
$(".test-slider div").each(function(index,elem)
{
if($(elem).text() == $target.text())
{
if(index > 1)
$(elem).insertBefore($(".test-slider div").eq(1));
if(index < 1)
$(elem).insertBefore($(".test-slider div").eq(2));
}
});
return false
});
});
.test {
float: left;
width: 100%;
text-align: center;
}
.test-links {
float: left;
width: 100%;
margin: 30px 0;
}
.test-links ul {
list-style-type: none;
float: left;
width: 100%;
margin: 0;
}
.test-links ul li {
display: inline-block;
float: left;
}
.test-links ul li a {
display: block;
padding: 30px;
}
.test-slide {
float: left;
width: 33.33333%;
height: 200px;
color: #fff;
transition: all 300ms ease;
opacity: 0.8;
position: relative;
z-index: 0;
}
.ecommerce {
background: blue;
}
.cloud {
background: red;
}
.amazon {
background: grey;
}
.test-slide.active {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
position: relative;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<div class="test-links">
<ul>
<li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
<li><a data-target=".cloud" href="#">Cloud</a></li>
<li><a data-target=".amazon" href="#">Amazon</a></li>
</ul>
</div>
<div class="test-slider">
<div class="test-slide ecommerce">
Ecommerce
</div>
<div class="test-slide cloud">
Cloud
</div>
<div class="test-slide amazon">
Amazon
</div>
</div>
</div>
Edit : Below snippet is a better generic solution for the problem.
$(document).ready(function() {
$(".test-links a").click(function() {
var $target = $($(this).data('target'));
$(".test-slide").not($target).removeClass('active');
$target.addClass('active');
var len = $(".test-slider div").length;
var mid = (Math.floor(len/2));
$(".test-slider div").each(function(index,elem)
{
if($(elem).text() == $target.text())
{
if(index > mid)
$(elem).insertBefore($(".test-slider div").eq(mid));
if(index < mid)
$(elem).insertBefore($(".test-slider div").eq(mid+1));
}
});
return false
});
});
.test {
float: left;
width: 100%;
text-align: center;
}
.test-links {
float: left;
width: 100%;
margin: 30px 0;
}
.test-links ul {
list-style-type: none;
float: left;
width: 100%;
margin: 0;
}
.test-links ul li {
display: inline-block;
float: left;
}
.test-links ul li a {
display: block;
padding: 30px;
}
.test-slide {
float: left;
width: 20%;
height: 200px;
color: #fff;
transition: all 300ms ease;
opacity: 0.8;
position: relative;
z-index: 0;
}
.ecommerce {
background: blue;
}
.cloud {
background: red;
}
.amazon {
background: grey;
}
.paypal {
background: yellow;
}
.cisco {
background: green;
}
.test-slide.active {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
position: relative;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<div class="test-links">
<ul>
<li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
<li><a data-target=".cloud" href="#">Cloud</a></li>
<li><a data-target=".amazon" href="#">Amazon</a></li>
<li><a data-target=".paypal" href="#">Paypal</a></li>
<li><a data-target=".cisco" href="#">Cisco</a></li>
</ul>
</div>
<div class="test-slider">
<div class="test-slide ecommerce">
Ecommerce
</div>
<div class="test-slide cloud">
Cloud
</div>
<div class="test-slide amazon">
Amazon
</div>
<div class="test-slide paypal">
Paypal
</div>
<div class="test-slide cisco">
Cisco
</div>
</div>
</div>
A solution using insertAfter() - this shifts the div positions and places it after the first div.
See demo below:
$(document).ready(function() {
$(".test-links a").click(function() {
var $target = $($(this).data('target'));
$(".test-slide").not($target).removeClass('active');
if ($target.is('.test-slider .test-slide:first-child'))
$target.addClass('active').insertAfter('.test-slider .test-slide:nth-child(2)');
else
$target.addClass('active').insertAfter('.test-slider .test-slide:first-child');
return false
});
});
.test {
float: left;
width: 100%;
text-align: center;
}
.test-links {
float: left;
width: 100%;
margin: 30px 0;
}
.test-links ul {
list-style-type: none;
float: left;
width: 100%;
margin: 0;
}
.test-links ul li {
display: inline-block;
float: left;
}
.test-links ul li a {
display: block;
padding: 30px;
}
.test-slide {
float: left;
width: 33.33333%;
height: 200px;
color: #fff;
transition: all 300ms ease;
opacity: 0.8;
position: relative;
z-index: 0;
}
.ecommerce {
background: blue;
}
.cloud {
background: red;
}
.amazon {
background: grey;
}
.test-slide.active {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
position: relative;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="test">
<div class="test-links">
<ul>
<li><a data-target=".ecommerce" href="#">Ecommerce</a>
</li>
<li><a data-target=".cloud" href="#">Cloud</a>
</li>
<li><a data-target=".amazon" href="#">Amazon</a>
</li>
</ul>
</div>
<div class="test-slider">
<div class="test-slide ecommerce">
Ecommerce
</div>
<div class="test-slide cloud">
Cloud
</div>
<div class="test-slide amazon">
Amazon
</div>
</div>
</div>
can try this code. I just modified on your code on jsfiddle:
see here: https://jsfiddle.net/6v37ue4y/10/
$(document).ready(function() {
$(".test-links a").click(function() {
var $target = $($(this).data('target'));
$(".test-slide").not($target).removeClass('active');
$target.addClass('active');
return false
});
$('.test-slider div').click(function(e){
var indx = $( ".test-slider div" ).index( $(this) ) ;
// alert(indx);
if(indx == 0){
$(this).next('div').after($(this));
} else if(indx == 2){
$(this).prev('div').before($(this));
} else {
}
});
});
.test {
float: left;
width: 100%;
text-align: center;
}
.test-links {
float: left;
width: 100%;
margin: 30px 0;
}
.test-links ul {
list-style-type: none;
float: left;
width: 100%;
margin: 0;
}
.test-links ul li {
display: inline-block;
float: left;
}
.test-links ul li a {
display: block;
padding: 30px;
}
.test-slide {
float: left;
width: 33.33333%;
height: 200px;
color: #fff;
transition: all 300ms ease;
opacity: 0.8;
position: relative;
z-index: 0;
}
.ecommerce {
background: blue;
}
.cloud {
background: red;
}
.amazon {
background: grey;
}
.test-slide.active {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
position: relative;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test">
<div class="test-links">
<ul>
<li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
<li><a data-target=".cloud" href="#">Cloud</a></li>
<li><a data-target=".amazon" href="#">Amazon</a></li>
</ul>
</div>
<div class="test-slider">
<div class="test-slide ecommerce">
Ecommerce
</div>
<div class="test-slide cloud">
Cloud
</div>
<div class="test-slide amazon">
Amazon
</div>
</div>
</div>