Show and hide different elements on focus - javascript

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

Related

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.

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

jQuery set class not working after its already been set

trying to make a simple expanding heading script.
I don't wish to use accordions and just looking for a light weight home made solution. As i enjoy writing and learning things myself.
In my eyes, what i have should work. But it doesnt.
The aim is:
When a heading is clicked, all of the content is hidden and then the next content element after the heading is shown. This prevents more than one content being shown at any time.
After this, the div class gets changed to be a 'selected' state.
This works okay.
However, the next part runs if the heading class is the selected state, and if so it SHOULD change its class back to the normal and also hide the next element content.
The aim is to allow the hide / show options.
The latter part of changing back the class doesnt work however. I also know there is a much for efficient way of writing this, but not sure how.
JS:
$(function() {
$('.headingHelp').click(function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$('.headingHelp_sel').click(function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
});
Example HTML:
<p class="headingHelp">Content Heading</p>
<div class="infoHelp">
Content
</div>
<p class="headingHelp">Content Heading 2</p>
<div class="infoHelp">
Content 2
</div>
JSFiddle: http://jsfiddle.net/C7bHn/1/
Thanks in advance!
Since your "selected" class is added after the DOM is loaded, jQuery is not aware of it.
I suggest using jQuery's on() for delegated events. This will allow you to select dynamically generated classes:
$(document).on('click','.headingHelp',function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$(document).on('click','.headingHelp_sel',function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
Working Example (jsfiddle)
Edit:
Here's another method without using delegation. It just adds/removes a "sel" class rather than changing the class completely.
$('.headingHelp').click(function(){
// save clicked element in a variable for use below
$this=$(this);
// remove / add "selected" class
$('.headingHelp').removeClass('sel');
$this.addClass('sel');
// fade in / out content
$('.infoHelp').fadeOut();
$this.next('.infoHelp').stop().fadeIn();
});
.infoHelp {
display: none;
}
.headingHelp {
background-color:#999;
padding: 1%;
cursor: pointer;
color: white;
}
.headingHelp:hover,
.headingHelp.sel {
background-color:#666;
}
Working Example (jsfiddle)
jQuery selector working "AT CURRENT MOMENT" . Your selector $('.headingHelp_sel') empty when running this code.
Best code:
$(function() {
$('.headingHelp').click(function(){
var open = $(this).next('.infoHelp').is(':visible');
$('.infoHelp').fadeOut();
if(!open)
{
$(this).next('.infoHelp').fadeIn();
}
});
});

Passing HTML and CSS to Javascript

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

Adapt my js code to an input

I have this javascript code that creates a slider:
http://jsfiddle.net/samccone/ZMkkd/
Now, i want to use this code on a checkbox input. the problem is that the code creates a child element that slides in it's parent using a css position, and an input cannot have a child.
My idea was to use background-position and just slide the background of the input from left to right using css instead of using real positioning.
How can I adapt this script? It is quite easy I think but after a couple of tries I just gave up, i'm not good enough :).
Thanks for your help,
Christopher
Believe it or not, for checkboxes a switch effect is possible to create without JavaScript.
If you follow your checkbox with a label:
<input type="checkbox" id="jim" />
<label for="jim"></label>
You will find that you can select the label with the next sibling selector:
input + label { /* some CSS */ }
Why is that useful? Because using the pseudo selector :checked you can now style the label based on the state of the checkbox:
input + label { background-position: 0 0; }
input:checked + label { background-position: 100% 0; }
Clearly, due to the for="jim" attribute, clicking on the label will change the state of the checkbox. So if you hide the checkbox, you end up with a styled, clickable label.
input { display: none; }
Of course, labels can have children so you can be as fancy as you want with your recreation of a switch. And you should be careful to include :focus styles as well, for people who tab to your checkbox rather than click on it.
For browsers that do not support the :checked pseudo class (IE8 and below), it's pretty easy to emulate with a global handler and a 'checked' class. Something like:
jQuery(document).bind('change', function(e){
var elem = jQuery(e.target);
// If this is not a checkox, do nothing.
if (elem.attr('type') !== 'checkbox') { return; }
// Add or remove checked class based on current state.
if (elem.attr('checked')) { elem.removeClass('checked'); }
else { elem.addClass('checked'); }
});
...should do it.
You might need to store some data in object properties (or the .data() api), but your background position idea should work just fine. Just replace your calls to .offset().left with .css('background-position') (you'll have to split and parseInt the string it returns tho) and keep plugin' away at it.

Categories

Resources