Clojure Javascript Interop, multiple parameters

Question

I am a starter ClojureScript developer, making a front-end application, and so far I didn't have to use Javascript, because reagent is more than enough. But now I want to implement some Jquery for an easy scrollAnimation. Jayq is working, but I have problems with using the interop.

$("#button").click(function() {
$('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});

So far I could manage to write the first part, where I get the position of the div I want to scroll to.

(.-top (.offset ($ "#scrollto")))

But the second part is harder then I thought. I tried it like below and some similar solutions, which also didn't work.

#(.animate ($ "html" "body") (clj->js {"scrollTop" (.-top (.offset ($  "#scrollto")))
}) "2000")

Any help is appreciated!

akond · Accepted Answer · 2017-01-15 08:10:08Z

1

(-> (js/$ "html, body")
    (.animate (clj->js {:scrollTop (-> (js/$ "#ide")
                                        (.offset)
                                        .-top)}) 
               2000))

answered Jan 15, 2017 at 8:10

akond

16.1k4 gold badges37 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JJJ Over a year ago

Could you explain briefly what this code does, how it's different from the original code and why it solves the problem?

Paul Cristian Martin Over a year ago

Thank you very much, your solution is perfect, but I agree with JJJ-s comment, with some explaining next time I wouldn't even have to ask, I would know how and why it's done like that.

rdgd Over a year ago

It looks like you were just missing accessing jQuery $ properly. js/$ is the correct syntax for accessing global variables in CLJS. As for the rest of the changes the answerer made, they are syntactic sugar and a pretty common pattern for accessing nested properties and methods of javascript objects in CLJS. The thread first operator '->' takes the first argument you pass it and passes it along as the first argument to subsequent function calls. So for example, the return result of (js/$ "html, body") gets passed as the first arg to .animate. Same as (.animate (js/$ "html, body") ...

Collectives™ on Stack Overflow

Clojure Javascript Interop, multiple parameters

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related