I'm developing a quiz and i want this "check answer" button to be removed and on click of any choice answer must be displayed.
Can anyone please help me how to do it?
I've found a duplicate here,
Creating a JavaScript Quiz that shows answer explanation automatically
But this is not what i'm trying to do. since I'm new to stack overflow I can't comment on this question so opening this fresh one.
Here is JSfiddle link: http://jsfiddle.net/natmit/7Du6N/
function processQuestion(choice) {
if (quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']) {
$('.choice').eq(choice).css({
'background-color': '#84e47b'
});
$('#explanation').html('<h5>Awesome! Right answer!</h5><br/>' + htmlEncode(quiz[currentquestion]['explanation']));
score++;
} else {
$('.choice').eq(choice).css({
'background-color': '#e0514e'
});
$('#explanation').html('<h3>Oops! wrong answer</h3><br/>' + htmlEncode(quiz[currentquestion]['explanation']));
}
currentquestion++;
$('#submitbutton').html('<h4>NEXT QUESTION »</h4>').on('click', function() {
if (currentquestion == quiz.length) {
endQuiz();
} else {
$(this).text('CHECK ANSWER').css({
'color': '#ffffff'
}).off('click');
nextQuestion();
}
})
}
Try to add $('#submitbutton').hide(); at the end of your init() function.
Change the actions of your Buttons in your setupButtons() function somewhat like this:
$('.choice').on('click', function () {
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
processQuestion(picked);
});
At the end of your processQuestion() function show the button again with $('#submitbutton').show(); and finally hide the button again at the end of your nextQuestion() function with $('#submitbutton').hide();
Here a working fiddle: http://jsfiddle.net/6ft4sy7s/
good luck :)
If I understand you correctly, all you need to do is change this code inside your setupButtons() function from this:
$('.choice').on('click', function () {
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
if (submt) {
submt = false;
$('#submitbutton').css({
'color': '#000'
}).on('click', function () {
$('.choice').off('click');
$(this).off('click');
processQuestion(picked);
});
}
})
to:
$('.choice').on('click', function () {
if (submt) {
submt = false;
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
$('.choice').css({
'cursor': 'default'
});
processQuestion(picked);
$('#submitbutton').css({
'color': '#000'
});
}
})
All I am doing here is taking the processQuestion() function outside of the $('#submitbutton') click event, so it is triggered as soon as a choice is selected.
I have also moved the rest of the jQuery code that was inside the $('.choice') click event and moved it inside the if (submt) conditional statement. This prevents the answer selection CSS being activated after an answer has been selected.
I added the CSS of cursor:default to the options after an option is selected, just so it is clear to the user that they can't select any more.
http://jsfiddle.net/7Du6N/326/
UPDATED FIDDLE: http://jsfiddle.net/7Du6N/328/ *process answer button hidden
Related
My code below works only once. I couldn't figure out why, please help.
i really really bad need it plz help me
my problem : first of all plz click on the frist button from the top
and then click on the second one now do this all again without
refreshing page now u see it dosent work like the first time
$(document).ready(function() {
$('#goLeft').on('click', function() {
if ($(".myWorks").css("opacity") == "0") {
$('.wrap').animate({
marginRight: '1045px'
}, "slow");
$('.about_me').toggleClass("Visibility_to_visible");
} else {
$('.myWorks').toggleClass("Visibility_to_Unvisible1");
$('.wrap').animate({
marginRight: '1045px'
}, "slow");
$('.about_me').toggleClass("Visibility_to_visible");
}
});
$('#goRight').on('click', function() {
if ($(".about_me").css("opacity") == "0") {
$('.wrap').animate({
marginRight: '20px'
}, "slow");
$('.myWorks').toggleClass("Visibility_to_visible1");
} else {
$('.about_me').toggleClass("Visibility_to_Unvisible");
$('.wrap').animate({
marginRight: '20px'
}, "slow");
$('.myWorks').toggleClass("Visibility_to_visible1");
}
});
});
and this is my web page : https://jsfiddle.net/nn8b8w3e/
I can't reproduce what you're describing:
first of all plz click on the frist button from the top and then click
on the second one
After clicking the first button, the second button is no longer visible to click. Neither of the buttons on the new panel do anything.
However looking at your code, you're testing for which direction to slide, what to do, etc, based on opactiy of each panel:
if ($(".myWorks").css("opacity") == "0") {
But the code you've included never changes opacity on anything. You assign various classes, eg:
$('.about_me').toggleClass("Visibility_to_visible");
But the CSS you include does not show those classes. You either need to define those classes with an opacity, or instead specify opacity in the action, eg:
$('.about_me').toggleClass("Visibility_to_visible").css('opacity', 1);
Hellp friends i did it thanks for all of U this changes can fix this bug here's for U
just Put some .css("opacity",1) , .css("opacity",0) on it
$(document).ready(function(){
$('#goLeft').on('click', function(){
if($(".myWorks").css("opacity") == "0")
{
$('.wrap').animate({
marginRight : '1045px'
},"slow");
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',1);
}
else {
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',0);
$('.wrap').animate({
marginRight : '1045px'
},"slow");
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',1);
}
});
////////////////////////////////////////////////////////////////////
$('#goRight').on('click', function(){
if($(".about_me").css("opacity") == "0")
{
$('.wrap').animate({
marginRight : '20px'
},"slow");
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',1);
}
else {
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',0);
$('.wrap').animate({
marginRight : '20px'
},"slow");
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',1);
}
});
/////////////////////////////////////////////////////////////////
});
I want #first to visibility:hidden normally and when mouse over it fades in and on mouse out it fades out.
EDIT
Fiddle : https://jsfiddle.net/vsdLk90s/1/
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").css('opacity', '1');
}, 400);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css('opacity', '0', 'visibility', 'hidden');
}
});
When multiple properties are to be defined, you are supposed to set them using a map.
.css({
'opacity': '0',
'visibility': 'hidden'
});
A better approach would be is to have a class with visibility:hidden set to #first, and toggle class based on the conditions.. Something in these lines.
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").removeClass('hidden').css('opacity', '1');
}, 400);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css({
'opacity': '0'
}).addClass('hidden');
}
});
Check Fiddle
May or may not be your issue, but I believe you need to replace the following lines:
$("#first").css('opacity', '1');
and
$("#first").css('opacity', '0', 'visibility', 'hidden');
need to become:
$("#first").css({'opacity': '1'});
and
$("#first").css({'opacity': '0', 'visibility': 'hidden'});
You will likely also need to 'toggle back on' visibility upon hover over like so:
$("#first").css({'visibility': 'visible', 'opacity', '1'});
Reference for using '.css' in JQuery: https://api.jquery.com/css/
TL;DR: Rather than separating the property and the desired value with a comma, you need to use a colon (:) and you need to enclose the .css part in {}
EDIT:
If you want the div to not be displayed upon page load, then only be displayed upon hover over add the following code to your stylesheet:
#first {
visibility:hidden;
}
I have a menu with sub items inside it. In order to make animation effect I want, I need to retrieve sub-menu width,height and height of its first-child. Now my animation works ,but sometimes my sub-menu just "pops up" (it doesn't animate its width ).
Here is The Fiddle of the problem.
http://www.vasinternetposao.com/wordpressdevelopment/wp-content/themes/override/images/submenu_problem.png
I am using this code:
var j = jQuery.noConflict();
j(document).ready(function () {
j('ul.nav').removeClass('nav').addClass('jnav'); //Add jquery Class to our menu
j('ul.jnav li').hover(function () {
if (j(this).children('ul:first').hasClass('jsub-menu')) { //Let's check if "jsub-menu" Class is here
return false; //If it is ("jsub-menu" here) don't SlideDown...
} else { //Else slide down if no class
j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
}
}, function () {
j(this).find('ul:first').slideUp(500, function () {
j(this).removeClass('jsub-menu').addClass('sub-menu');
j(this).css({
'height': '',
'width': ''
});
});
});
j('ul.jnav ul.sub-menu a').hover(function () {
j(this).addClass('active');
if (j('.active').next('ul.sub-menu').length) { //If submenu exist...
j('.active').next('ul.sub-menu').css({
'visibility': 'hidden',
'opacity': '0',
'display': 'block'
}); //Show it so we can read its:
var get_width = j('.active').next('ul.sub-menu').outerWidth(true); //WIDTH
var get_height_of_first_child = j('.active').next('ul.sub-menu').children('li:first').outerHeight(true); //HEIGHT of its First Child
var get_submenu_height = j('.active').next('ul.sub-menu').outerHeight(true); //HEIGHT of our menu
j('.active').next('ul').removeClass('sub-menu') //Remove class from menu, add another class apply HEIGHT of FIRST CHILD and hide it again...
.addClass('jsub-menu').css({
'visibility': '',
'opacity': '',
'height': get_height_of_first_child + 'px',
'width': '0'
});
j('.active').next('.jsub-menu').animate({
width: get_width
}, 1000, function () { //Animate WIDTH
j('.active').next('.jsub-menu').animate({
height: get_submenu_height
}, 1000); //callback animate HEIGHT
});
} //End if
}, function () {
j('.active').removeClass('active');
});
});
I think that this is happening because my Slide Up/Down animations are conflicting with my animate with/height functions but I am not sure. I have tried to solve it by adding stop(),stop(true,true),stop(true,false) in numerous combinations but failed. I am trying to solve this for days now so you stackers are my only hope. Please help!
Thank you!!
I was finally able to replicate the error.
I wrote this code for you, to replace the code you have for the animation.
var animating = false;
function animate($elm, options, callback) {
if (animating)
return;
animating = true;
$elm.animate(options, 1000, function() {
animating = false;
if (callback != undefined)
callback();
});
}
Call it like this, from inside your hover callback.
animate(j('.active').next('.jsub-menu'),
{
'width': get_width,
'height' : get_submenu_height
});
Basically, it checks if another animation is already running, in which case it doesn't start it. The Flag is set to false when the animation stopped, and let's other animations go on.
You can also pass a callback to do something after the animation is completed, but in your case you don't need it, because you can animate the height and width in the same time.
I tested it for like a minute and it looked pretty smooth.
Here is the updated feedle: http://jsfiddle.net/gabrielcatalin/TNxJ4/1/
P.S. You may also want to use the $ sign instead of 'j' for jQuery wrappers.
I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.
Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.
Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});
I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.
I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.
$(document).click(function(event) {
if ($(event.target).parents().index($('.notification-container')) == -1) {
if ($('.notification-container').is(":visible")) {
$('.notification-container').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75)
});
} else {
//This should only show when you click: ".notification-button" not document
$('.notification-container').show().animate({
"margin-top": "0px"
}, 75);
}
}
});
jQuery's closest() function can be used to see if the click is not within the menu:
$('body').click(function(e) {
if ($(e.target).closest('.notification-container').length === 0) {
// close/animate your div
}
});
you can do something like this if your item is not clicked then hide its dropping list in case of drop down
$(':not(#country)').click(function() {
$('#countrylist').hide();
});
I am using a very simple code for this as :-
$(document).click(function(e){
if($(e.target).closest('#dropdownID').length != 0) return false;
$('#dropdownID').hide();
});
Hope it will useful.
Thanks!!
I usually do like this:
$('.drop-down').click(function () {
// The code to open the dropdown
$('body').click(function () {
// The code to close the dropdown
});
});
So put your body (elsewhere) click function inside the drop-down open click function.
This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.
$(document).click(function(e) {
var isModalBox = (e.target.className == 'modal-box');
if (!isModalBox) {
$('.modal-box:visible').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75);
});
}
});
$('a').click(function(e) {
e.stopPropagation(); // Important if you´d like other links to work as usual.
});
$('#temp-button').click(function(e) {
e.preventDefault();
$('.modal-box').show().animate({
"margin-top": "0px"
}, 75);
});
Try this :
// The code to close the dropdown
$(document).click(function() {
...
});
// The code to open the dropdown
$(".drop-down").click(function() {
...
return false;
});
try something like:
$(document).click(function(event) {
if($(event.target).parents().index($('.notification-container')) == -1) {
if($('.notification-container').is(":visible")) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
}
}
});
$(".notification-button").click(function(event){
event.stopPropagation();
$('.notification-container').show().animate({"margin-top":"0px"}, 75);
});
This is what I've decided to use, it's a nice little jQuery plugin that works with little code.
Here's the plugin:
http://benalman.com/projects/jquery-outside-events-plugin/
This is the code that makes my above code in my question work.
$(document).ready(function(){
$(".notification-button").click(function(){
$('.notification-container').toggle().animate({"margin-top":"0px"}, 75);
});
$('.notification-wrapper').bind('clickoutside', function (event) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
});
});