Click here to Skip to main content
15,904,346 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am learning on getting into the web dev career and so far have been building a portfolio website simultaneously with something new learned everyday.

I am building the portfolio with 5 main DIVs laid out as a kind of an offset Grid and used JS to have the div with mouseover appear larger with other divs 'moving out of the way' for the mouseover div to enlarge (I am not using the transform = scale()). Every div grows in their own way and others move out respectively and everything returns back to their original scale and location on mouseleave. Page looks like below; Site layout

The problem is, as I have set the transition property value to transition: .5s ease-in-out; for all the divs, moving the mouseover different side divs quickly seems to affect the #about Div's transition. It lags quite a bit. I am quite new to web dev so my code may not be the best in terms of readability, haven't mastered that skill yet so apologies in advance. Relevant HTML, CSS and JS code below;
html
HTML
<div class="middleDiv">

            <div class="innerDiv eduWork" id="education">Education</div>
            <div class="innerDiv skillCont" id="skills">Skills</div>
            <div class="innerDiv skillCont" id="contact">Contact</div>
            <div class="innerDiv about" id="about">About</div>
            <div class="innerDiv eduWork" id="work">Employment History</div>
</div>

css
CSS
.middleDiv {

    align-self: center;
    background-color: orange;
    height: 90%;
    width: 95%;
    position: absolute;
    top: 5%;
    left: 2.5%;
    margin: 0;
    padding: 0;
    border: none;
}

.innerDiv{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    background-color: beige;
    box-sizing: border-box;
    transition: .5s ease-in-out;

}

#education{
    
 
    top: 0%;
    left: 0%;
    border-right: .3em solid black;
    
}

#skills{
  
    top: 0%;
    right: 0%;
    border-bottom: .3em solid black;
}

#contact{

    left: 0%;
    bottom: 0%;
    border-top: .3em solid black;
}

.about{
    height: 20%;
    width: 20%;
    top: 40%;
    left: 40%;
    z-index: 1;
    border: .3em solid black;
}

#work{
    bottom: 0%;
    right: 0%;
    
    border-left: .3em solid black;
}
.eduWork{
    height: 40%;
    width: 60%;
}
.skillCont{
    height: 60%;
    width: 40%;
}

/*-----------------------------------------------------------------------------*/
/* ---------------------------on eventListeners------------------------------- */
.growEduWork{
    height: 60%;
    width: 80%;
}
.growSkillCont{
    height: 80%;
    width: 60%;
}
.eduWorkOnMouseOverSkillCont1{
    height: 20%;
    width: 80%;
}
.eduWorkOnMouseOverSkillCont2{
    height: 60%;
    width: 40%;
}

.EduWorkOnMouseOverEduWork{ 
    height: 20%;
    width: 40%;
}
.SkillContOnMouseOverEduWork{ 
    width: 20%;
    height: 80%;
}
.SkillContOnMouseOverAbout{ 
    width: 80%;
    height: 20%;
}
.skillContOnMouseOverEduWork2 { 
    height: 40%;
    width: 60%;
}
.skillContOnMouseOverSkillCont{
    height: 40%;
    width: 20%;
}
.eduWorkOnMouseOverAbout{ 
    height: 80%;
    width: 20%;
}

.growAbout{
    height: 60%;
    width: 60%;
    top: 20%;
    left: 20%;
    border: var(--border);
    
}
.aboutWhenMouseOverEdu{
    top: 60%;
    left: 60%;
}
.aboutOnMouseOverWork{
    top: 20%;
    left: 20%;
}
.aboutOnMouseOverSkill{
    top: 60%;
    left: 20%;
}
.aboutOnMouseOverCont{
    top: 20%;
    left: 60%;
}
/*----------------------------------------------*/

JS
JavaScript
const education = document.querySelector('#education');
const skills = document.querySelector('#skills');
const contact = document.querySelector('#contact');
const about = document.querySelector('#about');
const work = document.querySelector('#work');

education.addEventListener('mouseover', function(e){
    education.classList.add('growEduWork');
    skills.classList.add('SkillContOnMouseOverEduWork');
    work.classList.add('EduWorkOnMouseOverEduWork');
    about.classList.add('aboutWhenMouseOverEdu');
    contact.classList.add('skillContOnMouseOverEduWork2')
})
education.addEventListener('mouseleave', function(e){
    education.classList.remove('growEduWork');
    skills.classList.remove('SkillContOnMouseOverEduWork');
    work.classList.remove('EduWorkOnMouseOverEduWork');
    about.classList.remove('aboutWhenMouseOverEdu');
    contact.classList.remove('skillContOnMouseOverEduWork2')
})

about.addEventListener('mouseover', function(e){
    about.classList.add('growAbout');
    skills.classList.add('SkillContOnMouseOverAbout');
    education.classList.add('eduWorkOnMouseOverAbout');
    contact.classList.add('SkillContOnMouseOverAbout');
    work.classList.add('eduWorkOnMouseOverAbout');
});
about.addEventListener('mouseleave', function(e){
    about.classList.remove('growAbout');
    skills.classList.remove('SkillContOnMouseOverAbout');
    education.classList.remove('eduWorkOnMouseOverAbout');
    contact.classList.remove('SkillContOnMouseOverAbout');
    work.classList.remove('eduWorkOnMouseOverAbout');
})

work.addEventListener('mouseover', function(e){
    work.classList.add('growEduWork')
    education.classList.add('EduWorkOnMouseOverEduWork');
    about.classList.add('aboutOnMouseOverWork');
    contact.classList.add('SkillContOnMouseOverEduWork');
    skills.classList.add('skillContOnMouseOverEduWork2');
});
work.addEventListener('mouseleave', function(e){
    work.classList.remove('growEduWork')
    education.classList.remove('EduWorkOnMouseOverEduWork');
    about.classList.remove('aboutOnMouseOverWork');
    contact.classList.remove('SkillContOnMouseOverEduWork');
    skills.classList.remove('skillContOnMouseOverEduWork2');
});
skills.addEventListener('mouseover', function(e){
    skills.classList.add('growSkillCont');
    work.classList.add('eduWorkOnMouseOverSkillCont1');
    education.classList.add('eduWorkOnMouseOverSkillCont2');
    about.classList.add('aboutOnMouseOverSkill');
    contact.classList.add('skillContOnMouseOverSkillCont');
});
skills.addEventListener('mouseleave', function(e){
    skills.classList.remove('growSkillCont');
    work.classList.remove('eduWorkOnMouseOverSkillCont1');
    education.classList.remove('eduWorkOnMouseOverSkillCont2');
    about.classList.remove('aboutOnMouseOverSkill');
    contact.classList.remove('skillContOnMouseOverSkillCont');
});
contact.addEventListener('mouseover', function(e){
    contact.classList.add('growSkillCont');
    education.classList.add('eduWorkOnMouseOverSkillCont1');
    work.classList.add('eduWorkOnMouseOverSkillCont2');
    about.classList.add('aboutOnMouseOverCont');
    skills.classList.add('skillContOnMouseOverSkillCont');
});
contact.addEventListener('mouseleave', function(e){
    contact.classList.remove('growSkillCont');
    education.classList.remove('eduWorkOnMouseOverSkillCont1');
    work.classList.remove('eduWorkOnMouseOverSkillCont2');
    about.classList.remove('aboutOnMouseOverCont');
    skills.classList.remove('skillContOnMouseOverSkillCont');
});

//---------------------------------------------------------------//


What I have tried:

I have tried increasing and decreasing the transition time, issue only seems to not be there when transition is not used at all, which doesn't look good. Not experienced enough to know where else to investigate, although the only div affected is the central div whose position changes in relation to different eventlisteners so suspect the issues lies within the central #about div.
Posted
Updated 23-Sep-23 2:10am
v2

1 solution

This YT video does something similar and should point you in the right direction using Flexbox - Learn web development | MDN[^] : Build a responsive, animated, accessible accordion that looks pretty good - YouTube[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900