javascript - how to use react-springy-parallax -


how use scrollto in react-springy-parallax?

i'm trying use react-springy-parallax in simple portfolio page, can click springy parallax scroll next page want able use nav links well, here how app laid out:

app.js

class app extends react.component {   constructor() {     super()     this.ref = 'parallax'   }   render() {     return (       <div>         <parallax ref={this.ref} pages={4}>            <parallax.layer             offset={0}             speed={0.5}             onclick={() => this.refs.parallax.scrollto(1)}           >             <nav />             <header />           </parallax.layer>           ...

so onclick here scrolls next page, want able in nav component click about link , scroll +1 scrollto(1)

here nav component:

nav.js

class nav extends react.component {    render() {     return (       <div classname="nav">         <ul classname="links">           <li>             <a href="#about">about</a>           </li>           ...

i did try importing scrollto named export react-springy-parallax nav component got error in chrome dev console saying it's not function

i'm trying use click handler:

class nav extends react.component {    render() {     function handleclick(e) {       e.preventdefault()       console.log(e)     }     return (       <div classname="nav">         <ul classname="links">           <li>             <a               href="#"               onclick={handleclick}             >                           </a>           </li>           ...

but don't know how call app.js call scrollto

anyone have ideas?

logged issue repo owner , kind enough give few pointers:

use contexttypes access scrollto method parallax

in nav component use:

nav.contexttypes = { parallax: react.proptypes.object }

this allow use scrollto method

something like:

class nav extends react.component {   render() {     return (       <div classname="nav">         <ul classname="links">           <li>             <a               href=""               onclick={this.context.parallax.scrollto(0)}             >               home             </a>           </li>           <li>             <a               href=""               onclick={this.context.parallax.scrollto(1)}             >                           </a>           </li>

you can pass function prop, so:

class app extends react.component {   constructor(props) {     super(props)     this.handlescroll = value => this.parallax && this.parallax.scrollto(value)   }   render() {     return (       <div>         <parallax           ref={ref => (this.parallax = ref)}           pages={4}         >          <parallax.layer           offset={0}           speed={0.5}           onclick={() => this.handlescroll(1)}         >           <nav handlescroll={this.handlescroll} />

then nav component use props onclick={() => this.props.handlescroll(page)} page being page number want scroll to.


Comments

Post a Comment

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

this addentry blog page have made scratch , there underlying problems code particularly clear button supposed clear text entered when button clicked on doesn't work have saved html file problem. also 1 other problem submit button works doesn't pass of text index file have written php , reason whenever click on submit button redirects me index page without posting entry have made. <!doctype html> <html> <head> <script> function message() { alert("clear form?"); } </script> <style> body {background-color: beige;} h1 {color: black;} p {color: black;} textarea { width: 50%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: white; font-size: 16px; resize: none; } div { padding-left: 20px; } </style> </head> <meta charset="utf-8"> <link rel="stylesheet" href="....
Read more

python - Error: Unresolved reference 'selenium' What is the reason? -

# -*- coding: utf-8 -*- selenium import selenium import unittest, time, re class rc(unittest.testcase): def setup(self): self.verificationerrors = [] self.selenium = selenium("localhost", 4444, "*chrome", "http://stackoverflow.com/") self.selenium.start() def test_rc(self): sel = self.selenium sel.open("/") sel.type("id=kw", "selenium") sel.click("id=container") sel.click("id=su") def teardown(self): self.selenium.stop() self.assertequal([], self.verificationerrors) if __name__ == "__main__": unittest.main() this recorded selenium ide, selenium remote control code. in ide test passed.   in pycharm open, first line ( from selenium import selenium ) there error: unresolved reference 'selenium' what reason? my environment is python3.5 selenium3.3.1 selenium-server-standalone-...
Read more

ios - Pass NSDictionary from Javascript to Objective-c in JavascriptCore -

i'm using javascriptcore in app. now, i'm passing variables jscontext can passed objective-c. however, 1 of variables, nsdictionary, not passing through correctly. run code below: var evaluate = function(variables) { app.setdictionary(variables.dictionary); } this simple example has these following methods set in jscontext . this setdictionary() method: - (void)setdicationary:(nsdictionary *)dictionary { self.mutabledictionary = [dictionary mutablecopy]; } this variables.dictionary : - (nsdictionary *)dictionary { return self.values; } and how call evaluate() : jsvalue *jsfunction = self.context[@"evaluate"]; jsvalue *value = [jsfunction callwitharguments:@[self.variables]]; however, in setdictionary method, don't nsdictionary, instead nsstring containing [object object] . any ideas how can solve this? although javascriptcore automatically converts types between objective-c or swift , javascript, suggest implement ex...
Read more