So I have a few div tags that I have currently hidden, and I want to display them one after the other by hitting the enter key.
What I want to happen: I hit enter and the first div tag is revealed, and then I hit enter a second time to see the second div tag.
What is happening instead: I hit enter once and both div tags show up.
In this case, the first div tag I want to reveal is "intro", and the second is "body". I am running this website on jsbin, and I am using chrome, if that helps.
This is my JavaScript:
//***********************************************************
// BODY MODULE
var bodyController = (function(){
var enterBool;
var reveal = function(){
if(enterBool){
document.getElementById("evidence").style.display = "block";
enterBool = false;
}
};
var enterListen = function(){
document.addEventListener("keydown", function(event){
if(event.keyCode === 13){
document.addEventListener("keyup", function(event){
if(event.keyCode === 13){
enterBool = true;
reveal();
}
});
}
});
};
return{
enterBoolBody: enterBool,
enterListenBody: function(){
enterListen();
}
}
})();
//***********************************************************
// INTRO MODULE
var introController = (function(){
var enterBool;
var reveal = function(){
if(enterBool){
document.getElementById("body").style.display = "block";
enterBool = false;
}
};
var enterListen = function(){
document.addEventListener("keydown", function(event){
if(event.keyCode === 13){
document.addEventListener("keyup", function(event){
if(event.keyCode === 13){
enterBool = true;
reveal();
}
});
}
});
};
return{
enterBoolIntro: enterBool,
enterListenIntro: function(){
enterListen();
}
}
})();
//***********************************************************
// CONTROL MODULE
var controller = (function(introCtrl, bodyCtrl, evidenceCtrl, infoCtrl,
conclusionCtrl){
var eventListeners = function(){
introCtrl.enterListenIntro();
bodyCtrl.enterListenBody();
};
return{
init: function(){
eventListeners();
}
}
})(introController, bodyController, evidenceController,
infoController, conclusionController);
//***********************************************************
controller.init();
I think you might be over engineering this a bit. All you need is an event listener to check for enter. Then you check if the first div is shown, if not show it. If the first div is shown check if the second div is shown and show it.
Quick note, no IE9 support for classList if that's important to you.
https://caniuse.com/#feat=classlist
(function(window, document, undefined)
{
document.addEventListener('keyup', showDivs, false);
})(window, window.document);
function showDivs(event)
{
event = event || window.event;
var divsToShow = document.getElementsByClassName("Display-Div");
for (var i = 0; i < divsToShow.length; i++) {
if (!divsToShow[i].classList.contains("Block")) {
divsToShow[i].classList.add("Block");
break;
}
}
}
.Hidden {
display: none;
}
.Block {
display: block;
}
<div class="Hidden Display-Div">This</div>
<div class="Hidden Display-Div">Now</div>
<div class="Hidden Display-Div">Works</div>
<div class="Hidden Display-Div">With</div>
<div class="Hidden Display-Div">Any</div>
<div class="Hidden Display-Div">Div</div>
<div class="Hidden Display-Div">With</div>
<div class="Hidden Display-Div">Class</div>
<div class="Hidden Display-Div">Display-Div</div>
You can put the ids of your divs in an array, or you could assign a common class to all divs that you want to appear one by one. Assuming the first, this code simply grabs the id of the next div to display from the array and increments the counter. You could add more divs to the array and it would work.
var divs = ["evidence", "body"];
var counter = 0;
document.addEventListener("keyup", function(event){
if(counter < divs.length && event.keyCode == 13){
document.getElementById(divs[counter]).style.display = 'block';
counter++;
}
});
Related
If keep clicking the same buttons then only fire once. sample: https://jsfiddle.net/h4wgxofh/, For example, if click1 clicked then 2nd time or more times clicks should stop firing, the same as click2 however, if I click the same button, it always fires. Also I want links only trigger once but becomes available if other buttons being clicked. (considering if more buttons) Thanks
HTML
<div class="wrap">
Click1
Click2
</div>
Script
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
clicked = true;
if(clicked = true){
console.log($this.text());
clicked = false;
}
});
I'm probably missing something here, but why not just bind the event to every link in .wrap and unbind it on click like this :
$('.wrap a').on('click', function(){
console.log($(this).text());
$(this).unbind('click');
});
See this fiddle
Edit : after your comment on wanting one link to be rebound after cliking on another, even though it might not be the cleanest solution, this does the job :
var onclick = function(){
var $el = $(this);
console.log($el.text());
$('.wrap a').off('click', onclick);
$('.wrap a').each(function(id, link){
if($el.text() != $(link).text())
$(link).on('click', onclick);
});
}
$('.wrap a').on('click', onclick);
Fiddle again
See the following code
var clicked1 = false;
var clicked2 = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
var clickOrigin = $(this).text();
if(clickOrigin == 'Click1' && clicked1==false){
console.log("Click 1 clicked");
clicked1 = true;
}
if(clickOrigin == 'Click2' && clicked2==false){
console.log("Click 2 clicked");
clicked2 = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>
Also you can find the jsFiddle.
You need to Distinguish between two links(i used text here you may put whatever scenario ) see this example it may help:-
var clicked1 = 0;
var clicked2 = 0;
$('.wrap').on('click', 'a', function() {
var $this = $(this);
var $text = $(this).text();
//Click2
if ($text == 'Click1') {
clicked1 += 1;
if (clicked1 == 1) {
console.log($text);
} else {
return;
}
}
//Click2
if ($text == 'Click2') {
clicked2 += 1;
if (clicked2 == 1) {
console.log($text);
} else {
return;
}
}
});
Full Demo
To disable both buttons after first click, try:
var clicked = false;
$('.wrap').on('click', 'a', function(){
let $this = $(this);
if( !clicked ){
console.log($this.text());
clicked = true;
};
});
To disable each button after first click, try:
$('.wrap a').each(function() {
let $this = $(this);
$this.disabled = false;
$this.on('click', function() {
if ( !$this.disabled ) {
console.log($this.text());
$this.disabled = true;
};
});
});
Every time someone clicks one of the buttons, your script is setting clicked from false to true, checking if the value is true, then setting it to false again. You need to format it like this if you only want the buttons to fire once (obviously you'd have to duplicate this specifically for each button with different IDs):
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if(clicked == false){
console.log($this.text());
clicked = true;
}
});
try this ,much simpler and this will be more useful if you have multiple click buttons
if you had implemented some other way ,this will worth a try
<div class="wrap">
Click1
Click2
</div>
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if($this.attr("data-value") == ""){
console.log($this.text());
$this.attr("data-value","clicked")
}
else{
console.log("Already clicked")
}
});
Fiddle
Instead of putting code on click just on first click disable anchor tag this serve the same thing you wants just find below snippet for more information using this we can reduces round trips to the click functions as well
$('.wrap').on('click', 'a', function(){
$(this).addClass("disableClick");
});
.disableClick{
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>
I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
$(function () {
$('#click1').on("click", function (e) {
$('#click1').on("click", function (e){
e.preventDefault();
e.preventDefault();
});
});
I think its help you.
Just use $(".wrap").one('click', ....
Read the jquery API documentation.
Hi I have multiple divs on the page. I want to raise an alert based on a user hovering over one of the divs and pressing control z. I need to in effect alert out what is in the span dependant upon which div the user is hovered over on.
I have tried with getbyId the problem arises with multiple elements. I am unsure if i need to bind every element.
<div class="mydiv">Keypress here!<span>test</span></div>
<div class="mydiv">Keypress here!<span>test1</span></div>
var pressed = false;
onload = function(e) {
var myElement = document.getElementsByTagName('div');
function keyaction(e, element) {
// var originator = e.target || e.srcElement;
if (e.charCode === 122 && e.ctrlKey) {
//myElement.innerHTML += String.fromCharCode(e.charCode);
alert(true);
}
}
for (var i = 0; i < myElement.length; i++) {
myElement[i].addEventListener("mouseover", function (e)
{
document.addEventListener("keypress", function(t){keyaction(t,e);}, false);
});
myElement[i].addEventListener("mouseout", function ()
{
document.removeEventListener("keypress", keyaction, false);
});
}
}
I think you are overdoing for what is needed. A simple keydown event bind on mouseover and unbind on mouseout would do the trick.
Here's an example :
<div id="wrapper">
<div class="mydiv">Keypress here!<span>test</span></div>
<div class="mydiv">Keypress here!<span>test1</span></div>
</div>
<br>
Keys Pressed :
<br>
<div id="key"></div>
$("#wrapper .mydiv").on("mouseover",function()
{
$(document).bind("keydown",function(e) {
var originator = e.keyCode || e.which;
if(e.ctrlKey)
$("#key").append(originator + ",");
});
}).on("mouseout",function()
{
$(document).unbind("keydown");
});
http://jsfiddle.net/s095evxh/2/
P.S : for some reason , Jsfiddle doesn't allow keydown event on mouseover so you might have to click manually on the div to make it work but the solution works flawless on a local system.
I would suggest that you use the normalized e.which if available. You also have code 122 which is F11 keys code not 90 related to the 'z' key.
Turn the event manager on when over and off when not per your stated desire:
$('.mydiv').on('mouseenter', function () {
$(window).on('keydown', function (e) {
var code = e.which ||e.keyCode;
$('#status').append('we:'+ code);
if (code === 90 && e.ctrlKey) {
$('#status').append('howdy');
}
});
});
$('.mydiv').on('mouseleave', function () {
$(window).off('keydown');
});
Note that I changed to post some text to a fictitious "status" div rather than your alert as that will change where the cursor hovers. Change that to some real action. There MAY be issues with the event bubbling but I will leave that determination to you.
Here is a key code list (google for more/another) https://gist.github.com/lbj96347/2567917
EDIT: simple update to push the span text into the status div:
<div class="mydiv">Keypress here!<span>test</span>
</div>
<div class="mydiv">Keypress here!<span>test1</span>
</div>
<div id="status">empty
<div>
$('.mydiv').on('mouseenter', function () {
var me = this;
$(window).on('keydown', function (e) {
var code = e.which || e.keyCode;
$('#status').append('we:' + code);
if (code === 90 && e.ctrlKey) {
$('#status').append($(me).find('span').text());
}
});
});
$('.mydiv').on('mouseleave', function () {
$(window).off('keydown');
$('#status').text('out');
});
Listen for the keypress on the window and add mouse events to the elements to toggle a variable with what element is active.
var activeElem = null;
$(".mydiv")
.on("mouseenter", function () {
activeElem = $(this);
}).on("mouseleave", function () {
if(activeElem && activeElem.is(this)) {
activeElem = null;
}
});
$(window).on("keydown", function (evt) {
if( activeElem && evt.keyCode===90 && evt.ctrlKey) {
console.log(activeElem.find("span").text());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">Keypress here!<span>test</span></div>
<div class="mydiv">Keypress here!<span>test1</span></div>
To prevent frequent binding/unbinding of the "keydown" handler whenever the user hovers over the <div>, I would simply keep track of the <div> currently being hovered. Something like this:
var hovering = null;
$(document)
.on('keydown', function(e) {
if (e.which === 90 && e.ctrlKey && hovering) {
console.log($('span', hovering).text());
}
})
.on('mouseover', '.mydiv', function(e) {
hovering = this;
})
.on('mouseout', '.mydiv', function() {
hovering = null;
});
.mydiv:hover {
cursor: pointer;
color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">Test <span>1</span></div>
<div class="mydiv">Test <span>2</span></div>
<div class="mydiv">Test <span>3</span></div>
<div class="mydiv">Test <span>4</span></div>
<div class="mydiv">Test <span>5</span></div>
I would propose the other way around. Listen for the keypress, and select the element which has the hover.
$(document).keypress(function(e) {
if (e.charCode === 26 && e.ctrlKey) {
console.log("Key pressed");
console.log($('.mydiv:hover span').html());
}
});
Codepen Demo
If I am understanding your question correctly, you are looking for the text value of the span within the hovered element. Traversing the DOM from $(this) will get you what you want.
$(".mydiv").mouseover(function (e) {
alert($(this).find('span').text());
});
I'm trying to have a page where one div gets shown and then when the user hits the spacebar, that div gets hidden and the next div gets shown. I'm starting out using CSS to set the visibility of all divs to hidden, but when I press space nothing happens.
$divID = 0;
document.getElementById("div0").style.visibility="visible";
function updateDiv(event){
// If the spacebar was pressed
if (event.type == "keydown" && event.which == 32){
// Hide the current div
$doc.getElementById("div" + $divID).style.visibility="hidden";
++divID;
// Move to next div
$doc.getElementById("div" + $divID).style.visibility="visible";
}
}
// Handle events
document.on("keydown", updateDiv);
You're not very consistent, the variable names change as you go, document is not a jQuery object and has no on() method etc.
var divID = 0;
document.getElementById("div0").style.visibility="visible";
function updateDiv(event){
// If the spacebar was pressed
if (event.type == "keydown" && event.which == 32){
// Hide the current div
document.getElementById("div" + divID).style.visibility="hidden";
++divID;
// Move to next div
document.getElementById("div" + divID).style.visibility="visible";
}
}
// Handle events
$(document).on("keydown", updateDiv);
FIDDLE
How about this fiddle?
var ctr = 1;
var max = 3;
$(document).on('keypress', function (e)
{
if (e.which == 32)
{
$('div').hide();
$('#d' + ctr).show();
ctr++;
if (ctr > max)
ctr = 1;
}
});
I changed up your code a little to use jQuery (since it was listed as a tag, I assumed it was available). This code lets you set up as many divs as you want, doesn't show a new div until the old one is hidden, and keep the last div visible once it's reached:
$('div').hide();
$('div:first').show();
$('body').keypress(function(event) {
$visdiv = $('div:visible');
if(event.which == 32 && !$visdiv.is(':last')) {
$visdiv.hide(400, function() {
$(this).next('div').show();
});
}
});
Fiddle for demonstration.
doc is not defined.
you need var doc = document;
You event handler needs to hook to window.
window.addEventListener("keydown", updateDiv);
You don't need $ in front of regular variables.
You're not really using jQuery, so leave it out.
HTML:
<div class="bloc selected">Bloc 1</div>
<div class="bloc hidden">Bloc 2</div>
<div class="bloc hidden">Bloc 3</div>
<div class="bloc hidden">Bloc 4</div>
JS:
$(document).on('keypress', function (e) {
var code = e.keyCode || e.which;
if(code == 32) {
var next = ($('.selected').next('.bloc').length > 0) ?
$('.selected').next('.bloc') : $('.bloc1');
$('.selected').toggleClass('selected hidden');
next.toggleClass('selected hidden');
}
});
CSS:
.selected {
display:bloc;
}
.hidden {
display:none;
}
FIDDLE: http://jsfiddle.net/Zq8j2/2/
How can I detect if a user selection (highlighting with mouse) is within/a child of a certain element?
Example:
<div id="parent">
sdfsdf
<div id="container">
some
<span>content</span>
</div>
sdfsd
</div>
pseudo code:
if window.getSelection().getRangeAt(0) is a child of #container
return true;
else
return false;
Using jQuery on() event handler
$(function() {
$("#container > * ").on("click",
function(event){
return true;
});
});
Edit: http://jsfiddle.net/9DMaG/1/
<div id="parent">outside
<div id="container">
outside
<span>first_span_clickMe</span>
<span>second_span_clickMe</span>
</div>
outside</div>
$(function() {
$("#container > span").on("click", function(){
$('body').append("<br/>child clicked");
});
});
Ok I managed to solve this in a "dirty" way. The code could use improvement but it did the job for me and I am lazy to change it now. Basically I loop through the object of the selection checking if at some point it reaches an element with the specified class.
var inArticle = false;
// The class you want to check:
var parentClass = "g-body";
function checkParent(e){
if(e.parentElement && e.parentElement != $('body')){
if ($(e).hasClass(parentClass)) {
inArticle = true;
return true;
}else{
checkParent(e.parentElement);
}
}else{
return false;
}
}
$(document).on('mouseup', function(){
// Check if there is a selection
if(window.getSelection().type != "None"){
// Check if the selection is collapsed
if (!window.getSelection().getRangeAt(0).collapsed) {
inArticle = false;
// Check if selection has parent
if (window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement) {
// Pass the parent for checking
checkParent(window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement);
};
if (inArticle === true) {
// If in element do something
alert("You have selected something in the target element");
}
};
}
});
JSFiddle
Is there any way to disable onclick events from firing for events on a particular z-index, besides running through all elements and setting their onclick to function(){} if they are on that z-index?
Edit:
At this point, the best I can come up with is to hook each function in the DOM tree recursively:
function preventZIndexClicks(elem) {
// ensure not a text node
if(!elem.popupflag) { elem.popupflag = 1;
if(elem.onclick) { var temp = elem.onclick;
elem.onclick = function(e) {
if(g_threshold > elem.style.zIndex)
return;
temp(e);}
}
}
// Call recusively on elem.childNodes
}
Of course, then I would have to deal with the rather annoying IE issues with setting custom properties on DOM elements...
You could check the z-index in the event and let it bubble through the rest.
function onclick(e) {
if(this.style.zIndex == 10) return;
//do stuff
}
EDIT:
Just to clarify how i mean, consider this:
<div id="div1" style="background-color: red;width:100px;height:100px;z-index:1">
<div id="div2" style="background-color: green;width:50px;height:50px;z-index:2">
<div id="div3" style="background-color: blue;width:25px;height:25px;z-index:3">
</div>
</div>
</div>
With this javascript:
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
bind(div1,"click",click);
bind(div2,"click",click);
bind(div3,"click",click);
function click(e) {
if(this.style.zIndex == 2) return;
alert(this.style.backgroundColor);
}
function bind(element,event,callback){
var onevent="on"+event;
if(element.addEventListener)
element.addEventListener(event,callback,false);
else if(element.attachEvent)
element.attachEvent(onevent,callback);
else{
var e=element[onevent];
element[onevent]=function(){
var h=e.apply(this,arguments),cbk=callback.apply(this,arguments);
return h==undefined?cbk:(cbk==undefined?h:cbk&&h);
}
}
}
Now, the click will work as follow:
click red: -> alert "red"
click green: -> alert "red"
click blue: -> alert "blue" -> alert "red"
As you see the green element with z-index:2; will not "fire" the event
What about something like:
<script type="text/javascript">
window.onclick = function(e)
{
var targetElem;
if (!e)
{
var e = window.event;
}
if (e.target)
{
targetElem = e.target;
}
else if (e.srcElement)
{
targetElem = e.srcElement;
}
if (targetElem.nodeType == document.TEXT_NODE)
{
targetElem = targetElem.parentNode;
}
if (targetElem.style.zIndex == 100)
{
// do stuff
}
};
</script>
with jQuery:
$('*').each(function() {
var $this = $(this);
if ($this.css('z-index') < g_threshold) {
$this.unbind('click'); //unbinds all click handlers from a DOM element
$this.click(function(e) {
e.stopPropagation();
});
}
});
this is basically like what you do, but requires no additional attributes or whatever else you dislike. If you need to leave, say, textbox untouched, then use $('*').not('input:text')