Develop Reference

jQuery custom tabs not working correctly

I am having a little trouble working out why my tabs content is not switching correctly, only seems to work on the last one. Does anyone have any ideas?
https://jsfiddle.net/x04o2kb6/
JS:
$(document).ready(function($) {
var activateTab = function(index) {
var tab = $(".tabs-menu li:eq(" + index + ")"),
tabContent = $(".tab div:eq(" + index + ")");
tab.addClass("active");
tab.siblings().removeClass("active");
tabContent.siblings().css("display", "none");
tabContent.show();
}
var automation = {
start: function() {
this.current = setInterval(function() {
var currentIndex = $(".tabs-menu li.active").index(),
max = $(".tabs-menu li.active").parent().children().length;
activateTab(currentIndex + 1 < max ? currentIndex + 1 : 0);
}, 2000);
},
stop: function() {
if (this.current) {
clearInterval(this.current);
}
}
}
$(".tabs-menu a").click(function(event) {
event.preventDefault();
activateTab($(event.currentTarget).parent().index());
});
//automation.start();
});

Change your activateTab function as following -
var activateTab = function(index) {
var tab = $(".tabs-menu li:eq(" + index + ")"),
tabContent = $(".tab > div:eq(" + index + ")");
tab.addClass("active");
tab.siblings().removeClass("active");
tabContent.siblings().css("display", "none");
tabContent.show();
}

There is wrong css selector, when you are selecting tab content divs. Use this one to select only the childs tabContent = $(".tab > div:eq(" + index + ")");
Your css selector seleted all divs.

You weren't referring proper tabContent. It always used to fetch index i.e. whatever you pass to function, say could be 3, 2, and that particular div was fetched irrespective of its hierarchy.. Just change with exact class:
tabContent = $(".tab div.mainFeatureCopy:eq(" + index + ")");
refer div with its class here i.e. mainFeatureCopy
DEMO

Please check now I have updated tabContent = $(".tab>div:eq(" + index + ")"); Check Fiddle

tabContent = $(".tab div:eq(" + index + ")")
don't get the right object, you should use
tabContent = $(".tab-content:eq(" + index + ")")

JQuery background URL uncaught syntax error

I'm trying to make a background slideshow using jQuery. I'm trying to have a hidden div (nextDiv) on the right of activeDiv slide nextDiv over activeDiv so that activeDiv will be overlapped by nextDiv. Once that is done, the background of nextDiv will then be changed to prepare for the new background image. Below is the code I have written.
// Scroll background
var bgClicked = false;
var bgList = [];
$(".bg-img").each(function(idx, el) {
bgList.push($(el).css('background-image').substr(4, 50));
bgList[idx] = bgList[idx].substr(0, bgList[idx].length -1);
});
var bgNum = bgList.length;
var bgNextDiv = $("#bg-next");
var bgActiveDiv = $("#bg-active");
var bgActive = 0;
var bgNext = 1;
// Scroll until clicked
console.log(bgList);
if(bgClicked == false) {
setInterval(function() {
$(bgList[bgNext]).animate({left:0}, 1000, 'linear', function() {
bgActiveDiv.css('background-image', 'url(' + bgList[bgNext] + ')');
bgActive = bgNext;
bgNext = bgNext < bgNum - 1 ? bgNext + 1 : 0;
bgNextDiv.css('background-image', 'url(' + bgList[bgNext] + ')');
});
}, 5000);
}
However, I'm getting
Uncaught Error: Syntax error, unrecognized expression: http://localhost:3000/img/bg2_2560x1440px.jpg`
when setting
bgActiveDiv.css('background-image', 'url(' + bgList[bgNext] + ')');
I think I missed something, but I don't know where.
Please help?
Cheers,
Agi
EDIT 1
Content of bgList = ["http://localhost:3000/img/bg1_2560x1440px.jpg", "http://localhost:3000/img/bg2_2560x1440px.jpg"]

You are using bgList[bgNext] as jQuery selector that is why you are getting error.
So, use this instead:
$(".bg-img:eq(" + bgNext + ")").animate({left:0}, 1000, 'linear', function() {
bgActiveDiv.css('background-image', 'url(' + bgList[bgNext] + ')');
bgActive = bgNext;
bgNext = bgNext < bgNum - 1 ? bgNext + 1 : 0;
bgNextDiv.css('background-image', 'url(' + bgList[bgNext] + ')');
});

Jquery literally writes the word "false" when function returns no data

I have a jquery function to turn my links into google map links. My links are dynamic and pulled from db. So some of the links will be blank depending if that post has that data or not.
PROBLEM: If the post does not have data for that link (field), my function will litteraly write "False" on the front end instead of just being left blank (I want it to just be blank if there is no data.
I think it just needs to be made into an if / else statement but im not very good with jquery and need help
Here is the function: ( (retailers_init['full_address']) ) is the hook for the data)
$('address').each(function () {
var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent(retailers_init['full_address']) + "' target='_blank'>" + (retailers_init['full_address']) + "</a>";
$(this).html(link);
});
And here is the larger function that this function (that changes (retailers_init['full_address']) to a google map link) resides in.
function init(retailer) {
var retailers_init = (typeof (retailer) != 'undefined') ? retailer : (typeof (retailers[0]) != 'undefined') ? retailers[0] : 'undefined';
if (typeof (retailers_init) !== 'undefined') {
var image = $('.storeinfo ._image');
var phone_number = $('.storeinfo ._phone_number');
var email = $('.storeinfo ._email');
var website = $('.storeinfo ._website');
var title = $('.storeinfo ._title');
var full_address = $('.storeinfo .full_address');
image.stop().animate({
'opacity': '0'
}, 100, function() {
image
.removeAttr('style')
.attr('src', image.attr('data-load'))
.addClass('loading')
.animate({
'opacity': '1'
}, 200);
});
$('<img/>').load(function() {
image.stop().animate({
'opacity': '0'
}, 200, function() {
image.removeClass('loading');
image.attr('src', retailers_init['image']);
setTimeout(function() {
image.css({'margin-top': '-' + (image.height() / 2) + 'px'});
image.animate({
'opacity': '1'
}, 200);
}, 100);
});
}).attr('src', retailers_init['image']);
title.html(retailers_init['title']);
full_address.html(retailers_init['full_address']);
phone_number.html(retailers_init['phone_number']);
email.attr('href', 'mailto:' + retailers_init['email']).html(retailers_init['email']);
website.attr('href', retailers_init['website']).html(retailers_init['website']);
$('address').each(function () {
var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent(retailers_init['full_address']) + "' target='_blank'>" + (retailers_init['full_address']) + "</a>";
$(this).html(link);
});
}
}

Setting dynamic css-style properties of a Backbone.View

I'm trying to set the height, width and background image of a <ul> element.
Here's what I've got for my Backbone.View:
var RackView = Backbone.View.extend({
tagName: 'ul',
className: 'rack unselectable',
template: _.template($('#RackTemplate').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
attributes: function () {
var isFront = this.model.get('isFront');
var imageUrlIndex = isFront ? 0 : 1;
return {
'background-image': 'url(' + this.model.get('imageUrls')[imageUrlIndex] + ')',
'height': this.model.get('rows') + 'px',
'width': this.model.get('width') + 'px'
};
}
}
This doesn't work because the attributes are not written into a 'style' property of the element. Instead, they're treated like attributes... which makes sense because of the function name, but it has left me wondering -- how do I achieve something like this properly?
The image, height and width are immutable after being set, if that helps simplify...
Do I just wrap my return in a style? That seems overly convoluted...
Here's the generated HTML:
<ul background-image="url(data:image/png;base64,...)" height="840px" width="240px" class="rack unselectable">
</ul>
EDIT: This works, but I'm not stoked:
attributes: function () {
var isFront = this.model.get('isFront');
var imageUrlIndex = isFront ? 0 : 1;
var backgroundImageStyleProperty = "background-image: url(" + this.model.get('imageUrls')[imageUrlIndex] + ");";
var heightStyleProperty = "height: " + this.model.get('rows') + 'px;';
var widthStyleProperty = "width: " + this.model.get('width') + 'px;';
return {
'style': backgroundImageStyleProperty + ' ' + heightStyleProperty + ' ' + widthStyleProperty
};
},

You could just use the jquery css function in your render function:
render: function () {
this.$el.html(this.template(this.model.toJSON()));
var backgroundImageStyleProperty = "background-image: url(" + this.model.get('imageUrls')[imageUrlIndex] + ");";
var heightStyleProperty = "height: " + this.model.get('rows') + 'px;';
var widthStyleProperty = "width: " + this.model.get('width') + 'px;';
this.$el.css({
'height' : heightStyleProperty,
'width' : widthStyleProperty,
'background-image': backgroundImageStyleProperty
});
return this;
},

In Marionette, right in your view you can call:
onRender: function () {
this.$('yourElement').css('whatever', 'css');
},

The only way to do this is to pass in the attributes using a style attribute as described in the question. In backbone, the attribute map is passed directly into jQuery by this line of code:
var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
So, there is no way to pass in styles as a Javascript object.

jquery using multiple setTimeouts

I am currently creating a site with some dynamic content, so that whenever a user hovers over a label, the label expands to show more information, then after a specific time the label will collapse again, unless the user hovers over the label again in which case the Timeout will reset. I have developed the code to do this for 1 label, but I would to develop it now to do it for multiple labels.
The problem I'm having though is that I am defining the variable for the timer globally so it can be used for both events, this won't work when I have multiple labels though.
I can't think how I can achieve this for multiple labels, does anyone have any idea how I can do this?
Here is my code so far...
var timer;
$('.label').mouseenter(function(){
clearTimeout(timer);
$('#' + this.id + ' div').slideDown('slow');
});
$('.label').mouseleave(function(){
var temp = $('#' + this.id + ' div');
timer = setTimeout(function() {
temp.stop().slideUp('slow');
}, 2000);
});
Thanks in advance for any help.

You can maintain an array of timers like
var timer = [];
$('.label').mouseenter(function(){
clearTimeout(timer[$(this).index()]);
$('#' + this.id + ' div').slideDown('slow');
});
$('.label').mouseleave(function(){
var temp = $('#' + this.id + ' div');
timer[$(this).index()] = setTimeout(function() {
temp.stop().slideUp('slow');
}, 2000);
});
You can also achieve this with a more clear syntax using .hover like
var timer = [];
$('.label').hover(function(){
clearTimeout(timer[$(this).index()]);
$('#' + this.id + ' div').slideDown('slow');
},function(){
var temp = $('#' + this.id + ' div');
timer[$(this).index()] = setTimeout(function() {
temp.stop().slideUp('slow');
}, 2000);
});

Why dont you use hover :
$('.label').hover(function(){
$('#' + this.id + ' div').slideDown('slow');
},
function(){
$('#' + this.id + ' div').slideUp('slow');
})
This way, when labels are hovered upon, more info will show and when mouse leaves them, they will hide back again.
The first param to hover is for mouse enter while second for mouse leave.
More Info:
http://api.jquery.com/hover/

Instead of using global variable timer you can use jQuery's .data() method like this:
$('.label').hover(function(){
clearTimeout($(this).data('hover_timeout'));
$('#' + this.id + ' div').slideDown('slow');
},function(){
var temp = $('#' + this.id + ' div');
$(this).data('hover_timeout', setTimeout(function() {
temp.stop().slideUp('slow');
}, 2000));
});
jQuery.data() documentation