Develop Reference

Focus trap in a dialog modal and after exiting, focus on the last element clicked

I have multiple modals with different id's.
<div id="#Modal" tabindex="-1" class= active" style="left: Opx;" role="dialog" >
<div id="#Modal-text' tabindex="0">
<div class="container">
<div class= close-btn">
<a class="closer noprint href=" javascript:void(0) aria-label="Close dialog" tabindex="0"></a>
</div>
</div>
<div class= content">..modal content goes here</div>
<div class="focus-guard" tabindex="0"></div>
</div>
<div id="#Modal-anothertext' tabindex="0"></div>
<div id="#Modal-sample' tabindex="0"></div>
</div>
The jquery function add a focus guard div and add an event listener to it whenever a tab or keyboard navigation, through it, it will go again to the close button:
"use strict"
jquery(document).ready(function ($) {
// Check if modal exists
if ($(" [id+='Modal-']").length {
// Check id's if containstring of 'Modal-' and check if modal has child with #focus-guard
if ($("[id*='Modal-']").find("focus-guard").length === 0) {
console.log("does not exist");
const focusGuard = document.createElement("div");
focusGuard.setAttribute("class", "focus-guard");
focusGuard.setAttribute("tabindex", "0");
// Add focus guard to parent
$("[id*='Modal-']").append(focusGuard);
// The closer button is being added in the DOM upon clicking modal, that's why I used DOMNodeInserted
$(document).bind("DOMNodeInserted", function (e) {
if (e.target.className="container") {
const close = document.querySelector(".closer");
console.log(close);
focusGuard.addEventListener("focus", () => {
close.focus();
});
}
});
}
});
}
Have tried also some possible selectors and isolating a single modal.
Unfortunately, the eventlistener on focus guard div does not trigger and I cannot target speciffically the "closer noprint" class.
I know it's not right to have a selector like an array("[id=Modal-]"*) to refer to the parent element of the modal but since it's multiple, not sure if this will be the right thing to do. Might there be a simple solution for this one.
Also stuck with a function that focuses on the last item clicked after dismissing the modal.

How to show container on click with Localstorage?

I'm trying to show container on click with localstorage. I mean that when you click the button, CSS classess:is-hidden and is-visible will be saved and remembered by browser.
This is my code:
var comments = document.getElementById("js-comments");
if (comments) {
comments.addEventListener("click", function() {
localStorage.setItem('comments', 'true');
comments.classList.add("is-hidden");
var container = document.getElementById("js-comments__inner");
container.classList.add("is-visible");
if (localStorage.getItem('comments') == 'true') {
container.classList.add("is-visible");
}
});
}
HTML markup:
<div class="comments">
<button class="comments__button" id="js-comments">Load comments</button>
<div class="comments__inner" id="js-comments__inner">
<h3 class="h4">Comments</h3>
</div>
</div>
Idea is: when you click on the button and the comments__inner elements then they receive the CSS clasess.

Javascript create button and trigger onclick function on HTML

I'm facing an issue , where the javascript is responsible to create the button then show it on HTML( Pop up box ).
Once it's created, i want the user to freely click a button to close it.
The workaround is by setting the modal.style.style=display
.
In the HTML:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close'>×</span>
<div id ="sub" >
</div>
</div>
I have a function to create a modal box upon getting success variable, i'm appending to the id sub.
div.innerHTML =
"<div id=''><span class='close'><input type='image' id='vicious' onclick='clear()' style='width:100%;' border='0' src='images/DUK.png' ></span></div>"
When it shows on HTML, i want to trigger an onclick function to close this modal box.
Because everything is created by the javascript, so I think the issue it's not triggering any line.
I've tried creating an onclick function to trigger
var modal = document.getElementById('myModal');
function clear(){
modal.style.display = "none";
}
I've also tried
var modal = document.getElementById('myModal');
var vicious = document.getElementById("vicious");
vicious.onclick = function() {
modal.style.display = "none";
}
I'm out of idea, could someone guide me?
Thanks in advance.
JSBIN: http://jsbin.com/rusapudodo/edit?html,js,output

As you are using jQuery, you can achieve hiding of modal as per below steps,
Remove binding of click event, onclick='clear()'. This is not needed.
Bind listener to the element with id as vicious using,
$('#vicious').click(function() {
$('#myModal').modal('hide');
});
Alternatively try the following approach,
$("#vicious").on("click", function(e){
$("#modal").modal("hide");
e.stopPropagation();
});
Stop the event from bubbling up.
If you want to use vanilla javaScript onlt then include the following code after you set the inner html,
var btn = document.getElementById("vicious");
btn.onclick = function() {
alert();
modal.style.display = "none";
}

You can try something like that :
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close' onclick="close()">×</span>
<div id="sub">
</div>
</div>
</div>
</div>
<script>
function close(){
document.getElementById('myModal').style.display = 'none';
}
</script>

You need to move the selector inside the function:
function clear() {
var modal = document.getElementById('myModal');
modal.style.display = "none";
}
EDIT: using your second technic:
div.innerHTML = ...;
var vicious = document.getElementById("vicious");
vicious.onclick = clear;

For disabling button, you can use the below code
$("#button0000000001").find("button").attr("disabled", true);

hide all but one element of certain class in Jquery

I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});

Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});

Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/

Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example

How to use Javascript or Jquery to toggle the visibility of a html div

I'm creating a basic site and I've got the following script that hides a div:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Show/Hide Description
<div id="description">
<br>
<br>
<p>This is a test paragraph</p>
</div>
When I load the page, the default is that the text is shown. How can I hide the text inside the div each time the page is loaded?
I want the user to manually click the button to view the text.
EDIT:
I've now added a picture of a + symbol, so that a user can click the + and the text appears by using the following lines:
<h4>Backstory</h4>
<img alt="" style="width: 20px; height: 20px;" src="./images/headerExpand.png" a href="#" onclick="toggle_visibility('backstory');">Show/Hide Description</a>
<div id="backstory" style="display: none">
<br>
<p>This is a new block of text</p>
</div>
The ./images/headerExpand.png is the icon of the + symbol
How would I change the + icon to a - icon once the + icon has been clicked?
Thanks.

set the display to none
<div id="description" style="display: none">
A redesigned solution might look like
<!-- Add a class toggler and the id of the target element as the href-->
Show/Hide Description
<!-- Add a class hidden so that the element is hidden when the page loads -->
<div id="description" class="hidden">
<br/>
<br/>
<p>This is a test paragraph</p>
</div>
CSS
.hidden {
display: none;
}
then jQuery script
// dom ready handler
jQuery(function () {
//register a click handelr for all anchor elements with class toggler
$('a.toggler').click(function (e) {
//prevent the default action of the event
e.preventDefault();
//togger the visibility of the element targetted by the href
$($(this).attr('href')).toggle()
});
})
Demo: Fiddle

use symply CSS :
<p style="display:none;">This is a test paragraph</p>

you have 2 options , set the css property right in the html like the other answers
<div id="description" style="display: none">
or wrap your javascript in something to tell the page to run the stript on page load
using jQuery
$(document).ready(function(){
//your code
});
or
$(function(){
//your code
});
or regular old javascript
window.onload = function(){
//your code
});