les tabs et visualize plugin ??

Par omar berrayti, il y a 14 ans

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, il y a 14 ans

Salut,

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

extrarox, il y a 14 ans

Sans utiliser Visualize, ta table est bien construite?

omar berrayti, il y a 14 ans

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, il y a 14 ans

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

omar berrayti, il y a 14 ans

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

extrarox, il y a 14 ans

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, il y a 14 ans

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

extrarox, il y a 14 ans

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

extrarox@hotmail.fr

extrarox, il y a 14 ans

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+

omar berrayti, il y a 14 ans

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

Un chapeau :)