Récupération width contenu généré en jQuery

Bonjour, voilà deux jours que je triture mon code dans tous les sens... rien n'y fait ça ne marche pas comme je veux :/
En gros, je suis entrain de créer un script qui gère et prend en charge tout slider contenant une certaine classe sur une page ET génère ce même slider une deuxième fois sur la page en hidden (ce dernier aura la fonction de s'afficher en mode "plein écran" en position fixed.

Mon soucis est au niveau de la gestion de ces sliders générés automatiquement. Enfin, ils sont bien générés, mais, j'ai un soucis d'affichage de la taille des LI, bref, j'ai tenté maintes et maintes choses et là... je sèche. Peut-être que quelqu'un pourra m'aider... :)

HTML en brute sur la page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<!-- Premier Slider -->
<div class="jf-slider-screen row" id="theSlider">
        <div class="jf-slider-left col-xs-12 col-md-4">
            <h2> Le cours en question</h2>
            <h3><i class="fa fa-user"></i> Jonaweb.fr</h3>
            <div class="jf-slider-menu">
                <ul class="jf-slider-tabs">
                    <li class="jf-slider-tabs-element jf-slider-tab-on">Menu</li>
                    <li class="jf-slider-tabs-element">Notes</li>
                    <li class="jf-slider-tabs-element">Glossaires</li>
                </ul>
                <div class="clear"></div>
                <div class="jf-slider-menu-content">
                    <ul class="jf-slider-menu-principal">
                        <li class="jf-slider-menu-goto" data-id='1'>1) Présentation</li>
                        <?php  foreach($queryy as $key): $i++; ?>
 
                            <li class="jf-slider-menu-goto" data-id='<?= $i ?>'>
                                <?= $i.") ".$key->course_name ?>
                            </li>
 
                        <?php endforeach;  ?>
                        <li class="jf-slider-menu-goto" data-id='<?= $i+1 ?>'><?= $i+1 ?>) Voter</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jf-slider-right col-xs-12 col-md-8">
            <ul class="jf-slider-elements">
                <li class="jf-slider-element">
                    <div class="jf-slider-element-content">
                        <h1>Présentation</h1>
                        <p><strong><u>Auteur</u></strong> <a href="#">Jonaweb.fr</a> </p>
                        <p><strong><u>Cours</u></strong> Le cours en question </p>
                        <p><strong><u>Durée</u></strong> 20:31:53 </p>
                        <a href="#" class="jf-slider-start-button btn btn-primary next">C'est parti <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </li>
                <?php $i = 1; foreach($queryy as $key): $i++; ?>
 
                <li class="jf-slider-element">
                    <h1><?= $key->course_name ?></h1>
                    <div class="jf-slider-element-content"><?= substr(stripslashes($key->course_description), 0,1500) ?></div>
                </li>
 
                <?php endforeach; ?>
            </ul>
            <div class="jf-slider-last-element">
                <h1>Qualité</h1>
                <p><strong><u>Nombre de votes :</u></strong> 2</p>
                <p><strong><u>Moyenne :</u></strong> 4</p>
                <p class="jf-slider-vote-saved">Votre vote a bien été enregistré</p>
            </div>
        </div>
 
    </div>
 
<!-- Second Slider Pour gestion de conflits et tests... -->
    <div class="jf-slider-screen row" id="theSlider2" style="width:150%;">
        <div class="jf-slider-left col-xs-12 col-md-4">
            <h2> Le cours en question</h2>
            <h3><i class="fa fa-user"></i> Jonaweb.fr</h3>
            <div class="jf-slider-menu">
                <ul class="jf-slider-tabs">
                    <li class="jf-slider-tabs-element jf-slider-tab-on">Menu</li>
                    <li class="jf-slider-tabs-element">Notes</li>
                    <li class="jf-slider-tabs-element">Glossaires</li>
                </ul>
                <div class="clear"></div>
                <div class="jf-slider-menu-content">
                    <ul class="jf-slider-menu-principal">
                        <li class="jf-slider-menu-goto" data-id='1'>1) Présentation</li>
                        <?php  foreach($queryy as $key): $i++; ?>
 
                            <li class="jf-slider-menu-goto" data-id='<?= $i ?>'>
                                <?= $i.") ".$key->course_name ?>
                            </li>
 
                        <?php endforeach;  ?>
                        <li class="jf-slider-menu-goto" data-id='<?= $i+1 ?>'><?= $i+1 ?>) Voter</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jf-slider-right col-xs-12 col-md-8">
            <ul class="jf-slider-elements">
                <li class="jf-slider-element">
                    <div class="jf-slider-element-content">
                        <h1>Présentation</h1>
                        <p><strong><u>Auteur</u></strong> <a href="#">Jonaweb.fr</a> </p>
                        <p><strong><u>Cours</u></strong> Le cours en question </p>
                        <p><strong><u>Durée</u></strong> 20:31:53 </p>
                        <a href="#" class="jf-slider-start-button btn btn-primary next">C'est parti <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </li>
                <?php $i = 1; foreach($queryy as $key): $i++; ?>
 
                <li class="jf-slider-element">
                    <h1><?= $key->course_name ?></h1>
                    <div class="jf-slider-element-content"><?= substr(stripslashes($key->course_description), 0,1500) ?></div>
                </li>
 
                <?php endforeach; ?>
            </ul>
            <div class="jf-slider-last-element">
                <h1>Qualité</h1>
                <p><strong><u>Nombre de votes :</u></strong> 2</p>
                <p><strong><u>Moyenne :</u></strong> 4</p>
                <p class="jf-slider-vote-saved">Votre vote a bien été enregistré</p>
            </div>
            <div class='jf-slider-bottom-control'>
                <div class='jf-slider-bottom-control-element'><i class='fa fa-share-alt'></i></div>
                <div class='jf-slider-bottom-control-element jf-slider-fullscreen-opener'><i class='fa fa-expand'></i></div>
            </div>
        </div>
 
    </div>

Ensuite, le javascript :

1) récupération des éléments ".jf-slider-screen" qui initialisent les sliders + on génère les fameux hidden pour les fullscreen.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script>
var jfArray = [];
(function($){
    $(".jf-slider-screen").each(function(aa,bb){   
        jfArray.push(bb.id);
        jfArray[bb.id] = {
            cnt: 0,
            slider: $("#"+bb.id+" .jf-slider-elements"),
            sliderId: bb.id,
            sliderParent: $("#"+bb.id+" .jf-slider-elements").parent(),
            nbr: parseInt($("#"+bb.id+" .jf-slider-element").length),
            oneSize: 0,
            contentFullScreen: "<div class='jf-slider-fullscreener' id='wrapper-"+bb.id+"' style='display: none;'><div class='jf-slider-fullscreener-bg'><div class='"+$('#'+bb.id).attr('class')+" jf-full-screener' id='fullScreen"+bb.id+"'>"+$("#"+bb.id).html()+"</div></div></div>"
        }; 
 
        $(jfArray[bb.id].contentFullScreen).appendTo("body"); // on génère les sliders pour fullScreen
    });
})(jQuery);
</script>

jusque là, tout se passe bien, le array est alimenté, les fullScreens générés comme voulu ;)

2) Traitement des sliders générés en jQuery + ajout d'éléments + actions:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
jQuery( document ).ready(function( $ ) { 
 
    $(".jf-slider-screen").each(function(aa, bb){  
        $('#'+bb.id+" .jf-slider-elements").wrap('<div id="wrapperSlider-'+bb.id+'"></div>');
        $('#wrapperSlider-'+bb.id).width('100%');
        if (!jfArray[bb.id]){ 
            jfArray.push(bb.id);
 
            jfArray[bb.id] = {
                cnt: 0,
                slider: $("#"+bb.id+" .jf-slider-elements"),
                sliderId: bb.id,
                sliderParent: $("#"+bb.id+" .jf-slider-elements").parent(),
                nbr: $("#"+bb.id+" .jf-slider-element").length,
                oneSize: 0,
                contentFullScreen: ""
            }; 
 
        }
 
        $("#"+bb.id+" .jf-slider-menu-principal li:first-child").css('color', "#ff9900");
        $("#"+bb.id+" .jf-slider-elements").width($('#'+bb.id+' #wrapperSlider-'+bb.id).width()*jfArray[bb.id].nbr+30*jfArray[bb.id].nbr).css("overflow", "hidden").css("padding","0").css("margin","0");
 
        jfArray[bb.id].sliderParent.css("padding", "0").css('overflow', "hidden");
 
        $("#"+bb.id+" .jf-slider-element")
                .height("92%").css("float", "left")
                .width($("#"+bb.id+" .jf-slider-elements").parent().outerWidth())
                .css("padding", "10px")
                .css('overflow-y', "auto");
 
        jfArray[bb.id].oneSize = $('#wrapperSlider-'+bb.id).children().width()/jfArray[bb.id].nbr;
 
        // là ça cloche !
        console.log($("#"+bb.id+" #wrapperSlider-"+bb.id).width()); // retourne le bon résultat pour les deux initiaux... ceux générés en jquery me retournent... 100
        // retourne le bon résultat pour les deux initiaux... 
        // ceux générés en jquery me retournent... 100
        // Donc, forcément, ça foire l'affichage de mes plein écrans
        jfArray[bb.id].sliderParent.append("<div class='jfSliderNav prev' data-id='"+bb.id+"' style='display:none; top:"+jfArray[bb.id].slider.height()/2.1+"'><i class='fa fa-arrow-circle-left'></i></div>");
        jfArray[bb.id].sliderParent.append("<div class='jfSliderNav next' data-id='"+bb.id+"' style='display:block; top:"+jfArray[bb.id].slider.height()/2.1+"'><i class='fa fa-arrow-circle-right'></i></div>");
 
 
 
        $(document).on("click", "#"+bb.id+" .next", function(){ 
            jfArray[bb.id].cnt++; 
            if (jfArray[bb.id].cnt < jfArray[bb.id].nbr) $("#"+bb.id+" .next").fadeIn(); 
            else $("#"+bb.id+" .next").fadeOut("fast");
            if (jfArray[bb.id].cnt > 0) $("#"+bb.id+" .prev").fadeIn(); 
            else $("#"+bb.id+" .prev").fadeOut();
            $("#"+bb.id+" .jf-slider-elements").animate({marginLeft: "-="+jfArray[bb.id].oneSize+30}); 
        });
 
        $(document).on("click", "#"+bb.id+" .prev", function(){ 
            jfArray[bb.id].cnt--;
            if (jfArray[bb.id].cnt < 1) $("#"+bb.id+" .prev").fadeOut("fast");
            if (jfArray[bb.id].cnt < jfArray[bb.id].nbr) $("#"+bb.id+" .next").fadeIn(); 
            else $("#"+bb.id+" .next").fadeOut("fast");
            $("#"+bb.id+" .jf-slider-elements").animate({marginLeft: "+="+(jfArray[bb.id].oneSize+30)}); 
        });
 
        $(document).on("click", "#"+bb.id+" .jf-slider-fullscreen-opener", function(){ 
            $("#wrapper-"+bb.id).fadeIn();
        });
        $(document).on('click', ".jf-slider-fullscreener", function(event){ 
            if ($(event.target).hasClass("jf-slider-fullscreener")){
                $(this).fadeOut(600, function(){ 
                    $(".jf-slider-fullscreen-closer").removeClass("jf-slider-fullscreen-closer").addClass("jf-slider-fullscreen-opener").children().first().removeClass("fa-compress").addClass("fa-expand");
                    $(".jf-slider-fullscreen-opener .fa").removeClass("fa-compress").addClass("fa-expand");
                });
            }
        });
 
    });
});

Précision, les sliders principaux marchent au poil ;) Le soucis est donc au niveau des "fullScreens" générés :$
N'hésitez pas si vous avez des questions, suggestions ou remarques, et merci beaucoup par avance.

EDIT : biensure, le "fullScreen" est en position fixed.