$(document).ready(function(){
$("#start_quiz").click(function(){
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function(){
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
};
});
});
});
I have managed to get this jQuery code to work so that if the correct answer is in my form, it will fade out and display some text. I was wondering how I could design this so if any of the other four radio buttons were pressed, it could instead display other text (currently nothing happens). Thanks in advance for any help.
$(document).ready(function () {
$("#start_quiz").click(function () {
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function () {
if ($("#test").is(":checked")) {
$(".questions").fadeOut(200, function () {
$('#correct_answer').fadeIn('slow');
});
} else {
/* YOU WOULD PUT CODE HERE FOR INCORRECT ANSWER */
}
});
});
});
http://jsfiddle.net/24DeT/
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
}
else if($("#testotherone").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#otherone_answer').fadeIn('slow');
});
}
else if($("#testothertow").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#othertow_answer').fadeIn('slow');
});
}
Related
my code is not working and I have no idea why.
Here is a demo
$(".color").click(function() {
$(".color-picker").fadeIn(function() {
var colorClick = $(".color-box").click();
var timeOut = window.setTimeout(1000);
if (colorClick || timeOut) {
$(".color-picker").hide();
}
});
});
EDIT: To clear the confusion - I want to hide the box with the colors when the user clicks on one of them $(".color-box") or on the dropdown $(".color-picker"), or if he doesn't the box should hide anyway in a couple of seconds. Sorry, I thought it was clear from my code.
EDIT 2: Using #AlvinMagalona's code I tried to add the timeout functionality with no success demo
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
})
.setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
OR I think this way is much better, but still doesn't function (demo):
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
function timeOut() {
setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
}
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
The other part of the code works fine, but I'm not embedding the setTimeout function properly. Can somebody help me with that? Thanks!
EDIT 3:
I made it work: (demo)
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").toggle(200);
var timeOut = setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},6000);
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
This one has everything I needed - when you open the drop down and click on color the box hides, when you click on the dropdown again the box hides and if you don't do any of that the box hides after couple of seconds. I hope this code will be helpful for others as well. Thanks for your help, everybody!
Try with -
$(document).ready(function() {
$(".color p").click(function() {
$(".color-picker").fadeIn();
});
$(".color-box").on('click', function() {
$('.color-picker').fadeOut();
})
});
It will simply open the div containing the color boxes and on clicking on that boxes will hide it with transition effect.
Are you trying to hide the box after you select a color? If you do, try this code.
$(document).ready(function() {
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
});
So to answer my own question if you want to have the simplest drop-down menu where you pick something and then the drop-down box hides itself. Here is a demo, here is the code:
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").toggle(200);
var timeOut = setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},6000);
console.log("timeOut");
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
Special thanks to #AlvinMagalona, I've rewritten the code he proposed to make it work for my situation.
Below is a link to the code.
I need to be able to hover back and forth from "red" and "blk" with the functions changing the colour back and forth also. I believe it needs to be reset somehow?
http://jsfiddle.net/kAMG7/
$('#red').on('mouseover', function() {
$('#blue1').addClass("green");
});
$('#blk').on('mouseover', function() {
$('#blue1').addClass("black");
});
Thank you.
try
$('#red').on('mouseover', function() {
$('#blue1').addClass("green");
$('#blue1').removeClass("black");
});
$('#blk').on('mouseover', function() {
$('#blue1').addClass("black");
$('#blue1').removeClass("green");
});
$(document).ready(function()
{
$('#red').mouseover(function() {
$('#blue1').addClass("green");
});
});
$(document).ready(function()
{
$('#red').mouseout(function() {
$('#blue1').removeClass("green");
});
});
$("#red").hover(
function() {
$("#blue1").addClass("green");
},
function() {
$('#blue1').removeClass("green");
}
);
$("#blk").hover(
function() {
$("#blue1").addClass("black");
},
function() {
$('#blue1').removeClass("black");
}
);
Please look at the code here : http://jsbin.com/esokic/10/edit#source
When I click on customer support a div is shown
What I want is when someone clicks out of the div, the div should hide, I tried a couple of things, but they don't seem to work..
$(document.body).one("click", function() {$(".cust-support-outer").hide();
});
Also:
$("body").click(function(e){
if(e.target.className !== "csupport-drop")
{
$(".cust-support-outer").hide();
}
});
Would appreciate any help...
--Arnab
Arnab
I did this change in your js and worked
try this, use this js code
$(function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(document).bind("click", function(e) {
if(!$(e.target).hasClass("get-daily-alerts-outer")){
$(".get-daily-alerts-outer").hide()
}
});
$(".close").click(function(){$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){$(".get-daily-alerts-outer").show();
return false
});
});
I just changed how you bind the "click" event to the document and pass the Event object to the function so you can check over what element the click event was fire.
Try:
var mouse_is_inside = false;
$(document).ready(function()
{
$('.cust-support-outer').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.cust-support-outer').hide();
});
});
Bind this to body
$("body").click(function() {
if ($(this).attr("class") == "cust-support-outer") {
// inside
} else {
// not inside
}
});
I have a very simple function where after click body class fades out and replacing class.
$(".a").click(function () {
('body').fadeOut();
$('body').removeClass();
$('body').addClass("green");
$('body').fadeIn();
});
$(".b").click(function () {
$('body').fadeOut();
$('body').removeClass()
$('body').addClass("pink"),
$('body').fadeIn();
});
The problem I have is that the class is changing before the body will fade out which is opposite to what I am trying to achieve.
Any help much appreciated.
Thanks
Dom
The fadeOut method takes a callback to run after the fade finishes.
You can change the class in that callback:
$(".a").click(function () {
$('body').fadeOut(function() {
$('body').removeClass().addClass("green").fadeIn();
});
});
Use callback functions.
$(".a").click(function () {
('body').fadeOut(function(){
$('body').removeClass();
$('body').addClass("green");
$('body').fadeIn();
});
});
$(".b").click(function () {
$('body').fadeOut(function(){
$('body').removeClass()
$('body').addClass("pink"),
$('body').fadeIn();
});
});
$('body').fadeOut(function(){
$(this).removeClass().addClass("green").fadeIn();
});
The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});
Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);
If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);