les tabs et visualize plugin ??

omar berrayti
Javascript

Bonjour,,

J'ai trouvé un petit problem au nieau de system de tabs avec le plugin visualize

voila le code des tabs avec des petites modification

jQuery(function($){
    $('.tabs').each(function(){
        var current = null;
        var id = $(this).attr('id');
        if ($.cookie('tabs'+id) && $(this).find('a[href="'+ $.cookie('tabs'+id) +'"]').length > 0){
            current = $.cookie('tabs'+id);
        }else{
            current = $(this).find('a:first').attr('href');
        }
        $(this).find('a[href="'+ current +'"]').addClass('active');
        $(current).siblings().hide();
        $(this).find('a').click(function(){
            var link = $(this).attr('href');
            if(link == current){ 
                return false; 
            }else{
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
                $(link).show().siblings().hide();
                current = link;
                $.cookie('tabs'+id, current);
                return false;
            }
        });
    });
});

Le problem c'est lorsque je mets dans les tabs deux charts utlisant Visualize, le premier chart qui est dans la tab active s'aafiche bien mais l'autre ne s'affiche pas bien

voila des photos pour bien comprendre le problem

10 réponses

extrarox
Réponse acceptée

Ok merci pour ta confiance que sera récompensé^^
J'ai trouvé le soucis.

Remplace ça :

$(current).siblings().hide();

Par : 

$(current).siblings().ready(function(){
    $(current).siblings().hide();
});

En fait, il suffit d'attendre que le chart est chargé et seulement on cache.

A+

extrarox

Salut,

Il a pas les photos, donc je sais pas, peut être un problème css^^

extrarox

Sans utiliser Visualize, ta table est bien construite?

omar berrayti
Auteur

Voilà la table

<table class="chart_graphic <le type de charte>">
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col">food</th>
            <th scope="col">auto</th>
            <th scope="col">household</th>
            <th scope="col">furniture</th>
            <th scope="col">kitchen</th>
            <th scope="col">bath</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <td>190</td>
            <td>160</td>
            <td>40</td>
            <td>120</td>
            <td>30</td>
            <td>70</td>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <td>3</td>
            <td>40</td>
            <td>30</td>
            <td>45</td>
            <td>35</td>
            <td>49</td>
        </tr>
    </tbody>
</table>

le .chart_graphic est en display:none;

extrarox

Et si tu inverses le premier qui est active, est-ce que ça inverse le problème?

omar berrayti
Auteur

Oui si le premier est active ,, le premier chart s'aafiche bien, mais l'autre non !

extrarox

Je supposes que tu fais ton visualize avant l'affichage.
Je pense que le div n'a pas sa taille à cause du display:none et du coup dès que tu affiches ça merde.

Je supposes que ton display: none, tu le fais directement en CSS?

Si oui il faudrait que tu le fasse en Jquery après avoir lancé les 2 visualize, le temps que les divs ont leur taille.

$(".chart_graphic").css("display", "none");//De cette façon, mais sans mettre .chart_graphics car je supposes que les deux ont ça
omar berrayti
Auteur

J'ai fais le display en jquery mais le problem reste :(

extrarox

ok, si tu veux tu peux m'envoyer tout ton code par email, j'y regarde de plus prêt.

extrarox@hotmail.fr

omar berrayti
Auteur

Ohh,, Merci bcp,, tous fonctionne bien :)

Un chapeau :)