Tag: onclick

2 mar 2018

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>
        )
    };
};
23 maj 2016

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>
Copyright © | kodyWiG Theme