My goal is to have my div menu disappear when I click anywhere else on the page. Below is the code that opens and closes my code when clicking on the two divs themselves.
var content_nav = '';
var content_select = '';
window.onload=function(){
content_nav = document.getElementById("content_nav");
content_select = document.getElementById("content_select");
content_nav.addEventListener("click", show_or_hide);
}
function show_or_hide()
{
if(content_select.style.display!="block") content_select.style.display="block";
else content_select.style.display="none";
}
You should listen to the click event on the whole page and hide the menu if the click was outside content_nav, try this (you might need to tweak it to make it work, I do not know your HTML):
$(document).click(function(e){
if (! $(e.target).closest('#content_nav').length )
$('#content_nav').hide();
});
Related
So, I am writing a code for my webpage that if you have one of two boxes open (registration, login) you can't open another one. I'm stuck with the following problem: once you close the box with pressing the mouse out of the box, value changes to 1 and you should be able to open the box again but all of a sudden it sets itself to 0 and you can't open the box anymore.
IF you close the box with CLOSE button, you CAN open the box again but not with pressing outside the box.
At the start of JS file I declare var openable and set value to 1.
var openable = 1;
Code for closing with CLOSE button:
$("#closeReg").click(function(){
openable = 1;
console.log(openable);
$('#register').css('display','none');
$("#register").siblings().css("opacity", "1");
});
Code for pressing out of box:
var subject = $("#register");
if(e.target.id == subject.attr('id')){
subject.fadeOut();
subject.siblings().css("opacity", "1");
openable = 1;
console.log(openable);
}
Code for opening the box:
$("#regButton").click(function(){
console.log(openable);
if(openable == 1){
$("#register").fadeIn();
$("#register").siblings().css("opacity", "0.5");
openable = 0;
console.log(openable);
}
});
Whole code:
https://pastebin.com/vC461VGy
var openable = 1;
$("#closeReg").click(function() {
openable = 1;
console.log(openable);
$('#register').css('display', 'none');
$("#register").siblings().css("opacity", "1");
});
$("#regButton").click(function() {
console.log(openable);
if (openable == 1) {
$("#register").fadeIn();
$("#register").siblings().css("opacity", "0.5");
openable = 0;
console.log(openable);
}
});
$('body').click(function(e) {
if ($(e.target).closest('#register').length <= 0 && !$(e.target).is('#closeReg') && !$(e.target).is('#regButton')) {
$('#closeReg').trigger('click');
}
});
#register {
background-color: #FFAAAA;
}
body {
height: 200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="closeReg">Close</button>
<button id="regButton">Open</button>
<div id="register">
register box
</div>
Here, try this sample.
Your code for hiding when clicking outside was not working correctly, mainly because e is undefined and even if we consider it to be a click event your test was wrong.
The main difficulty is to detect the click outside the box without detecting the click that opens it, or you will end up opening and closing at the same time. Hence why I added the two tests to make sure the targets aren't buttons that handle specific behaviors.
Also, instead of doubling the code to close the modal, I have made it so when you click anywhere, it triggers a click on the close button, that way only one event is to be kept up to date. Note that this could also be do-able by creating your own event instead but meh...
I have a procedural feed within my website which loads in data every time the user scrolls to the bottom of the page; the usual stuff.
The pagination itself works fine; however, the clicking of buttons which utilize JavaScript do not work. At all.
This is the JavaScript trigger for the buttons which is not working:
var modalTrigger = document.querySelectorAll(".ts-modal__trigger"), // the buttons
modal;
document.onclick = function(e){ // document on click
for(var i = 0; i < modalTrigger.length; i++){ // iterate through each button
if(e.target == modalTrigger[i]){ // if target clicked was button
e.stopPropagation(); // stop dom event from bubbling
modal = document.getElementById(modalTrigger[i].getAttribute("data-activemodal"));
document.body.style.overflow = "hidden"; // disable scroll on page
modal.style.display = "block"; // display modal
}
}
}
As far as I'm aware, this should be working (with the use of stopPropagation()), but alas, it does not.
I was going to use Inline JS, but I feel like it's extremely unnecessary and could be done it just a couple of lines of separate JavaScript, instead of adding extra HTML into the mix for no reason.
So any, and all help is appreciated,
Thanks. :)
Fiddle: https://jsfiddle.net/xhp4cesr/
EDIT: I noticed that after removing the span within the button, it would work, but as soon as it was added back, it would not.
One way you can do this is to remove e.stopPropogation and also target the children
var modalTrigger = document.querySelectorAll(".ts-modal__trigger"), // the buttons
modal;
document.onclick = function(e) { // document on click
for (var i = 0; i < modalTrigger.length; i++) { // iterate through each button
if (e.target == modalTrigger[i] || modalTrigger[i].children) { /* <- added children as target */
modal = modalTrigger[i].getAttribute("data-activemodal");
console.log(modal);
}
}
}
a {
background: red;
padding: 40px;
}
span {
color: yellow;
}
<a class="ts-modal__trigger" data-activemodal="ts-main-feed_status-comments-overlay">
<span>11</span>
</a>
I'm working on this website www.betamaths.eu
When a user had clicked inside one of the divs that have placeholder text and then click a button on the left, I would like the text from that button to append inside the div.
I have this code from another user which appends or prepends text ouside the div (not what I am looking for. You can test it with the lowercase alpha button in the menu on the left of the webpage listed above if you wish to get a better understanding.
<script type="text/javascript">
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#answer_step1').on('click','div',function() {
focusedElement = this;
});
$('#alpha').on('click',function() {
$('#answer_step1').prepend('<div>Test'+No+'</div>');
No++
});
});
If I change the line
$('#answer_step1').append('<div>Test'+No+'</div>');
to
$('#answer_step1').append('Test'+No);
nothing happens. Any help is appreciated. If I can get one of these working, the rest will be easy.
You must have a syntatically error in your code, because I used your same code and was able to accomplish the append();
HTML:
<button id="alpha">
Click
</button>
<div id="answer_step1">
hi
</div>
Javascript:
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#answer_step1').on('click','div',function() {
focusedElement = this;
});
$('#alpha').on('click',function() {
$('#answer_step1').prepend('Test' + No);
No++
});
});
https://jsfiddle.net/typtzr7z/
I have two pages. The first has a slideshow that allows me to add links for each slide. The second page has numerous expanding div's that are expandable/collapsible onclick using this show/hide function:
function showtxt(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidetxt')?'showtxt':'hidetxt';
}
}
Then each expanding/collapsing div on that page has its own function to call it when clicked:
function ANCHORbutton() {
var img = document.getElementById('expANCHORbutton').src;
if (img.indexOf('plus.png')!=-1) {
document.getElementById('expANCHORbutton').src = 'minus.png';
}
else {
document.getElementById('expANCHORbutton').src = 'plus.png';
}
}
What I'd like to do, if possible, is link each slide from that slideshow to the second page, expand the corresponding div, and then jump down the page to the specified anchor.
If I didn't have everything collapsed, it'd be a simple href="http://domain.com/page2.html#ANCHOR", but I'm struggling with how to expand the appropriate section before jumping to my anchor.
Problem 1: Collapsed divs all show so no need for browser to scroll
Problem 2: Hidden divs are not being scrolled to since they are hidden.
Solution could be this at the bottom of the page (onload does not trigger on reload on some browsers)
<script>
var hash = location.hash;
if (hash) {
var divID = hash.substring(1); // remove the #
showtxt(divID);
document.getElementById(divID).scrollIntoView();
}
</script>
</body>
Update to add 100px:
var hash = location.hash;
if (hash) {
var divID = hash.substring(1); // remove the #
showtxt(divID);
var div = document.getElementById(divID);
div.scrollIntoView();
div.style.top=(parseInt(div.style.top,10)+100)+"px";
}
I am trying to load DIV on button click inside another DIV and on another click it should create a new DIV inside the newly created DIV. Here is my fiddle:http://jsfiddle.net/LzCW5/4/ and my code:
HTML:
Generate
<div id='x0'>
0
</div>
JavaScript:
int level=1;
function nestDiv()
{
document.getElementById('x'+(level-1)).innerHTML="<div id='x"+level+"'>"+level+"</div>";
level++;
if(level==5)
//do somthing
}
I also want to perform some special operation when nesting level reaches 5. I am not so pro at JavaScript. So please tell me how can I achieve this?
In your code you only have to change int to var and call the function as a variable:
var level=1;
nestDiv = function()
{
document.getElementById('x'+(level-1)).innerHTML="<div id='x"+level+"'>"+level+"</div>";
level++;
}
You can see this working here
Here's how to append a div in jQuery:
var newDiv = $("<div id='x"+level+"'>"+level+"</div>");
$('#x'+(level-1)).append(newDiv);
This should replace your document.getElementById... line
My understanding as per your question:
When you click a button, add a div to another div.
Now when the user clicks another button, new div must be added in the previously created new div.
so let's break it down:
$("button").click(function() {
if($("#referenceDivId").children().length == 0) {
// if there are no children initially
$("#referenceDivId").append("<div>New div</div>");
} else if($("#referenceDivId").children().length == 5) {
// do your magic when children divs are 5
}
else {
// if it already had children
$("#referenceDivId").find("div:last").append("<div>New div</div>");
}
});
DEMO