login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Resize script

Offline stashuhg - 22/10/2007 20:11
Avatar van stashuhgNieuw lid Hallo,
ik ben wat aan het aankloten en hoop dat ik duidelijk kan overbrengen wat ik wil:

Ik heb dit javascript gevonden op internet waarmee ik een <p> schuivend kan vergroten met een mousover. in een <p> kan ik niet zoveel stoppen (divjes enzo). nu zou ik graag een divje kunnen vergroten met dit script, het mooie van dit script is dat het schuift.

Javascript
  1. if (document.getElementById && document.getElementsByTagName) {
  2. if (window.addEventListener) window.addEventListener('load', initAnims, false);
  3. else if (window.attachEvent) window.attachEvent('onload', initAnims);
  4. }
  5.  
  6. function initAnims() {
  7.  
  8. // Init size animation with memory, both directions
  9. var animElements = document.getElementById("resizercontainer").getElementsByTagName("p")
  10. for(var i=0; i<animElements.length; i++) {
  11. animElements[i].onmouseover = heightChange;
  12. animElements[i].onmouseout = heightRestore;
  13. }
  14.  
  15. function heightChange() {
  16. if (!this.currentheight) this.currentheight = 45; //if no mem is set, set it first;
  17. doheightChangeMem(this,this.currentheight,150,10,10,0.333);
  18. }
  19.  
  20. function heightRestore() {
  21. if (!this.currentheight) return; //avoid error if mouseout an element occurs before the mosueover
  22. //(e.g. the pointer already in the object when onload)
  23. doheightChangeMem(this,this.currentheight,45,10,10,0.5);
  24. }
  25. }
  26.  
  27. //*******************
  28.  
  29. function doheightChangeMem(elem,startheight,endheight,steps,intervals,powr) {
  30. //height changer with Memory by www.hesido.com
  31. if (elem.heightChangeMemInt) window.clearInterval(elem.heightChangeMemInt);
  32. var actStep = 0;
  33. elem.heightChangeMemInt = window.setInterval(
  34. function() {
  35. elem.currentheight = easeInOut(startheight,endheight,steps,actStep,powr);
  36. elem.style.height = elem.currentheight+"px";
  37. actStep++;
  38. if (actStep > steps) window.clearInterval(elem.heightChangeMemInt);
  39. }
  40. ,intervals)
  41.  
  42. }
  43.  
  44.  
  45.  
  46. //*******************
  47.  
  48. function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
  49. //Generic Animation Step Value Generator By www.hesido.com
  50. var delta = maxValue - minValue;
  51. var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
  52. return Math.ceil(stepp)
  53. }


html
  1. <style type="text/css">
  2.  
  3. #resizercontainer {
  4. clear: both;
  5. }
  6.  
  7. #resizercontainer p {
  8. height: 45px;
  9. width: 800px;
  10. text-align: center;
  11. margin: 0px;
  12. background-color: #BEDAF1;
  13. }
  14.  
  15.  
  16. <div id="resizercontainer">
  17. <p style="height: 45px; overflow:hidden;">
  18. <img src="http://www.urbanhieroglyphics.nl/new/data/images/header_top.gif" />
  19. <img src="http://www.urbanhieroglyphics.nl/new/data/images/header_text.gif" />
  20. </p>
  21. </div>


hmm tja hoop dat het duidelijk is, thnx

2 antwoorden

Gesponsorde links
Offline TotempaaltJ - 22/10/2007 21:08
Avatar van TotempaaltJ PHP interesse Ik denk dat je op regel negen (JavaScript) getElementsByTagName("p") moet vervangen door getElementsByTagName("div") ...

Denk ik hoor! 
Offline stashuhg - 22/10/2007 21:17 (laatste wijziging 22/10/2007 22:06)
Avatar van stashuhg Nieuw lid klopt.. helemaal over het hoofd gezien maar nu stuit ik tegen een nieuw probleem:
ik wil graag divjes gebruiken in het schuifbare div. Maar dit werkt dus weer tegenstrijdig... dus eigenlijk zal ik ipv van de tag in het script een id willen gebruiken, dus ik heb geprobeerd: getElementsByTagName("div") te vervangen met getElementById("menu") maar dit werkt ook niet...

(vage boel )

edit: ondertussen maar opgelost met tabellen, thnx anyway
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.345s