Develop Reference

How to show a display:none DIV using Javascript

I have a DIV which has a display set to none, by using javascript I tried showing it by using the onclick of a button. But what happens is the exact opposite. My DIV is already shown and when I click the button it hides the DIV. What am i doing wrong here, please HELP!
This is my button and the div:
<button onclick="myFunction()">SHOW</button>
<div id="how_to_form">
<img src="../images/view.png">
</div>
This is the JS code:
function myFunction() {
var x = document.getElementById("how_to_form").style.display = 'none';
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

Your line there has a double assignment:
var x = document.getElementById("how_to_form").style.display = 'none';
It first assigns the display to none:
document.getElementById("how_to_form").style.display = 'none';
and then takes the result of that expression (which is the string you assigned), and assigns it to x:
var x = 'none';
Which isn't what you want. First declare the variable for the element, then assign its style.
Also, it sounds like you want the element to start out hidden - assign its initial style outside the function:
const form = document.getElementById("how_to_form");
form.style.display = 'none';
function myFunction() {
if (form.style.display === "none") {
form.style.display = "block";
} else {
form.style.display = "none";
}
}
Or, to be more concise, use the conditional operator:
function myFunction() {
form.style.display = form.style.display === "none"
? 'block'
: 'none';
}
Also consider attaching the handler properly using Javascript, rather than using inline HTML attributes, which are generally considered to be pretty poor practice and can be hard to manage:
document.querySelector('button').addEventListener('click', myFunction);

have you checked if you have already set a default style to your div?
you either have to set your div's default style to display:none by inline
<div id="how_to_form" style="display:none">
or by css
<style>
#how_to_form{ display:none }
</style>

Issue is your variable assignment
Chaining the assignment operator is possible in order to assign a single value to multiple variables.
Please refer this link for variable assignment options
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators
var x = y= 10
Then both x and y values are 10
Similarly in your code var x is none
To achieve expected result , use below option
1. set CSS for html_to_form to display:none
2.In your code change variable x assignment to
var x = document.getElementById("html_to_form")

How to disable the button with css

I want to disable the link using it's id in Javascript. By default it's invisible as shown below. I will enable the link when the particular id came from back end.
HTML
<li id="viewroleId" style="display: none;">
<spring:message code="label.viewrole" />
</li>
Javascript:-
if (key == 1) {
var id = value;
var div = document.getElementById(id);
if(div != null){
if (div.style.display == 'none' || div.style.display == '') {
// Here it will display the link
div.style.display = 'block';
}
}
}
In the above Javascript code I will display the link, but I want to display and disable the link. How can I disable the link with CSS instead?

First, create a rule like this in css
.disabled {
display: block !important; /* since you set the element's display to none inline,
we need to use !important flag (which is pretty bad)
to override the inline style */
pointer-events: none; /* Disable an element interaction, so it will not respond any event */
color: #ccc; /* Gray out the text color to signify being disabled */
}
Now in your javascript, just give the element you want to disable the class disabled like so
if (key == 1) {
var id = value;
var div = document.getElementById(id);
if(div != null){
if (div.className.indexOf('disabled') === -1) {
// Your element will be visible, and disabled
div.className += ' disabled';
}
}
}

If your app is based on Angular use ng-if, this is the "natural way"
<a ng-if="true" href="yourlink.html">Link<a/>
<a ng-if="!true" href="#">Link<a/>
Is better to try to overwrite browser native implementation (link...);

CKEDITOR - Apply bold to numbered list including numbers

I am facing an issue with the numbered list in ckeditor. When I try to bold some text in li, only the text is getting bold, without the preceding number. This is how it looks like,
One
Two
Three
It should be like this
2. Two
When I check the source, I found the code like below
<li><strong>Two</strong></li>
I would like to know is there any way to change the working of bold button, so that it will add something like below
<li style="font-weight:bold">Two</li>
<p> Hello <strong>World</strong></p>

I tried to solve your problem.
My solution isn't the best, because I guess that create a bold plugin, that takes care about list items would be the best solution.
I make it without using jQuery; however, using it the code should became simpler and more readable.
First of all, we need to define something useful for the main task:
String trim. See this.
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
};
}
String contains. See this
String.prototype.contains = function(it) {
return this.indexOf(it) != -1;
};
First child element. The following function obtains the first child element, or not-empty text node, of the element passed as argument
function getFirstChildNotEmpty(el) {
var firstChild = el.firstChild;
while(firstChild) {
if(firstChild.nodeType == 3 && firstChild.nodeValue && firstChild.nodeValue.trim() != '') {
return firstChild;
} else if (firstChild.nodeType == 1) {
return firstChild;
}
firstChild = firstChild.nextSibling;
}
return firstChild;
}
Now, we can define the main two functions we need:
function removeBoldIfPresent(el) {
el = el.$;
var elStyle = el.getAttribute("style");
elStyle = (elStyle) ? elStyle : '';
if(elStyle.trim() != '' && elStyle.contains("font-weight:bold")) {
el.setAttribute("style", elStyle.replace("font-weight:bold", ''));
}
}
CKEDITOR.instances.yourinstance.on("change", function(ev) {
var liEls = ev.editor.document.find("ol li");
for(var i=0; i<liEls.count(); ++i) {
var el = liEls.getItem(i);
var nativeEl = el.$.cloneNode(true);
nativeEl.normalize();
var firstChild = getFirstChildNotEmpty(nativeEl);
if(firstChild.nodeType != 1) {
removeBoldIfPresent(el);
continue;
}
var firstChildTagName = firstChild.tagName.toLowerCase()
if(firstChildTagName == 'b' || firstChildTagName == 'strong') {
//TODO: you also need to consider the case in which the bold is done using the style property
//My suggest is to use jQuery; you can follow this question: https://stackoverflow.com/questions/10877903/check-if-text-in-cell-is-bold
var textOfFirstChild = (new CKEDITOR.dom.element(firstChild)).getText().trim();
var textOfLi = el.getText().trim();
if(textOfFirstChild == textOfLi) {
//Need to make bold
var elStyle = el.getAttribute("style");
elStyle = (elStyle) ? elStyle : '';
if(elStyle.trim() == '' || !elStyle.contains("font-weight:bold")) {
el.setAttribute("style", elStyle + ";font-weight:bold;");
}
} else {
removeBoldIfPresent(el);
}
} else {
removeBoldIfPresent(el);
}
}
});
You need to use the last release of CkEditor (version 4.3), and the onchange plugin (that is included by default in the full package).

CKEditor 4.1 remove your classes, styles, and attributes that is not specified in its rules.
If that's the problem, you might want to disable it by adding this line:
CKEDITOR.config.allowedContent = true;
Here is full code to use it:
window.onload = function() {
CKEDITOR.replace( 'txt_description' );
CKEDITOR.config.allowedContent = true; //please add this line after your CKEditor initialized
};
Please check it out here

<ul class="test">
<li><span>hello</span></li>
</ul>
.test li
{
font-weight:bold;
}
.test li span
{
font-weight:normal;
}

FAQ dropdown- Text color changed when clicked

I am using a JavaScript dropdown for my FAQ, and what I can't figure out is how to have the color of the question change when clicked, and then change back when clicked again.
Here's the JavaScript:
<script type="text/javascript">
function toggle(Info) {
var CState = document.getElementById(Info);
CState.style.display = (CState.style.display != 'block')
? 'block' : 'none';}
</script>
I know using :action will work just for when the question is clicked, but I'm trying to style it so that each click either turns the color on or off, as that's what happens with the answer dropping down and I'd like both to be coordinated.

If I understand correctly you toggle function shows/hides the answer. Then all you have to do is to get the question container and toggle a css class which contains the text color
For example:
document.getElementById(your question).classList.toggle(your-class);
and in a css file
.your-class {
color: selected color;
}

<style>
.classStyle1 {background-color:white}
.classStyle2 {background-color:green}
</style>
<script type="text/javascript">
function toggle(Info) {
var CState = document.getElementById(Info);
if(CStage.className == "classStyle1"){
CStage.className = classStyle2;
}else{
CStage.className = classStyle1;
}
// or else
// create style attribute for select element and put style='background-color:white' like this
if(CStage.style.backgroundColor == "white"){
CStage.style.backgroundColor = 'green';
}else{
CStage.style.backgroundColor = 'white';
}
</script>

If I understand correctly - try this
CState=document.getElementById("myColor");
CState.onmouseover=function(){this.style.color='red';};
CState.onmouseout=function(){this.style.color='blue';};

Toggle multiple divs on and off (almost working)

I have this:
function toggleCharts() {
var x, divArray = ["item_4746983", "item_4491867"];
for (x in divArray) {
if (x) {
document.getElementById(divArray[x]).style.display = 'block';
}
}
<button onClick="toggleCharts();">Charts</button>
and this:
#item_4746983 {
display:none;
}
#item_4491867 {
display:none;
}
item_4746983 & item_4491867 are thumbnails that I want to show or hide when you click on charts
The code works and they display when I click the button but I can't figure out the code to hide them by clicking on it again.

Instead of styling by id, style by class:
.hiddenThumbnail {
display:none;
}
Then apply and remove the hiddenThumbnail class to and from the two items. This makes your css code smaller, and makes everything generally more maintainable. See this excellent answer for a guide on how to modify the classes.
Alternatively, use a library like YUI to do it (I'm sure jquery has similar functions also).

Check if the div is shown already and change the display. The following code should work.
var div = document.getElementById(divArray[x])
var shown = div.style.display;
if ("block" == shown) {
div.style.display = none;
} else {
div.style.display = block;
}
Here is a link that shows various ways of doing what you want:
http://www.dustindiaz.com/seven-togglers/

Check the demo.
function toggleCharts() {
var divArray = ["item_4746983", "item_4491867"], i, ele;
for (i=0; i < divArray.length; i++) {
ele = document.getElementById(divArray[i]);
ele.style.display = ele.style.display === 'block' ? 'none' : 'block';
}
}