Show div on radiobutton hover - javascript

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.

Related

How to Direct url When All ID on DIV 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
$(".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>

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 use localstorage to remember appended items

Here's an Example in which images and hidden inputs get added to the div container #area on click. I want to use localstorage to remember the appended items on page load, but it isn't working with this line
localStorage.setItem("imagecookie",$('#area').find('div:empty:first').append(img).append(input));
...
localStorage.getItem("imagecookie");
Could anyone show me how to get it to work?
HTML:
<div class="box">
<img data-term="A" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_run.png/40px-Crystal_Clear_action_run.png"/>
<input data-term="A" class="compare" type="checkbox"/>
</div>
<div class="box">
<img data-term="B" src="http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png"/>
<input data-term="B" class="compare" type="checkbox"/>
</div>
<div class="box">
<img data-term="C" src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png"/>
<input data-term="C" class="compare" type="checkbox"/>
</div>
<div id="area"><div></div><div></div><div></div></div>
Code:
$('.compare').change(function(){
if($(this).is(':checked')){
var img = $('<img>'),
findimg = $(this).closest('.box').find('img'),
data_term = findimg.data('term');
img.attr('src', findimg.attr('src'));
img.attr('data-term',data_term);
var input = '<input type="hidden" name="imagecompare" value="'+data_term+'">';
localStorage.setItem("imagecookie",$('#area').find('div:empty:first').append(img).append(input));
}
else{
var term = $(this).data('term'),
findboximage = $('#area > div > img[data-term='+term+']')
findboximage.parent('div').empty();
}
});
$(document).on('click','#area > div',function(){
$(this).empty();
localStorage.clear();
});
localStorage.getItem("imagecookie");
Demo Fiddle : Store the contents; Retrieve back on page reload.
Demo : Just store the contents - Check the console to verify.
Storing HTML content would be a better option.
$('#area').find('div:empty:first').append(img).append(input)
localStorage.setItem("imagecookie",$('#area').html());

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