Develop Reference

jQuery: Prevent multiple clicks?

I'm trying to prevent mutiple clicks on a link and I need to wait until the function's complete before allowing another click on the same link.
However, everything I do, the multiple clicks is always allowed.
This is my code:
var active = false;
$('#rotRight').live('click', function(){
if (active) {
return;
}
$(this).attr('id', 'rotRight1');
var curAngle = parseInt($(".selected").getRotateAngle()) || 0;
if($(".selected").rotate({
angle: curAngle,
animateTo: curAngle - 90
})){
active = true;
}
$(this).attr('id', 'rotRight');
active = false;
});
I know I'm in the right path. I just need someone to let me know what i'm missing or if I'm doing something wrong please.
Any help would be appreciated.
Thanks

The rotate plugin has a callback where you can reset the active flag value
var active = false;
$('#rotRight').live('click', function() {
if (active) {
return;
}
var curAngle = parseInt($(".selected").getRotateAngle()) || 0;
active = true;
$(".selected").rotate({
angle: curAngle,
animateTo: curAngle - 90,
callback: function() {
active = false;
}
})
});

Try preventing default behaviour first before returning
var active = false;
$('#rotRight').live('click', function(e){
if (active) {
e.preventDefault(); // prevent default behaviour before returning
return;
}
...
});

You could always create an overlay (loading screen), stopping the user doing anything till the process is completed via a full screen div with the following css:
#overlay {
background-color: rgba(0, 0, 0, 0.3);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}​
This will do the following: https://gyazo.com/aa833914eda1c39d3b8198db2b32dc41
Makes all content un-clickable until after the loading screen has finished.

You can try to use the Data attribute on your link. Like that, you can set the "active" property on the link itself and act in consequence. Jquery handle that system with $().data(string) method. I think it's cleaner than using a global "active" var.
$('#rotRight').live('click', function() {
if ($(this).data("active") != undefined && $(this).data("active") == true) {
return;
}
var curAngle = parseInt($(".selected").getRotateAngle()) || 0;
$(this).data("active") = true;
var self = $(this);
$(".selected").rotate({
angle: curAngle,
animateTo: curAngle - 90,
callback: function() {
self.data("active") = false;
}
})
});

$('#rotRight').live('click', function(e) {
if (e.handled!=true) {
e.preventDefault(); // prevent default behaviour before returning
return;
}
e.handled=true;
});

Animate some divs only once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!

From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};

var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.

The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

Jquery UI selectable table cell outline

Ok so I'm using Jquery UI Selectable to highlight some cells in a table. I would like to be able to add a border around the highlighted cells using like a 2px border. This way each time you highlight a section you can tell the separation between each section that has been highlighted. I am also hoping I can achieve this result with overlapping sections.
I've done quite a bit of reading and haven't really seen anyone trying to do this yet. So I'm wondering if someone might be able to point me in the right direction on how to achieve this effect.
Here's a fiddle of my example and some code below.
var shadeColor = $(".color-pallet > .active").css("background-color");
applySelectable = function() {
$(".block-tools > .shade-btn").click(function() {
var $this = $(this);
if (!$this.hasClass("active")) {
$this.siblings().removeClass("active");
$this.addClass("active");
}
});
$(".color-pallet > span").click(function() {
var $this = $(this);
if (!$this.hasClass("active")) {
$this.siblings().removeClass("active");
$this.addClass("active");
shadeColor = $(this).css("background-color");
}
});
// keep selected shade color selected after new question
if (shadeColor !== $(".color-pallet > .active")) {
$(".color-pallet > span").filter(function(){
var color = $(this).css("background-color");
if (color === shadeColor) {
$(this).click();
};
});
}
$(".blocks").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable({
filter: "td",
selecting: function (event, ui) {
if ($('.block-shade').hasClass("active")) {
$(ui.selecting).addClass('marked').css("background-color", shadeColor);
} else {
$(ui.selecting).removeClass('marked').css("background-color", "");
}
userAns = $('.marked').length+"";
}
});
};
applySelectable();
Thank you in advance for you time.
EDIT: For bonus points, can someone tell me when im dragging a selection, why is the containers height growing and creating a scroll bar? This has been seriously bugging me for some time and I chose to ignore it but I guess while I'm here maybe someone could explain this as well?

Huh... here is some kind of solution, i've added 4 css classes, and some ugly code... but it is working...
$(".blocks").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable({
filter: "td",
selecting: function (event, ui) {
if ($('.block-shade').hasClass("active")) {
$(ui.selecting).addClass('marked').css("background-color", shadeColor);
$(ui.selecting).addClass('top');
$(ui.selecting).addClass('left');
$(ui.selecting).addClass('bottom');
$(ui.selecting).addClass('right');
if($(ui.selecting).prev().hasClass('marked')) {
$(ui.selecting).removeClass('left');
$(ui.selecting).prev().removeClass('right');
}
if($(ui.selecting).next().hasClass('marked')) {
$(ui.selecting).removeClass('right');
$(ui.selecting).next().removeClass('left');
}
top_elem=$(ui.selecting).parent().prev('tr').find('td');
// console.log(top_elem);
$(top_elem).each(function(i) {
if($(this).hasClass('marked')) {
if($(this).offset().left==$(ui.selecting).offset().left)
{
$(this).removeClass('bottom');
$(ui.selecting).removeClass('top');
}
}
});
bottom_elem=$(ui.selecting).parent().next('tr').find('td');
$(bottom_elem).each(function(i) {
if($(this).hasClass('marked')) {
if($(this).offset().left==$(ui.selecting).offset().left)
{
$(this).removeClass('top');
$(ui.selecting).removeClass('bottom');
}
}
});
} else {
$(ui.selecting).removeClass('marked').css("background-color", "");
$(ui.selecting).removeClass('top');
$(ui.selecting).removeClass('left');
$(ui.selecting).removeClass('bottom');
$(ui.selecting).removeClass('right');
}
userAns = $('.marked').length+"";
}
});
};
applySelectable();
});
DEMO: http://jsfiddle.net/wh2ehzo3/10/
However, overlapping is really, really tricky IF YOU WANT to KEEP borders on overlapping parts.. test... (just OUTER border of both shapes is saved, i hope you will see what i mean)
Idea: check siblings -> remove classes accordingly, if there is .marked element, check up and down rows -> do the same...

Float list-items left when others are hidden

I'm having an issue with my list items not floating left automatically upon toggling the visibility of other list items through a filter.
See the website and code here:
http://javinladish.com/dev/
When you toggle 'Gloves' for example, the gloves should not appear in the same place, but instead move to the first slot in the list.
Is the plugin I'm using called AwesomeGrid causing this issue? It might be absolutely positioning the li elements, but I'm not exactly sure.
The jQuery code I'm using to toggle the filter and list-items is:
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul.grid li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul.grid li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
How can I make sure that when I filter my list-items, that they always float left?
Thanks in advance to anyone who helps out!

AwesomeGrid has a built in property called hiddenClass, you can define hidden as your hidden class selector, then recall AwesomeGrid after the click event. Basically the code will be like this :
$(window).load(function(){
function grid_relayout() {
$('ul.grid').AwesomeGrid({
responsive : true,
initSpacing : 0,
rowSpacing : 28,
colSpacing : 28,
hiddenClass : 'hidden',
columns : {
'defaults' : 3,
'990' : 2,
'650' : 1
}
})
}
grid_relayout();
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul.grid li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul.grid li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
grid_relayout()
return false;
});
})

If you look at the CSS properties of the "li" elements, you see that they are positioned "absolute" with pixel values for "left". What you want is "float: left". But I don't know AwesomeGrid so I can't give you a solution without studying it further.

After initial click, have to click twice with Jquery click()

Couldn't find a solution that actually worked, but I want that on a click, a div shows.
Now this works when I load the page, but then after that first click, I have to click twice every time for the div to show.
Any ideas?
$(document).ready(function () {
setMenu();
});
function setMenu()
{
var headerExtIsOpen = false;
$('#headerExt').hide();
$('#header').click(function () {
if (!headerExtIsOpen) {
$('#headerExt').show();
headerExtIsOpen = true;
} else {
$('#headerExt').hide();
headerExtIsOpen = false;
}
});
}

There is no need to remember the state, just use toggle()
$(function () {
setMenu();
});
function setMenu()
{
$('#headerExt').hide();
$('#header').on("click", function (e) {
e.preventDefault();
$('#headerExt').toggle();
});
}
You said you want to toggle other things.
Best thing would be to toggle a class to change the color
$('#header').on("click", function (e) {
e.preventDefault();
$(this).toggleClass("open");
$('#headerExt').toggle();
});
another way is to check the state
$('#header').on("click", function (e) {
e.preventDefault();
var child = $('#headerExt').toggle();
var isOpen = child.is(":visibile");
$(this).css("background-color" : isOpen ? "red" : "blue" );
});
if the layout is something like
<div class="portlet">
<h2>Header</h2>
<div>
<p>Content</p>
</div>
</div>
You can have CSS like this
.portlet h2 { background-color: yellow; }
.portlet > div { display: none; }
.portlet.open h2 { background-color: green; }
.portlet.open > div { display: block; }
And the JavaScript
$(".portlet h2 a").on("click", function() {
$(this).closest(".portlet").toggleClass("open");
});
And there is layouts where it would be possible to have zero JavaScript involved.

Turns out I had some script hidden in my .js file that closes the menu again when the user clicks elsewhere, that I forgot about.
function resetMenu(e) {
var container = $('#headerExt');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('#header').css("background-color", "inherit");
container.hide();
headerExtIsOpen = false;
}
}
I forgot to set the headerExtIsOpen back to false again after closing it in this function (code above shows the fix). Now it works fine :)