Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Wybranie linku po najechaniu na niego.
Forum PHP.pl > Forum > Przedszkole
spokoloko123
Witam,

Tworzę menu tzw. lavalamp. Działa ono w obrębie jednej strony na kotwicach. Chce jednak, żeby po najechaniu na daną pozycję w menu przechodziło do kotwicy. Mam też plugin który zapewnia mi płynne przechodzenie po stronie po klikaniu na kotwice.

Podsumowując:

Wszystko działa gdy kliknę taki link:
<a href="#home">Home</a>

A gdy najadę na taki link:
<a href="#home" onmouseover="window.location.hash='#home'">Home</a>

Otrzymuję "szarpnięcie" to znaczy strona pojawia się w miejscu które mnie interesuje natomiast bez efektu przewijania.

Da się zrobić tak aby po najechaniu na link aktywować ten link a nie podmieniać URL?
kamil4u
Zamiast onmouseover="window.location.hash='#home'", wstawić funkcję, która Ci odpowiednio przesunie stronę - patrz manual do pluginu.
spokoloko123
Tak wygląda ten plugin. Niestety nie wiem za bardzo jak wybrać napisać ten onmouseover. Będę hiperwdzięczny za pomoc.
  1. window.onload = function() {
  2. HtinyScrolling.init(); scrollTips.init();
  3. }
  4.  
  5. function gotoit(target){
  6. HtinyScrolling.scrollToIt(target);
  7. }
  8.  
  9. var HtinyScrolling = {
  10. speed : 50, //set here the scroll speed: when this value increase, the speed decrease.
  11. maxStep: 150, //set here the "uniform motion" step for long distances
  12. brakeK: 3, //set here the coefficient of slowing down
  13. hash:null,
  14. currentBlock:null,
  15. requestedX:0,
  16. init: function() {
  17. var lnks = document.getElementsByTagName('a');
  18. for(var i = 0, lnk; lnk = lnks[i]; i++) {
  19. if ((lnk.href && lnk.href.indexOf('#') != -1) && ( (lnk.pathname == location.pathname) ||
  20. ('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {
  21. addEvent(lnk,'click',HtinyScrolling.initScroll,false);
  22. lnk.onclick=function(){return false;} // Safari
  23. }
  24. }
  25. },
  26. getTarget: function(target) {
  27. while(target.tagName.toLowerCase() != 'a')
  28. target = target.parentNode;
  29. return target;
  30. },
  31. getElementXpos: function(el){
  32. var x = 0;
  33. while(el.offsetParent){
  34. x += el.offsetLeft;
  35. el = el.offsetParent;
  36. } return x;
  37. },
  38. getScrollLeft: function(){
  39. if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
  40. else return window.pageXOffset;
  41. },
  42. getWindowWidth: function(){
  43. if (window.innerWidth) return window.innerWidth;
  44. if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
  45. },
  46. getDocumentWidth: function(){
  47. if (document.width) return document.width;
  48. if(document.body.offsetWidth) return document.body.offsetWidth;
  49. },
  50. initScroll: function(e){
  51. var targ;
  52. if (!e) var e = window.event;
  53. if (e.target) targ = e.target;
  54. else if (e.srcElement) targ = e.srcElement;
  55. targ = HtinyScrolling.getTarget(targ); //a fix by Skid X
  56. HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length);
  57. HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);
  58. if(!HtinyScrolling.currentBlock) return;
  59. HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
  60. HtinyScrolling.scroll(targ);
  61. return false;
  62. },
  63. scrollToIt: function(targ){ //thanks to Michael Ionita-Ganea
  64. target = document.getElementById(targ);
  65. HtinyScrolling.currentBlock = document.getElementById(targ);
  66. if(!HtinyScrolling.currentBlock) return;
  67. HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
  68. HtinyScrolling.scroll(target);
  69. return false;
  70.  
  71. },
  72. scroll: function(targ) {
  73. var left = HtinyScrolling.getScrollLeft();
  74. if(HtinyScrolling.requestedX > left) { //a fix by Michael Ionita-Ganea
  75. var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
  76. endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
  77. var offset = Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
  78. }else {
  79. var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
  80. }
  81. window.scrollTo(left + offset, 0);
  82. if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
  83. HtinyScrolling.hash = null;
  84. } else setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);
  85. }
  86. }
  87.  
  88.  
  89. var scrollTips = {
  90. dx : null,
  91. init : function() {
  92. if (window.addEventListener) {
  93. window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
  94. } else document.attachEvent("onmousewheel", this.mouseScroll);
  95. var left = document.getElementById('left');
  96. addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
  97. addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
  98. var right = document.getElementById('right');
  99. addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
  100. addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
  101. },
  102. mouseScroll : function(e) {
  103. if (!e) var e = window.event;
  104. var scroll = e.detail ? e.detail * 20 : e.wheelDelta / -20;
  105. if (scroll>=0 ){
  106. window.scrollBy(80,0);
  107. } else window.scrollBy(-80,0) ;
  108. },
  109. arrowScroll: function(val) {
  110. if(val==1) {
  111. window.scrollBy(70,0);
  112. } else {
  113. window.scrollBy(-70,0)
  114. }
  115. }
  116. }
  117.  
  118.  
  119. function addEvent( obj, type, fn ) {
  120. if (obj.addEventListener)
  121. obj.addEventListener( type, fn, false );
  122. else if (obj.attachEvent) {
  123. obj["e"+type+fn] = fn;
  124. obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  125. obj.attachEvent( "on"+type, obj[type+fn] );
  126. }
  127. }
  128.  
  129. function removeEvent( obj, type, fn ) {
  130. if (obj.removeEventListener)
  131. obj.removeEventListener( type, fn, false );
  132. else if (obj.detachEvent) {
  133. obj.detachEvent( "on"+type, obj[type+fn] );
  134. obj[type+fn] = null;
  135. obj["e"+type+fn] = null;
  136. }
  137. }
kamil4u
Zobacz w manualu co robi scrollToIt i zrób to sam smile.gif
I jak Ci nie wyjdzie to pokaż jak próbowałeś i umieść link do skryptu.
spokoloko123
Spróbowałem wielu opcji i nic. Efekt podobny do poprzedniego (szarpnięcie) uzyskałem wywołując funkcję scroll(target). Napisałem nawet własną do pluginu
  1. document.getElementsByTagName('a').onmouseover=function() {
  2. HtinyScrolling.init(); scrollTips.init();
  3. }

Ale nie działa. Manuala nie znalazłem. Jest tylko http://lab.centralscrutinizer.it/the-tiny-scrollings/
Powracam do pytania:

Da się zrobić tak aby po najechaniu na link aktywować ten link a nie podmieniać URL?
kamil4u
Zamień link na: <a href="#home">Home</a> i w kodzie skryptu, który podałeś zamień w 21 linii click na mouseover
spokoloko123
Powiem tyle: Szkoda, że można dać tylko jedno pomógł. Wielkie dzięki wink.gif)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.