show/hide scroll React

Ukrywanie buttona scroll-top jeżeli wysokość przekroczy 200 oraz dodanie obsługi zdarzenia na onClick i wywołanie funkcji scrollToTop i metody scrollIntoView.

export default BackToTop extends Component {
    state = {
        scrolling: false,
        scrollPosHeight: 200
    }

    componentDidMount() {
        console.log('componentDidMount()');
        window.addEventListener('scroll', this.hideShowButtonTop);
    };

    componentWillUnmount() {
        console.log('componentWillUnmount()');
        window.removeEventListener('scroll', this.hideShowButtonTop);
    };

    hideShowButtonTop = () => {
        const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
        const myDiv = document.querySelector('.back-to-top');
        (scrollPos > this.state.scrollPosHeight && scrollPos !== 0) ? myDiv.style.display = 'block' : myDiv.style.display = 'none';
    }

    scrollToTop() {
        const logoView = document.getElementById('logo');
        logoView.scrollIntoView({
            behavior: 'smooth'
        })
    }

    render() {
        return (
            <div onClick={this.scrollToTop} className="back-to-top"></div>
        )
    };
};

Dodanie linku nad animacją flash

Animację flash należy umieścić w divie. Dodatkowo należy utworzyć div o pozycji absolutnej i rozmiarze animacji flash. W zdarzeniu onclick dla diva obsłużyć otwieranie linku w nowym oknie przeglądarki.

<div id="flashContent" style="position:relative">
  <div>
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="619" height="116" id="dziendziecka" align="middle">
       <param name="movie" value="/pliki/dziendziecka.swf" />
       <param name="quality" value="high" />
       <param name="bgcolor" value="#ffffff" />
       <param name="play" value="true" />
       <param name="loop" value="true" />
       <param name="wmode" value="window" />
       <param name="scale" value="showall" />
       <param name="menu" value="true" />
       <param name="devicefont" value="false" />
       <param name="salign" value="" />
       <param name="allowScriptAccess" value="sameDomain" />
       <!--[if !IE]>-->
       <object type="application/x-shockwave-flash" data="/pliki/dziendziecka.swf"
width="619" height="116">
            <param name="movie" value="/pliki/dziendziecka.swf" />
            ....
            <param name="allowScriptAccess" value="sameDomain" />
       <!--<![endif]-->
            <a href="http://www.adobe.com/go/getflash">
              <img src="http://www.adobe.com/images/shared/download_buttons/
get_flash_player.gif"

alt="Pobierz odtwarzacz Adobe Flash Player" />
            </a>
       <!--[if !IE]>-->
       </object>
       <!--<![endif]-->
  </object>
  </div>
  <div style="position:absolute;background:transparent;width:619px;height:116px;
left:0;top:0;cursor:pointer" onclick="window.open('/pliki/dziendziecka.pdf','_blank')">

  </div>
</div>

Dynamiczne dodanie markera span

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
 <head>
  <title> New Document </title>
  <script src=”debug_js.js” type=”text/javascript”></script>
  <script language=”JavaScript”>
  <!–
 function getE(id) {
  return document.getElementById(id);
 }

 function test() {
  deb_write(deb_prop(getE(‚tests’),true));
 }

 function test2() {
      var div = document.createElement(„span”);
      div.style.font = ’12px Arial, Verdana, Tahoma’;
      div.style.position = „absolute”;
   div.style.background = ‚#fefefe’;
     div.style.padding = ‚2px’;
   div.id = „s1”;
   div.innerHTML = ‚Warszawa, Warszawa, Warszawa, Warszawa’;
   var d2 = getE(‚tests2’);
      d2.appendChild(div);

   deb_write(deb_prop(getE(‚s1’),true));
 }

  //–>
  </script>
 </head>

 <body>
  <div id=”tests”>Polska Warszawa Polska Warszawa</div>
  <div id=”tests2″></div>

  <input type=”button” value=”Test” onclick=”test()”>
  <input type=”button” value=”Test2″ onclick=”test2()”>
 </body>
</html>

Przypisanie linkom funkcji dla zdarzenia onclick

function initLinks() {

 if (!document.getElementsByTagName) { return; }
 var anchors = document.getElementsByTagName(„a”);

 for (var i=0; i<anchors.length; i++){
  var anchor = anchors[i];
  if (anchor.getAttribute(„href”) && /^mapa_/i.test(anchor.id)) {
   anchor.onclick = function () {
    jakas_funkcja(this);
   }
  }
 }
};

Przeliczenie pozycji kursora myszy na współrzędne latlng

<img id=”maska_img” src=”moa.net.pl.jpg” width=”300″ height=”300″ width_o=”300″ height_o=”300″ onClick=”testMaskClick()”>

function testMaskClick() {

 var IE = document.all ? true : false;
 if (IE) {
  tempX = event.clientX + document.body.scrollLeft;
  tempY = event.clientY + document.body.scrollTop;
 } else {
  tempX = e.pageX;
  tempY = e.pageY;
 }
 if (tempX < 0) tempX = 0;
 if (tempY < 0) tempY = 0;
 
 var point1 = map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());

 var point = map.getCurrentMapType().getProjection().fromPixelToLatLng(new GPoint(point1.x+tempX-300, point1.y-(650-tempY+20)), map.getZoom());

 map.addOverlay(new GMarker(point));
}

300,20 – pozycja mapy na stronie
650 – wysokość mapy