Element hide on keypress anywhere on page - javascript

I'm attempting to make an element slide off the page to the left and a new element slide into the page from the right when the right arrow key is pressed anywhere on the page (not just in a specific input).
jQuery and jQuery UI are implemented. This is what I have so far:
HTML:
<div class="box" id="wherebox">
<h2>Where</h2>
<br/>
<div id="wherecontent">
<input type="text" class="maininputs" name="where" id="where" autofocus="autofocus"/>
<img src="resources/imgs/right.png" id="wherenext" height="20px" width="50px"/>
</div>
</div>
<div class="box" id="checkinbox">
<h2>Check In Date</h2>
<br />
<div id="checkincontent">
<img src="resources/imgs/left.png" id="checkinprev" height="20px" width="50px"/>
<input type="text" id="checkin" name="checkin" readonly="readonly" class="maininputs"/>
<img src="resources/imgs/right.png" id="checkinnext" height="20px" width="50px"/>
</div>
</div>
JS:
$('*').bind("rightKey", function(e) {
var $box = $(this).closest('.box'), $next = $box.next();
$box.hide('slide', {
direction : "left"
}, 1000);
$next.delay(750).show('slide', {
direction : "right"
}, 1000);
});
$('*').keyup(function(e) {
if (e.keyCode == 39) {
$(this).trigger("rightKey");
}
});
Anyone know what's missing? Currently it will only work if an input is selected.

Try
$('.box').first().show();
$(document).on("rightKey", '.box', function (e) {
var $box = $(this).closest('.box'),
$next = $box.next();
$box.hide('slide', {
direction: "left"
}, 1000);
$next.delay(750).show('slide', {
direction: "right"
}, 1000);
});
$(document).on('keyup', '.box', function (e) {
if (e.keyCode == 39) {
$(this).trigger("rightKey");
}
});
Demo: Fiddle

Related

Show div on radiobutton hover

Now I have smth like this:
http://jsfiddle.net/54tsowq7/107/
I want to save function if radiobutton selected - div with picture is shown.
But how can I make that when radiobutton text is on hover, the same picture is shown? And when mouseleave - it dissapear?
$(document).ready(function() {
$('input[type="radio"]').change(function() {
$('.text, .img').hide();
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if ($(this).prop('checked')) {
$pic.show();
$text.show();
}else{
$pic.hide();
$text.hide();
}
});
});
<div class="img" id="pic2" style='display:none'><img src="http://images.math.cnrs.fr/IMG/png/section8-image.png" alt=""></div>
<div class="img" id="pic3" style='display:none'><img src="http://www.simpleimageresizer.com/static/images/simple-image-resizer-128x128.png" alt=""></div>
<form class="radiobuttons">
<p class="descr" id="desc1" data-picid="pic2" data-descid="desc1"><input type="radio" name="item1" id="item1" value="1" data-picid="pic2" data-textid="text1">Text 1</p>
<p class="descr" id="desc2" data-picid="pic2" data-descid="desc2"><input type="radio" name="item1" id="item2" value="1" data-picid="pic2" data-textid="text2">Text 2</p>
<p class="descr" id="desc3" data-picid="pic3" data-descid="desc3"><input type="radio" name="item1" id="item3" value="1" data-picid="pic3" data-textid="text3">Text 3</p>
</form>
<div class="text" id="text1" style='display:none'>Lorem Ipsum Text1</div>
<div class="text" id="text2" style='display:none'>Lorem Ipsum Text2</div>
<div class="text" id="text3" style='display:none'>Lorem Ipsum Text3</div>
It's a little bit messy, but if I correctly understand, you want something like this?
$(document).ready(function() {
$('input[type="radio"]').hover(
function() {
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if(!$(this).prop('checked')) {
$pic.show();
$text.show();
}
}, function() {
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if(!$(this).prop('checked')) {
$pic.hide();
$text.hide();;
}
}
);
$('input[type="radio"]').change(function() {
$('.text, .img').hide();
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if ($(this).prop('checked')) {
$pic.show();
$text.show();
}else{
$pic.hide();
$text.hide();
}
});
});
And put your div images to the bottom of your HTML
You can add mouseenter and mouseout events.
But this function will not trigger change event, change event can only trigger when you click on radio button and its attribute or value get changed
$('input[type="radio"]').on('mouseenter',function() {
// do anything on mouse hover
});
$('input[type="radio"]').on('mouseout',function() {
// do anything on mouse leave
});
Try this:
function handlerInFunc(){
$(".myPicOneClass").show();
}
function handlerOutFunc(){
$(".myPicOneClass").hide();
}
$(".myRadioOneClass").hover( handlerInFunc, handlerOutFunc );
Of course, give the proper class selector names you desire for the specific elements.

jquery modal image with keydown left and right

i need to navigate my modal image with keyboard, but i don't know jquery action to change prev and next image, this is my JS :
$(document).ready(function () {
$('.container img').click(function () {
var src = $(this).attr('src');
$('.modal').css({
display: "block"
});
$('.modal-content').attr("src", src);
$(this).keydown(function (e) {
if (e.keyCode == 37) { //move left
//change to prev image
} else if (e.keyCode == 39) { //move right
//change to next image
}
});
});
});
});
and my html is :
<div class="container">
<img src="img/bg1.jpg" alt=""/>
<!-- The Modal -->
<div class="modal">
<span class="close">×</span>
<img src="" class="modal-content" alt="">
</div>
<img src="img/bg2.jpg" alt=""/>
<!-- The Modal -->
<div class="modal">
<span class="close">×</span>
<img src="" class="modal-content" alt="">
</div>
</div>
i think i need jquery index to indexing my image, but how perform that?
or there is another method?
Fiddle here
thanks
Basically you need to bind keydown event with window and store currently open image object in a global variable.
Try this
updated jsfiddle
HTML
<div class="container">
<img src="http://placekitten.com/200/300" alt="" />
<img src="http://placekitten.com/200/287" alt="" />
</div>
<!-- The Modal -->
<div class="modal">
<span class="close">×</span>
<img src="" class="modal-content" alt="">
</div>
Javascript
$(document).ready(function() {
var $thisImage;
$('.container img').click(function() {
$thisImage = $(this);
var src = $thisImage.attr('src');
$('.modal').css({display: "block"});
$('.modal-content').attr("src", src);
});
$(window).keydown(function(e) {
if (e.keyCode == 37) { //move left
if($thisImage.prev().is('img')){
var prev = $thisImage.prev().attr('src');
$thisImage = $thisImage.prev();
$('.modal-content').attr("src", prev);
}
}
else if (e.keyCode == 39) { //move right
if($thisImage.next().is('img')){
var next = $thisImage.next().attr('src');
$thisImage = $thisImage.next();
$('.modal-content').attr("src", next);
}
}
});
$('.close').click(function() {
$('.modal').css({
display: "none"
});
});
});

How to get value when All ID click

I want make mini game but stuck with logic code.
Try see my code below,,,
I want to direct after click all div ID wrong1, wrong2, wrong3, then wrong4 (the last) its value for direct. Something add class maybe.
I want before the last click ID wrong4, The ID wrong4 its addclass rightAnswers. Because class rightAnswers have attribute html5 data-current-game="5" data-next-game="finish" for next result page.
I have try make it and helping by https://stackoverflow.com/users/2025923/tushar
Helping by Tushar, How to show last ID when All ID on DIV click,
But now i want different logic.
Thank you
Note :
I have try edit like this,
But the class rightAnswers not function ...
divs.splice(divs.indexOf($(this).prop("id")), 1)
if (divs.length == 0) {
$('#wrong1, #wrong2, #wrong3, #wrong4').addClass('rightAnswers');
}
And add script url direction like this :
But the class rightAnswers still not function,
I want class rightAnswers is working if i click.
$(".rightAnswers").click(function() {
window.location = "/game/result";
});
Code From How to show last ID when All ID on DIV click
$(function () {
var divs = ["wrong1", "wrong2", "wrong3", "wrong4"];
$('#wrong1, #wrong2, #wrong3, #wrong4').click(function () {
$(this).animate({
opacity: 0,
top: 100,
}, 500);
divs.splice(divs.indexOf($(this).prop("id")),1)
if(divs.length == 0){
$('#wrong-gameOne').eq(0).hide();
$('#correct-gameOne').eq(0).show();
}
});
});
<img id="correct-gameOne" class="rightAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" style="display:none;" />
<img id="wrong-gameOne" class="wrongAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/125/thumbnail.jpg" data-current-game="1" data-next-game="2" />
<div id="wrong1" class="no-bottom">
<label>TEXT 1</label>
</div>
<div id="wrong2" class="no-bottom">
<label>TEXT 2</label>
</div>
<div id="wrong3" class="no-bottom">
<label>TEXT 3</label>
</div>
<div id="wrong4" class="no-bottom">
<label>TEXT 4</label>
</div>
I don't really get what you're doing, but I think this fixes your code. Here's the jsfiddle:
https://jsfiddle.net/mckinleymedia/2s0wuL0a/
html:
<div id="game1">
<img class="rightAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" style="display:none;" />
<img class="wrongAnswer" src="http://authentic-scandinavia.com/system/images/tours/photos/125/thumbnail.jpg" data-current-game="1" data-next-game="2" />
<div id='1' class="wrong no-bottom">
<label>TEXT 1</label>
</div>
<div id='2' class="wrong no-bottom">
<label>TEXT 2</label>
</div>
<div id='3' class="wrong no-bottom">
<label>TEXT 3</label>
</div>
<div id='4' class="wrong no-bottom">
<label>TEXT 4</label>
</div>
</div>
script:
$(function () {
var divs = ["1", "2", "3", "4"];
$('#game1 .wrong').click(function () {
$(this).animate({
opacity: 0,
top: 100,
}, 500);
divs.splice(divs.indexOf($(this).prop("id")),1)
console.log(divs);
console.log(divs.length);
if(divs.length == 0){
$('#game1 .wrongAnswer').hide();
$('#game1 .rightAnswer').show();
}
});
});
Here's a revised version. And a new jsfiddle:
https://jsfiddle.net/mckinleymedia/1ocnoaaa/2/
html:
<div id="game1">
<img src="https://authentic-scandinavia.com/system/images/tours/photos/10/thumbnail.jpg" data-current-game="1" data-next-game="2" />
<div id="target1"></div>
</div>
script:
$(function () {
function createGame(num) {
var answers = [{
text: "TEXT 1"
}, {
text: "TEXT 2"
}, {
text: "TEXT 3"
}, {
text: "TEXT 4"
}];
var target = $("#target" + num);
answers.forEach(function (answer, k) {
var aid = 'a' + num + '-' + k;
$("<div />")
.addClass("answer no-bottom")
.attr('id', aid)
.html(answer.text)
.appendTo(target);
answer.id = aid;
});
$('#game1 .answer').click(function () {
var $this = $(this);
$this.addClass('wrongAnswer');
var hasMoreAnswers,
thisAnswer = _.find(answers, function(answer) {
return answer.id === $this.attr('id');
});
thisAnswer.tried = true;
hasMoreAnswers = _.find(answers, function(answer) {
return answer.tried !== true;
});
if (!hasMoreAnswers) {
window.open("http://www.w3schools.com");
}
});
}
createGame(1);
});
style:
.wrongAnswer {
opacity:0;
transition:opacity 0.5s linear;
}

How to hover an edit text in CSS?

I am stuck with an issue of hover on edittext when placed near the field.
Required:
When I place in div1 or div2 edittext field should be visible and it should be editable
When I place outside div1 or div2 edit text should not be visible only from and to should be visible.
HTML:
<div class="textboxes">
<ul>
<li><input type="text" id="txt" /></li></ul>
</div>
<div class="edit">
<a href="#" id="edit" runat="server" >edit</a>
</div>
CSS:
.textboxes {margin:0; padding:0; display: none; }
.textboxes ul li {list-style-type:none; padding:5px 0 0;}
jQuery:
$("#edit").click(function() {
if ($('.textboxes').is(':visible')) {
$('.textboxes').hide();
// do save info
//$(this).val('Edit');
}
else {
$('.textboxes').show();
// $(this).val('Edit');
}
$(this).hide().after('<span class="edit">' + $(this).val() + '</span>');
});
Check the below demo .. It might helps you..
Demo
HTML:
<div class="wrap">
<div class="box">
<div>From :</div>
<div class="txt">India</div>
<div class="input"><input type="text" /></div>
</div>
<div class="box">
<div>To :</div>
<div class="txt">America</div>
<div class="input"><input type="text" /></div>
</div>
</div>
Script:
$(".box").mouseenter(function (e1) {
var txt = $(this).children(".txt");
input = $(this).children(".input");
input.children("input").val(txt.html());
txt.css("display", "none");
input.css("display", "inline-block");
}).mouseleave(function (e2) {
var txt = $(this).children(".txt");
var input = $(this).children(".input");
txt.html(input.children("input").val());
input.css("display", "none");
txt.css("display", "inline-block");
});
Output:
Mouse enter function in Jquery will help you( I hope so) to achieve your requirement.
Here is an example
$('.textboxes').hide();
$( "#edit" )
.mouseenter(function() {
$('.textboxes').show();
})
.mouseleave(function() {
$('.textboxes').hide();
});
HTML:
<div id="showTextBox">
<input type="text" id="textBox" style="visibility:hidden"></input>
</div>
JQuery:
$("#showTextBox").mouseover(function() {
$("#textBox").css('visibility','visible');
});
$("#showTextBox").mouseout(function() {
$("#textBox").css('visibility','hidden');
});
Working Demo

How to check if file was selected with Jquery?

I can't seem to find out why this won't work.
photoVal always equals nothing. So the background I have never disappears. When I select a file shouldn't the value change?
Jquery
$(document).ready(function() {
$('.browsebutton').bind("click" , function () {
$('#uploadphoto').click();
});
var photoVal = $('#uploadphoto').val();
$('#uploadphoto').change(function(){
alert(photoVal);
});
if (photoVal !== ''){
$('#photo').css('background', 'none');
}
});
HTML
<div id="photo">
<img id="preview" src="#" alt="Image Preview" />
</div>
<br>
<div id="browse">
<button type="button" class="browsebutton">Add Photo</button>
</div>
<input type="file" id="uploadphoto" name="uploadphoto" style="display: none;"/>
This question seems like a duplicate.
Try this :
$(function() {
$("#uploadphoto").change(function (){
var file_name = $(this).val();
});
});

Categories

Resources