Develop Reference

change an entire svg using class change

I'm trying to change an entire svg by changing the class.The problem is that I don't know for sure how to set a new class to the svg so I tried like this:
<script>
function change() {
document.getElementById("hi").setAttribute("className", "Hi Hello")
}
</script>
Fiddle here:https://jsfiddle.net/orhojkq6/1/
Can someone please tell me if I am wrong somewhere?I am an beginner.

That is a very strange method being used to modify the svg background, but if you want to add a class name to the svg, the easiest method would be to use classList
window.onload = function() {
setTimeout(function() {
document.getElementById("hi").classList.add("Hello");
}, 2000);
}
I wouldn't recommend using inline javascript, so I removed it in this demo.
Also, it isn't conventional to use capital letters at the start of a class name.

Is there a way to get an applied input mask from an element?

I'm trying to get the input mask that was applied to different elements using Josh Bush's Masked Input Plugin (https://github.com/digitalBush/jquery.maskedinput) so that I can re-apply them to cloned elements.
Any ideas?
Thank you!

It seems there are no methods in plugin's api to do that. I can suggest to do monkey patching of $.fn.mask like so http://jsfiddle.net/fbeeL2ft/2/. Not sure that it's helpful in your case.

I ended up patching the maskedInput function to add the applied mask in a data attribute attached to the input element like this:
function patchMask() {
var plugin = jQuery.fn.mask;
jQuery.fn.mask = function(mask) {
jQuery(this.get(0)).attr('data-mask', mask);
return plugin.apply(this, arguments);
};
}
jsFiddle here: http://jsfiddle.net/kodie/kvbn20t8/6/

Dojo destroy MenuItems on DropDownButton

I have the following markup:
<button dojoType="dijit.form.DropDownButton" dojoAttachPoint="labels" label="Labels">
<div dojoType="dijit.Menu" dojoAttachPoint="labelsMenu"></div>
</button>
I am adding MenuItems programatically and it works fine for the first time. But when I want to refresh I get an error: Tried to register widget with id==16 but that id is already registered. I have tried the following code to clear but it's not working:
var labels = dijit.findWidgets(this.labels);
dojo.forEach(labels, function (l) {
l.destroyRecursive();
});
dojo.empty(dojo.byId(this.labels));
I have also try the same thing for labelsMenu to empty it but no luck. Is there any other way to get rid of all children when reloading data or am missing something?

I have solved it and here's what I did:
var menuChildren = dijit.byId(this.labelsMenu).getChildren();
if (menuChildren.length > 0){
dojo.forEach(menuChildren, function(mc){
mc.destroyRecursive();
});
}

In your code you call dojo.empty on the labels. dojo.empty() empties the element in the DOM but keeps the original element. So try calling dojo.empty on the dijit menu instead.
dojo.empty(dojo.byId("labelsMenu"));
For reference, in a fully baseless application, the dom-construct module is used.
require(["dojo/dom-construct"], function(domConstruct){
// Empty node's children byId:
domConstruct.empty("someId");
});

Change text color based on background color?

I've a pretty minimalistic site, so I want to add details to it, like a hidden theme switching. But I don't want to tell the user that the theme can be changed, so I want to hide the text.
I've tried this:
var tausta = $(body).css("background-color");
$('.piiloteksti').css("color",tausta);
But it doesn't do anything. What would be the correct approach?
A fiddle.

if($('.piiloteksti').css("color",tausta); is a wrong statement. Thats a syntax error! There shouldn't be any if here.
Either remove if
$('.piiloteksti').css("color",tausta);
or complete the if statement.
if($('.piiloteksti').css("color",tausta)){
// some other code
}
Also $(body) does not refer to anything. Use either $('body') or $(document.body)

I tried to modify CSS, and it works.
// javascript
var tausta = $('body').css("background-color");
if($('.piiloteksti').css("color") == tausta) {
alert(tausta);
}
// css (test)
body{background-color:red;}
.piiloteksti{color:red;}

The syntax of your the if statement was off a little. Also, body must be made a String literal.
var tausta = $("body").css("background-color");
$('.piiloteksti').css("color", tausta);
Example: http://jsfiddle.net/HbAHS/8/

You can hide the element with CSS
.piiloteksti{display:none;} Fiddle
OR if you think that would interfere with your layout then,
.piiloteksti{visibility:hidden;} Fiddle
Or you can just give transparent color to your piiloteksti elements
.piiloteksti{color:transparent;} Fiddle

javascript versus jQuery: highlighting some text, at the same time as, changing visibility of other text

This javascript code from RoToRa does what I want:
http://jsbin.com/ayoqem/7/edit#javascript,html,live
What jQuery code will do the same task? Which is better?

Sure, if you don't need to use jQuery then the javascript you have already will do just fine. But if you are using jQuery then you can accomplish the same task with just 3 lines of code.
http://jsfiddle.net/RWzQT/1/
$(document).ready(function() {
$(".qa input[type=checkbox]").click(function() {
$(this).parent().parent('div').toggleClass('show_answer');
});
});​
Note, that I also removed your inline javascript (onclick="hlt_showhide(this)") from the HTML.

If you don't need jQuery, don't use it. jQuery is built on top of JavaScript.. so if you already have code in pure-JS, why do you want it in jQuery??
The jQuery equivalent of that will be very similar in terms of line by line flow, only it'll use jQuery's .parent() to select the parent element and .addClass() & .removeClass() to do those actions.

function hlt_showhide(checkbox) {
$checkbox = $(checked); // just to cache it really!
var qaDiv = $checkbox.parent().parent();
if ($checkbox.attr('checked')) {
qaDiv.addClass("show_answer");
} else {
qaDiv.removeClass("show_answer");
}
}
but frankly I dont see the point of using jQuery here! JS does the trick.