Develop Reference

Check if tiles are loading

I am using OL-layerswitcher (https://github.com/walkermatt/ol-layerswitcher) to produce a sidebar with my layers and add them to the map when clicking. Unfortunately, this might take some time depending on the internet connection, etc. and thus I would like to add an icon showing that something is happening while it is loading.
I managed to create a div in the middle of my screen showing the icon I want to show but I am not able to check if something is still loading or not.
Since I am using the layerswitcher, my layers are not clearly defined as variables (like in https://openlayers.org/en/latest/examples/tile-load-events.html), thus I can not use the example.
If anyone can help me, thank you.
EDIT: I am trying to get this running with a single layer.Tile now. I thought if i do it like this and add the source-Layer to my map I should get a console-output "Loading" and then "Done", but I do not get an output.
var source = new ol.layer.Tile({
title: "Baden-Württemberg",
zIndex: 2,
visible: false,
source: new ol.source.TileWMS({
url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
params: {
'LAYERS': "forestwatch:baden_wuertemberg_maske"
}
})
})
var IMG = document.getElementById("loading");
source.on('tileloadstart', function () {
console.log("Loading");
});
source.on('tileloadend', function () {
console.log("Done");
});
PS: I do not really care if I have to use jquery, if there is a solution using it just tell me.
Edit: #Mike made this work using source.getSource().on( ), but right now my map is jumping.
#loading {
position: relative;
display: none;
font-size: 40px;
left: 50%;
top: 50%;
z-index: 10000;
/* width: 30px;
height: 30px;*/
background-color: transparent;
color: black;
}
This is the css for the div. EDIT: position: fixed made it work since it is always in the same position now.

how to dojo button background invisible or remove?

I`m trying to put an image in place of dojo button. I am able to add the image, as background, but, the outline of the button is visible. I would want ot show the image only. What should I do?
my code is follows.
css:
.EditButtonWidgetImage {
background-image: url("EditButton/images/edit.png");
background-position: center;
background-repeat: no-repeat;
height: 25px;
width: 25px;
}
javascript:
var infoTableContainer = dojo.create("div", null, map.container);
var x = 200 - map.position.x;
var y = 50 - map.position.y;
this.InfoTable = new FloatingPane({
title : "<b>Editor</b>",
resizable: true,
doLayout: true,
dockable: false,
closable: true,
//constrainToContainer: true,
'class': "EditWidgetContainer",
style: "left:"+x+"px;top:"+y+"px;padding:0px"
}, infoTableContainer);
//dojo.attr(infoTable, 'class', 'TableInfoWidgetContainer'); //ie8에서 class 예약어 처리로 인해 변경
dojo.connect(this.InfoTable, 'close', lang.hitch(this, function() {
//this.InfoTable.destroy();
//console.log('infoGrid (infotable.destroy)=',this.InfoGrid);
if (this.InfoGrid) {
//this.InfoGrid.destroyRecursive(true);
this.InfoGrid.destroy();
this.InfoGrid = null;
this.InfoGrid = undefined;
}
this.InfoTable = null;
this.InfoTable = undefined;
}));
//Border생성
var border = new BorderContainer({
gutters: false,
design: 'headline',
style: "height:100%;width:100%;"
})
//검색옵션 생성
var cpT = ContentPane({
region: "top",
title: "검색 옵션",
style: "height:auto;width:100%;"
});
this.cboService = new ComboBox({
title: '서비스 : ',
searchAttr: "SVC_NM",
style: "width:120px;"
});
this.cboLayer = new ComboBox({
searchAttr: "LYR_NM",
style: "width:120px;"
});
var btnResult = new Button({
iconClass : "EditButtonWidgetImage",
style: "width:40px;margin-left:4px;"
});
dojo.place('<label class="widget_field_label" style=width:70px; >편집대상 : </label>', cpT.domNode);
cpT.addChild(this.cboService);
dojo.place('<label class="widget_field_label" style=width:80px;>참조레이어 : </label>', cpT.domNode);
cpT.addChild(this.cboLayer);
cpT.addChild(btnResult);
border.addChild(cpT);
border.placeAt(this.InfoTable.containerNode);
border.startup();
this.InfoTable.startup();

If your using "dijit/form/Button" just include following class and you will see the result.
Here i have overridden the button class. Make sure to limit the scope to specific button only.
.claro .dijitButton .dijitButtonNode {
background-color: transparent;
border: none;
box-shadow: none;
}

I had faced with something similar, the solution that worked for me was to remove the dijitButtonNode class. But then, that would leave you with a image and no indication that it's a button. Is that what you really want?
domClass.remove(btnResult.domNode.childNodes[0], "dijitButtonNode")
Alternatively, you could simple add and img tag, and add a click event to it.

Basically you need to overwrite class .dijitButtonNode from dojo theme (in this case claro).
You can use the following CSS as starting point:
https://jsfiddle.net/zzot4zur/
.claro .dijitButton .dijitButtonNode {
background-color: transparent;
border: none;
box-shadow: none;
background-image: url("http://www.nuflowwidebay.com.au/wp-content/uploads/2015/10/expences-button-png-hi.png");
background-size: 75px 30px;
background-repeat: no-repeat;
width: 75px;
height: 30px;
}
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom) {
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
onClick: function() {
// Do something:
dom.byId("result1").innerHTML += "Thank you! ";
}
}, "progButtonNode").startup();
});
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>

Style select box option:disabled when it's checked

In the image below, I want Exp. Year (the disabled option) to be grey on page load like a placeholder, and when an option is clicked (2016), I want it to turn to black. It is possible to do this without js?
JSFiddle
What is currently does:
What I want it to do: (Exp. Month is grey on page load, then 2016 is black on select)
.select-box {
border: 1px solid $ghBlack;
height: 36px;
background: transparent;
margin: 10px 0 14px 0;
color: #000;
}
option:disabled {
color: #a9a9a9;
}
option:not(:checked) {
color: #a9a9a9;
}

One way to do this is as follows:
// binding an anonymous function as the change-event handler:
$('select').change(function () {
// adjusting the 'color' property of the select element:
$(this).css('color', function () {
// caching the 'this' variable for efficiency (give repeated use):
var self = this,
// finding the options of the select element:
opts = self.options;
// getting the currently-selected option, and then checking if
// it's the default-selected option (returns a Boolean); if it is
// we set the colour to '#aaa', if not we set the colour to '#000':
return opts[self.selectedIndex].defaultSelected ? '#aaa' : '#000';
});
// triggering the change-event so that this runs on page-load:
}).change();
JS Fiddle demo.
Reference:
change().
css().

When you explained more what you try to do, then the answer is no, you can't do it without javascript, because the color of the main option is just one....its defined by this css selector
.select-box {
color: grey;
}
You can only change colors of the options (when the select is opened) - fiddle: http://jsfiddle.net/san6q621/

TextArea Auto Resize On Paste

Ok, here's my problem. I"m using this plugin (http://james.padolsey.com/javascript/jquery-plugin-autoresize/) to autoresize my textarea when there's more text. When I paste using keyboard, it autoresizes perfectly. However, when I paste using mouse, it doesn't work.
So my code to resize textareas are:
$('textarea').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
My code to call the autoresize function on paste:
$('textarea').bind('paste', function() {
$('this').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
});
However, this doesn't seem to work. Any ideas?

According to this question you need to use setTimeout on your paste event to wait a few milliseconds before you try to retrieve the value.
$('textarea').bind('paste', function() {
var $textarea = $(this);
setTimeout(function() {
$("div").text($textarea.val());
}, 250);
});
Example on jsfiddle
So maybe it might work like the following:
$('textarea').bind('paste', function () {
var $textarea = $(this);
setTimeout(function () {
$textarea.trigger("change.dynSiz");
}, 250);
});
Example on jsfiddle

The main idea is that: plugin doesn't track paste events, it tracks only just keyboard events. Thus you'll need either to find another plugin, or modify that one (and track mouse events too).
Here's a part of code (of that plugin), where you should look for:
// Bind namespaced handlers to appropriate events:
textarea
.unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize);
Maybe, add .bind('click.dynSiz', updateSize) there.
I'm not very familiar with jQuery and don't know, what such event names mean.

Super light weight:
Has anyone considered contenteditable? No messing around with scrolling,a nd the only JS I like about it is if you plan on saving the data on blur... and apparently, it's compatible on all of the popular browsers : http://caniuse.com/#feat=contenteditable
Just style it to look like a text box, and it autosizes... Make its min-height the preferred text height and have at it.
What's cool about this approach is that you can save and tags on some of the browsers.
http://jsfiddle.net/gbutiri/v31o8xfo/
<style>
.autoheight {
min-height: 16px;
font-size: 16px;
margin: 0;
padding: 10px;
font-family: Arial;
line-height: 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
resize: none;
border: 1px solid #ccc;
outline: none;
width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
var $this = $(this);
// The text is here. Do whatever you want with it.
console.log($this.html());
});
</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey <b>Mouse</b></div>

Change text selection highlight with JS

For standard browsers you can use something like this to change the coloring of selected text:
div.txtArea::selection {
background: transparent;
}
div.txtArea::-moz-selection {
background: transparent;
}
div.txtArea::-webkit-selection {
background: transparent;
}
But I need to do this with JavaScript instead.
My users can select text and then change the color. While they are selecting another color it updates the color constantly. Since the text is selected they can't see what the color looks like. I need to change the selection style of my targeted element to be transparent only during mouseover of the color changer.
I have tried a few things including:
$('div.txtArea').css({
'selection': 'transparent',
'-moz-selection': 'transparent',
'-webkit-selection': 'transparent'
});
Is there a way to do this with javascript?

There's no DOM interface for manipulating pseudo-classes. The only thing you can do is add the rules to a stylesheet. For instance:
// Get the first stylesheet
var ss = document.styleSheets[0]
// Use insertRule() for standards, addRule() for IE
if ("insertRule" in ss) {
ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);
}
You can access and change rules using stylesheet.cssRules[index].style, stylesheet.rules[index].style for IE, which is where it gets a little more complicated.
I didn't include an IE6-8 example using addRule() because those versions of IE don't support ::selection.