Right now I have a logo and then a link to the homepage. I want to combine them so that someone can click the logo and be directed to the homepage. I can't figure out how to do this with Hiccup.
[:div.navbar-brand
[:img {:src "/img/logo.png"
:width 70
:height 50}]
[:a.navbar-item
{:href "/"
:style {:font-weight "bold"}}
"Home"]
I am trying to do something like
[:a.navbar-item
{:href "/"}
{:img {:src "/img/logo.png"
:width 70
:height 50}}]
But it's not working. What do I do?
Img is element inside a, not attribute of a, so use square brackets:
[:a.navbar-item
{:href "/"}
[:img {:src "/img/logo.png"
:width 70
:height 50}]]
Related
First, I'm sorry if my question is something simple or not clear. I'm almost new to Clojure and I need help.
I want to create a function to generate some HTML link for a menu. This is what I have now and it works fin:
(defn test-function [title-id title-name]
[:span {:onclick #(.scrollIntoView (.getElementById js/document title-id))
:style {:color :red} title-name])
[:li (test-function "title-1-id" "title-1-name")]
[:li (test-function "title-2-id" "title-2-name")]
But as I have many li tags, I want to have something like this to send to the function, and the function can generate the links for me, exactly like what the current code do for me. But I didn't find how to do that yet, and have no idea if I should use vector or something else.
[["title-1-id" "title-1-name"] ["title-2-id" "title-2-name"]]
Thank you in advance.
You can use for, then destructure each element into id and name (I just renamed name to li-name to avoid shadowing function name) and wrap whole for in [:ul ... ]:
[:ul
(for [[li-id li-name] [["id1" "Scroll to red"] ["id2" "Scroll to pink"]]]
[:li {:style {:cursor :pointer
:color :red}
:on-click #(.scrollIntoView (.getElementById js/document li-id))}
li-name])]
[:div
[:div [:img#id1 {:src "" :style {:width 600 :height 1000 :background "red"}}]]
[:div [:img#id2 {:src "" :style {:width 600 :height 1000 :background "pink"}}]]
[:div [:img#id3 {:src "" :style {:width 600 :height 1000 :background "yellow"}}]]]
Note that you even don't need Javascript to scroll to target element- [:a ... ] can point to the object on the same page:
[:ul
(for [[li-id li-name] [["id1" "Scroll to red"] ["id2" "Scroll to pink"]]]
[:a {:href (str "#" li-id)
:style {:color :red
:cursor :pointer
:text-decoration :none}}
[:li li-name]])]
[:div
[:div [:img#id1 {:src "" :style {:width 600 :height 1000 :background "red"}}]]
[:div [:img#id2 {:src "" :style {:width 600 :height 1000 :background "pink"}}]]
[:div [:img#id3 {:src "" :style {:width 600 :height 1000 :background "yellow"}}]]]
I'm making a landing page based on the one from Clojure Bridge.
I made the navigation bar bigger using py-3 and added a logo. But the logo that's in the navigation bar is still tiny. It takes up a fraction of the space it could. How do I make it bigger?
(defn navigation-top
[]
;; Navigation bar (responsive)
[:nav {:class "navbar is-fixed-top is-white has-shadow py-3"
:role "navigation"
:aria-label "main navigation"}
[:div {:class "container"}
[:div {:class "navbar-brand"}
[:a {:class "navbar-item"
:href "/"}
[:img {:src "img/logo.png"}]]
[:span {:class "navbar-burger burger"
:data-target "navbarClojureBridge"}
;; Empty spans needed for navbar burger
[:span] [:span] [:span]]]
[:div {:id "navbarClojureBridge"
:class "navbar-menu"}
[:div {:class "navbar-end"}
[:a {:class "navbar-item"
:href "/contact"
:style {:font-weight "bold"}} "Contact"]]]]])
Edit: I think with the navbar the problem is that there is padding around the image, but I don't know how to get rid of it. I'm using bulma, so would I have to go digging through the bulma file?
I'm working with Reagent and CLJS, familiar with React and Clojure, less so CLJS. I'd like to make a simple form, but it's not obvious to me in CLJS.
(defn form []
[:div
[:input {:type "text" :name "first-name" :id "first-name"}]
[:button {:on-click (fn [e] (test-func "hello"))}
"Click me!"]
])
I want to grab the value of that input, and pass it to a function when the button is clicked. How do I get that input's value into my on-click function?
The idiomatic and technically correct way is to avoid keeping any state in DOM and accessing it directly. You shouldn't rely on the input's value. Keep the state as Reagent's atom. Then you can do anything with it.
(def first-name (r/atom ""))
(defn form []
[:div
[:input {:type "text"
:value #first-name
:on-change #(reset! first-name (.-value (.-target %)))
}]
[:button {:on-click #(test-func #first-name)} "Click me!"]])
You can grab the element's value like this: (.-value (.getElementById js/document "first-name"))
(defn form []
[:div
[:input {:type "text" :name "first-name" :id "first-name"}]
[:button {:on-click (fn [e] (test-func (.-value (.getElementById js/document "first-name"))))}
"Click me!"]
])
If there is a better answer out there, please share. :)
I have the following ClojureScript code and am trying to detect the coordinates of a a click. So far, I can't even get Javascript alerts to recognize a click, let alone give me the coords.
I know I will have to write a function to have it give me the exact cells being clicked, but as a start, need to know how to get the coordinates of any area clicked on a page.
Thanks!
(defn header [color text]
[:h1
{:style
{:color color
:background-color "blue"}}
text])
(defn Cell []
[:div
{:style
{:width "40px"
:height "40px"
:float "right"
:margin-bottom "1px"
:margin-right "1px"
:background-color "grey"
:border "1px" "solid" "white"}}])
(defn home-page []
[:div
[header "red" "Minesweeper"]
[:div
{:style
{:width "440px"
:height "440px"}}
(repeat 100 [Cell])]])
Put an :onClick key at the same map indentation level as the :style. Its value should be a function, which will get an event e. Then:
(let [coords (.getClientPosition e)
coords' {:x (aget coords "x")
:y (aget coords "y")}])
Here's an example of a hashmap that has an :onClick event and its function:
{ :href "#"
:onClick (fn [e]
(.preventDefault e)
(swap! counter inc))}
The only thing that matters in the above is getting the e and using it. That was taken from the flappybird example program, which is how I got started.
I am trying to display a group of radio buttons in a reagent/cljs app. I have followed the same process from http://yogthos.github.io/reagent-forms-example.html but the radio buttons I am displaying are showing up as textfield input boxes.
(def ^:private options (atom nil))
(defn set-options []
(reset! options
[{:name "label name"}
{:name "label name"}
{:name "label name"}]))
(defn set-radio-buttons []
(set-options)
(for [option #options]
[:div.radio
[:label
[:input {:field :radio}]
(option :name)]]))
(defn response-box []
[:div#response
(set-radio-buttons)])
I am then placing response-box in the ui layer of the app.
Thanks
Field is not a correct input element attribute.
[:input {:field :radio}]
(option :name)]]))
Should probably be
[:input {:type :radio}]
(option :name)]]))