Develop Reference

Get rid of check answer button in this javascript quiz?

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

Fade in content on mouse over and hide on mouse out

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;
}

jQuery - If and Else If's for marginLeft's

i was wondering if you could help me out, i'm trying to create if based interactions on my website but sadly the code does not work and i can't think of as to why. The idea is to click a button to move it left, then when another button is clicked at it's next set position it brings it back in again.
if($("#featImgOne").css("marginLeft")=='0px'){
$('#featNext').click(function(){
$('#featImgOne').animate({marginLeft:"-960px"});
});
}
else if($("#featImgOne").css("marginLeft")=='-960px'){
$('#featPrev').click(function(){
$('#featImgOne').animate({marginLeft:"0px"});
});
}
Just to note the first click works but the second wont, so i'm perplexed
Thanks in advance, hope someone can help

You have to move the if consitions inside click handler
$('#featNext').click(function () {
if ($("#featImgOne").css("marginLeft") == 0) {
$('#featImgOne').animate({
marginLeft: "-960px"
});
}
});
$('#featPrev').click(function () {
if ($("#featImgOne").css("marginLeft") != 0) {
$('#featImgOne').animate({
marginLeft: "0px"
});
}
});

What you're expecting will not happen, because the second click event is never added, because at the beginning the margin-left is not that value. Fix this by removing the conditional statements:
$('#featNext').click(function () {
if ($("#featImgOne").css("marginLeft") == 0) {
$('#featImgOne').animate({
marginLeft: "-960px"
});
}
});
$('#featPrev').click(function () {
if ($("#featImgOne").css("marginLeft") != 0) {
$('#featImgOne').animate({
marginLeft: "0px"
});
}
});

You are going to have to add some kind of a loop. Try a while Loop.**while**//add a condition

Submenu animation "pops up"

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.

Make a DIV reveal upwards onClick

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()
});
});