I need to find a way to pass the visible div to javascript. This may not even be the best way to accomplish what I'm trying to accomplish, so I'm open for other suggestions.
All my site content opens in a single overlay. When a button is clicked in the navigation, that content opens in the overlay. When another button is clicked, that content replaces the current content in the overlay. And so on.
The best identifier (that I've spotted) of which overlay is open, is (CSS) display:block...and all the hidden divs are display:none....
So I want to pass which div has the display:block to javascript (Note: all the div's have unique ID's)
I'm sure this is something easy, But I can't seem to find it...
Thanks in advance for your time!!
Each HTML element in JS has style property. You can read and change element style by calling for example
document.getElementById('id').style.display
So you don't need to pass anything to JS, it's already there.
By reading your question it sounds like you need to identify which of your divs is the visible one. The easiest way to do that is add a class to all your divs with content, you can then use document.getElementsByClassName() to get a list of them and loop through to find which one is visible one based on a display property of block.
<div class="content" style="display: none";>a</div>
<div class="content" style="display: block;">b</div>
<div class="content" style="display: none";>c</div>
<div class="content" style="display: none";>d</div>
<div class="content" style="display: none";>e</div>
var elements = document.getElementsByClassName("content");
for(i = 0; i < elements.length; i++)
{
if (elements[i].style.display == 'block')
{
// elements[i] = this is the visable div
alert('This elements[i] has a display of block; contents = ' + elements[i].innerText);
}
}
The above script will output/alert 'b' as it is the visible div found.
Fiddle link
Related
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
I have dynamically generated content which I'm outputting using two divs:
<div id="data1">Some info</div> -- <div id="data2">different info</div>
I want to only show "data2" in certain instances, so I'm trying to use JavaScript to hide it when it's not needed. Basically, my code is:
var getDivs = document.getElementById('data2');
IF STATEMENT {
getDivs.style.display='none'; }
However, this is only kind of working - it's hiding the very first div that it comes across, but it's not hiding ALL of the divs with that ID.
This means that my code is basically correct - the IF STATEMENT is working, the display='none' DOES hide something, it's just not hiding everything that it should...
I tried to change it from div id= to div class= and instead use document.getElementByClassName('data2') but that doesn't seem to be working at all - it doesn't even hide the first .
What am I missing / doing wrong? What do I need to change to get this to hide all of the divs that are "data2"?
Thanks!
Your code seems fine. You can see it works: http://js.do/code/zeek
Later Edit:
Using class instead of id:
<div id="data1">Some info</div> --
<div class="data2">different info</div>
<div class="data2">different info</div>
<div class="data2">different info</div>
<script type="text/javascript">
var getDivs = document.getElementsByClassName('data2');
for(var i= 0; i< getDivs.length; i++){
var div = getDivs[i];
div.style.display='none';
}
</script>
Use jQuery and select by class instead of by ID. See http://api.jquery.com/class-selector.
jQuery is not only easy and readable, you'll also not write getElementByClassName instead of getElementsByClassName.
$('#data2').hide();
This assumes jQuery is on your page: http://api.jquery.com/
Note: You're going to have problems if this is dynamic and there are several elements with the ID of data2. Instead, use classes for selecting relevant divs if you can help it.
I am trying to write a small script that will automatically reveals/hides the content of a div when the mouse gets over/out of it. What I wanna do is to have the title visible and when someone mouseover the title some more text to get visible.
The problem is that I want to show/hide only a specific inner div of any given element and not to hide the entire element. I do have lots of elements so to handwrite javascripts for every single of them is a bit silly
My HTML code goes like:
<li id="job1" onmouseover ="div2mouseover(this)" onmouseout="div2mouseout(this)">
<div style = "display:none" id="jobDescription">
<p> Blablabla</p>
</div>
<li>
My JavaScript code goes like:
<script type="text/javascript">
function div2mouseover(obj)
{
//obj.style.display = "none"; //I can reach that
obj.getElementById("jobDescription").style.display = "initial"; //I can't reach that
}
</script>
So with the obj.style.display I can edit the visibility of any given element, but I can't reach its inner div that I am trying to reach.
I have managed to do that for a single element like this:
document.getElementById("jobDescription").style.display = "initial";
But with this way I have to write a script for all my job elements, which are a lot.
Any suggestions??
You can reference elements by their position too.
For example if the div you want to display is always the first div inside the "hover" li you can do
function div2mouseover(obj) {
var div = obj.getElementsByTagName("div")[0];
div.style.display = "initial";
}
You don't need any IDs in the divs if you do it like this.
The comment from the friend nnnnnn solved my case.. (maybe the other answers might work as well)
ID is supposed to be unique. Use a class instead, and use obj.querySelector(".classNameHere") – nnnnnn 12 mins ago
Thank you guys!
I have various questions on my faq page like this
<h3>How to signup?</h3>
<div class="info" style="display:none">
This is the hidden answer
</div>
The answer is hidden and when the user clicks on the link the div below it appears.Though I can do this using jquery easily but I don't want to make the page heavy so I simply using the following function
function toggle_display()
{
var answers=document.getElementsByClassName("info");
for(var i=0;i<answers.length;i++)
{
//hide all the divs first
answers[i].style.display='none';
}
//return block as style so that the caller's div answer can be set to block
return 'block';
}
But I am having problem accessing the next sibbling div of the link.What should I substitute in the following line
<a href="#" onclick="**this.parent.nextSibbling**.style=toggle_display()">
If you want to get the next sibling of parent node then your code should be like this.
this.parentNode.nextSibling
For ignoring text dom nodes and get the right one element use:
this.parentElement.nextElementSibling.style = ......
I have this javascript that animates a div into a parent div.
Javascript
$(document).ready(function() {
$("a").click(function() {
var $righty = $(this).next();
$righty.animate({
right: parseInt($righty.css('right'),10) == 0 ?
-$righty.outerWidth() :
0
});
});
});
HTML
<div id="home" class="page">
<div id="page1">
Inside Div
</div>
Outside Div
<div id="page2" class="page">
content
</div>
</div>
I want the <a> tag to live in the page1 div. As of now, the Javascript only works when the <a> tag lives in <div id="page1">. I apologize if this is very basic, as I am new to Javascript. Thank you!
Use a selector for your a tag, instead of just a. Like a class or an id. You don't want this to happen to every single a tag, right?
Also, righty is getting NEXT...well, there's nothing next to the a tag you want to hit.
You want to do $(this).parent().next(); - no, see edit below. I am guessing, because you never told us what you wanted, exactly.
EDIT: This may not help at all. Just know that you can't have an a tag in a div, and call .next() - it has no siblings. .next() hits the next sibling. Not as it appears visually on the page, but as it exists in the DOM tree....you need to have a sibling in the div for the a tag to grab with .next().....you don't. Does that make sense? What exactly are you trying to animate?
EDIT EDIT: Tell me the id or class of the tag you want animated when a given a tag with a given class or id is clicked, and I'll show you how to do it.
EDIT EDIT EDIT: If you just want to make page2 animate when page1 > a is clicked, do this:
$('#page1 a').click(function(){ $('#page2').animate(...put animation stuff here...) });