Develop Reference

Hide or remove div with dynamic class name

I had a problem that a new dynamic div is added with the dynamic class name while the page is refreshed every time.
For example
<div class="ABGeGGCcJeBCDEGD" data-app-name="">
Here the class=" ABGeGGCcJeBCDEGD", when I reload the page the class name is changed automatically.
So, I need to remove or hide that div.
Note
The div is not present in the code side, but it is created dynamically.
Thanks in advance

You should find another way to identify div instead of class name, e.g. DOM tree.
Also you can try to make "white list" of visible divs. Something like
Make ALL divs hidden
Get white list and show divs with these classes.

You can use event on id
Example is here.
$('#testDiv'). remove()
Let me know if this case is not going to work

You have 3 options, as far as I can see.
1. Does the class always start or end the same way?
If so, you can target that in CSS.
div[class^="ABGe"] { display: none; }
div[class$="DEGD"] { display: none; }
2. Does the element have any other classes or attributes that you can target.
If so, you can target them in CSS instead.
div[data-app-name] { display: none; }
3. Can you modify the markup?
If so, you can wrap the element in something that won't change.
<div class="hide-contents">
<div class="ABGeGGCcJeBCDEGD" data-app-name="">
</div>
You can then target that in CSS.
.hide-contents > div { display: none; }
I hope one of those options is useful.

Changing the Style Attributes in javascript use className

HTML
<h1>Changing the Style</h1>
<p>JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="openMe()">Open!</button>
<button type="button" onclick="closeMe()">Close!</button>
<p id="demo">Extra details...You can open and close this paragraph using the buttons above.</p>
CSS
.close {
display: none;
}
.open {
display: block;
}
button {
width:150px;
background-color: #00CCEE;
margin-left:15px;
font-size:120%;
}
#demo {
color:white;
background-color: #7F7F7F;
padding:10px;
font-size:120%
}
JAVASCRIPT
function closeMe(){
x=document.getElementById("demo");
x.className="close";
}
function openMe(){
x=document.getElementById("demo");
x.className="open";
}
Can I use Like x.IdName= "close"; In Javascript?
So far I know there are two ways to change style attributes using Javascript.
x = document.getElementById("demo");
directly eg.. (x.style.backgroundColor ="red";
by Class name eg.. (x.className="abc";)
for using class name we do use:
x = document.getElementById("demo");
x.className="abc";
My questions:
Can I use Id to change style attributes insted of useing className? if yes Please show.
Can I call "x" {x=document.getElementById("demo");} a variable?

There are three ways to modify the style of an element with JavaScript:
Modify the inline style. This is represented by the .style property on the element and the style attribute on the HTML tag.
Modify any feature of the element so that selectors on rulesets in the stylesheet start and or stop matching it. e.g. .foo { ... } would match elements that are members of the foo class, so if you modify the .className property to add or remove an element from that class, you will change the rules that apply to it. You can change other factors such as the id (not usually a logical idea), arbitrary attributes, or anything else that a selector exists for.
Modify the rulesets in the stylesheet itself.

You've already modified the style attribute of the element in your example.
x.style.backgroundColor= "red";
This is what modifying the style attribute is. The second example you edit the elements class name. I'm assuming what you mean is if you can apply styles to elements, using ids?
If that's the case, you can style elements by using the class selector which looks like this
.className {
/* Some styles */
}
Or with the id selector
#demo {
/* Other styles */
}
The two examples above either need to go into their own stylesheet, or inside the HTML in a <style></style> element.

document.getElementById selects element having certain ID. When You want to select elements by a classname, you can use i.e. document.querySelector('.your-class') to select nodes containing your-class className.
When You write
x = document.getElementById("demo");
x.style.backgroundColor ="red"
You are setting style using Id to select a node.
In the line x = document.getElementById("demo");x is the variable.
After running this line, the value of this variable is set to whatever function document.getElementById("demo"); returns. In this case, it's pointing to DOM element with Id attribute "demo".

Show and hide different elements on focus

I've been researching some ways to show and hide HTML elements, and I ended up finding this.
My intention is to use a way to show and hide elements without the need to use JavaScript, JQuery, or anything else other than CSS and HTML, so I opted for the use of the attribute "tabindex", and then I created the following simple case of study...
HTML:
<div id="root" tabindex="1">
<div>DIV A</div>
<a class="hidden" href="http://www.google.com">LINK</a>
<div class="hidden">DIV B</div>
<input class="hidden" type="submit" value="input"/>
</div>
CSS:
.hidden
{
color: red;
display: none;
}
#root:FOCUS .hidden
{
display: block;
}
If you look according to the code, the inner div can be easily clicked and selected. However, the link and the button unfortunately can not be clicked or selected. In an attempt to do so, the focus of root div is lost.
My question is very simple. Is there one, or different ways that this can be bypassed / solved without the use of JavaScript or JQuery or something? (CSS and HTML only)
If it was not clear, my intentions are to hide elements so that when they are revealed they can be used. I would like to create a menu that contains submenus, and the submenus appear only when their parent menu is clicked (and not when the mouse passes over them).
Ah! And I have to mention ... I also found a solution that uses checkbox. Unfortunately, this is not feasible, because I would not have to click again on the element so that it is hidden. That is, I'd like just click outside of the element make it to hide its internal element, so I opted for the "tabindex".
Thanks in advance for your attention and patience.

You should add the FOCUS to the hidden class as well so the focus is not lost when selecting those.
#root:FOCUS .hidden,
.hidden:FOCUS
{
display: block;
}

The problem in your code is that whenever you are clicking a hidden class child element, the parent element is losing focus. Thus the css style is applying to default which is to hide the child elements with hidden class.
I think this can be solved using javascript.
function focusRoot(e) {
e.currentTarget.parentElement.focus();
return;
}
var root = document.getElementById('root');
var cs = root.children;
for (var i = 0; i < cs.length; i++) {
var c = cs[i];
c.onfocus = focusRoot;
}
Working fiddle

How can I organize interaction between two divs?

I have two div on page. One of them is hidden, and another one is visible. Both of them is on the same place, and form layers. The first is on background (we don't see it), and the second is overlay (we can see it).
I want to have button to be able to switch visibility of div. When I press the button it must change visibility of div (fist does to the background, the second goes to overlay).
How can I do it with jQuery?
UPD
Here is my try http://jsfiddle.net/0qth6jdn
The problem is I don't know how to make layers with div.

If you just need to change the visibility, Jquery's .toggle() may be the easiest way to go.
Jquery Toggle Docs
If you set both div's classes to be the same, even easier. Just call toggle on the button's click event:
$(".myClass").toggle();
Here's a simple example:
JsFiddle Example
EDIT
Here is your own fiddle updated. Instead of visibility: hidden, I've changed your style to display: none;, as it allows you to use Jquery's .toggle() without having to check for any condition:
Your JsFiddle Updated!!

Do this when your button is clicked (you have to change IdOfDiv1 and IdOfDiv2 to your actual div ids):
$("#IdOfDiv1").toggle();
$("#IdOfDiv2").toggle();

You can do like this:
You create a <input type="checkbox"> ABOVE THE <div> you want.
You give it a nice id like 'div-toggler`.
You set this css:
#div-toggler ~ #your-hidden-div {display:none;}
#div-toggler:checked ~ #your-hidden-div {display:block;}
You create a new <label for="div-toggler"> inside the other <div>
Style it the way you wish, to look like a button.
If you care about old browsers, that don't support :checked on css, use [checked] instead.The you create a <label onclick="var e=document.getElementById(this.getAttribute('for'));e.setAttribute('checked',e.checked);" for="div-toggler"> if it doesn't work after the css change.
UPDATE:
After seeing the new update, it's clear:
if ($('#first').visibility == 'hidden' && $('#second').visibility == 'visible'){
should be
if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
UPDATE 2:
Actually, this is the right code:
window.replaceDiv=function() {
if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
$('#first').css('visibility','visible');
$('#second').css('visibility','hidden');
}
}
Here it is: http://jsfiddle.net/gughtms7/

There are a million ways to do this. If both divs have an id, you can simply toggle them, like so:
$('#id-of-your-button').on('click', function(){
$('#id-first-div').toggle();
$('#id-second-div').toggle();
});
Another way would be to toggle a class on a parent element:
$('#id-of-your-button').on('click', function(){
$('#parent').toggleClass('switch');
});
And than apply all changes via css
#parent #id-second-div {
display: none;
}
#parent.switch #id-first-div {
display: none;
}
#parent.switch #id-second-div {
display: block;
}
It all depends on your situation

alter divs css with javascript

Can I change style of some div link. Here is what I mean
<div id="somediv">something/div>
Lets say I have css like this :
#somediv a{
color:#000;
}
Now for instance upon some action such as mouse click on any element I want to change somediv a link css to
#somediv a{
color:#00ffff;
}
I know how to select div, by using Document.get.elementById('somediv') Is it possible to select a by using above method or any other?
Thank you
DETAILS: Yes I know how to select it using jquery, or prototype .. I can't use any of those..

If you just want to apply a style to a particular element, it's very easy to do:
document.getElementById('whatever').style.color = '#f0f';
If you actually want to apply cascading styles (eg: #someDiv a), then it's not so easy (though it is definitely possible). I would suggest applying a new class to something, and having a pre-existing rule in your CSS.
CSS:
#someDiv a {
color: #000;
}
#someDiv.awesome a {
color: #f0f;
}
Javascript:
document.getElementById('someDiv').className = "awesome";

Yep, you can modify the actual CSS rules at runtime. See Totally Pwn CSS with Javascript for more details.
If you're using jQuery or YUI, there's some good info in question 1079237

document.getElementById ( 'somediv' ).children[0].style.color = 'new color';
assuming the A tag will be the first element inside your DIV

You could use CSS behaviors for this:
For instance:
#somediv a:hover
{
color:#0ff;
}
Otherwise, you may create a dedicated class (used when an element is click for example):
#onclickclass
{
color:#0ff;
}
Then in JavaScript, on onClick event, do:
document.getElementById('somediv').className = 'onclickclass';

And to change the style use
document.getElementById('somediv').className = 'your-css-class';

If you really want to select the anchor you would have to then traverse the document.getElementById('somediv').children array.
As others have suggested though the simpler answer would be to set the className attribute on your div and let the CSS style cascade onto the anchor tag.