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 + ")")
Related
i have function including while loop in my function first process is completed but not gone again in click event
$('body').on('click', 'button.expandcollapse', function() {
// var currenttrid = $("tr.selected").attr("data-id");
var parentid = $(".selected").data("id");
var parrentid = (parentid) - 1;
var rowclick = parseInt($(this).closest('tr').attr('data-id'));
var currentid = rowclick + 1;
if ($("tr[data-id='" + parrentid + "'] > td:first-child button").hasClass("expandcollapse")) {
var parentleft = $("tr[data-id='" + rowclick + "']> td:first-child").css("padding-left");
while (true) {
var chiledtrleft = $("tr[data-id='" + currentid + "']> td:first-child").css("padding-left");
if (chiledtrleft <= parentleft) {
break;
}
$("tr[data-id='" + currentid + "']").hide();
currentid = currentid + 1;
}
$("span", this).text
} else {
var parentleft = $("tr[data-id='" + rowclick + "']> td:first-child").css("padding-left");
while (true) {
var chiledtrleft = $("tr[data-id='" + currentid + "']> td:first-child").css("padding-left");
if (chiledtrleft <= parentleft) {
break;
}
$("tr[data-id='" + currentid + "']").show();
currentid = currentid + 1;
}
$("button").removeClass("expandcollapse");
$("span", this).text("-");
}
i want again it comes to click event
now the else condition is continuously working but i want go to the click event after one step completd
In the end of the function You are doing
$("button").removeClass("expandcollapse");
So since there is no button with class expandcollapse . It does not get triggered for second time
Checkout this Demo . Your code goes something like this , and dont work on second click.
So better plan a logic first before implementing.
You can use this selector to make it work (only and only if you are not adding the button dynamically)
$("button.expandcollapse").click(function(){
Working Demo
if dynamic then use your selector with this change for your second last line of code
$(this).removeClass("expandcollapse");
Suggestion : Better Use different class for .removeClass() at last . Why do you want to remove the same class with which you are triggering the event. Please use some other class for other functionalities in click function.
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] + ')');
});
I'm using the .each function to hide/show columns of a table. But the problem is that the code is very slow in IE. After searching on internet I saw that could be because of my .each() function and $(this).
For more information why I'm using this code, you can look at this post: Hide/show column
This is my old code:
include JQuery.min.js on page
javascript:
$(function () {
$('table th').each(function (_id, _value) {
if(_id > 2){
if($(this).find("a").text()){
$('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$(this).find("a").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
$('table td:nth-of-type(' + parseInt(_id + 1) + '),table th:nth-of-type(' + parseInt(_id + 1) + ')').toggle();
e.preventDefault();
});
}
else{
if($(this).find("div").text()){
$('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$(this).find("div").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
$('table td:nth-of-type(' + parseInt(_id + 1) + '),table th:nth-of-type(' + parseInt(_id + 1) + ')').toggle();
e.preventDefault();
});
}
}
}
});
});
HTML:
<div id="togglers">Show/Hide columns<br/></div>
I tried to convert my javascript with this code (Source: jQuery very slow in IE), but I think there is still a problem with my i(or _id) and _value...
$(function () {
var items = $('table th');
var $currentItem;
for (var i = 0, j = items.length; i < j; i++) {
$currentItem = $(items[i]); // in place of $(this)
function (i, _value) {
if(i > 2){
if($currentItem.find("a").text()){
$('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$currentItem.find("a").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
$('table td:nth-of-type(' + parseInt(i + 1) + '),table th:nth-of-type(' + parseInt(i + 1) + ')').toggle();
e.preventDefault();
});
}
else{
if($currentItem.find("div").text()){
$('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$currentItem.find("div").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
$('table td:nth-of-type(' + parseInt(i + 1) + '),table th:nth-of-type(' + parseInt(i + 1) + ')').toggle();
e.preventDefault();
});
}
}
}
}
}
});
It's possible that I need to use other code. Any suggestion is welcome! Tnx.
Performance issue has nothing to do with .each. DOM is tens of times slower than any way to iterate collection you choose.
Instead of iterating table on every toggle you can make CSS do it for you. Demo.
$(function() {
var togglers = $('#togglers'), //cache toggler ref
addToggler = function(idx, text) {
togglers.append('<span class="toggler" data-id="'
+ idx + '">' + text + '</span>');
},
table = $('#table'), //cache table ref
columns = 0;
//generate styles for 100 columns table :)
(function generateStyleSheet(len){
var styles = [], i = 0;
for(; i < len; i++) {
styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ;
}
$('<style>' + styles.join('\n') + '</style>').appendTo(document.body);
}(100))
//bind on click once using event delegation
togglers.on('click', '.toggler', function(e){
var id = $(e.target).toggleClass('pressed').data('id');
table.toggleClass('hide-' + id);
});
//generate all togglers and count em
table.find('th').each(function(idx, header){
header = $(header);
addToggler(idx, header.text()); //make toggler
header.addClass('column-' + idx); //add class column-i
columns++;
});
//add column-i class to tds
table.find('td').each(function(idx, td) {
$(td).addClass('column-' + (idx%columns));
});
});
This has been troubling me for the passed few hours now.
I have a table. Within that table i'm looking for the closest, previous table row with a specific data attribute. I'm doing this search right after a successful use of jquery sortable. I've tried almost everything and it ALWAYS comes up with the wrong thing.
Here's what i'm using
var newIndex = ui.item.index();
var menuLevel = parseInt($("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-level"));
var menuId = $("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-id");
if (menuLevel == 2) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","1").attr("data-menu-name");
alert(findAboveRowName);
}
if (menuLevel == 3) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","2").attr("data-menu-name");
alert(findAboveRowName);
}
Essentially, the variable "newIndex" is supposed to grab the new position of the row after being sorted, menuLevel is supposed to grab the data attribute "menu-level" of that table row, and menuId is grabbing another data attribute of that table row.
It's specifically looking for the nearest, previous menu-level attribute in the table rows. So if a table row with a menu-level attribute of 2 is moved, it's looking for the nearest table row with a menu-level attribute of 1.
The full jquery sortable script i'm using if needed
$("#sortable").sortable({
update: function(event, ui) {
var serial = $('#sortable').sortable('serialize');
var newIndex = ui.item.index();
var menuLevel = parseInt($("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-level"));
var menuId = $("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-id");
if (menuLevel == 2) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","1").attr("data-menu-name");
alert(findAboveRowName);
// $.post("./menu-controller.php", { adjustParent: true, id: menuId, parent: findAboveRowName });
}
if (menuLevel == 3) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","2").attr("data-menu-name");
alert(findAboveRowName);
// $.post("./menu-controller.php", { adjustParent: true, id: menuId, parent: findAboveRowName });
}
$.ajax({
url: "./menu-controller.php",
type: "post",
data: serial,
success: function() {
$("#sortable").load("./menu-manager.php #menu-table", function() {
$.get('./menu-admin.js');
});
},
error: function(){
alert("A problem occurred when moving this menu item. Please try again or contact support.");
}
});
},
handle:'.move-item',
connectWith:'#menu-table',
placeholder: "highlight",
containment: "parent",
revert: true,
tolerance: "pointer",
items: 'tbody > *'
});
JSFIDDLE
.prev only returns the immediately previous element, it doesn't keep looking for the nearest element that matches the selector. Use .prevAll to find all the elements matching a selector, and then use .first() to narrow it down to the first one, which is the nearest. And if you want to search for a specific data-menu-level attribute, you have to put that in the selector; calling .data("menu-level", 1) sets the attribute, it doesn't search for it.
if (menuLevel == 2) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prevAll(".menu-table-rows[data-menu-level=1]").first().data("menu-name");
alert(findAboveRowName);
}
This is my all script, I know this is long, but just one line is important and I add all it for insurance:
//Add new Addable div
$('.AddNewE').click(function () {
var RemoveAddableButton = $('<input type="button" class="RemoveE button red" value="remove" />');
$(RemoveAddableButton).click(function () {
$(this).closest('.Addable').remove();
});
var TargetId = $(this).attr('id');
TargetId = TargetId.substring(3);
var Target = $('.Addable#' + TargetId + ':first');
var Count = $('.Addable#' + TargetId).size();
var CloneTarget = $(Target).clone();
CloneTarget.find('input').val('');
CloneTarget.insertAfter('.Addable#' + TargetId + ':last'); // ***importantOne
var TargetName = $(Target).find('input').attr('name');
if (Count == 1) {
var CloneName = TargetName + '[1]';
TargetName = TargetName + '[0]';
$(Target).find('input').attr('name', TargetName);
$(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName);
$(CloneTarget).find('input').attr('name', CloneName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneName + '"></span>')
);
}
} else {
var indx = TargetName.length - 3;
var CloneTargetName = TargetName.substring(0, indx);
CloneTargetName = CloneTargetName + '[' + Count + ']';
$(CloneTarget).find('input').attr('name', CloneTargetName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneTargetName + '"></span>')
);
}
}
(function ($) {
$.fn.updateValidation = function () {
var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
return this;
};
})(jQuery);
$(Target).updateValidation();
$(CloneTarget).updateValidation();
});
If I click the .AddNewE button then a new div added, but as my script I want to add this new div to the end of the divs so I use
CloneTarget.insertAfter('.Addable#' + TargetId + ':last');
but always the new div added as a second div it means always the :first and :last div is same and is first one also I checked by:
$('.Addable#' + TargetId).css('border', '');
$('.Addable#' + TargetId + ':last').css('border', '3px dotted green');
$('.Addable#' + TargetId + ':first').css('border', '3px dotted red');
So where is the problem? why the jQuery can't recognize last div ?
The problem is in the jQuery selector: $('.Addable#' + TargetId + ':last')
It is not valid HTML when you have multiple elements with the same id (#TargetId). ID is unique and you're not supposed to have more than 1 element with the same ID.
The jQuery selector assumes you use valid correct HTML markups, so it doesn't bother to collect all your elements with that ID. As soon as jQuery found the first element in the DOM with that ID, it stops and appends your new element right after that.
Try updating your jQuery selectors to simply: $('.Addable:first') and $('.Addable:last') and see if it works.