Archief - jquery tekst veranderen met hover en animation

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
L

Lefky

Legacy Member
kheb een jquerytje om de tekst te veranderen van 'welkom' naar 'ga verder' en terug
maar er zit een fout in en ik heb er geen idee van wat het is

Code: 
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$( function() {
  $("#CHANGE").hover(
    function () {
      $(this).animate({ 
	  	function() {$(this).text('Ga verder');} 
	  }, "slow");
    },
    function () {
      $(this).animate({ 
	  	function() {$(this).text('Welkom!');} 
	  }, "slow");
    }
  );
});
</script>

Code: 
<div align="center" id="CHANGE">
    <p id="groot">Welkom!</p>
</div>

iemand die mij vooruit kan helpen?
L

Lefky

Legacy Member
bedankt!

in de fiddle werkt het maar in mijn webpagina niet?
voor de rest ziet die code er mij. wel correct uit dus heb niet echt een idee waaraan het kan liggen :s
de css die erbij hoort is niets meer dan dit

#groot {
font-size: 70pt;
}

vind het nogal raar
D

Dieterg

Legacy Member
Heb je het in een document.ready blok gezet? Of zet uw code voor de sluiting /body tag.

Code: 
$(document).ready(function() {
    //uw code hier

});
L

Lefky

Legacy Member
stond er niet in (normaal wordt jquery uitgevoerd wanneer de hele pagina geladen is toch?)

nu staat het er wel in maar het maakt geen verschil :(
b

bealzebub

Legacy Member
Lefky zei:
stond er niet in (normaal wordt jquery uitgevoerd wanneer de hele pagina geladen is toch?
Klik om te vergroten...

Javascript en browser rendering zijn asynchroon.

Het is dus niet omdat je op je pagina eerst jquery inlaadt dat de lib of zelfs de DOM al volledig beschikbaar is. Daarom luister je naar het ready event op je document, da's de browser die zegt: "ok, alles wa je nodig hebt om van start te gaan is ingeladen en verwerkt". Bovendien doen browsers tegenwoordig enorm veel optimalisatie als het op load order en dependency handling aankomt.

Simpelweg gezegd: je MOET luisteren naar het DOMReady event om er zeker van te zijn dat je met de DOM kan werken.

Lefky zei:
nu staat het er wel in maar het maakt geen verschil
Klik om te vergroten...

Wat zegt de console, krijg je errors, &#8230;? Het werkt niet is niet genoeg om je veel hulp te bieden.
L

Lefky

Legacy Member
geen syntaxfouten en voor de rest werkt de webpagina wel maar de tekst die moet veranderen verandert niet

iemand had me dit ook aangeraden

Code: 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="JS-JQuery/jquery.hoverIntent.minified.js"></script>
<script>
$(document).ready(function() {
	$("#change").hoverIntent(function(){
		$("#big").fadeOut('slow',function() {
		  $("#link").fadeIn('slow');
		});
	  },
	  function(){
		$("#link").fadeOut('slow',function() {
		  $("#big").fadeIn('slow');
		});
	  }    
	);
});
</script>

Code: 
<div id="relocate"> 
      <img src="afbeeldingen/logoInitialen.png" alt="Logo"/>
      <div id="change">
    	<p id="big">Welcome!</p>
	    <p id="link" style="display:none"><a href="Index.html">Continue</a></p>
  	  </div>
  </div>
maar dit werkt ook niet
b

bealzebub

Legacy Member
Works for me op Safari, Firefox en Chrome.

Je kan de code een beetje leesbaarder maken, al die nested functions worden op een eind&#8230; wel&#8230; een nest ;)

Code: 
<script>
$(document).ready(function() {

  var toggle = function(first, second) {
    $(first).stop().fadeOut('slow').promise().done(function() {
      $(second).stop().fadeIn('slow');
    });
  }

  var hoverIn = function(){
    toggle("#big", "#link");
  }

  var hoverOut = function(){
    toggle("#link", "#big");
  }


  $("#change").hoverIntent(hoverIn,hoverOut);
});
</script>

P.S. Het klinkt misschien dom, maar ben je zeker dat je niet toevallig twee elementen met eenzelfde id op de pagina hebt staan? Ids moeten uniek zijn, anders krijg je rare toestanden.
L

Lefky

Legacy Member
nu werkt het wel??? (rare dingen)
maar ik krijg eerst welcome
als je er over gaat komt continue en daarna zie je beiden onder elkaar

dat is niet de bedoeling
de bedoeling is dat je of het 1 of het ander ziet en dat die op dezelfde plaats komen en dezelfde opmaak hebben (wat ook niet lukt trouwens)
b

bealzebub

Legacy Member
Allemaal ferm gefoefel imo, zeker als je in t achterhoofd houdt dat je daarmee elk touch device of iedereen die Javascript disabled gezet heeft en alle blinden gewoon nooit de kans geeft om verder te gaan.

Soit, dan doe je t beter zo:

Code: 
<!doctype html>
<html>
<head>
  <title>Test</title>
</head>
<body>

<div id="relocate"> 
  <div id="change">
    <p id="foefelare">Welcome!</p>
  </div>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="JS-JQuery/jquery.hoverIntent.minified.js"></script>
<script>
$(document).ready(function() {

  var replaceText = function(text) {
    var el = $("#foefelare");
    el.stop().fadeOut('slow').promise().done(function() {
      el.html(text);
      el.fadeIn('slow');
    });
  }

  var hoverIn = function(){
    replaceText('<a href="index.html">Continue</a>');
  }

  var hoverOut = function(){
    replaceText('Welcome');
  }


  $("#change").hoverIntent(hoverIn,hoverOut);
});
</script>

</body>
</html>

En dezelfde opmaak wil gewoon zeggen dat je de link in het element gaat moeten stylen zoals z'n parent, ook schitterend dat je dan gewoon helemaal nie meer ziet dat het om een link gaat, maakt het allemaal heel duidelijk *ironie*

Code: 
#foefelare a {
  text-decoration: none;
  color: #000;
}
L

Lefky

Legacy Member
Wat moet ik dan op die pagina zetten? :p
Foto's heb ik nie echt...
b

bealzebub

Legacy Member
Welkomspagina's zijn slecht, evil, demonisch en totaal nutteloos. Begin met de pagina die de content heeft waar je bezoeker voor komt kijken.

Als ik welkom ben op je site des te beter, en indien niet kan t mij nog nie schelen. Een welkomspagina voor mij is een byebye pagina. Even irriterend als "Uw video start binnen x seconden".

Nu, effe het sarcasme aan de kant zetten. Een website draait allemaal rond content, de fiekfak errond maakt het mooi, maar de content is waarvoor men je site bezoekt. Welkom zijn is geen content, flash intros zijn geen content. Da's allemaal misschien iets waar (als t echt goed gedaan is) de grafici bijna een orgasme van krijgen, maar het draagt niets bij en je verliest al de helft van de tijd die een nieuwe bezoeker je wil geven om z'n aandacht te houden.

Met je weinige ervaring zou ik zeggen: keep it simple en clean (geen Javascript, gebruik een css framework desnoods). Dat zijn dikwijls nog de mooiste sites en met veel witruimte en een responsive grid based design (eventueel zelfs gewoon twitter bootstrap based) kan je echt iets maken dat niet moeilijk is, maar toch enorm functioneel en zelfs mooi. Javascript is leuk en het kan z'n nut hebben, maar het moet functioneel zijn.

Samengevat: geen enkele professionele site gebruikt welkomspagina's, vertrouw op de professionals ;)
L

Lefky

Legacy Member
Ben student IT aan hogent en wil dat maken voor oa mn portfolio dus ik moet ergens wel wat kunnen laten zien. Eventueel zo een idee?
c

coldvinc

Legacy Member
Je kan tonen dat je weet wat belangrijk is door je code technisch in orde te hebben en zoals bealzebub zegt geen onnodige dingen doen die bezoekers toch niet interesseren.
b

bealzebub

Legacy Member
Wat inspiratie opdoen op Dribble en dan gewoon cleane HTML5 en propere CSS schrijven.

Eens alles op de normale manier werkt, kan je je eventueel wagen aan wat Javascript verrijking. Het eerste alleen al zal een heel goeie leerschool zijn, geloof me.

Aangezien je IT doet zou ik ook geen gebruik maken van third party jQuery plugins (jQuery kan eventueel wel, anders veel te veel crossbrowser compatibility werk), maar echt je Javascript zelf schrijven. Ook daar moet je het dan proper doen: gebruik maken van Javascript prototypes (vergelijk met classes in een OO omgeving), zorgen dat je in strict mode werkt en sowieso je code properkes binnen een function binden zodat er geen variabelen in de global namespace sluipen zonder dat je het expliciet wil. Als dit alles chinees klinkt, dan neem je er best een goed Javascript boek bij. Javascript is een zeer leuke taal (alhoewel ik die graag verrijk met Coffeescript), maar je moet voor heel wat zaken echt wel totaal anders denken dan in procedurele OO talen zoals PHP, Ruby of Java.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan