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/

Adding CR or LF in HTML attribute

To explain this shortly, I have an mouseenter Jquery event firing up an AJAX call. And a Jquery UI tooltip.
$(function()
{
$(document).tooltip({track:true});
$('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});
Here is the call:
function AJAXValidation(section)
{
var request = $.ajax(
{
url: "ProcessJRT.php",
type: "POST",
contentType:"application/x-www-form-urlencoded;charset=UTF-8",
data:
{
validate:section
}
});
request.done(
function(message)
{
var div = document.createElement('div');
$(div).html(message);
$(div).children().each
(
function(i)
{
var title = '';
if($('#' + $(this).attr('id')).attr('title') != null)
{
title = $('#' + $(this).id).attr('title');
}
title += $(this).html() + '\r\n';
$('#' + $(this).id).attr('title', title);
}
);
});
}
What it does now is it take the <div>s from message and it place them in a parent <div>. (In my code the div already exist, I changed that part so the question would stay as short as possible).
I then take the text from those <div> and I want to place them in the corresponding <input/> title attribute.
Everything work just perfect here exepte this stupid little thing:
I am unable to add a LN or a CR in the title so all the texts from the divs would be on separate line...
I have tried adding a </br> inside the attribute like this:
function(i)
{
var title = '';
if($('#' + $(this).id).attr('title') != null)
{
title = $('#' + $(this).attr('id')).attr('title');
}
title += $(this).html() + '</br>';//<---See I added a BR here
$('#' + $(this).id).attr('title', title);
}
But it display the </br> as normal text. I than tried String.fromCharCode(13) but did'nt work, I tried jus '\n' or '\r\n' and still does work.
Can someone point out were I am derping on this one??
Thanks!
EDIT:
Changed the $('#' + $(this).attr('id')) to $('#' + $(this).id).

You can't format the title attribute in that way, it doesn't work, and will be different across different browsers.
Try the jquery plugin qTip to achieve what you want. (looks good too!)
http://craigsworks.com/projects/qtip/
Alternatively, you can cheat by using etc, to push the text to the next line. but this is flaky at best.

Here is how I resolve my problem with the idea that #crush gave me:
First:
I removed the tooltip initialization from the function that fire the event :
$(function()
{
$('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});
Next:
I changed the "done" function so I would initialise a new tooltip each time with html content (FYI JQuery tooltip can format HTML)
Here what it look like now:
function(message)
{
var div = document.createElement('div');
$(div).html(message);
var title = '';
$(div).children().each
(
function(i)
{
if($('#' + $(this).id).attr('title') != null)
{
title = $('#' + $(this).id).attr('title');
}
title += $(this).html() + '</br>';
$(document).tooltip({content:title, items:('#' + $(this).id)});
}
);
}

Javascript - Jquery on the fly id retrieving

I've made a JS utility with jQuery that gives IDs to div elements and to links, which are coordinated.
Example:
div id="container"
div id="1"
div id="2"
div id="links"
a name="1"
a name="2"
So once the page is loaded, when I click on the first link (name="1") it is supposed to show the first div (id="1").
But it seems that as my IDs are created on the fly, the function doesn't seem to find the right div.
Here's my function:
$("#video_grid .grid_item a").each(
function(i) {
/* FINDING 'A' AND GIVING THEM NAME */
$(this).addClass("item" + (i + 1));
$(this).attr("name", "#" + (i + 1));
/* BACKGROUND */
$(this).css("background-image",
"url(images/visu_" + (i + 1) + ".jpg");
$(this).hover(
function() {
$(this).css("background-image",
"url(images/visu_hover_" + (i + 1) + ".jpg")
},
function() {
$(this).css("background-image",
"url(images/visu_" + (i + 1) + ".jpg");
});
});
/* FINDING DIV GIVING THEM IDS */
$("#capsule_player > div").each(function(i) {
$(this).addClass("item#" + (i + 1));
});
/* HERE'S THE PROBLEM */
$("#capsule_player div:first-child").css("display", "block");
/* appel la div correspondante avec la video */
$(".grid_item a").live("click", function() {
var divname = $(this).attr("name");
alert(divname);
/* WORK FINE TIL HERE */
/* THIS IS THE REAL PROBLEM */
$(".item" + divname).show("slow").siblings().hide("slow");
/* ALERT IF YOU FIND THE DIV WITH THE ID, DOES NOT WORK */
if ($(".item" + divname)[0]) {
alert('tonton');
}
});
I'm using jQuery, basic HTML and CSS, and PHP is not allowed.

Your function that is supposed to give the div's their IDs is giving them a class. You should change it to something like this:
$("#capsule_player > div").each(function(i){
$(this).attr("id", 'item' + (i+1));
});
That should work, but the rest of the code could do with a tidyup as there a better/more semantic ways to do what you want to do (which I might do when I'm not busy).
EDIT:
Something like this would be better (based on Armatus' comment):
// give each div a data-index attribute
$("div.item").each(function(i){
$(this).attr("data-index", i);
});
// give each anchor a data-index attribute
$("#video_grid .grid_item a").each(function(i) {
$(this).attr("data-index", i);
});
$(".grid_item a").live("click",function () {
var index = $(this).attr("data-index");
$('div.item[data-index="' + index + '"]').show();
});
.live() is deprecated, but I'll leave it because I don't know which version of jQuery you're using.

Although the route that Christian shows you is probably in the long run better and surely more learningful, your original problem can easily be solved by changing two lines:
$(this).attr('name', '#' + (i + 1));
[...]
$(this).addClass('item#' + (i + 1));
into
$(this).attr('name', 'Q' + (i + 1));
[...]
$(this).addClass('itemQ' + (i + 1));
The immediate problem is that you are giving your div a classname which includes a '#' sign. This will literally become part of your class name. However, during selection, this '#' sign will be interpreted as a 'ID' selector. So that doesn't work.

Javascript running twice

I have to develop a small application for school and I first designed in photoshop a bit and "converted" it into html. That went all fine. I created a custom dropdown with javascript and it worked smoothly. I've just tried implementing CodeIgniter into the design but the javascript started running twice.
I've tried comparing the code of the plain html version with the codeigniter result but I can't seem to find any difference.
Can any of you maybe help me?
Here's the CodeIgniter result:
http://intellia.itforit.net/index.htm
As asked by Krof Drakula here are the most important pieces of code:
The actual jquery plugin: (styleForm.js)
;(function($){
$.fn.styleForm = function() {
var form = this;
/* Select */
$('select', this).each(function(){
var div = '<div class="styledSelect"><ul>';
var first = false;
$('option', this).each(function(){
var cssclass = "";
if(!first) {
first = true;
cssclass = 'class="first"'
}
div += '<li ' + cssclass + ' id="' + $(this).attr("value") + '">' + $(this).text() + '</li>';
});
div += '</ul></div>';
$(this).hide();
$(this).after(div);
});
$('.styledSelect ul').toggle(function(){
$('li:not(.first)', this).show("fast");
}, function(){
$('li:not(.first)', this).hide("fast");
});
$('.styledSelect ul li:not(.first):not(.selected)').click(function(){
var id = $(this).attr('id');
var content = $(this).text();
$('.styledSelect ul li.first').attr('id', id).text(content);
$('.styledSelect ul li').css({'font-weight': 'normal'});
$(this).css({'font-weight': 'bold'});
/* SELECT in Select form item */
var selected = $('select option[value="' + id + '"]:not(.first)', form).get(0);
selected.setAttribute("selected", "selected");
//$(form).submit();
});
};
})( jQuery );
And here's where it gets launched: (canvasDrawing.js)
$(document).ready(function(){
$('form').styleForm();
//Unimportant canvas stuff
});
Thanx in advance,
Duckness

The problem is that your canvasDrawing.js, in the "unimportant canvas stuff", causes a javascript error. If the canvas it describes actually exists, your styleForm stuff only runs once. So add this to your HTML:
<canvas id="floorplan"></canvas>
And magic will happen. Or, in your canvasDrawing file, add clause like this right after styleForm:
var canvas = document.getElementById('floorplan');
if (!canvas)
return;
I'm not actually all that clear why having an error in that function causes it to run twice, but it's definitely the problem. See it: your code + a canvas element = working.