Latest Contributions by LefterisKoumis

Thanks.  I was looking for a url redirect when you click on a feature, not a popup. Very similar of what you created on the flex. So, for js, an off-panel widget which  starts up and listens when the app initiates is the way to go. ... View more

Thank you all for the responses. I tried  before the solutions presented here and not all work. For example, the file below is the files from main.js under themes\DartTheme\main.js , I cannot format it. //>>built require({cache:{"themes/DartTheme/_build-generate_module":function(){define(["dojo/text!./common.css","dojo/text!./styles/default/style.css","dojo/i18n!./nls/strings"],function(){})},"url:themes/DartTheme/common.css":'@font-face {font-family: \'HelveticaNeue\'; src: url("fonts/helvetica_neue/helveticaneue.eot"); src: url("fonts/helvetica_neue/helveticaneue.eot?#iefix") format(\'embedded-opentype\'), url("fonts/helvetica_neue/helveticaneue.woff") format(\'woff\'), url("fonts/helvetica_neue/helveticaneue.ttf") format(\'truetype\'), url("fonts/helvetica_neue/helveticaneue.svg#HelveticaNeue") format(\'svg\'); font-weight: normal; font-style: normal;}@font-face {font-family: \'HelveticaNeueUltraLight\'; src: url("fonts/helvetica_neue/helveticaneueultralight.eot"); src: url("fonts/helvetica_neue/helveticaneueultralight.eot?#iefix") format(\'embedded-opentype\'), url("fonts/helvetica_neue/helveticaneueultralight.woff") format(\'woff\'), url("fonts/helvetica_neue/helveticaneueultralight.ttf") format(\'truetype\'), url("fonts/helvetica_neue/helveticaneueultralight.svg#HelveticaNeueUltraLight") format(\'svg\'); font-weight: normal; font-style: normal;}@font-face {font-family: \'liberation_sansbold\'; src: url("fonts/liberation_sans/liberationsans-bold-webfont.eot"); src: url("fonts/liberation_sans/liberationsans-bold-webfont.eot?#iefix") format(\'embedded-opentype\'), url("fonts/liberation_sans/liberationsans-bold-webfont.woff2") format(\'woff2\'), url("fonts/liberation_sans/liberationsans-bold-webfont.woff") format(\'woff\'), url("fonts/liberation_sans/liberationsans-bold-webfont.ttf") format(\'truetype\'), url("fonts/liberation_sans/liberationsans-bold-webfont.svg#liberation_sansbold") format(\'svg\'); font-weight: normal; font-style: normal;}@font-face {font-family: \'liberation_sansregular\'; src: url("fonts/liberation_sans/liberationsans-regular-webfont.eot"); src: url("fonts/liberation_sans/liberationsans-regular-webfont.eot?#iefix") format(\'embedded-opentype\'), url("fonts/liberation_sans/liberationsans-regular-webfont.woff2") format(\'woff2\'), url("fonts/liberation_sans/liberationsans-regular-webfont.woff") format(\'woff\'), url("fonts/liberation_sans/liberationsans-regular-webfont.ttf") format(\'truetype\'), url("fonts/liberation_sans/liberationsans-regular-webfont.svg#liberation_sansregular") format(\'svg\'); font-weight: normal; font-style: normal;}.dart-panel {position: relative; overflow: hidden;}.dart-panel .title {position: absolute; height: 60px; width: 100%;}.dart-panel .handle {position: absolute; height: 60px; left: 0px; right: 64px; cursor: move;}.jimu-rtl .dart-panel .handle {right: 0px; left: 64px;}.dart-panel .handle.minimized {left: 0px; right: 0px; height: 30px;}.dart-panel .title .widget-icon {position: absolute; width: 60px; height: 60px;}.dart-panel .title .widget-icon .icon {margin: 15px; width: 30px; height: 30px;}.jimu-rtl .dart-panel .title .widget-icon {right: 0px;}.dart-panel .title-label {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffff; font-size: 16px; line-height: 60px; position: absolute; left: 60px; right: 70px;}.jimu-rtl .dart-panel .title-label {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffff; font-size: 16px; line-height: 60px; position: absolute; left: 70px; right: 60px;}.dart-panel .title .min-icon {margin: 0; width: 32px; height: 60px; display: block; cursor: pointer; z-index: 10; background: transparent url("panels/DartPanel/images/fold_up.png") center no-repeat;}.dart-panel .title .min-icon.minimized {margin: 50px 0; width: 60px; height: 10px;}.dart-panel .title .close-icon {margin: 0; width: 32px; height: 60px; display: block; cursor: pointer; background: transparent url("panels/DartPanel/images/x.png") center no-repeat;}.dart-panel .title .close-icon.minimized {display: none;}.dart-panel .panel-bg {position: absolute; top: 60px; left: 0px; right: 0px; bottom: 0px; background-color: #4c4c4c; background-image: url("panels/DartPanel/images/shadow.png"); background-position: center top; background-repeat: no-repeat; background-size: 100% auto;}.dart-panel .panel-content {position: absolute; top: 60px; left: 10px; right: 10px; bottom: 10px;}.claro .dijitCheckBox {background-color: #393939; background-image: none; border: 1px solid #7f8183; width: 24px; height: 24px; line-height: 1; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; border-radius: 0; text-align: center; position: relative; overflow: visible;}.claro .dijitCheckBox input {position: absolute; top: 0;}.claro .dijitCheckBoxIcon,.claro .dijitCheckBoxChecked,.claro .dijitCheckBoxCheckedDisabled {background-image: url("dijit-css/icons/Icon_Checkmark_16.png"); background-position: center center;}.claro .dijitCheckBoxIcon {padding: 0;}.claro .dijitCheckBoxIcon:before {color: #007ac2;}.claro .btn-alt .dijitCheckBoxIcon:before {color: #fff;}.claro .dijitCheckBoxChecked {background-color: #393939; border: 1px solid #009ac2;}.claro .dijitCheckBoxHover {background-color: #222; border: 1px solid #007ac2;}.claro .dijitCheckBoxCheckedHover {background-color: #393939; border: 1px solid #009ac2;}.claro .dijitCheckBoxDisabled,.claro .dijitCheckBoxCheckedDisabled {opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity\x3d65)"; filter: alpha(opacity\x3d65);}.claro .dijitCheckBoxInput {width: 24px; height: 24px;}.claro .dijitSlider {background: transparent; border: 0 none; -webkit-border-radius: 3px; border-radius: 3px; padding: 0;}.claro .dijitSliderBar {border-style: solid; outline: 1px;}.claro .dijitRuleLabelsContainer {color: #2b2e34;}.claro .dijitSliderDisabled {opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity\x3d65)"; filter: alpha(opacity\x3d65);}.claro .dijitRuleLabelsContainerH {padding: 0;}.claro .dijitSliderBarH,.claro .dijitSliderBumperH {height: 4px;}.claro .dijitSlider .dijitSliderLeftBumper {-webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; border-width: 1px 0 1px 1px; margin-left: 4px;}.claro .dijitSlider .dijitSliderRightBumper {-webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; border-width: 1px 1px 1px 0; margin-left: -2px; margin-right: 4px;}.claro .dijitSlider .dijitSliderProgressBarH{border-color: #ebebeb; background-color: #ebebeb; background-image: none; -webkit-box-shadow: none; box-shadow: none;}.claro .dijitSlider .dijitSliderLeftBumper {border-color: #ebebeb; background-color: #ebebeb; background-image: none; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;}.claro .dijitSlider .dijitSliderRemainingBarH,.claro .dijitSlider .dijitSliderRightBumper {border-color: #878787; background-color: #878787; -webkit-border-radius: 2px; border-radius: 2px;}.claro .dijitSliderHover .dijitSliderProgressBarH,.claro .dijitSliderHover .dijitSliderLeftBumper {border-color: #ebebeb; background-color: #ebebeb; background-image: none; -webkit-box-shadow: none; box-shadow: none;}.claro .dijitSliderFocused .dijitSliderProgressBarH,.claro .dijitSliderFocused .dijitSliderLeftBumper {border-color: #ebebeb;}.claro .dijitSliderFocused .dijitSliderRemainingBarH,.claro .dijitSliderFocused .dijitSliderRightBumper {border-color: #878787; background-color: #878787; -webkit-box-shadow: none; box-shadow: none;}.claro .dijitRuleLabelsContainerV {padding: 0;}.claro .dijitSliderBarV,.claro .dijitSliderBumperV {width: 4px;}.claro .dijitSlider .dijitSliderTopBumper {-webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; border-width: 1px 1px 0 1px; margin-top: 4px; margin-bottom: -2px;}.claro .dijitSlider .dijitSliderBottomBumper {-webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; border-width: 0 1px 1px 1px; margin-bottom: 4px;}.claro .dijitSlider .dijitSliderProgressBarV,.claro .dijitSlider .dijitSliderBottomBumper {border-color: #ebebeb; background-color: #ebebeb; background-image: -webkit-linear-gradient(left, #f5f5f5, #ebebeb); background-image: -moz-linear-gradient(left, #f5f5f5, #ebebeb); background-image: -o-linear-gradient(left, #f5f5f5, #ebebeb); background-image: -ms-linear-gradient(left, #f5f5f5, #ebebeb); background-image: linear-gradient(to right, #f5f5f5, #ebebeb);}.claro .dijitSlider .dijitSliderRemainingBarV,.claro .dijitSlider .dijitSliderTopBumper {border-color: #878787; background-color: #878787;}.claro .dijitSliderHover .dijitSliderProgressBarV,.claro .dijitSliderHover .dijitSliderBottomBumper {border-color: #ebebeb; background-color: #d7d7d7; background-image: -webkit-linear-gradient(left, #e1e1e1, #d7d7d7); background-image: -moz-linear-gradient(left, #e1e1e1, #d7d7d7); background-image: -o-linear-gradient(left, #e1e1e1, #d7d7d7); background-image: -ms-linear-gradient(left, #e1e1e1, #d7d7d7); background-image: linear-gradient(to right, #e1e1e1, #d7d7d7);}.claro .dijitSliderFocused .dijitSliderProgressBarV,.claro .dijitSliderFocused .dijitSliderBottomBumper {border-color: #ebebeb;}.claro .dijitSliderImageHandle {background: #ffffff; -webkit-border-radius: 50%; border-radius: 50%; border: 0 none; width: 16px; height: 16px; margin-top: -2px; position: absolute;}.claro .dijitSliderImageHandle:after {content: ""; display: block; background: #6e6e6e; -webkit-border-radius: 50%; border-radius: 50%; height: 8px; width: 8px; left: 4px; top: 4px; position: absolute;}.claro .dijitSliderDisabled.dijitSliderFocused .dijitSliderImageHandle:after {display: none; outline: none;}.claro .dijitSliderDecrementIconH,.claro .dijitSliderIncrementIconH,.claro .dijitSliderDecrementIconV,.claro .dijitSliderIncrementIconV {padding: 0; height: 20px; width: 20px; background-color: transparent; border: 0 none;}.claro .dijitSliderHover .dijitSliderDecrementIconH,.claro .dijitSliderHover .dijitSliderIncrementIconH,.claro .dijitSliderHover .dijitSliderDecrementButtonHover,.claro .dijitSliderHover .dijitSliderIncrementButtonHover {background-color: #222; border: 0 none; background-image: url("dijit-css/icons/Icon_Right_16.png");}.claro .dijitSliderHover .dijitSliderDecrementIconH,.claro .dijitSliderHover .dijitSliderDecrementButtonHover {background-image: url("dijit-css/icons/Icon_Left_16.png");}.claro .dijitSliderActive .dijitSliderDecrementIconH,.claro .dijitSliderActive .dijitSliderIncrementIconH,.claro .dijitSliderActive .dijitSliderDecrementButtonActive,.claro .dijitSliderActive .dijitSliderIncrementButtonActive {background-color: #222; border: 0 none; background-image: url("dijit-css/icons/Icon_Right_16.png");}.claro .dijitSliderActive .dijitSliderDecrementIconH,.claro .dijitSliderActive .dijitSliderDecrementButtonActive {background-image: url("dijit-css/icons/Icon_Left_16.png");}.claro .dijitSliderIncrementIconH,.claro .dijitSliderIncrementIconV {background-image: url("dijit-css/icons/Icon_Right_16.png"); background-position: center center;}.claro .dijitSliderDecrementIconH,.claro .dijitSliderDecrementIconV {background-image: url("dijit-css/icons/Icon_Left_16.png"); background-position: center center;}.claro .dijitRuleMarkH,.claro .dijitRuleMarkV {display: none; border-left: 1px solid #9a9b9f; border-right: 1px solid #fff;}.claro .dijitRuleMarkV {border-right: 0 none; border-bottom: 1px solid #fff;}.claro .dijitRuleLabelContainerH {margin-top: 2px; margin-bottom: 2px; color: #909090 !important; font-weight: bold; font-size: 100% !important;}.claro .dijitRuleLabelContainerV {margin-left: 2px; margin-right: 2px; color: #909090 !important; font-weight: bold; font-size: 100% !important;}.claro .dojoxRangeSlider .dijitSliderLeftBumper {border-color: #878787; background-color: #878787;}.claro .dojoxRangeSlider .dijitSliderRemainingBarH {-webkit-border-radius: 0; border-radius: 0;}.claro .dijitTextBox,.claro .dijitInputInner {color: #f8f8f8; line-height: 20px;}.claro .dijitTextBox {background-color: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.5) !important; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 2px; border-radius: 2px; -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;}.claro .dijitTextArea {padding: 2px 8px 4px;}.claro .dijitTextBox .dijitInputField {padding: 2px 8px; margin: 0;}.claro .dijitSelect.btn-primary,.claro .dijitComboBox.btn-primary,.claro .dijitSpinner.btn-primary {border-color: #007ac2;}.claro .dijitSelect.btn-success,.claro .dijitComboBox.btn-success,.claro .dijitSpinner.btn-success {border-color: #35ac46;}.claro .dijitSelect.btn-info,.claro .dijitComboBox.btn-info,.claro .dijitSpinner.btn-info {border-color: #00b9f2;}.claro .dijitSelect.btn-warning,.claro .dijitComboBox.btn-warning,.claro .dijitSpinner.btn-warning {border-color: #f89927;}.claro .dijitSelect.btn-danger,.claro .dijitComboBox.btn-danger,.claro .dijitSpinner.btn-danger {border-color: #da4d1e;}.claro .dijitSelect.btn-inverse,.claro .dijitComboBox.btn-inverse,.claro .dijitSpinner.btn-inverse {border-color: #2b2e34;}.claro .dijitTextBox .dijitInputInner,.claro .dijitValidationTextBox .dijitValidationContainer,.claro .dijitTextBox .dijitInputField .dijitPlaceHolder {padding: 2px 8px; background-color: transparent; border: none;}.claro .dijitTextBoxHover {border: 1px solid rgba(255,255,255,0.75) !important; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; -ms-transition-duration: 0.25s; transition-duration: 0.25s;}.claro .dijitTextBoxFocused {background-color: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.75) !important; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.15) inset; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; -ms-transition-duration: 0.1s; transition-duration: 0.1s;}.claro .dijitTextBoxFocused .dijitInputContainer {background-color: transparent; border: none !important;}.claro .dijitTextBoxDisabled {background: #f5f5f5; -webkit-box-shadow: none; box-shadow: none; opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity\x3d65)"; filter: alpha(opacity\x3d65);}.claro .dijitTextBoxError,.claro .dijitTextBoxError .dijitButtonNode {border: 1px solid #da4d1e;}.claro .dijitTextBoxErrorFocused,.claro .dijitTextBoxErrorFocused .dijitButtonNode {border: 1px solid #b94119;}.claro .dijitValidationTextBoxError .dijitValidationContainer {color: #c6542d; width: 24px; height: 24px; background-image: url("dijit-css/icons/warning.png"); background-repeat: no-repeat; background-position: center center;}.claro .dijitValidationTextBoxError .dijitValidationIcon {display: none;}.dj_gecko .dijitInputInner {height: 20px;}.claro .dijitSelect .dijitArrowButtonInner,.claro .dijitComboBox .dijitArrowButtonInner {margin: 0; width: 0; height: 0;}.claro .dijitSelect {background-color: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.5); -webkit-border-radius: 2px; border-radius: 2px; table-layout: fixed;}.claro .dijitSelect .dijitButtonContents,.claro .dijitSelect .dijitArrowButton {padding: 0; border: 0; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;}.claro .dijitSelect .dijitButtonContents {padding: 2px 8px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;}.claro .dijitSelect .dijitInputField {line-height: 20px; padding: 0;}.claro .dijitSelect .dijitArrowButton {width: 24px; background: #4c4c4c; background-image: url("dijit-css/icons/Icon_Dropdown_16.png"); background-repeat: no-repeat; background-position: center center; border-left: 1px solid #7f8183;}.claro .dijitSelectFocused {border: 1px solid #7f8183;}.claro .dijitSelectDisabled {cursor: default; opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity\x3d65)"; filter: alpha(opacity\x3d65);}.claro .dijitComboBox .dijitButtonNode {border-style: solid; border-width: 1px; padding: 4px 12px; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; line-height: 20px; text-shadow: 0 1px 1px rgba(255,255,255,0.75); cursor: pointer; border-color: #d0d0d0; background: #f5f5f5; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; background-image: url("dijit-css/icons/Icon_Dropdown_16.png"); background-repeat: no-repeat; background-position: center center;}.claro .dijitComboBoxOpenHover .dijitButtonNode,.claro .dijitComboBox .dijitDownArrowButtonHover {-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2); box-shadow: 0 1px 1px rgba(0,0,0,0.2); -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s; background-color: #e1e1e1; -webkit-box-shadow: none; box-shadow: none;}.claro .dijitComboBoxDisabled .dijitButtonNode {cursor: default; opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity\x3d65)"; filter: alpha(opacity\x3d65);}.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {border: none;}.claro .dijitDateTextBox .dijitArrowButton:before {content: "\\f073";}.claro select {padding: 2px 8px 0; border: 1px solid #7f8183; -webkit-box-shadow: none; box-shadow: none;}.claro select option {padding: 2px 8px 4px;}.claro .dijitSelectMenu td.dijitMenuItemIconCell,.claro .dijitSelectMenu td.dijitMenuArrowCell {display: none;}.claro .dijitMenu {background: #4c4c4c; border: 1px solid #7f8183; -webkit-border-radius: 0; border-radius: 0; margin: 0; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.15); box-shadow: 0 2px 3px rgba(0,0,0,0.15);}.claro .dijitMenuTable,.claro .dijitComboBoxMenu {padding: 4px 0;}.claro .dijitComboBoxMenu {margin-left: 0; background-image: none;}.claro .dijitMenuTable {border-collapse: separate; border-spacing: 0 0;}.claro .dijitMenuItem,.claro .dijitMenuItem td {color: #f8f8f8; line-height: 20px; padding: 8px !important; border: none !important; white-space: nowrap;}.claro .dijitMenu .dijitMenuItemHover td,.claro .dijitMenu .dijitMenuItemHover {color: #f8f8f8; background: #222;}.claro .dijitMenu .dijitMenuItemActive td,.claro .dijitMenu .dijitMenuItemActive {color: #f8f8f8; background: #222;}.claro .dijitMenu .dijitMenuItemSelected td,.claro .dijitMenu .dijitMenuItemSelected {color: #f8f8f8; background: #222; border: 0 none;}.claro .dijitMenuSeparatorTop {height: auto; margin-top: 1px; border-bottom: 0 none;}.claro .dijitMenuSeparatorBottom {height: auto; margin-bottom: 1px; border-top: 0 none;}.claro td.dijitMenuItemIconCell {padding: 4px; margin: 0 0 0 4px;}.claro .dijitMenuExpand {font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 14px; text-decoration: inherit; vertical-align: bottom;}.claro .dijitMenuExpand:before {content: "\\f0da";}.claro .dijitCheckedMenuItemIconChar {display: none;}.claro .dijitCheckedMenuItemIcon {font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 14px; text-decoration: inherit; vertical-align: bottom;}.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon:before {content: "\\f00c";}.claro .dijitMenuPreviousButton,.claro .dijitMenuNextButton {font-style: italic;}.claro .dijitMenuBar {margin: 0; padding: 0; background: #f5f5f5;}.claro .dijitMenuBar .dijitMenuItem {padding: 8px 12px; margin: 0;}.claro .dijitMenuBar .dijitMenuItemHover {background: #007ac2;}.claro .dijitMenuBar .dijitMenuItemActive {background: #007ac2;}.claro .dijitMenuBar .dijitMenuItemSelected,.claro .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,.claro .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected {color: #fff; background: #007ac2;}.claro .dijitMenuPopup {border-top-left-radius: 0; border-top-right-radius: 0;}.claro .dijitMenuPopup .dijitMenu {border-top-left-radius: 0; border-top-right-radius: 0;}.claro .dijitMenuPopup .dijitMenuItem,.claro .dijitMenuPopup .dijitMenuItem td {padding: 8px; border: 0 none; color: #f8f8f8;}body,html {font-family: \'HelveticaNeue\' !important; font-weight: normal;}strong {font-family: \'HelveticaNeue\';}.esriControlsBR {bottom: 62px; left: 10px; right: auto; width: auto; z-index: 0 !important;}.logo-med {position: absolute; left: 0px; bottom: 15px;}.esriSimpleSliderTL {top: 0px; left: 0px; width: 56px; height: 24px; border: none; background: transparent; display: none;}.jimu-widget-frame.jimu-container {overflow-x: auto; overflow-y: auto; position: relative; padding: 10px; color: #ffffff; background-color: transparent; width: auto; left: 0px; right: 0px; top: 0px; bottom: 0px;}.jimu-widget-frame.jimu-container * {color: #ffffff !important; outline: none;}.jimu-input {height: 30px; background: #393939; background: rgba(0, 0, 0, 0.25); border: 1px solid #a6a6a6; border: 1px solid rgba(255, 255, 255, 0.5); color: #ffffff; padding: 5px; margin: 0; border-radius: 2px; font-size: 14px;}.jimu-btn {cursor: pointer; min-width: 70px; display: inline-block; padding: 0 10px !important; line-height: 33px; font-size: 14px; text-align: center; vertical-align: middle; background-color: #262626; background-color: rgba(0, 0, 0, 0.5) !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; border: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.jimu-btn:hover {background-color: #131313; background-color: rgba(0, 0, 0, 0.75) !important;}.jimu-btn.jimu-state-disabled {background-color: #797979; background-color: rgba(255, 255, 255, 0.25) !important; color: #d8d8d8 !important;}.jimu-checkbox .checkbox {border: 1px solid #a6a6a6; border: 1px solid rgba(255, 255, 255, 0.5) !important; background-color: #393939; background-color: rgba(0, 0, 0, 0.25) !important;}.jimu-checkbox .checkbox.checked {border: 1px solid #a6a6a6; border: 1px solid rgba(255, 255, 255, 0.5) !important; background-image: url(dijit-css/icons/Icon_Checkmark_16.png) !important;}.claro .dijitTextBox {height: 30px; border-color: #a6a6a6; border-color: rgba(255, 255, 255, 0.5);}.claro .dijitComboBox .dijitButtonNode {color: #ffffff !important; border-color: #a6a6a6; border-color: rgba(255, 255, 255, 0.5); background-color: #262626; background-color: rgba(0, 0, 0, 0.5);}.dijitButtonNode {border: none !important;}.jimu-widget-analysis .tools-table-tr.even,.jimu-widget-analysis .tools-table-tr.odd,.jimu-widget-analysis .tools-table-tr.disabled {background-color: #393939; background-color: rgba(0, 0, 0, 0.25) !important; border-bottom: 1px solid #262626; border-bottom: 1px solid rgba(0, 0, 0, 0.5);}.jimu-widget-analysis .tools-table-tr.disabled {filter: alpha(opacity\x3d30); -moz-opacity: 0.30; -khtml-opacity: 0.30; opacity: 0.30;}.jimu-widget-analysis .tools-table-tr:hover {background-color: #262626; background-color: rgba(0, 0, 0, 0.5) !important;}.jimu-widget-analysis .tools-table-tr.disabled:hover {background-color: #393939; background-color: rgba(0, 0, 0, 0.25) !important;}.esriBasemapGalleryNode {margin: 3px 10px 3px 10px !important;}.esriBasemapGalleryThumbnail {width: 80px !important; height: 60px !important; border: 1px solid #fff; margin: 0; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;}.esriBasemapGalleryLabelContainer {height: 16px !important; line-height: 16px !important;}.jimu-widget-bookmark .btn-add {background-color: #262626; background-color: rgba(0, 0, 0, 0.5);}.bookmark-list \x3e .jimu-state-selected {background: transparent !important;}.bookmark-list \x3e .jimu-state-selected .node-label {background-color: #3d3d3d; background-color: rgba(0, 0, 0, 0.2) !important;}.jimu-widget-bookmark .jimu-btn {width: 100px !important;}.jimu-widget-chart .chart-results .results-container {top: 30px !important;}.jimu-widget-chart-preview .results-header {position: absolute !important; bottom: 0px; width: 100%; height: 33px !important; line-height: 20px;}.jimu-widget-chart-preview .chart-section .arrow:hover {background-color: #393939; background-color: rgba(0, 0, 0, 0.25) !important;}.simpleDirections .esriGeocoder input {background: transparent !important;}.simpleDirections .esriGeocoderResults {background: #131313; background: rgba(0, 0, 0, 0.75) !important;}.simpleDirections .esriGeocoderResults ul {border: none !important;}.simpleDirections .esriGeocoderResult:hover,.simpleDirections .esriGeocoderResultEven:focus,.simpleDirections .esriGeocoderResultOdd:focus {background-color: #000000 !important;}.simpleDirections .esriActivateButton {width: 24px !important; height: 24px !important;}.simpleDirections .esriDirectionsButton,.simpleDirections .esriDirectionsButton:hover {padding: 0 10px !important; line-height: 33px !important; font-size: 14px; border: none !important; background-color: #262626; background-color: rgba(0, 0, 0, 0.5) !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important;}.simpleDirections .esriStopsClearDirections {padding: 0px 10px !important; line-height: 33px !important; font-size: 14px;}.simpleDirections .arcgisSearch .searchGroup .searchInput {border-bottom: none !important;}.simpleDirections .esriDirectionsPressedButton,.simpleDirections .esriDirectionsPressedButton:hover {background-color: #797979; background-color: rgba(255, 255, 255, 0.25) !important; box-shadow: none !important;}.tmTypeName {color: #aeaeae !important;}.simpleDirections .esriResultsContainer {background: transparent !important;}.simpleDirections .esriRouteZoom:hover,.simpleDirections .esriRouteZoom:focus {background: #3d3d3d; background: rgba(0, 0, 0, 0.2);}.draw-item {background-color: #262626; background-color: rgba(255, 255, 255, 0.5) !important;}.draw-item:hover {background-color: #8a8a8a; background-color: rgba(255, 255, 255, 0.35) !important;}.jimu-widget-draw .operations {margin-top: 10px !important; text-align: left !important;}.jimu-symbol-chooser {width: 100% !important;}.jimu-widget-edit * {background-color: transparent !important;}.jimu-widget-edit .esriTemplatePicker * {border: none !important;}.claro .jimu-widget-edit .dijitToolbar {padding: 5px 0; background: transparent !important; background-image: none !important; background-color: #c1c1c1 !important; border: none !important;}.claro .jimu-widget-edit .dijitToolbar .dijitButtonHover .dijitButtonNode,.claro .jimu-widget-edit .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,.claro .jimu-widget-edit .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,.claro .jimu-widget-edit .dijitToolbar .dijitComboButtonHover .dijitButtonNode {background-image: none !important; background-color: #262626; background-color: rgba(0, 0, 0, 0.5) !important;}.jimu-widget-geoprocessing {height: 100%; margin: 0px -10px !important; font-size: 14px;}.jimu-tab\x3e.jimu-viewstack {background-color: #3d3d3d; background-color: rgba(0, 0, 0, 0.2) !important;}.jimu-tab\x3e.control\x3e.tab {background-color: #707070; background-color: rgba(255, 255, 255, 0.2) !important; border: none !important;}.jimu-tab\x3e.control\x3e.tab.jimu-state-selected {background-color: #3d3d3d; background-color: rgba(0, 0, 0, 0.2) !important; border: none !important;}.jimu-widget-layerList .layer-row,.jimu-widget-layerList .layer-row-selected {background: transparent !important;}.jimu-dropmenu\x3e.jimu-icon-btn {border: transparent !important; background-color: #393939; background-color: rgba(0, 0, 0, 0.25) !important;}.drop-menu,.jimu-widget-layerList .popup-menu-transparency-body {outline: none !important; outline-style: 1px solid transparent !important; background-color: #131313; background-color: rgba(0, 0, 0, 0.75) !important;}.jimu-dropmenu .menu-item-line {border: 1px solid #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.1) !important;}.jimu-dropmenu\x3e.drop-menu {border: none !important; background-color: #131313; background-color: rgba(0, 0, 0, 0.75) !important;}.esriMeasurementButtonContainer {background-color: #3d3d3d; background-color: rgba(0, 0, 0, 0.2);}.esriMeasurement .esriButton .dijitButtonNode {height: 32px !important; width: 32px !important; padding: 0px !important; border-radius: 2px;}.esriMeasurement .locationIcon {background-image: url("dijit-css/icons/Icon_Measure_Point_16.png") !important; background-position: center center; background-repeat: no-repeat; width: 32px; height: 32px;}.esriMeasurement .distanceIcon {background-image: url("dijit-css/icons/Icon_Measure_Distance_16.png") !important; background-position: center center; background-repeat: no-repeat; width: 32px; height: 32px;}.esriMeasurement .areaIcon {background-image: url("dijit-css/icons/Icon_Measure_Area_16.png") !important; background-position: center center; background-repeat: no-repeat; width: 32px; height: 32px;}.esriMeasurement .esriButtonChecked .dijitButtonNode {background-image: none !important; background-color: #797979; background-color: rgba(255, 255, 255, 0.25) !important;}.esriMeasurement .esriButtonHover .dijitButtonNode {background-image: none !important; background-color: #262626; background-color: rgba(0, 0, 0, 0.5) !important;}.esriMeasurement .esriButtonActiveFocused .dijitButtonNode {background-image: none !important; background-color: #262626; background-color: rgba(0, 0, 0, 0.5) !important;}.esriMeasurement .dijitButtonText {height: 32px; padding: 0px 10px; font-size: 14px; line-height: 32px;}.esriMeasurement .esriMeasurementResultLabel {margin: 5px !important; padding: 5px !important; border-bottom: thin solid #3d3d3d; border-bottom: thin solid rgba(0, 0, 0, 0.2) !important;}.claro .jimu-widget-print .dijitButton .dijitButtonNode,.claro .jimu-widget-print .dijitDropDownButton .dijitButtonNode,.claro .jimu-widget-print .dijitComboButton .dijitButtonNode,.claro .jimu-widget-print .dijitToggleButton .dijitButtonNode {border: none !important; padding: 4px !important; color: #ffffff !important; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; background-image: none !important; background-color: #262626; background-color: rgba(0, 0, 0, 0.5) !important; -webkit-select: none;}.claro .jimu-widget-print .dijitSelect .dijitButtonNode {background-color: #262626; background-color: rgba(0, 0, 0, 0.5) !important;}', "url:themes/DartTheme/styles/default/style.css":".dart-bgcolor {background-color: #646464;}.esriSimpleSlider div {color: #646464;}","*now":function(a){a(['dojo/i18n!*preload*themes/DartTheme/nls/main*["ar","cs","da","de","en","el","es","et","fi","fr","he","it","ja","ko","lt","lv","nb","nl","pl","pt-br","pt-pt","ro","ru","sv","th","tr","zh-cn","vi","zh-hk","zh-tw","ROOT"]'])}}});define([],function(){}); ... View more

Thank you. I can't believe that I spent so much time only to realize that the stylesheet was missing. This is why I mentioned in my previous post that the map "jerks" when you right click. I didn't notice that the menu was actually showing up using the original version of code, but at the bottom left of the screen right under the map!! A simple fix but a valuable lesson. ... View more

I am posting a simpler code that has the same components as the original file. The problem is to bind the menu to the polyline when I use a graphics layer. Here is the code and thank you! <!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>My Map</title>   <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">   <style>    html, body, #map {    padding:0;    margin:0;    height:100%;   }   </style>   <script src="//js.arcgis.com/3.13/"></script>   <script>    require([    "esri/map",    "esri/geometry/Point",    "esri/symbols/SimpleMarkerSymbol",    "esri/symbols/SimpleLineSymbol",    "esri/graphic",    "esri/layers/GraphicsLayer",    "esri/geometry/Polyline",    "esri/SpatialReference",    "dojo/dom",    "dojo/on",    "dijit/Menu", "dijit/MenuItem",    "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",    "dojo/domReady!"    ], function(   Map,   Point,   SimpleMarkerSymbol,   SimpleLineSymbol,   Graphic,   GraphicsLayer,   Polyline,   SpatialReference,   dom,   on,   Menu, MenuItem   )   {    myMap = new Map("map", {    basemap: "streets",    center: [-122.16,37.7238],    zoom: 15,    SpatialReference: 102100    });    myMap.on("load", init);    function init()   {    var point1 = new Point(-122.159, 37.724, myMap.SpatialReference);    var point2 = new Point(-122.169, 37.721, myMap.SpatialReference);    var line = new Polyline(myMap.SpatialReference);    var gL = new GraphicsLayer();    line.addPath([point1, point2]);    var lineSymbol = new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]),4);    var pointSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0, 0.5]));    myGraphicMarker = new Graphic(point1, pointSymbol);    myGraphicMarker2 = new Graphic(point2, pointSymbol);    myGraphicMarker.setAttributes({"name":"Begin"});    myGraphicMarker2.setAttributes({"name":"End"});    gra = new Graphic(line, lineSymbol);    gra.setAttributes({"name":"Project"});    gra.menu = new Menu({});    gra.menu.addChild(new MenuItem({    label: "Test",    onClick: function() {    alert("Testing menu");   }   }));    gL.add(myGraphicMarker);    gL.add(myGraphicMarker2);    gL.add(gra);    myMap.addLayer(gL);   on(gL, 'mouse-over', function(evt) {    if (evt.graphic.attributes.name === "Project") {   evt.graphic.menu.bindDomNode(evt.graphic.getDojoShape().getNode());   };   });   on(gL, 'mouse-out', function(evt) {    if (evt.graphic.attributes.name === "Project") {   evt.graphic.menu.unBindDomNode(evt.graphic.getDojoShape().getNode());   }   });   }   });   </script> </head> <body> <div id="map" class="map"> </div> </body> </html> ... View more

Robert, correct me if I am wrong.   Based of what I am reading to have a right click menu, you have to bind the graphic to the menu. I tried doing in different ways (when you mouse over or when you create graphic) but nothing works. For example, the code I posted in a previous post is quite simple, so I don't know why the bind is not working. Thank you. ... View more

That was my first thought to follow the same logic as I set the infowindow after the graphic was created. However, I run into problems. I could not bind the context menu to the graphic that is in the GL. When I read the On binding dijit/Menu to a graphic I knew that it would not be as simple as it seems. That's why I am using the move out to bind the graphic. ... View more

This is a part of the code.... I first call the createGraphicsMenu, as listed on: Display context menu | ArcGIS API for JavaScript except the   myGraphicsLayer2.on("mouse-over",function (event), to create the context menu. because I incorporated in the existing call. So, if the graphics is Begin or End, the infowindow are displayed. If I right click on the Project graphic, the map "jerks" (pans for half inch) and there is no display of context menu What am I doing wrong? Thank you. .......... createGraphicsMenu();   myGraphicsLayer2.on("mouse-over",function (event) {                 map.graphics.clear();  //use the maps graphics layer as the highlight layer                 var graphic = event.graphic;   if (graphic.attributes.name === "Begin"){                 map.infoWindow.setContent(myGraphicMarker.getContent());                 map.infoWindow.setTitle(myGraphicMarker.getTitle());                 var highlightGraphic = new Graphic(myGraphicMarker.geometry, pointSymbol);                 map.graphics.add(highlightGraphic);                 map.infoWindow.show(event.screenPoint,                   map.getInfoWindowAnchor(event.screenPoint));   }   if (graphic.attributes.name === "End"){                 map.infoWindow.setContent(myGraphicMarker2.getContent());                 map.infoWindow.setTitle(myGraphicMarker2.getTitle());                 var highlightGraphic = new Graphic(myGraphicMarker2.geometry, pointSymbol);                 map.graphics.add(highlightGraphic);                 map.infoWindow.show(event.screenPoint,                   map.getInfoWindowAnchor(event.screenPoint));   }   if (graphic.attributes.name === "Project"){        ctxMenuForGraphics.bindDomNode(graphic.getDojoShape().getNode());   }   map.infoWindow.resize(120, 70);   map.graphics.on("mouse-out", function () {       map.graphics.clear();                 map.infoWindow.hide();   if (graphic.attributes.name === "Project"){   ctxMenuForGraphics.unBindDomNode(graphic.getDojoShape().getNode());   }   });   }); ... View more

Thanks Robert. That's what I was thinking as I mentioned on my response to Tim. ... View more

Thanks Tim. I am aware of it. But I am using the same graphics layer for my graphics for other reasons. ... View more

Thank you Tim. I think I need to be more specific. What if you have two identical calls, GraphicsLayer.on("mouse-over", function(evt)) As I mentioned, I already have one for the infotemplate and then I need another one for the context menu as described by the ESRI's example as stated in my previous post. The problem is that both calls are intended for different graphics. Perhaps, I could use only one call, and based on the graphics id the appropriate action is taken. ... View more

Thank you! Your suggestion for an attribute, turned a light bulb on. I didn't have any attributes since the graphics were just defined on the map and they were not the result of a query. So, I just set a new attribute "id". ... View more