search result in ajax tab

This is the code of my tabs after I have created four tabs : home/game/book/text.
So I need to close a tab. I need to put a cross image on every tab with an onclick event. After that, write a function who closed my tab.
Tell me if it is the right way?

Code:

---

<ul id="maintab" class="shadetabs">

<li style="left: 0px; top: 0px;" class="">
<a rel="ajaxcontentarea" href="external.htm">home</a>
</li>

<li class="">
<a rel="ajaxcontentarea" href="external.htm">game</a>
</li>

<li class="">
<a rel="ajaxcontentarea" href="external.htm">book</a>
</li>

<li class="selected">
<a rel="ajaxcontentarea" href="external.htm">text</a>
</li>

</ul>

---

I have update my code :
I need some help to code the function close_tab please.


.js

Quote:

---

function recup_donnee() (always the same)
{
test = document.forms[0].elements["nom"].value;
create_li_in_ul();
drag();
startajaxtabs("maintab");
}

function close_tab()
{
//I need some help for this function now :D
}

function create_li_in_ul()
{
// create tag 'li' and attributes
ul_liste = document.getElementById("maintab");
create_li = document.createElement("li");
ul_liste.appendChild(create_li);


//deselect all tabs
ul_child_list = document.getElementsByTagName("li");
for (var i=0; i<ul_child_list.length; i++)
ul_child_list[i].className="";

// put the class selected to li
create_li.setAttribute("class", "selected");
create_li.setAttribute("id","drag");

// create tag 'a' and attributes
li_liste = ul_liste.lastChild;
create_a = document.createElement("a");
li_liste.appendChild(create_a);
create_a.setAttribute("href","external.htm");
create_a.setAttribute("rel","ajaxcontentarea");
create_a.innerHTML = test;

*************NEW************
// create tag 'img' in tag 'a' and attributes , fermeture d'onglet
a_liste = li_liste.lastChild;
create_img = document.createElement("img");
a_liste.appendChild(create_img);
create_img.setAttribute("src","ajaxtabs/close.jpg");
create_img.setAttribute("name","cross");
create_img.setAttribute("onmouseover","document.cross.src='ajaxtabs/close_onclick.jpg'");
create_img.setAttribute("onmouseout","document.cross.src='ajaxtabs/close.jpg'");
create_img.setAttribute("onclick","close_tab()");
}
*************END NEW********

---

.css (I have added some css too for tag "img"

Quote:

---

.shadetabs li img{
border : none;
margin-left: 10px;
margin-bottom:-2px;
}

---

Well, to close a tab:

Code:

---

<ul id="maintab" class="shadetabs">

<li>
<a rel="ajaxcontentarea" href="external.htm">home</a><img style="cursor:pointer;" src="x.gif" onclick="this.parentNode.this.parentNode.removeChild(this.parentNode)">
</li> . . .

---

But, as I was saying, you need to get rid of the li's event (an onclick was assigned to it by the Ajax Tabs script) so let's do this:

Code:

---

<ul id="maintab" class="shadetabs">

<li>
<a rel="ajaxcontentarea" href="external.htm">home</a><img style="cursor:pointer;" src="x.gif" onclick="closeTab(this.parentNode);">
</li> . . .

---

Code:

---

function closeTab(el){
el.onclick=null;
el.parentNode.removeChild(el);
}

---

But, its content will still be in the content area so:

Code:

---

function closeTab(el){
var id=el.parentNode.id;
el.onclick=null;
el.parentNode.removeChild(el);
expandtab(id, document.getElementById(id).getElementsByTagName('li').length);
}

---

Untested

Thanks Im' going to try this script ! I'll be back in a few hours.

I'm back, thanks for your Help, the script is OK !
Now, I'm going to limit the number of tab that it's possible to open. (10 tabs)
If you want to open the eleventh tab, an alert window is open to say to the user that the first tab will be closed if he wants to continue.


So in my function recup_donnee(), I have added some line :

Code:

---

function recup_donnee()
{
****************NEW**************************
        nombre_li = document.getElementsByTagName('li').length;
        if (nombre_li >= 10)
        {       
                alert('too much tabs, we are going to close the first tab');
                ul_liste = document.getElementsById('maintab');
                li_id = ul_liste.firstChild;
                close_tab(li_id);
                startajaxtabs("maintab");

        }
****************END NEW***********************
        test = document.forms[0].elements["nom"].value;
        create_li_in_ul();
        startajaxtabs("maintab");
}

---

You might actually want to use a confirm then:

Code:

---

var ctabclose=true;
if (nombre_li >= 10){
ctabclose=false;
ctabclose=confirm('too much tabs, do you want to close the first tab?');
if(ctabclose){
ul_liste = document.getElementsById('maintab');
li_id = ul_liste.firstChild;
close_tab(li_id);
startajaxtabs("maintab");  //this call may not be required
}
}
if(ctabclose) {
test = document.forms[0].elements["nom"].value;
create_li_in_ul();
startajaxtabs("maintab");
}

---

I think your code is good but :

Code:

---

ul_liste = document.getElementsById('maintab');
li_id = ul_liste.firstChild;
close_tab(li_id);

---

This code, in my opinion is false. It's me who have wrote this lol. So the function doesn't work yet. I'm going to find the problem.

I have resolved the problem :

Code:

---

ul_liste = document.getElementsByTagName("li");
ul_liste[0].onclick = null;
ul_liste[0].parentNode.removeChild(ul_liste[0]);

---

I have put this code instead of the previous and it works !

In fact, there is one problem, if I have three tabs and I want to put another one, it works. The script remove the first tab if the user is OK. When the user have 3 tabs and close one or more tabs, the variable "nombre_li" isn't update, so even if the user have closed 2 tabs, the javascript alert is already run :confused: (or javascript confirm)

I'm going to find where is the problem but if somebody can see the answer before I update this post.
Well, I fix it. I have added a global variable in the beinning of my script.

Code:

---

var nombre_li = 0;

function recup_donnee()
{
        var para = document.getElementById("var");
        nombre_li = document.getElementsByTagName("li").length;
        para.innerHTML = nombre_li;
        var ctabclose = true;
        if (nombre_li > 3)
        {
                ctabclose = false;
                ctabclose = confirm('too much tabs, do you want to close the first tab?');
                if (ctabclose)
                {
                        ul_liste = document.getElementsByTagName("li");
                        ul_liste[0].onclick = null;
                        ul_liste[0].parentNode.removeChild(ul_liste[0]);
                        nombre_li = document.getElementsByTagName("li").length;;
                }
        }       
        if (ctabclose)
        {
                test = document.forms[0].elements["nom"].value;
                create_li_in_ul();
                startajaxtabs("maintab");
        }
}



function close_tab(el)
{
        var id = el.parentNode.id;
        el.onclick = null;
        el.parentNode.removeChild(el);
        nombre_li = document.getElementsByTagName("li").length; // NEW LINE
        expandtab(id, document.getElementById(id).getElementsByTagName("li").length);
}

---

And now, I will go to the last item(I hope) : Drag and Drop function
If you have any idee, they will be welcome.

I have seen another problem on my script, the ONMOUSEOVER works the first time I create a tab, after that for the next tab this event doesn't work, and I don't understand why :confused:

You think that the drag and drop script could be integrate into my script?
Thanks