Dropdown colorpicker with toggle click and timeout - javascript

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.

Related

Display menu on focus and hide when out of focus or clicked other than the menu

I am trying to display menu (#lorem-ipsum-wrapper) when the div (#content) is focused, and again hide the menu if neither the div or the menu is clicked.
js:
$(document).ready(function() {
console.log('ready');
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css("display", "block");
event.stopPropagation();
});
$(document).on("click", function() {
$('#lorem-ipsum-wrapper').css("display", "none");
});
});
demo at codepent.io
But the problem is that as soon as the #content is in focus, the menu displays and then again hides itself. Isn't the stopPropagation() method used to stop this? What am I doing wrong? Your help will be very much appreciated. Thank you.
Does this help ?
$(document).click(function(e) {
var e = $(e.target), eid = e.attr("id");
if (!e.parents("#lorem-ipsum-wrapper").length && !e.parents("#content-wrapper").length && eid !== "content-wrapper" && eid !== "lorem-ipsum-wrapper") {
$('#lorem-ipsum-wrapper').css("display", "none");
}
});
or you can use blur event :
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css("display", "block");
});
$('#content').on("blur", function(event) {
$('#lorem-ipsum-wrapper').css("display", "none");
});
If I didn't misunderstand, you want to hide #lorem-ipsum-wrapper if #content is not clicked and show the #lorem-ipsum-wrapper on click of #content. Then, your code should be:
$(document).ready(function() {
console.log('ready');
$('#lorem-ipsum-wrapper').css('display','none');
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css('display','block');
});
$('#content').on("blur", function() {
$('#lorem-ipsum-wrapper').css("display", "none");
});
$('#lorem-ipsum-wrapper').on("click",function(){
$(this).css("display","block");
});
Explanation:
The third lines ensures that the lorem-ipsum-wrapper is not show before executing any code.
The fourth and fifth lines make the #lorem-ipsum-wrapper visible whenever the focus is on the #content.
The seventh and eighth lines make the lorem-ipsum-wrapper hidden whenever the users clicks somewhere else on the page or make the #lorem-ipsum-wrapper lose focus.

jQuery hide element when click in datepicker

I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}

Jquery custom css on odd / even clicks

I want to rotate an object with .css
First click: 180°
Second click: back to normal position (+180°)
Now i need a function, to detect, if the current click is even or odd ...
Tried it with this:
$(function() {
$(".board-element").find(".category div").click(function() {
$(this).parent().parent().find(".board-boards").slideToggle(1000);
var clicks = $(this).data('clicks');
if (clicks) {
$(this).css("transform", "none");
} else {
//first click
$(this).css("transform", "rotate(180deg)");
}
});
});
It works fine, i klick on the element, the object rotates ...
But when i click again, nothing happens ...
I hope you can understand my problem,
Thanks :)
Cleaner approach would be toggling class name so you don't have to deal with click counts:
$(".board-element").find(".category div").click(function() {
$(this).parent().parent().find(".board-boards").slideToggle(1000);
$(this).toggleClass('rotate');
});
CSS:
.rotate {
transform: rotate(180deg);
}
Additional benefit is that if you decide to support vendor prefixes you don't have to change javascript code for this, just extend CSS.
You do not seem to be setting a data('clicks') value anywhere...
$(function() {
$(".board-element").find(".category div").click(function() {
$(this).parent().parent().find(".board-boards").slideToggle(1000);
var clicks = $(this).data('clicks');
// Save the new flag value
$(this).data('click', true);
if (clicks) {
$(this).css("transform", "none");
} else {
//first click
$(this).css("transform", "rotate(180deg)");
}
});
});
Notes:
You should avoid things like .parent().parent() and use closest('.board-element') or similar instead.
#dfsq has posted a cleaner solution. This one was just to explain where you went wrong :)
You could use a trigger variable, that changes its value after animation 2 directions (you have to inizialize it ouside the function):
var already_turned = false;
$(function() {
$(".board-element").find(".category div").click(function() {
$(this).parent().parent().find(".board-boards").slideToggle(1000);
var clicks = $(this).data('clicks');
if (clicks && already_turned) {
$(this).css("transform", "none");
already_turned = false;
} else {
//first click
$(this).css("transform", "rotate(180deg)");
already_turned = true;
}
});
});

How to rotate a bullet image in toggled unordered list with jQuery

Ok, I have totally retooled my approach (thank you superUntitled) and am making progress... I have an unordered list that users can toggle and my only remaining issue is that when I expand some items, and then click "Show All Cities" not all of the arrows go in the same direction. All the arrows change, including the ones on the list items already expanded. Any suggestions on how to resolve this?
Here's my new Javascript:
$("#Names .airports").hide();
$("#Names .close").hide();
$('#Expand').click(function(){
$('h2').children(".close").toggle();
$('h2').children(".arrow-down").toggle();
if($(this).text() == 'Hide All Cities')
{
$(this).text('Show All Cities');
$('#Names .airports').slideUp('fast');
}
else
{
$(this).text('Hide All Cities');
$('#Names .airports').slideDown('fast');
}
});
$("#Names h2").addClass("state").click(function() {
$(this).parent().children(".airports").slideToggle('fast')
$(this).children(".close").toggle();
$(this).children(".arrow-down").toggle();
Here's the fiddle illustrating the remaining problem:
http://jsfiddle.net/d3pxx8ds/127/
Thanks in advance
Here's my old JavaScript (reference only now):
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');});
$('.stateNames ul').hide();
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
}
}
});
});
All i did was replace the order, i moved the .rotate to happen before the .toggle functions this would read the rotate first and subsequently do the toggle function thus setting the variable to 180 instead of waiting for the toggle to start, not allowing the variable to be set
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind : {
click : function() {
value += 180;
$(this).rotate(value)
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
if (value==180){
value=360;
}
else{
value=180;
}
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
I added the if statement and it works for one full go around but on the next toggle the arrow doesn't rotate hope that helps for now i will keep looking in to it

hiding div when clicked outside the div

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

Categories