Jquery défilement de texte

ickyknox Messages postés 1156 Date d'inscription Statut Membre Dernière intervention -
bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention - 3 juil. 2012 à 09:42

Bonjour,
quel genre de tuto puis je chercher afin que :
lorsque je clic sur un bouton, juste à coté s'affiche un paragraphe (en défilant, puis en se stabilisant). Et en recliquant sur le bouton, le paragraphe redéfile à l'envers comme pour rentrer à la maison.

Voilà si quelqu'un connais un site où je puis trouver ceci, ce serait gentil!

Afficher la suite

A voir également:

Jquery défilement de texte
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Barre de défilement - Guide
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide
Traitement de texte gratuit - Guide

8 réponses

Réponse 1 / 8

aladin07 Messages postés 277 Date d'inscription Statut Membre Dernière intervention 30

Regarde les effets Javascript dans ce site:
https://getbootstrap.com/2.3.2/

Si tu trouve ce que tu cherche copie le code HTML, sinon dis moi à quel effet tu veux que ça ressemble.

Réponse 2 / 8

ickyknox Messages postés 1156 Date d'inscription Statut Membre Dernière intervention 48

encore merci aladin,
ce lien est une bonne mine de renseignements que je piquerais volontier.
En ce qui concerne ma question,
je rédige un bout de code puis je le met en ligne pour montrer -ce que je veux

Réponse 3 / 8

ickyknox Messages postés 1156 Date d'inscription Statut Membre Dernière intervention 48

ca y est j'ai fini mon bout de code (que j'ai copié bien évidemment ^^)
donc sur le site : http://ile-du-bien-etre.com/ au centre, il y a TARIF

En cliquant dessus , les tarifs défilent.
Que faut il coder pour que lorsque je reclique sur TARIFS, le texte face machine arrière, et donc disparait ?

Merci encore!

voici le code :

@font-face {
    font-family: 'BelleroseLight';
    src: url('font/belleroselight-webfont.eot');
    src: url('font/belleroselight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/belleroselight-webfont.woff') format('woff'),
         url('font/belleroselight-webfont.ttf') format('truetype'),
         url('font/belleroselight-webfont.svg#BelleroseLight') format('svg');
    font-weight: normal;
    font-style: normal;
	    background-color: transparent

}


html, body{
  margin: 0;
  }

body {
  border-top: 0px solid #61686d;
  color: #6d7478;
  line-height: 0px;
  font-size: 12px; 
  font: 100%/1.4 'BelleroseLight', Verdana, Arial, Helvetica, sans-serif;}


.wrap {
  width: 940px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1; }

	
  .content .portfolio .post {
    width: 100px;
    float: left;
    position: relative;
    height: 85px;
    background-color: transparent;
    margin-bottom: 0px;
   }

    .content .portfolio .post .expand {
      display: none; }
	  
  .content .portfolio .expand {
    width: 380px;
    height: 505px;
    background: none;
 }

jQuery(function(){
	
	$('#menu-navigation').find('a').each(function(){
		var e = $(this);
		var t = e.text().split(','); 
		if(t.length > 1){
			e.html(t[0]+'<small>'+t[1]+'</small>'); 
		}
	});

    var portfolio = $('#portfolio'); 
    var current = null; 
    var old = null; 
    portfolio.masonry({
	    itemSelector : '.post:not(.hidden)',
	    isAnimated: true,
	    columnWidth: 1000,
	    gutterWidth: 1000
  	});
  	portfolio.find('.post>a').click(function(e){
  		e.preventDefault();
  		var link = $(this); 
  		var info = link.parent().find('.expand'); 
  		// Remove active links


  		if(current != null)
  			old = current.addClass('hidden'); 
  		current = info.clone().addClass('post'); 
  		info.parent().after(current); 
  		portfolio.masonry('reload');
 		  // Animations
  		current.hide().show(00); 
  		
  		if(old!=null)
  			old.hide(00,function(){$(this).remove();});
  		current.find('.slider').nivoSlider({
  			captionOpacity : 0,
  			  	 			
  		}); 
  	});
});

Réponse 4 / 8

aladin07 Messages postés 277 Date d'inscription Statut Membre Dernière intervention 30

Efface tout ça! N'utilise pas d'objet dans ta page, ça la rend moche dans certain navigateurs, voir illisibles. Inclue l'HTML directement dans la page.

Mets ceci:

<a href="#" id="toggler" style="color:black;text-decoration:none;font-size:48px;">Tarifs</a>
<div class="expand" style="display:none;">

<center><a style="color:black; font-size:25px;line-height:20px;">Maquillage jour<span class="macouleur1">.............................................................</SPAN>30€<br><br>

Maquillage soir<span class="macouleur1">.............................................................</SPAN>50€<br><br>
Maquillage mariée avec essai<span class="macouleur1">...............</SPAN>70€<br><br>
Cours d'auto-maquillage 2h<span class="macouleur1">.....................</SPAN>80€<br><br>
</div>

à la place de l'objet <object ....etc

Puis ajoute ceci au header de ta page, juste avant le <style>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#toggler").click(function() {
    console.log( $(this).next());
    $(this).next('.expand').slideToggle("slow");
  });
});
</script>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention 2 409

j'ai ceci sous la main :
https://www.unesourisetmoi.info/jquery/index.php
et
https://www.unesourisetmoi.info/no/index.php
tu as tous les codes et les sources donc en adaptant un peu je pense que tu devrais y trouver ton bonheur :)

Réponse 6 / 8

ickyknox Messages postés 1156 Date d'inscription Statut Membre Dernière intervention 48

merci aladin,
j'ai modifié, par contre mon défilement reste bloqué et n'est plus à la bonne place.

quant à bg62 , merci pour le site, j'irais piocher pas mal d'idée là dedans !

bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention 2 409

pas de problèmes c'est fait pour ça :)

Réponse 7 / 8

aladin07 Messages postés 277 Date d'inscription Statut Membre Dernière intervention 30

Dans #bienvenue enlève: position: absolute; et ajoute: float: left;

Tu dois aussi modifier le JS, enlève console.log( $(this).next()); et remplace le par: event.preventDefault();

Réponse 8 / 8

ickyknox Messages postés 1156 Date d'inscription Statut Membre Dernière intervention 48

oh formidable ! ca y est ca fonctionne!
et c'est normal que ca lague un peu au defilement , il s'agit d'une animation trop lourde peu etre ?
on dirait qu'il me défile au ligne par ligne au lieu du pavé en glissement

Discussions similaires

Excel 365 + Windows 10 Arrêt défilement flèches

Excel : les flèches déplacent le document

Touche arrêt défil sur clavier

Votre réponse

Discussions similaires