nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Bookmark Widget (v2.7) Selected Color

JasonStanton__GISP

I am trying to add a background color to the selected bookmark in the v2.7 widget. In the v2.4 widget I added the following code to "common.css", but now this is not working.

.jimu-img-node.jimu-state-selected{

background-color: #86b186;

}

Does anyone have any ideas?

Jason

Trouver plus de publications taguées avec

Accepted answers

RobertScheitlin__GISP

Jason,

In 2.7 Card style bookmarks there is no selected class that is added on click of a bookmark. You will have to add two css rules to the common.css and code to the CustomBookmarks.js and WebmapBookmarks.js files

Css rules:

<SPAN class="selector token">.jimu-img-node.jimu-float-leading.clearFix.selected</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">padding-top</SPAN><SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #86b186<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.jimu-img-node.jimu-float-leading.clearFix</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">padding-top</SPAN><SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

WebmapBookmarks.js:

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp; <SPAN class="string token">'dojo/Evented'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/declare'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/lang'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/html'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/array'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/on'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'esri/SpatialReference'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'jimu/BaseWidget'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dijit/_TemplatedMixin'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'./utils'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/query'</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Evented<SPAN class="punctuation token">,</SPAN> declare<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; BaseWidget<SPAN class="punctuation token">,</SPAN> _TemplatedMixin<SPAN class="punctuation token">,</SPAN> utils<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _onBookmarkClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-img-node.jimu-float-leading.clearFix.selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">.</SPAN>itemNode<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

CustomBookmarks.js

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp; <SPAN class="string token">'dojo/Evented'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/declare'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/lang'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/html'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/array'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/on'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/sniff'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'esri/SpatialReference'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'jimu/BaseWidget'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dijit/_TemplatedMixin'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'./utils'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'./ItemNode'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'jimu/dijit/ImageChooser'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/query'</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Evented<SPAN class="punctuation token">,</SPAN> declare<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> has<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; SpatialReference<SPAN class="punctuation token">,</SPAN> BaseWidget<SPAN class="punctuation token">,</SPAN> _TemplatedMixin<SPAN class="punctuation token">,</SPAN> utils<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; ItemNode<SPAN class="punctuation token">,</SPAN> ImageChooser<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _onNodeBoxClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-img-node.jimu-float-leading.clearFix.selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">.</SPAN>itemNode<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

JasonStanton__GISP

Thanks! Not sure what I was doing wrong, but it works now!

RobertScheitlin__GISP

Jason,

Not much has changed they only added an additional module to the define array...

CustomBookmarks.js

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
  <SPAN class="string token">'dojo/Evented'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/_base/declare'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/_base/lang'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/_base/html'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/_base/array'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/on'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/sniff'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'esri/SpatialReference'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'jimu/BaseWidget'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dijit/_TemplatedMixin'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'./utils'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'./ItemNode'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'jimu/dijit/ImageChooser'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'libs/Sortable'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/query'</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Evented<SPAN class="punctuation token">,</SPAN> declare<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> has<SPAN class="punctuation token">,</SPAN>
    SpatialReference<SPAN class="punctuation token">,</SPAN> BaseWidget<SPAN class="punctuation token">,</SPAN> _TemplatedMixin<SPAN class="punctuation token">,</SPAN> utils<SPAN class="punctuation token">,</SPAN>
    ItemNode<SPAN class="punctuation token">,</SPAN> ImageChooser<SPAN class="punctuation token">,</SPAN> Sortable<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
      _onNodeBoxClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-img-node.jimu-float-leading.clearFix.selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">.</SPAN>itemNode<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

WebmapBookmarks.js

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
  <SPAN class="string token">'dojo/Evented'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/_base/declare'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/_base/lang'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/_base/html'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/_base/array'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/on'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'esri/SpatialReference'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'jimu/BaseWidget'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dijit/_TemplatedMixin'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'./utils'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'libs/Sortable'</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">'dojo/query'</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Evented<SPAN class="punctuation token">,</SPAN> declare<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN>
    BaseWidget<SPAN class="punctuation token">,</SPAN> _TemplatedMixin<SPAN class="punctuation token">,</SPAN> utils<SPAN class="punctuation token">,</SPAN> Sortable<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>

      _onBookmarkClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-img-node.jimu-float-leading.clearFix.selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">.</SPAN>itemNode<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JasonStanton__GISP

Robert,

Any idea how to update the 2.13 version to change the background color on the selected bookmark?

Jason

JasonStanton__GISP

I SWEAR I tried that, but I must not have been using my brain when I did. It works fine now. THANK YOU!

RobertScheitlin__GISP

Jason,

You are just adding the dojo/query require to each file and then adding the new

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-img-node.jimu-float-leading.clearFix.selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">.</SPAN>itemNode<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

code to the _onNodeBoxClick functions.

Edit Feature Layer1.gif

JasonStanton__GISP

Robert,

I just realized that how I added/replaced the code in CustomBookmarks.js and WebmapBookmarks.js caused the bookmark widget to not work. I am adding 'dojo/query' under define and query after function. I am not sure if I should be strictly adding the _onBookmarkClick and _onNodeBoxClick code (and if so where), or if I am replacing current code (and exactly what code I am replacing). I tired a few variations which all failed.

Can you please help me?

JasonStanton__GISP

Thanks for the help Robert! I really appreciate it!

Jason

RobertScheitlin__GISP

Jason,

Css rules:

<SPAN class="selector token">.jimu-img-node.jimu-float-leading.clearFix.selected</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">padding-top</SPAN><SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #86b186<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.jimu-img-node.jimu-float-leading.clearFix</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">padding-top</SPAN><SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

WebmapBookmarks.js:

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp; <SPAN class="string token">'dojo/Evented'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/declare'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/lang'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/html'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/array'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/on'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'esri/SpatialReference'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'jimu/BaseWidget'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dijit/_TemplatedMixin'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'./utils'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/query'</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Evented<SPAN class="punctuation token">,</SPAN> declare<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; BaseWidget<SPAN class="punctuation token">,</SPAN> _TemplatedMixin<SPAN class="punctuation token">,</SPAN> utils<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _onBookmarkClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-img-node.jimu-float-leading.clearFix.selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">.</SPAN>itemNode<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

CustomBookmarks.js

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp; <SPAN class="string token">'dojo/Evented'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/declare'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/lang'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/html'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/_base/array'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/on'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/sniff'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'esri/SpatialReference'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'jimu/BaseWidget'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dijit/_TemplatedMixin'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'./utils'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'./ItemNode'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'jimu/dijit/ImageChooser'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">'dojo/query'</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Evented<SPAN class="punctuation token">,</SPAN> declare<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> has<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; SpatialReference<SPAN class="punctuation token">,</SPAN> BaseWidget<SPAN class="punctuation token">,</SPAN> _TemplatedMixin<SPAN class="punctuation token">,</SPAN> utils<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; ItemNode<SPAN class="punctuation token">,</SPAN> ImageChooser<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _onNodeBoxClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-img-node.jimu-float-leading.clearFix.selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>bookmark<SPAN class="punctuation token">.</SPAN>itemNode<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.