CODEWITHSUNDEEP
javascriptjqueryhtmlcssslide
Rayjax
Rayjax

Reputation: 7784

jQuery slide jumps around on some divs

I am building a little website so here is my problem :

I've got a first header div which contains header stuff. It has position relative and stuff inside is position absolute, but I think that we don't really care about this one.

Just below I've got my main container div with no defined positioning and some <h1> and <p> in it. Each h1, on click, opens some content below with jQuery slide.

This is the code. The sliding part is

$("#container_" + tabName).slideToggle

The point is that on the which i called "buggy" in the example, and also on all other in my dev version, the jQuery slide is jumpy at the beginning and end of the animation.

I've done some search I found that I had to put a defined width but it didn't change anything.. Tried a lot of stuff already but I really don't find how to do that.

Upvotes: 3

Views: 149

Answers (2)

Anujith
Anujith

Reputation: 9370

See this fiddle: http://jsfiddle.net/8s9VB/

.container_projects .mainSmallText{
  padding-top: 25px;
}
.container_projects .mainSmallSubText{
  font-weight: bold;
}

#container_professionalXP{
   line-height: 3px;
   padding-bottom: 20px;
}
#container_professionalXP .mainSmallText{
   padding-top: 30px;
}

Upvotes: 1

KaHeL
KaHeL

Reputation: 4371

Well it's basically the problem with the margin inside your paragraph. I've edited one part of it and added padding in the div rather than margin inside the paragraph. Here's one part I've edited:

#container_professionalXP{
    line-height: 3px;
    margin-bottom: 20px;
    padding-top:30px;
}
#container_professionalXP .mainSmallText{
    margin: 0px;
    padding:0px;
}

Upvotes: 0

Related Questions