11496 sujets

JavaScript, DOM et API Web HTML5

Scroll to & remove / Changer text par img.

Bonjour,

Je suis à la recherche d'une idée pour faire coulisser ma page et supprimer une div.
http://www.blastyk.com/perso/exemple.jpg
Je voudrais en cliquant sur le bouton bleu, descendre jusqu'au reste du contenu (qui débute par une barre de nav fixée) au top et supprimer la div de 100%.
La fonction slideUp marche plutôt bien pour ce qui est du scroll jusqu'au reste du contenu puis la suppression mais ma barre de nav n'est plus fixe.

Est-il possible de faire un smooth scroll avec un plugin et créer un script (si facile à faire?) pour dire: si "div100%" est en dehors de l'écran ==> la supprimer??? Réalisable?

______________________

J'utilise un plugin jQuery ( sample 3) pour étendre et fermer un div à souhait et je souhaiterait changer le "+" et le "-" par deux images. Cela doit etre possible mais n'étant pas expert, je n'ai pas trouver dans la docu jQuery comment faire. 


<script type="text/javascript">
	$(document).ready(function(){
		$("#expanderHead").click(function(){
			$("#expanderContent").slideToggle();
			if ($("#expanderSign").text() == "+"){
				$("#expanderSign").html("-")
			}
			else {
				$("#expanderSign").text("+")
			}
		});
	});
	</script>


Si quelqu'un à une idée pour résoudre mes deux petits problèmes, je le remercie par avance. Smiley biggrin Smiley prie
Modifié par Benguiii (14 Nov 2013 - 02:46)
Salut, merci de ta réponse. Après avoir posté hier soir, j'ai continué de chercher et la fonction .slideUp de jQuery pourrait convenir. J'ai essayé de la mettre en place mais bien évidemment ça ne marche pas! Si quelqu'un pouvait me dire où se trouve l'erreur? Merci d'avance! Smiley cligne 


<div id="bann">
        <div class="banncontent">
        	<div class"logo">
				<img src="img/logo.png" alt="" />
            </div>
            <div class="arrow">
            	<img src="img/arrow.png" onMouseOver="this.src='img/arrow2.png';" onMouseOut="this.src='img/arrow.png';" />
            </div>
            <div id="click">
            	<img src="img/cliquez.png" />
            </div>

    	</div>
    </div>




<script type="text/javascript">
	$(document).ready(function(){
		$("#click").click(function(){
			$("#bann").slideUp('slow');
			// Animation complete.
		});
	});
	</script>

Modifié par Benguiii (14 Nov 2013 - 12:57)
Tazz, pour le plugin scrollTo, faut-il obligatoirement l'implanter dans <a>, title, etc.. ou on ceci peut être correct:


        <script type="text/javascript">
	$(document).ready(function(){
		$("#arrow").click(function(){
			$.scrollTo( '#nav', 800, {easing:'elasout'}, {onAfter:function(){ 
				$("#bann").remove(); 
			});
		});
	});
	</script>




	<div id="bann">
        <div class="banncontent">
        	<div class"logo">
				<img src="img/logo.png" alt="" />
            </div>
            <div id="arrow">
            	<a title="$.scrollTo( '#nav', 800, {easing:'elasout'}, {onAfter:function(){ $("#bann").remove(); } );" href="#nav"><img src="img/arrow.png" onMouseOver="this.src='img/arrow2.png';" onMouseOut="this.src='img/arrow.png';" /></a>
            </div>
            <div class="click">
            	<img src="img/cliquez.png" />
            </div>

    	</div>
    </div>


Merci pour l'aide Smiley smile
Modifié par Benguiii (14 Nov 2013 - 12:57)
tu peux l'utiliser de la sorte :

$(...).scrollTo( 'li:eq(15)', 1600, {onAfter:function(){ } } );//called after the scrolling ends
tazzkiller a écrit :
tu peux l'utiliser de la sorte :

$(...).scrollTo( 'li:eq(15)', 1600, {onAfter:function(){ } } );//called after the scrolling ends

dans une balise script ou dans l'attribut title?

En fait, je voudrais réaliser le même effet que celui-ci.

Ma div 100% est une "bannière d'accueil" qui ne sert plus a rien après l'avoir passé.
Après l'anim avec le nuage, il y a un bandeau en bas qui apparait avec écrit :"What is MEGA? Click or scroll ".
En cliquant sur ce texte ou en scrollant un petit coup n'importe où, on accède à #info. "Je" voudrais réaliser la même chose sans retour possible.
Modifié par Benguiii (14 Nov 2013 - 13:29)
Sujet clos
Aller à