I'm trying to call the keydown and keyup event with JS. Howvever I get a syntax error. What's missing in the code?
HTML:
<body>
<div class="ryu">
<div class="ryu-still"></div>
<div class="ryu-ready"></div>
<div class="ryu-throwing"></div>
</div>
<div class="ryu-cool"></div>
</body>
CSS:
.ryu-cool {
display: none;
background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow-spirit.jpg');
}
.ryu-still {
background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow- spirit.jpg');
}
JS:
$(document).ready(function(){
$('.ryu').keydown(function(e){
if(e.keyCode == 88){
$('.ryu-still').hide();
$('.ryu-cool').show();
})
.keyup(function(e){
if(e.keyCode == 88){
$('.ryu-still').hide();
$('.ryu-cool').show();
});
});
});
The JSfiddle link: http://jsfiddle.net/3Ppdf/
Along with the code formatting issues other have pointed out, the code still won't function as expected without a small addition.
Working Fiddle
You will need to add a tab index to the <div> element that you want to monitor keyboard input on.
Your HTML should look like this:
<div class="main">
<div tabindex="0" class="ryu">
<div class="ryu-still"></div>
<div class="ryu-ready"></div>
<div class="ryu-cool"></div>
<div class="ryu-throwing"></div>
</div>
</div>
The JavaScript will also need to be updated to:
$(document).ready(function () {
$('.ryu').keydown(function (e) {
if (e.keyCode == 88) {
$('.ryu-still').hide();
$('.ryu-cool').show();
}
})
.keyup(function (e) {
if (e.keyCode == 88) {
$('.ryu-still').show();
$('.ryu-cool').hide();
};
})
});
Also, to get the images to display properly you have to give the <div>s an explicit width and height:
.ryu-cool {
display: none;
background-image: url('http://www.theprojectors.co.uk/img/p/187-219-thickbox.jpg');
width: 600px;
height: 600px;
}
.ryu-still {
background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow-spirit.jpg');
width: 550px;
height: 364px;
}
Otherwise the <div>s will have a width and height of zero and therefore not displayed on the page.
You're missing the ending bracket for the if statements. Your code should be this:
$(document).ready(function(){
$('.ryu').keydown(function(e){
if(e.keyCode == 88){
$('.ryu-still').hide();
$('.ryu-cool').show();
}
})
.keyup(function(e){
if(e.keyCode == 88){
$('.ryu-still').hide();
$('.ryu-cool').show();
}
});
});
See updated JSFiddle: http://jsfiddle.net/3Ppdf/3/
Related
I need to check if a div is empty and ignore white spaces.
If you type one or more spaces inside the below div and click the button, it logs "empty" instead of "not empty".
$('button').on('click', function(){
let a = $('#wrap').html();
if(a == '' || a.trim() == ''){console.log('empty');}
else{console.log('not empty');}
});
.wrap{
background:gold;
min-height:25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
You should use .text() instead. Also, the first check for an empty string is superfluous. The root cause of this issue is that spaces are represented as in HTML, which you can see if you console.log(a).
$('button').on('click', function() {
let a = $('#wrap').text();
if (a.trim() == '') {//or simply, if(!a.trim()){
console.log('empty');
} else {
console.log('not empty');
}
});
.wrap {
background: gold;
min-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
You can simply jQuery .text() to check for length of any text in div. This will avoid (not count) spaces.
The way .html() works is that it will count white spaces as well.
Run snippet below.
$('button').on('click', function() {
let a = $('#wrap').text();
if (a == '' || a.trim() == '') {
console.log('empty');
} else {
console.log('not empty');
}
});
.wrap {
background: gold;
min-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
I have one input and span. When I type in input value is passed to span. Now I want to hide other div/button or something if my span have specific value. My code don't work. What's wrong?
$('#input').on('keyup', function(){
$('#status').html($(this).val());
});
$('#status').on('change', function(){
var status = $('#status').html();
if (status == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
#test {
width: 50px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<span id="status"></span>
<div id="test"></div>
Instead of checking changes on span element, it is better to do this logic inside of input event listener. Something like this:
$('#input').on('keyup', function(){
var val = this.value;
$('#status').html(val);
if (val == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
Liste the keyup event and change the background
$('#input').on('keyup', function(){
$('#status').html($(this).val());
console.log($(this).val());
if ($('#status').html() == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
#test {
width: 50px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<span id="status"></span>
<div id="test-container">
<div id="test"></div>
</div>
My goal is to have #box2 appear when I click on #box1 but when you click on something other than #box2, it will display none and only #box1 will show.
Here are my 2 boxes, they are just 2 styled divs:
var condition;
$(document).click(function() {
if (condition === 'block') {
$(":not(#box2)").click(function() {
$("#box2").hide();
});
}
})
$('#box1').click(function(e) {
$('#box2').css('display', 'block');
condition = 'block';
});
$('#box2').click(function(e) {
$('#box2').css('display', 'none');
condition = 'none';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" style="width: 300px; height: 300px; background-color: red; margin-left: 100px; margin-bottom: 50px; position: absolute;">
</div>
<div id="box2" style="width: 300px; height: 300px; background-color: blue; margin-left: 150px; display: none; position: absolute;">
</div>
This current code works correctly the first time but after that, it wont run again. I am just wondering if there is a reset function or where I am going wrong?
Really what I want to do is make this work on an ipad so when the user clicks/taps away from the box, it will close. If there are better ways to do this on the Ipad tablet, please let me know!!
Any ideas?
Don't overcomplicate things. This is all the javascript you need, get rid of everything else:
$(document).click(function () {
$('#box2').hide();
});
$('#box1').click(function (e) {
e.stopPropagation();
$('#box2').show();
});
You could just filter event target at document level:
$(document).on('click', function(e) {
$('#box2').toggle(!!$(e.target).closest('#box1').length);
});
-jsFiddle-
You can listen to all click events of the document and then use the event.target to detect which element is being clicked. if the clicked element is box1 and box2 is not being shown then display it to the user. in any other condition we can hide the box2 if it's not the element being clicked. here is the vanilla JavaScript code to achieve this:
<html>
<body>
<div id='box1'>BOX ONE</div>
<div id='box2' style="display: none;">BOX TWO</div>
<script>
document.addEventListener('click', function(event) {
var secondBox = document.getElementById('box2')
if(event.target.id === 'box1' && secondBox.style.display === 'none'){
secondBox.style.display = 'block'
} else if (event.target.id !== 'box2') {
secondBox.style.display = 'none'
}
})
</script>
</body>
</html>
And if you are into DRY (Do not repeat yourself), you can define a function for this task. Take look at this modified version of the script:
function addOpenHandler(handler, target){
document.addEventListener('click', function(event) {
if(event.target === handler && target.style.display === 'none'){
target.style.display = 'block'
} else if (event.target !== target) {
target.style.display = 'none'
}
})
}
addOpenHandler( document.getElementById('box1'), document.getElementById('box2') )
$(document).click(function () {
if (condition === 'block')
{
$(":not(#box2)").click(function () {
$("#box2").hide();
});
}
})
The line $("#box2").hide(); is firing after every click
I have added 2 codes here the window.scroll works on my example but not the second one binding the div to the scroll.
Any one knows what am I doing wrong!?
Just so you know I'm working in MeteorJS <- I dont think that this is the problem bc. the window scrolling works.
This 2 codes are in the same js file.
$(window).scroll(function() {
lastSession = Session.get('c_info')[Session.get('c_info').current]
if(lastSession.list == 0 && $(window).height() + $(window).scrollTop() >= $(document).height()){
lastItem = $( ".list-item div:last" ).html();
if (lastSession.page == 1){
currentSession().more();
lastItem2 = $( ".list-item div:last" ).html();
} else if( lastItem2 != lastItem) {
currentSession().more();
lastItem2 = $( ".list-item div:last" ).html()
}
}
});
$('#playlist').bind('scroll',function() {
console.log("div is scrolling");
});
I tried this too:
$('#playlist').scroll(function() {
console.log("div is scrolling");
});
MeteorJS Template:
<template name="playList">
<div id="playlist" class="playlist show-for-large-up">
{{#each list}}
<a href="/video/{{_id}}" class="large-12 columns" id="pl{{v_id}}">
<div>
<div class="large-7 columns plRight">
<span>{{vTitle}}</span>
</div>
</div>
</a>
{{/each}}
</div>
</template>
Also Tried:
$('#playlist').on('scroll',function() {console.log('test')});// not working
Tried to Change the id name and putting on the document ready:
$( document ).ready(function (){
$('#pl_list').bind('scroll',function() {
console.log("div is scrolling");
});
})//failed
The div has a scrollbar and the list is long and i have a css like this:
.playlist {
padding: 0;
overflow-y: scroll;
height: 458px;
}
Also tried:
Template.playList.rendered = function () {
console.log("playlist rendered");// i can see this on logs this tells that template is in doom
Meteor.setTimeout(function(){
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
}, 2000);// with settimeout i have giveng it 2 more seconds
}
Try this out -
$(document).ready(function(){
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
});
Use
$('#playlist').scroll(function() {
console.log("div is scrolling");
});
instead (like you did for window).
Thats the purpose of scroll(). See jquery documentation.
Scrolling event is fired on the element, if it has scrolled. So if you only scrolling the "body" element of the DOM it will not be triggered for #playlist.
So you have put a scrollbar to the container element of #playlist. Shot answer, cut the height and add a scrollbar, then the event will fire on it.
I did a Jsfiddle http://jsfiddle.net/34j0qnpg/4/
html
<div id="playlist-wrapper">
<div id="playlist" class="playlist show-for-large-up">
<a href="/video/1" class="large-12 columns" id="pl1">
<div>
<div class="large-7 columns plRight">
<span>Titel</span>
</div>
</div>
</a>
css part
body, html {
padding: 0;
margin: 0;
background-color: lightgrey;
color: #fff;
font-family: Arial;
height: 5000px;
overflow-y:scroll;
}
#stats {
position: relative;
}
#playlist-wrapper {
border: 1px solid #000;
padding: 10px;
height: 300px;
overflow-y: scroll;
}
#playlist {
height: 1000px;
background-color: darkgrey;
}
var $stats = $('#stats');
$('#playlist-wrapper').on('scroll', function() {
$stats.html('playlist scrolling');
console.log('playlist scrolling');
});
$(window).on('scroll', function() {
$stats.html('window scrolling');
console.log('window scrolling');
});
Solved with this code:
Tried it earlyer no results, after meteorjs project reset it just automagicly workded:
Template.playList.rendered = function () {
console.log("playlist rendered");
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
}
I answered my question just if anybody is searching for the same answer.
Thanks to anybody who tried to help me.
I LOVE THIS COMMUNITY.
i have a problem. I try to show up a div when the visibility class is visible. My code isn't working.Please help me fix this.
CSS:
#nor1 {position:absolute;top:100px;left:100px;z-index:2;}
#var1 {position:absolute;top:100px;left:100px;z-index:7; visibility:hidden;}
#corect {position:absolute;top:0px;left:0px;z-index:9;}
Javascript:
$('#box').click(function () {
$("#var1").css('visibility', 'visible');
});
$('#nor1').click(function () {
if ($('#var1').css("visibility") == 'visible') {
$('#corect').delay(500).fadeIn('slow');
}
});
I think you got mixed up with your css
http://jsfiddle.net/hz9nU/2/
#corect {display: none;}
Apart from that it seems to work
Works fine for me. Ensure your ID's are correct (jQuery is referencing the correct HTML element):
jQuery:
$('#nor1').click(function(){
if (($('#var1').css("visibility") == 'visible') && ($('#var2').css("visibility")) == 'visible') {
$('#correct').delay(500).fadeIn('slow');
}});
HTML:
<input id="nor1" type="button" />
<div id="var1" style="visibility: visible">
</div>
<div id="correct" style="display:none">
rtretert
</div>
CSS:
#correct {
background-color: red;
width:400px;
}
http://jsfiddle.net/CwShT/1/
For clarity:
$('#nor1').click(function(){
var1 = $('#var1').css("visibility");
var2 = $('#var2').css("visibility");
if ((var1 == 'visible') && (var2 == 'visible')) {
$('#correct').delay(500).fadeIn('slow');
}
});