Chargement timeline

Fermé
deeploy Messages postés 49 Date d'inscription dimanche 31 janvier 2010 Statut Membre Dernière intervention 16 juillet 2015 - 16 juil. 2015 à 15:19
Salut à tous ;) ,

J'ai un petit problème avec ma timeline. Mes boxs se placent bien de part et d'autre de la ligne, et j'ai un bouton qui, lorsqu'on clique dessus, m'affiche les prochains événement. Donc théoriquement je devrais arriver à un résultat comme ça :




Le seul soucis c'est au chargement de la page. ca donne ça :





Mon code est le suivant :

<div class="leftside">

<div class="title">
	<h2 class="headline margin-bottom-10 no-float">Timeline</h2>
</div>

<section class="no-border no-padding-top padding-bottom-10">
	<form autocomplete="off" method="POST">	
		<div class="control-group col-md-12 no-padding col-xs-12">
			<div class="controls">
				<textarea class="form-control count" rows="1" placeholder="Write something..."></textarea>
			</div>
		</div>
		<span class="pull-left margin-top-20 text-dark">You have <b><span class="countdown"></span></b> character left</span>
		<button type="button" class="btn btn-success btn-outline pull-right margin-top-15">Post</button>
	</form>
</section>

<ul class="timeline loaded-content">
	<li>
		<div class="timeline-badge primary"></div>
		<div class="timeline-panel">
			<div class="timeline-heading">
				<h4 class="padding-15"><a href="#">title 1</a></h4>
				<img class="img-responsive full-width" src="img.jpg" alt="image" />  
			</div>
		<div class="timeline-body">
			<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
		</div>
		<div class="timeline-footer">
			<i class="ion-android-calendar"></i> Jan 18. 2014, 10:50 am
			<a class="pull-right"><i class="ion-android-forums"></i>27</a></a>
		</div>
		</div>
	</li>
	
	<li class="timeline-inverted">
		<div class="timeline-badge primary"></div>
		<div class="timeline-panel">
			<div class="timeline-heading">
				<h4 class="padding-15"><a href="#">title 2</a></h4>
				<img class="img-responsive full-width" src="img.jpg" alt="image" />  
			</div>
			<div class="timeline-body">
			  <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
			</div>
			<div class="timeline-footer">
				<i class="ion-android-calendar"></i> Jan 18. 2014, 10:50 am
				<a class="pull-right"><i class="ion-android-forums"></i>27</a></a>
			</div>
		</div>
	</li>
	
	<li>
		<div class="timeline-badge primary"></div>
		<div class="timeline-panel">
			<div class="timeline-heading">
				<h4 class="padding-15"><a href="#">title 3</a></h4>
				<img class="img-responsive full-width" src="img.jpg" alt="image" />  
			</div>
		<div class="timeline-body">
			<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
		</div>
		<div class="timeline-footer">
			<i class="ion-android-calendar"></i> Jan 18. 2014, 10:50 am
			<a class="pull-right"><i class="ion-android-forums"></i>27</a></a>
		</div>
		</div>
	</li>
	
	<li class="timeline-inverted">
		<div class="timeline-badge primary"></div>
		<div class="timeline-panel">
			<div class="timeline-heading">
				<h4 class="padding-15"><a href="#">title 4</a></h4>
				<img class="img-responsive full-width" src="img.jpg" alt="image" />  
			</div>
			<div class="timeline-body">
			  <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
			</div>
			<div class="timeline-footer">
				<i class="ion-android-calendar"></i> Jan 18. 2014, 10:50 am
				<a class="pull-right"><i class="ion-android-forums"></i>27</a></a>
			</div>
		</div>
	</li>
	<li class="clearfix" style="float: none;"></li>
</ul>

<div class="text-center"><a href="#" class="btn btn-info btn-icon-left" id="load-more">Show More</a></div>

</div>




<script>
	(function($) {
	"use strict";
	

		$(".loaded-content li").slice(0,2).show();
		$('#load-more').click(function (e) {
			e.preventDefault();
			var btn = $(this)
			btn.button('loading')
			setTimeout(function () {
				btn.button('reset')
				$(".loaded-content li:hidden").slice(0, 2).fadeIn();
			}, 500)
		});
	})(jQuery);
	</script>


/* --- timeline --- */
	.timeline {
	  list-style: none;
	  padding: 0px;
	  position: relative;
	}
	.timeline:before {
	  top: 0;
	  bottom: 0;
	  position: absolute;
	  content: " ";
	  width: 3px;
	  background-color: #cccccc;
	  left: 50%;
	  margin-left: -1.5px;
	}
	.timeline > li {
	  margin-bottom: 60px;
	  position: relative;
	  width: 50%;
	  float: left;
	  clear: left;
	}
	.timeline > li:before,
	.timeline > li:after {
	  content: " ";
	  display: table;
	}
	.timeline > li:after {
	  clear: both;
	}
	.timeline > li:before,
	.timeline > li:after {
	  content: " ";
	  display: table;
	}
	.timeline > li:after {
	  clear: both;
	}
	.timeline > li > .timeline-panel {
	  width: 95%;
	  float: left;
	  background: #FFF;
	  border-radius: 3px;
	  position: relative;
	  border: 1px solid #d4d4d4;
	  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
	  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
	}

	.timeline > li > .timeline-panel:before {
	  position: absolute;
	  top: 15px;
	  right: -8px;
	  display: inline-block;
	  border-top: 8px solid transparent;
	  border-left: 8px solid #ccc;
	  border-right: 0 solid #ccc;
	  border-bottom: 8px solid transparent;
	  content: " ";
	}
	.timeline > li > .timeline-panel:after {
	  position: absolute;
	  top: 16px;
	  right: -7px;
	  display: inline-block;
	  border-top: 7px solid transparent;
	  border-left: 7px solid #fff;
	  border-right: 0 solid #fff;
	  border-bottom: 7px solid transparent;
	  content: " ";
	}
	.timeline > li > .timeline-badge {
	  color: #fff;
	  width: 15px;
	  height: 15px;
	  line-height: 50px;
	  font-size: 1.4em;
	  text-align: center;
	  position: absolute;
	  top: 16px;
	  right: -8px;
	  z-index: 100;
	  border: 3px solid #999999;
	  background-color: #FFF;
	  border-top-right-radius: 50%;
	  border-top-left-radius: 50%;
	  border-bottom-right-radius: 50%;
	  border-bottom-left-radius: 50%;
	  box-shadow: 0 0 0 2px #FFF;
	}
	.timeline > li.timeline-inverted > .timeline-panel {
	  float: right;
	}
	.timeline > li.timeline-inverted > .timeline-panel:before {
	  border-left-width: 0;
	  border-right-width: 8px;
	  left: -8px;
	  right: auto;
	}
	.timeline > li.timeline-inverted > .timeline-panel:after {
	  border-left-width: 0;
	  border-right-width: 7px;
	  left: -7px;
	  right: auto;
	}
	.timeline-badge > a {
	  color: #C5C7C5 !important;
	}
	.timeline-badge a:hover {
	  color: #000 !important;
	}
	.timeline-title {
	  margin-top: 0;
	  color: inherit;
	}
	.timeline-body > p,
	.timeline-body > ul {
		padding:15px 20px;
		margin-bottom: 0;
	}
	.timeline-body > p + p {
	  margin-top: 5px;
	}
	.timeline-footer{
		color: #6e6e6e;
		padding: 10px 20px 15px 20px;
	}
	.timeline a{
		color: #6e6e6e;
		cursor: pointer;
		text-decoration: none;
	}
	.timeline-footer i {
		margin-right: 7px;
	}
	.timeline > li.timeline-inverted{
	  float: right; 
	  clear: right;
	  margin-top: 30px;
	  margin-bottom: 30px;
	}
	.timeline > li:nth-child(2){
	  margin-top: 60px;
	}
	.timeline > li.timeline-inverted > .timeline-badge{
	  left: -7px;
	}
.loaded-content li {
	display: none;

}


Je précise que c'est du code venant d'un template ... j'ai l'impression qu'il bloque à cause du script javascript mais bon .. je sais pas vraiment d'où ca peut venir.

Merci d'avance :)