8
Indiquez l’intérêt que vous portez à cette question
0

Ajax reload et fullscreen overlay

Bonjour,
J’ai une série d’articles cliquables pour faire apparaître la totalité des articles de cette façon.

Pour éviter de charger tous les articles, je m’inspire de cette contribution.

J’utilise le JS de la contribution SPIP :

<script type="text/javascript"> 
$(document).ready(function(){
$('.liste_actus_item').on('click', function(event){
event.preventDefault();
var id_article_current = $(this).attr("data-id");
$('.liste_actus_item.active').removeClass('active');
$(this).toggleClass('active');
$(".debug").html("Appel de l'article: " + id_article_current);
	ajaxReload('vue_actu', {
	args:{id_article:id_article_current},
	history:false,
	callback:function(){
	$(".debug").html("Article " + id_article_current + " chargé !");
			},
		});
		return true;
	});
});
</script>

Pour que l’effet "Overlay" fonctionne, il faudrait que la div "vue_actu" s’affiche à 100 % (déclaré à 0 en CSS). Comment puis-je ajouter dans le JS ci-dessus une fonction pour changer mon width à 100% ?

J’ai essayé avec ça en ajoutant une fonction et en changeant "return false" en "return true" ;

function openNav() {
  document.getElementById("vue_actu").style.width = "100%";
}

et en ajoutant sur le lien le onclick :

  1. <a onclick="openNav()" href="#URL_ARTICLE" class="liste_actus_item" data-id="#ID_ARTICLE">Lire</a>

L’overlay arrive pour se retirer aussitôt...

Je vous remercie de votre aide...