CODEWITHSUNDEEP
javascripthtmlcss
Ryan Anderson
Ryan Anderson

Reputation: 121

Margin Shifting: <ul> jitters when hover function initiated.

This is just a theory based question. I am fairly new to programming and was wondering why this happens within HTML.

I'm making an HTML based resume where when I have a mouse pointer hover over my ul it will activate a function such as this.

$("li#about").hover(function(){
  $("#content1").toggle();
});

The Issue While hovering over my selector when my #content was no longer hidden, my margins between my header and ul box would cause jittering within the page.

I went from:

<header>
  <h1>Ryan Anderson</h1>
  <h3>Developer</h3>
</header>

<body>
 <div class="clearfix"> 
  <div class="column">
    <ul>
      <li id="about"> <span>About Me</span> </li>
      <li id='education'> <span>Education</span></li>
      <li id='info'> <span>Experience</span></li>
      <li id='ref'> <span>References</span></li>
    </ul>
  <div class="clr"></div>
 </div>

to:

<header>
   <h1>Ryan Anderson</h1>
   <h3>Developer</h3>

 <body>
  <div class="clearfix"> 
   <div class="column">
     <ul>
       <li id="about"> <span>About Me</span> </li>
       <li id='education'> <span>Education</span></li>
       <li id='info'> <span>Experience</span></li>
       <li id='ref'> <span>References</span></li>
     </ul>
   <div class="clr"></div>
  </div>
</header>

My questions:

sing-song Being new, I know my code must look like poo. Regardless I added a fiddle for you.

Thanks for the read! I apologize in advance for the ugly code. I posted a JSFiddle as well, figured it would help any other newbies to conceptualize what i'm asking. This fiddle is without correction Just change the closing header tag to where I specified above to see the results.

My Fiddle: https://jsfiddle.net/dgibbins1/cwn6ws02/4/

header{
    background: #5a4c1c;
    border-radius:10px;
    opacity:0.85;
    padding:1px 0;
}

h1{
    margin: 0 0;
    color: white;
    padding-left:10px;
}

h3{
    color:#dad6c7;
    padding-left: 31px;
}

body{
    background:#dad6c7;

}


ul{
    list-style-type:none;
    padding: 0px 15px;
    margin: 50px 0;
}

span{
    color:white;
}

li{
    font-family:Helvetica;
}

div.column{
    border-style:solid;
    border-color:rgba(56,43,3,1);

}



#content1, #content2,#content3,#content4{
    opacity:1;
    display: none;
    padding: 3px auto;

}

.clear-fix{

}
.column li{
    padding:4px 0 4px 0;
    margin-top:30px;
    margin-bottom:30px;
    font-family:'Oswald', sans-serif;
    text-align: center;
    font-size: 20px;
    overflow: hidden;

}

.clr{
    clear:both;
    font-size:0;
}



.column{
    float:left;
    background-size: 220px 220px;   
    background:#5a4c1c;
    padding: 5px 2px;
    margin: 10px 10px 0 0;
    opacity:0.5;
    width: 15%;
    border-radius:20px;


}

.column li:hover{
    background: black;
    border-radius:20px;
}

.content{
    color:#5a4c1c;
    font-weight: bold;
    font-family: helvetica;
    width:85%;
}

.footer{

    text-align: center;
    background:#5a4c1c;
    color: white;
    padding: 10px 0;
    opacity: 0.5;
    margin-top: 30%;
    border-radius:10px;




   }

    <!DOCTYPE html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <link href="/normalize.css" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
        <title> Resume: Ryan Anderson</title>
    </head>

    <header>
      <h1>Ryan Anderson</h1>
      <h3>Developer</h3>
    </header>


    <body>
     <div class="clearfix"> 
      <div class="column">
         <ul>
           <li id="about"> <span>About Me</span> </li>
           <li id='education'> <span>Education</span></li>
           <li id='info'> <span>Experience</span></li>
           <li id='ref'> <span>References</span></li>
         </ul>
        <div class="clr"></div>
     </div>


     <div id="content1" class="content show-description">
      <p>About me <br />
         <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
     </div>

     <div id="content2" class="content" >
      <p>Education <br />
         <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
     </div>

     <div id="content3" class="content">
      <p>Experience <br />
         <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
     </div>

     <div id="content4" class="content">
       <p>References <br />
          Paul Garven (co-worker): (780)-828-1111<br />
          Paul CWC (owner of CWWC): (416)- 721-1111<br />
          Someone at Bitmaker: (416-967-11-11
       </p>
     </div>
    </div>


    <div class="footer">
      <p>Contact <br/>
           <small>mobile: (647)-333-8723 <br/>
           e-mail: [email protected]</small>
      </p>
    </div>

    <script>

    $("li#about").hover(function(){
          $("#content1").toggle();
    });

    $("li#education").hover(function() {
          $("#content2").toggle();
    });

    $("li#info").hover(function() {
          $("#content3").toggle();
    });

    $("li#ref").hover(function() {
          $("#content4").toggle();
    });
    </script>

    </body>

Upvotes: 0

Views: 55

Answers (2)

happymacarts
happymacarts

Reputation: 2604

you have some issues with your markup some of your nesting is applied incorrectly. in fact i am not even sure i found all the errors

some of your css is incorrect as well

$("li#about").hover(function() {
      $("#content1").toggle();
    });

    $("li#education").hover(function() {
      $("#content2").toggle();
    });

    $("li#info").hover(function() {
      $("#content3").toggle();
    });

    $("li#ref").hover(function() {
      $("#content4").toggle();})
header {
  background: #5a4c1c;
  border-radius: 10px;
  opacity: 0.85;
  padding: 1px 0;
}
.minheight {
  min-height: 200px;
}
h1 {
  margin: 0 0;
  color: white;
  padding-left: 10px;
}
h3 {
  color: #dad6c7;
  padding-left: 31px;
}
body {
  background: #dad6c7;
}
ul {
  list-style-type: none;
  padding: 0px 15px;
  margin: 50px 0;
}
span {
  color: white;
}
li {
  font-family: Helvetica;
}
div.column {
  border-style: solid;
  border-color: rgba(56, 43, 3, 1);
}
#content1,
#content2,
#content3,
#content4 {
  opacity: 1;
  display: none;
  padding: 3px auto;
}
.clear-fix {

} 

.column li {
  padding: 4px 0 4px 0;
  margin-top: 30px;
  margin-bottom: 30px;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  font-size: 20px;
  overflow: hidden;
}
.clr {
  clear: both;
  font-size: 0;
}
.column {
  float: left;
  background-size: 220px 220px;
  background: #5a4c1c;
  padding: 5px 2px;
  margin: 10px 10px 10px 0;
  opacity: 0.5;
  width: 20%;
  min-width:134px;
  border-radius: 20px;
}
.column li:hover{
  background: black;
  border-radius: 20px;
}
.content {
  color: #5a4c1c;
  font-weight: bold;
  font-family: helvetica;
  width: 85%;
}
.footer {
  text-align: center;
  background: #5a4c1c;
  color: white;
  padding: 10px 0;
  opacity: 0.5;
  margin-top: 30%;
  border-radius: 10px;
  clear:both;
  
}
<link href="//normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>Ryan Anderson</h1>
  <h3>Developer</h3>
  <div class="clearfix">
    <div class="column">
      <ul>
        <li id="about"> <span>About Me</span> 
        </li>
        <li id='education'> <span>Education</span>
        </li>
        <li id='info'> <span>Experience</span>
        </li>
        <li id='ref'> <span>References</span>
        </li>
      </ul>
      <div class="clr"></div>
    </div>


    <div id="content1" class="content show-description">
      <p>About me
        <br />
        <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
    </div>

    <div id="content2" class="content">
      <p>Education
        <br />
        <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
    </div>

    <div id="content3" class="content">
      <p>Experience
        <br />
        <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
      </p>
    </div>

    <div id="content4" class="content">
      <p>References
        <br />Paul Garven (co-worker): (780)-828-1111
        <br />Paul CWC (owner of CWWC): (416)- 721-1111
        <br />Someone at Bitmaker: (416-967-11-11
      </p>
    </div>
  </div>


  

<div class="footer">
    <p>Contact
       <br/>
      <small>mobile: (647)-333-8723 <br/>
	   e-mail: [email protected]</small>
    </p>
  </div>

</body>

Upvotes: 1

Ibu
Ibu

Reputation: 43850

You have an error in your CSS. 

#content1, #content2,#content3,#content4{
    opacity:1;
    display: none;
    padding: 3px auto; <--
}

padding doesn't take the value auto.

Switch it to padding-top:3px; padding-bottom:3px; and the jittering will stop.

Link: Working proof

Upvotes: 2

Related Questions