Develop Reference

How to divide and merge jquery UI tabs?

I working on divide and merge jquery UI tabs. My Fiddle is
MyCode:
$("#content_2").tabs();
$("#content_3").tabs();
var originalState = $("#content_2").clone();
$('#but').click(function(i) {
$('#content_2 > ul li a').each(function(i) {
$(this).hide();
var spanVal = $(this).attr('href');
var valueText = $(this).text();
$(spanVal).hide();
$('#content_2').prepend($('<div id="content_' + i + '"><ul><li class="ui-widget _lngTrans_Translatable">' + valueText + '</li></ul><span id="' + spanVal + '">' + $(spanVal).text() + '</span></div>'));
$("#content_" + i).tabs();
});
});
$('#but1').click(function() {
$("#content_2").replaceWith(originalState);
$("#content_2").tabs();
$("#content_3").tabs();
});
Here I have two buttons 'divide' and 'merge' If I click divide the tabs separated with its contents.If I click Merge The tabs should come to original form.
The problem is first time its working fine but the second time when I click merge the orignalstate changing and goes weird.
Please anyone help me to create this feature in Jquery UI tabs.
If you need more information comment me.
Thanks in Advance.

Just Change your function
$('#but1').click(function () {
$("#content_2").replaceWith(originalState);
originalState = $("#content_2").clone();
$("#content_2").tabs();
$("#content_3").tabs();
});
Here is Updated Fiddle Link

jQuery- counting articles in a row- it counts items from both boxes

I'm trying to count the articles in the top row of the two boxes on the page.
The boxes are separate and I want the count to be like that too -
function calculateArticlesInRow() {
var articleInRow = 0;
$('.promotionWrapper').each(function() {
console.log($(this).prev().length);
if($(this).prev().length > 0) {
console.log($(this).offset().top + '='+ $(this).prev().offset().top);
if($(this).offset().top != $(this).prev().offset().top){
return false;
}
articleInRow++;
}
else {
articleInRow++;
}
});
$('.result1').html('No: of articles in a row = ' + articleInRow);
}
setTimeout(function(){
calculateArticlesInRow();
}, 3000);
The problem I'm having however, is that the script is counting the articles in both boxes when only the articles with a certain top offset should be counted.
I have found other questions like this, but the all seem to use only one box.
Any help would be appreciated.
Here is a fiddle so you can see what I'm trying to do: https://jsfiddle.net/JackofD/de31nojn/
Thanks in advance

I think you should count the .promotionWrapper articles for each .productWrapper section.
i've updated your fiddle.
var articleInRow = 0,
maxArtNo = 0;
// cycle for every .productWrapper
$('.productWrapper').each(function (index, el) {
articleInRow = 0
// cycle for every .promotionWrapper in this .productWrapper
$('.promotionWrapper', el).each(function (innerIndex, innerEl) {
//your code
});
//set the count to the max
if (articleInRow > maxArtNo) maxArtNo = articleInRow;
});
// rest of your code

Try something like this:
$('.contentWrapper').each(function(){
//finds how many articles in the current container
console.log($(this).find('.promotionWrapper').length);
});
But to get each container individually, maybe you should put a separate class on each section tag instead.

You are counting all the sections with "promotionWrapper" class. To count the 1st row only, you need to select its parent section first and then count children of that. Here is the code:
$('.productWrapper:first').children('.promotionWrapper').each(function () {
console.log($(this).prev().length);
if ($(this).prev().length > 0) {
console.log($(this).offset().top + '=' + $(this).prev().offset().top);
if ($(this).offset().top != $(this).prev().offset().top) {
return false;
}
articleInRow++;
} else {
articleInRow++;
}
});

Sorry, my bad. Didnt see the jsfiddle.
Here is a working solution independent of your code:
var articlesInRow = [];
$('.productWrapper').each(function (index) {
articlesInRow[index] = $(this).find('.promotionWrapper').length;
$('.result' + (index+1)).html('No: of articles in row' + (index + 1) + ' = ' + articlesInRow[index]);
});
which i added to your calculateArticlesInRow function.
Please see updated jsfiddle:
https://jsfiddle.net/de31nojn/15/

Jquery mobile - Click button to add to UL

i am trying to build an application that when the user enters text into a textbox on a jquery based mobile app and clicks save it adds it to the list on the screen
so by default i won't have a list, but as the user adds an item the list should be created or if the list already exists, the new item added as a new list item.
in terms of saving it i will work on that after, for the time being i just want to dynamically append to a ul in jqm on the screen
Can someone assist with code that may help with this. it is giving me an item added saying "item undefined" however numslist is my list and txtbox is the textbox so im not sure where i am going wrong
thanks
<script>
var $txtbox = $("#txtbox").val();
var count = 0;
$("#main").live("pagecreate", function(event) {
$("#numlist").listview({create: function(event, ui) {
$("#addBtn").bind("click", function(event, ui) {
var str = "<li><a href='#'>Item " + ($txtbox) + "</a></li>";
$("#numlist").append(str);
$("#numlist").listview("refresh");
});
$("#removeBtn").bind("click", function(event, ui) {
// if (--count < 0) {
// count = 0;
// return;
// }
$("#numlist").find("li").remove();
$("#numlist").listview("refresh");
});
}});
});
</script>

Well, you can use localstorage, that way you won't need to code extra functions that save/store data.

try this:
var $lst = $('#productList');
$("#btnID").on("click",function() {
var $txtBox = $("#txtBox");
var $li = $('<li/>').html($txtBox.val());
$lst.append($li).listview('refresh');
$txtBox.val("");
});
working fiddle here: http://jsfiddle.net/REthD/21/

If I understood your question correctly, something similar to the following should work for you:
$('input[type=button]').on('click', function() {
var ul = $('#ul_id').length > 0 ? $('#ul_id') : $('<ul />', { id: 'ul_id'}).appendTo('#parent');
$('<li />').text($('#textbox').val()).appendTo(ul);
});
The first line in the event will check if the element exists, if it does, it returns that, otherwise, creates a new and appends to the specified parent element. Then, it appends a to the with the text from the textbox.
jsFiddle example

jQuery 'not' function giving spurious results

Made a fiddle: http://jsfiddle.net/n6ub3/
I'm aware that the code has a LOT of repeating in it, its on the list to refactor once functionality is correct.
The behaviour i'm trying to achieve is if there is no selectedTab on page load, set the first tab in each group to selectedTab. If there is a selectedTab present, then use this as the default shown div.
However, as you can see from the fiddle its not working as planned!
If anyone has any ideas how to refactor this code down that'd be great also!

Change
if($('.tabs1 .tabTrigger:not(.selectedTab)')){
$('.tabs1 .tabTrigger:first').addClass('selectedTab');
}
to
if ( !$('.tabs1 .tabTrigger.selectedTab').length ) {
$('.tabs1 .tabTrigger:first').addClass('selectedTab');
}
Demo at http://jsfiddle.net/n6ub3/1/
They way you are doing it (the first code part) you are adding the .selectedTab class if there is at least one of the tabs in that group that is not selected at start .. (that means always)
Update
For a shortened version look at http://jsfiddle.net/n6ub3/7/

Your selector are doing exactly what you're writing them for.
$('.tabs3 .tabTrigger:not(.selectedTab)') is true has long as there is at least one tab that has not the selected tab (so always true in your test case).
So you should change the logic to !$('.tabs3 .tabTrigger.selectedTab').length which is true only if there are no selectedTab

WORKING DEMO with simplified code
$('.tabContent').hide();
$('.tabs').each(function(){
var search = $(this).find('div.selectedTab').length;
if( search === 0){
$(this).find('.tabTrigger').eq(0).addClass('selectedTab')
}
var selectedIndex = $(this).find('.selectedTab').index();
$(this).find('.tabContent').eq(selectedIndex).show();
});
$('.tabTrigger').click(function(){
var ind = $(this).index();
$(this).addClass('selectedTab').siblings().removeClass('selectedTab');
$(this).parent().find('.tabContent').eq(ind).fadeIn(700).siblings('.tabContent').hide();
});
That's all! You don't need all that ID's all around. Look at the demo!

With a couple of very minor changes you code can be reduced to:
$('.tabContent').hide();
$('.tabs').each(function(){
if($('.tabTrigger.selectedTab',$(this)).length < 1)
$('.tabTrigger:first').addClass('selectedTab');
});
$('.tabTrigger').click(function(){
var content = $(this).data('content');
$(this).parents('div').children('.tabContent').hide();
$(this).parents('div').children('.tabTrigger').removeClass('selectedTab');
$(this).addClass('selectedTab');
$('#' + content).show();
});
$('.tabTrigger.selectedTab').click();
Those changes are
Change the class on the surrounding div to just class="tabs.
Add a data-content attribute with the name of the associated content div
Live example: http://jsfiddle.net/gsTBQ/

Well, I'm a bit behind the times obviously; but, here's my updated version of your demo...
I have updated your fiddle as in the following fiddle: http://jsfiddle.net/4y3Xp/1/.
Basically I just tidied it up a bit, and to refactor I put everything in a separate function instead of having each of the cases in their own. This is basically just putting a new function in that does similar to what yours was doing (e.g. not modifying your HTML model), but I tried to clean it up a bit, and I also just made a function that took the tab number and did each of the items that way rather than needing a separate copy for each.
The main issue with the 'not' part of your query is that the function doesn't return a boolean; like all JQuery queries, it's returning all matching nodes. I just updated that part to return whether .selected was returning more than 0 results; if not, I go ahead and call the code to select the first panel.
Glad you got your problem resolved :)
$(document).ready(function(){
var HandleOne = function (i) {
var idxString = i.toString();
var tabName = '.tabs' + idxString;
var tabContent = tabName + ' .tabContent';
$(tabContent).hide();
var hasSelected = $(tabName + ' .tabTrigger.selectedTab').length > 0;
if (!hasSelected)
$(tabName + ' .tabTrigger:first').addClass('selectedTab');
var selectedTabId =
$(tabName + ' .tabTrigger.selectedTab').attr('id');
var selectedContentId = selectedTabId.replace('tab','content');
$('#' + selectedContentId).show();
$(tabName + ' .tabTrigger').click(function() {
$(tabName + ' .tabTrigger').removeClass('selectedTab');
$(tabName + ' .tabContent').hide();
$(this).addClass('selectedTab');
var newContentId = $(this).attr('id').replace('tab','content');
$('#' + newContentId).show();
});
}
HandleOne(1);
HandleOne(2);
HandleOne(3);
});

How do I write .level+1 as a selector in JQuery or JavaScript?

A quick question. I have a series of DIVs with the following classes .level1 .level2 .level3
This is what I want to happen...When I hover over .level1 I would like the selector to select .level2. In other words .level+1 whatever I hover over.
How do I write this in JavaScript or JQuery ...The X in the code is where I need this to go
$(".no-submenu").hover(function() {
$.data(this, "timer", setTimeout($.proxy(function() {
$( X ).hide();
}, this), 700));
}, function() {
clearTimeout($.data(this, "timer"));
});
Any help is greatly appreciated, Thanks

If they're in order you can use .next() with a starts with attribute selector
$(this).next('[class^=level]').hide();
jsFiddle example
You can do a replacement with a function:
edit: added in the + to support multi digit levels
function replacer(num) {
return (parseInt(num, 10) + 1);
}
var selector = $(this).attr("class").replace(/([\d]+)$/,replacer);
$("." + selector).hide();
So, in the case above X = "." + selector
simplified jsFiddle example
.replace()
.parseInt()
The above will work based purely on class names.... so the order of the DIVs is not important. If you know the order of the divs, you could use the jQuery .eq() selector.

I didn't test it, but just what I thought of
var x = 1; // You are probably going to change this
$('.level'+x).hover(function() {
$('.level'+(x+1)).dosomething();
},function () {
$('.level'+(x+1)).dosomethingelse();
});