We Keep Coding

How do I get this If statement to run once until it comes back round (the condition is constantly true until slide changes)

I've created a Flickity slider through Jquery and require a little assitance.
I'm using the selectedIndex as a condition to check what slider is visable. See code below:
$carousel.on( 'select.flickity', function() {
if (flkty.selectedIndex === 0) {
hideAllText();
text0.fadeIn('slow');
}
});
This is saying, when slider 0 (initial slide) fade in var text0.
I want to do this for 6 sliders but as the slide doesn't change until 4 seconds has been the if statement keeps running so it keeps hiding and showing text.
Any ideas how I can make this a one time run until the slide comes round again.
Thanks :)

This should result in the relevant code only being executed once:
text0Shown = false;
$carousel.on('select.flickity', function() {
if (!text0Shown && flkty.selectedIndex === 0) {
text0Shown = true;
hideAllText();
text0.fadeIn('slow');
}
});

jQuery - have different events if element is on the same row

I have a page with a row of boxes that are responsive........
so the smaller you resize the window the amount of boxes on each row lessens
heres a fiddle to show you whats going on
http://jsfiddle.net/abtPH/6/
Right now the behavior is......if you click on a box then a div appears under it.....if you click on the next box the div slides up a bit then slides down revealing the new content...
I want it so that if the box is on the same row and the user clicks the next one it does not slide up then down but fades the content in
I only want it to slide up when the box is on a different row...like underneath
heres my jquery so far
$('li').on('click', function(e){
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});

The trick is detecting what is on the same line. For that I think the position() function is what you need. When a list item is clicked, check to see if there is an active one already, if so, check to see if the current and active items have the same top value. If they do crossfade otherwise toggle.
$('li').on('click', function(e){
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
active.toggleClass('active', 400).find('.outer').fadeOut('slow');
$(this).find('.outer').fadeIn('slow');
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
jsFiddle

containing div does not resize correctly

On this page, 3 reviews are displayed in a Bootstrap carousel. As you paginate through the reviews, the <div> with the grey background should resize to fit the length of the review. This works reasonably well until you wrap around the end of the review list.
For example, if you use the next button to go forwards through the reviews, then when you go from the last review (#3) to to the first review, a big empty space is left under the first review. Similarly if you use the prev button to go backwards through the reviews, then when you go from the first review to the last (#3), the text of the review overflows the containing div (see screenshot below).
In summary, whenever you wrap around the list of reviews, either by using the prev button to go from #1 to #3 or the next button to go from #3 to #1) the containing div is not correctly resized.
The event handlers that are called when the user paginates through this carousel are at the bottom of the page (reproduced here for convenience):
$(document).ready(function () {
$('#reviewsCarousel').carousel({
interval:null
});
// reviewsCarousel height animation and review counter (set .reviewCount to
// the amount of .item in #reviewsCarousel, on .nextReview or .prevReview button
// clicks: set the carousel-inner class to the animate to the height of the next
// item or the first item if there is no next item, on carousel slide, set the
// reviewIndex class text to the index position of the .active .item)
$("#reviewsCarousel .reviewCount").html($('#reviewsCarousel .item').length);
$("#reviewsCarousel .btn.nextReview").click(function () {
var reviewHeight = $("#reviewsCarousel .item.active").next(".item").height();
if (reviewHeight === undefined) {
var reviewHeight = $("#reviewsCarousel .item").first(".item").height();
}
$("#reviewsCarousel .carousel-inner").animate({"height":reviewHeight + "px"}, 400);
$('#reviewsCarousel').bind('slid', function () {
$("#reviewsCarousel .reviewIndex").html($("#reviewsCarousel .active").index("#reviewsCarousel .item") + 1);
});
});
$("#reviewsCarousel .btn.prevReview").click(function () {
var reviewHeight = $("#reviewsCarousel .item.active").prev(".item").height();
if (reviewHeight === undefined) {
var reviewHeight = $("#reviewsCarousel .item").last(".item").height();
}
$("#reviewsCarousel .carousel-inner").animate({"height":reviewHeight + "px"}, 400);
$('#reviewsCarousel').bind('slid', function () {
$("#reviewsCarousel .reviewIndex").html($("#reviewsCarousel .active").index("#reviewsCarousel .item") + 1);
});
});
});
Here are a couple of screenshots showing the problem:

I tried a little something in the console:
$("#reviewsCarousel .item.active").next(".item").height();
And found out it was null.
if (reviewHeight === undefined) // It's never this.
You never get in the if. undefined !== null :-)
Just use:
if (!reviewHeight)
Any falsey value is good enough.

reviewHeight will never be undefined
USE if (!reviewHeight) insted

Maybe best not to use strict comparison for this if statement. Try instead
if (reviewHeight == undefined)
This also enters the if statement if reviewHeight === null.

more concise jquery for multi button controlling visibility of same div

I have 3 buttons that control the visibility of 1 div.
we want to do following to div:
show the first time any of three buttons are clicked
show if button clicked is different to previously button click
hide if button clicked is the same as previous clicked and if div is currently visible
show if button clicked is the same as previous clicked and if div is currently invisible
currently I have this:
//$('#alert_area') = target div
$button = $('.button')
if ($button.attr('id') != $('#alert_area').attr('showing')){
$('#alert_area').show()
}else{
if ($('#alert_area').is(":visible")){
$('#alert_area').hide();
}else{
$('#alert_area').show();
}
}
$('#alert_area').attr('showing', $button.attr('id'))

It's only a slight improvement, but you can replace your else block with toggle. You can also cache your selector to neaten things up.
var $button = $('.button'), $alertArea = $("#alert_area");
if ($button.attr('id') != $alertArea.attr('showing')) {
$alertArea.show()
} else {
$alertArea.toggle();
}
$alertArea.attr('showing', $button.attr('id'));

Avoid TAB on a Div in browsers

I have JQuery slide in-out div, which slides in-out on click of a button
The Problem#
when i open it in broswer, and start pressing TAB, when the selection reaches the options of that div(which slides), the slide div comes out(become visible without clicking on button).
is there any way by which that slide div can avoid TAB selection..
CHECK HERE http://global.redhatsalesteam.com/slide_test/

Start off with the display of the animated div at display: none; - this will mean the links inside it can't get focus from "tabbing" - then on click (in the function) change it to display: block just before starting the slide animation
var $marginLefty = $('#slidemarginleft div.inner');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'none'
});
$('#slidemarginleft .button').click(function() {
$marginLefty.css('display', 'block').animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});

set the tabindex on your links to -1. that should take them out of the tab order. if you want them to be tab-able to when you open the menu, you can set them back to something reasonable in the complete call back.
something like this should do it:
$('#slidemarginleft .button').click(function() {
$marginLefty.animate({
marginLefty: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
},
function(){
var counter = 1;
if($marginLeft.is(':visible'){
$marginLefty.find('a').each(function(){
$(this).attr('tabindex', counter);
counter++;
});
}
else{
$marginLefty.find('a').attr('tabindex', '-1');
}
});
});