Sujet Précédent Sujet Suivant

Fenétre pop-up

Fermé
navy_d Messages postés 11 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 28 juin 2019 - Modifié le 17 mai 2018 à 18:24
navy_d Messages postés 11 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 28 juin 2019 - 21 mai 2018 à 23:25
Bonsoir a tous,

j'ai un petit soucis que je n'arrive pas régler, alors je travail avec codeIgniter, j'ai sur une page des graphes qui ne se vois pas au complet du coup j'ai crée des nouvelles fenêtre et jy ai mis le graphe en question ,, fenétre pop-up , le petit soucis est que :

1. Le graphique n'occupe pas toute la fenêtre une fois que l'on a agrandi la pop-up (clic sur le petit carré en haut à droite)
2. Les valeurs dynamiques n'apparaissent pas sur les graphes ( les valeurs qui se voit sur la première page)

voici le code : 
        $('.graphique-button-window').click(function(){ 
            var url         = $(this).data('window');
            var indic       = $(this).data('indicateur');
            var graphique   = $('#graph-cont-' + indic).html();
            var newWindow   = window.open(url,'popup', 'scrollbars=1, resizable=1, width=1600, height=600');


EDIT : Ajout des balises de code

quelqu'un aurait une petite idée de comment faire ?

merci,
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 mai 2018 à 18:28
Bonjour,

.... il faudrait savoir avec quoi tu génères ton graphique (quelle librairie JS tu utilises....)
Quoi qu'il en soit, en général, les graphiques prennent la dimension de la fenêtre qui les reçois.
Lorsqu'on redimensionne la fenêtre.... le graphique ne s'agrandit pas de lui même.
Pour ça, il faut coder ....
Tu peux détécter le rediemensionnement de la fenêtre 
window.onresize = redimensionneGraph;

function redimensionneGraph() {
    //ici tu codes le redimensionnement de ton graph.
   // peut être en jouant avec ses attributs width / height
  // à moins que la librairie proposer une methode redraw ....
}

0
navy_d Messages postés 11 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 28 juin 2019
18 mai 2018 à 12:22
Bonjour Jordane,

A vrai dire le vrai probleme est que mon graphe qui est dans la page principale ne s'affiche pas au complet du coup j'ai créer une nouvelle fenetre pop up pour l'afficher au complet mais cela ne se fait pas !

cordialement,
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
18 mai 2018 à 12:46
A vrai dire... le problème.... c'est que tu ne répond pas à mes questions..... et que je n'ai toujours pas, à ma disposition, ton code complet !
0
navy_d Messages postés 11 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 28 juin 2019 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
Modifié le 18 mai 2018 à 14:21
voici le code : 
</div>
<?php 

//SERGE, déclaration variables pour filigrane
//$logged         = $this->session->userdata('logged'); // Serge
//$filiga         = '';
////var_dump($logged['droits_utilisation']);
//if (isset($logged['droits_utilisation']))
//{
//    $droits_utilisation = $logged['droits_utilisation'];
//    if (isset($droits_utilisation['tab_previsionnel']) && $droits_utilisation['tab_previsionnel'] == 1)
//    {
//        $data_reel = array('(données réalisées)', 'données réalisées');
//    }
//    
//    //Serge, ajout filigrane
//    if (isset($droits_utilisation['tab_filigrane']) && $droits_utilisation['tab_filigrane'] == 1)
//    {
//        if (isset($logged['compte'])) {
//            //Serge, msg filigrane indic et ssindic
//            $filiga = '<span>CONFIDENTIEL<br/>Visionné le '.mdate('%d-%m-%Y %H:%i:%s', now()).'<br/> Par '.$logged["compte"]["nom_utilisateur"].'<br/><br/></span>';    
//            //fin msg filigrane
//        }
//                
//    }   
//
//}       
// fin Serge ajout filigrane

?>
<script>
    
    $(document).ready(function() {
        
        $('.btn_descr').click(function() { $(this).next().slideToggle();});
        
        // ** Scroll vers le haut de page 
        $('#back-to-top').click(function() {
            $('html,body').animate({scrollTop: 0}, 'slow');
        });
        $(window).scroll(function(){
            if($(window).scrollTop()<50){
                $('#back-to-top').fadeOut();
            }
            else{
                $('#back-to-top').fadeIn();
            }
        });
        
        
        
        // ** Scroll vers rubrique
        $('.index-rubrique-button').click(function(){
            var toScroll = $(this).data('rubrique');
            $('html,body').animate({scrollTop: $(toScroll).offset().top}, 'slow' );
        });
        
        // ** Export XLS
        $( ".n-export-xls" ).click(function() {
            var form_id = $(this).data('form');
            $( form_id ).submit();
        });
        
        // ** Export/Print PDF
        $("#print-pdf").click(function(){
            
            var init_content = $(this).html();
            $(this).html('En cours...');
                        
            $('#pdf_tables_container button').hide();
            $('#pdf_tables_container select').hide();
            $('#pdf_tables_container input').hide();
            $('#menuScroll').hide();
            $('.menu').hide();
            $('.indicateur-data-consult').css('overflow-x', 'visible');
            $('#menuScroll').hide();
            $(this).hide();
            $('#print-pdf').hide();
            $('#xport-png').hide();
            $(".fichiers-rub, .fichiers-srub").hide();
            
            window.print();
            
            $('#pdf_tables_container button').show();
            $('#pdf_tables_container select').show();
            $('#pdf_tables_container input').show();
            $('#menuScroll').show();
            $('.menu').show();
            $('.indicateur-data-consult').css('overflow-x', 'scroll');
            $(this).show();
            $('#print-pdf').show();
            $('#xport-png').show();
            $(".fichiers-rub, .fichiers-srub").show();
            $(this).html(init_content);

        });
        
        // ** Export PNG
        $("#xport-png").click(function(){
            
//            var init_content = $(this).html();
//            $(this).html('En cours...');
            
            var svgTags = document.querySelectorAll('.graphique-container-to-svg svg');
            
            for (var i=0; i<svgTags.length; i++) {
                var svgTag = svgTags[i];
                var c = document.createElement('canvas');
                c.width = svgTag.clientWidth;
                c.height = svgTag.clientHeight;
                svgTag.parentNode.insertBefore(c, svgTag);
                svgTag.parentNode.removeChild(svgTag);
                var div = document.createElement('div');
                div.appendChild(svgTag);
                canvg(c, div.innerHTML);
            }
            
            $('#pdf_tables_container button').hide();
            $('#pdf_tables_container select').hide();
            $('#pdf_tables_container input').hide();
            $('#menuScroll').hide();
            $('.menu').hide();
            $('.indicateur-data-consult').css('overflow-x', 'visible');
            $('#menuScroll').hide();
            $(this).hide();
            $('#print-pdf').hide();
            $('#xport-png').hide();
            $(".fichiers-rub, .fichiers-srub").hide();
            
            export_pdf();
            
            $('#pdf_tables_container button').show();
            $('#pdf_tables_container select').show();
            $('#pdf_tables_container input').show();
            $('#menuScroll').show();
            $('.menu').show();
            $('.indicateur-data-consult').css('overflow-x', 'scroll');
            $(this).show();
            $('#print-pdf').show();
            $('#xport-png').show();
            $(".fichiers-rub, .fichiers-srub").show();
//            $(this).html(init_content);

            // VERSION TRANSFORMATION EN IMAGE
            function export_pdf(){

                html2canvas(document.body, {
                    onrendered: function(canvas){
                        canvas.toBlob(function(blob) {
                            saveAs(blob, "page.png");
                        });
                    }

                })
                
            }
            
        });

        $(".hide-years-previews").click(function(){
            $(".prev-year-to-hide").hide();
        });
        
        $(".display-years-previews").click(function(){
            $(".prev-year-to-hide").fadeIn();
        });

        // $('.prev-total-to-hide').attr('colspan', '2');
        
        // $('.one-line-td').attr('colspan', '2');
        
        // $('.prev-pourc-to-hide').hide();

        // $( ".pourcent-display-button" ).on( "click", function(){

            // switch( $( ".pourcent-display-button" ).data( "action" ) ){
                // case "hide" :
                    // $( ".pourcent-display-button" ).data( "action", "show" );
                    // $( ".pourcent-display-button" ).css( "background", "rgb(73, 92, 128)" );
                    // $( ".pourcent-display-button" ).css( "color", "white" );

                    // $('.prev-total-to-hide').removeAttr('colspan');
                    // $('.one-line-td').removeAttr('colspan');
                    // $('.prev-pourc-to-hide').show();

                    // console.log( "hide" );
                    // break;
                // case "show" :
                    // $( ".pourcent-display-button" ).data( "action", "hide" );
                    // $( ".pourcent-display-button" ).css( "background", "" );
                    // $( ".pourcent-display-button" ).css( "color", "" );

                        // $('.prev-total-to-hide').attr('colspan', '2');
                        // $('.one-line-td').attr('colspan', '2');
                        // $('.prev-pourc-to-hide').hide();

                    // console.log( "show" );
                    // break;
                // default :
                    // $.error( "Ce cas ne doit jamais se produire !" );
            // }
        // });
//        $('.prev-total-to-hide').attr('colspan', '2');

//        $('.one-line-td').attr('colspan', '2');
//sofiane//
        $('.total-line ,.prev-pourc-to-hide ,.prev-total-to-hide ,.sous-totaux-text-hide,.sous-totaux-value-hide,.sous-pourcent-value-hide,.sous-pourcent-text-hide').hide();
//     
        $('.head-column,.info-content,.one-line-td').attr('colspan', 2);
//        $('.info-content').attr('colspan', 2);
//        $('.one-line-td').attr('colspan', 2);
        $(".sous-total").on("click", function () {
            var sous_total = $(".sous-total").attr('data-total');

            switch ($(".sous-total").attr("data-total")) {
                case "hide" :
//                    alert(1);
                    $(".sous-total").css("background", "rgb(73, 92, 128)");
                    $(".sous-total").css("color", "white");
                    $(".sous-total").removeAttr('data-total');
                    $(".sous-total").attr('data-total', 'show');
                    $(".sous-totaux-text-hide,.sous-totaux-value-hide").show();
                    break;
                case "show":
//                    alert(2);
                    $(".sous-total").css("background", "");
                    $(".sous-total").css("color", "");
                    $(".sous-total").removeAttr('data-total');
                    $(".sous-total").attr('data-total', 'hide');
                    $(".sous-totaux-text-hide,.sous-totaux-value-hide").hide();
                    break;
            }

        });
        $(".sous-pourcentage").on('click',function(){
            var sous_pourcent = $(".sous-pourcentage").attr('data-pourcent');
             switch ($(".sous-pourcentage").attr('data-pourcent')) {
                case "hide" :
//                    alert(sous_pourcent);
                    $(".sous-pourcentage").css("background", "rgb(73, 92, 128)");
                    $(".sous-pourcentage").css("color", "white");
                    $(".sous-pourcentage").removeAttr('data-pourcent');
                    $(".sous-pourcentage").attr('data-pourcent', 'show');
                    $(".sous-pourcent-text-hide,.sous-pourcent-value-hide").show();
                    break;
                case "show":
//                    alert(2);
                    $(".sous-pourcentage").css("background", "");
                    $(".sous-pourcentage").css("color", "");
                    $(".sous-pourcentage").removeAttr('data-pourcent');
                    $(".sous-pourcentage").attr('data-pourcent', 'hide');
                    $(".sous-pourcent-text-hide,.sous-pourcent-value-hide").hide();
                    break;
            }
        });
        $(".pourcent-display-button").on("click", function () {
   $("#div2").delay(1);
            var total = $(".total-display-button").data("action");
            var pourcent = $(".pourcent-display-button").data("action");
            console.log('total:' + total + '<br>pourcent:' + pourcent);
   
            switch ($(".pourcent-display-button").data("action")) {
                case "hide" :
                    $(".pourcent-display-button").data("action", "show");
                    $(".pourcent-display-button").css("background", "rgb(73, 92, 128)");
                    $(".pourcent-display-button").css("color", "white");


                    if (pourcent == "hide" && total == "hide") {
                        $('.head-column').attr('colspan', 3);
                        $('.info-content').attr('colspan', 3);
                        $('.one-line-td').attr('colspan', 2);
                        $('.sous-totaux-value-hide,.sous-pourcent-value-hide').attr('colspan', 3);
                    }
                    if (pourcent == "hide" && total == "show") {
                        $('.head-column').attr('colspan', 4);
                        $('.info-content').attr('colspan', 4);
                        $('.one-line-td').attr('colspan', 3);
                        $('.sous-totaux-value-hide,.sous-pourcent-value-hide').attr('colspan', 4);
                    }

                    $('.prev-total-to-hide').removeAttr('colspan');
                    $('.prev-pourc-to-hide').show();

                    console.log("hide");
                    break;
                case "show" :
                    $(".pourcent-display-button").data("action", "hide");
                    $(".pourcent-display-button").css("background", "");
                    $(".pourcent-display-button").css("color", "");


                    if (pourcent == "show" && total == "hide") {
                        $('.head-column').attr('colspan', 2);
                        $('.info-content').attr('colspan', 2);
                        $('.one-line-td').attr('colspan', 2);
                        $('.sous-totaux-value-hide,.sous-pourcent-value-hide').attr('colspan', 2);
                    }
                    if (pourcent == "show" && total == "show") {
                        $('.head-column').attr('colspan', 3);
                        $('.info-content').attr('colspan', 3);
                        $('.one-line-td').attr('colspan', 3);
                        $('.sous-totaux-value-hide,.sous-pourcent-value-hide').attr('colspan', 3);
                    }

                    $('.prev-total-to-hide').attr('colspan', 1);
                    $('.prev-pourc-to-hide').hide();

                    console.log("show");
                    break;
                default :
                    $.error("Ce cas ne doit jamais se produire !");
            }
        });
        $(".total-display-button").on("click", function () {
   $("#div2").delay(1);
            var total = $(".total-display-button").data("action");
            var pourcent = $(".pourcent-display-button").data("action");
            console.log('total:' + total + '<br>pourcent:' + pourcent);
   
   
            switch ($(".total-display-button").data("action")) {
                case "hide" :
                    $(".total-display-button").data("action", "show");
                    $(".total-display-button").css("background", "rgb(73, 92, 128)");
                    $(".total-display-button").css("color", "white");


//                  
                    if (total == "hide" && pourcent == "show") {
                        $('.head-column').attr('colspan', 4);
                        $('.info-content').attr('colspan', 4);
                        $('.one-line-td').attr('colspan', 3);
                        $('.sous-totaux-value-hide,.sous-pourcent-value-hide').attr('colspan', 4);
                        // alert(total +'3 2'+pourcent);

                    }
                    if (total == "hide" && pourcent == "hide") {
                        $('.head-column').attr('colspan', 3);
                        $('.info-content').attr('colspan', 3);
                        $('.one-line-td').attr('colspan', 3);
                        $('.sous-totaux-value-hide,.sous-pourcent-value-hide').attr('colspan', 3);

                    }

                    $('.prev-total-to-hide').show();
                    $('.total-line').show();

                    console.log("hide");
                    break;
                case "show" :
                    $(".total-display-button").data("action", "hide");
                    $(".total-display-button").css("background", "");
                    $(".total-display-button").css("color", "");


//         
                    if (total == 'show' && pourcent == 'show') {
                        $('.head-column').attr('colspan', 3);
                        $('.info-content').attr('colspan', 3);
                        $('.one-line-td').attr('colspan', 2);
                        $('.sous-totaux-value-hide,.sous-pourcent-value-hide').attr('colspan', 3);
                    }
//     
                    if (total == 'show' && pourcent == 'hide') {
                        $('.head-column').attr('colspan', 2);
                        $('.info-content').attr('colspan', 2);
                        $('.one-line-td').attr('colspan', 2);
                        $('.prev-total-to-hide').attr('colspan', 2);
                        $('.sous-totaux-value-hide,.sous-pourcent-value-hide').attr('colspan', 2);
                    }

                    $('.prev-total-to-hide').attr('colspan', 1);

                    $('.prev-total-to-hide').hide();
                    $('.total-line').hide();

                    console.log("show");
                    break;
                default :
                    $.error("Ce cas ne doit jamais se produire !");
            }
        });

//sofiane fin//
        $('.pop-up-value-ssindic').on('click', function(){

            var txt = $(this).next('div').html();
            $('#setting-bar').after('<div class="dialog">'+txt+'</div>');
            $( 'div.dialog' ).dialog({
                hide: 'fade',
                show: 'fade',
                position: { my: 'center', at: 'top+35%', of: window },
                title: 'Informations complémentaires',
                width: '75%',
                modal: true,
                buttons: {
                    Fermer: function() {
                        $(this).dialog( 'close' );
                    }
                },
                close: function () {
                    $(this).remove();
                }
            })
        });

        $(".tabs_fichiers").tabs({
   collapsible: false
  });

  $(".tabs_fichiersSousRubrique").tabs({
   collapsible: false
  });
        
        // ** GRAPHIQUES [START]
        
        // execution de méthode de chargement des graphiques directement au chargement de la page de consultation
        graphique_on_page_loaded();
        
        /*


*
** Charge tous les graphiques de la page de consultation        */        function graphique_on_page_loaded(){                    //        console.info($('.graphique-button'));            var objs_grah_btn = $('.graphique-button');            var objs_size  = objs_grah_btn.length;            for(var i = 0; i < objs_size; i++){                var btn_id = '#' + objs_grah_btn[ i ].id;                generate_graphique(btn_id);            }                    }                /*        ** @params : (string) id_button eg. '#indic-btn'        ** Charge un graphique         */        function generate_graphique(id_button){                        var indicateur  = $(id_button).data('indicateur');            var url         = $(id_button).data('url');            var entity      = $(id_button).data('entity');            var rubrique    = $(id_button).data('rubrique');//            var choice      = $(id_button).data('choice');            var choice      = $('#graph-choice-' + indicateur).val();            var type        = $(id_button).data('type');                        $("#graph-cont-" + indicateur).html('Graphique en cours de construction...');                        if ($("#graph-cont-"+indicateur).css("display") == "none") {                $("#graph-cont-"+indicateur).show();                $(this).next().find(".toggle-graphique-btn").toggle();            } else {                                $.get(url , { entite_id: entity, rub_id : rubrique, indic_id: indicateur, type: type, option: choice })                .done(function(data){                    $("#graph-cont-" + indicateur).html(data);                    if (data) {                        $("#toggle-" + indicateur).show();                    }                });            }        }                /*        **        */        $('.graphique-button').click(function(){             var id_button = "#" + $(this).attr('id');            generate_graphique(id_button);        });        $('.graphique-button-window').click(function(){             var url         = $(this).data('window');            var indic       = $(this).data('indicateur');            var graphique   = $('#graph-cont-' + indic).html();            var newWindow   = window.open(url,'popup', 'scrollbars=1, resizable=1, width = 2000,height = 1500');                                                                                 // newWindow.onload = function() {                newWindow.document.write(graphique);                // $(newWindow.document.body).html(graphique);            // };        });                // ** GRAPHIQUES [END]                console.log(datas);    });</script>


EDIT : Ajout du LANGAGE dans les balises de code afin d'avoir la coloration syntaxique et l'indentation
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
18 mai 2018 à 14:22
C'est quelle librairie que tu as utilisé pour générer ton graphique ?????
0
navy_d Messages postés 11 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 28 juin 2019
21 mai 2018 à 23:25
C'est Jquery !!
0

Discussions similaires

Comment désactiver le mode sécurisé de la Freebox POP.
Cycy -
munstef676 -

11 réponses
Comment lire un DVD avec un pop-up mobile external DVD-RW
Anna -
Anna -

2 réponses
Trouver la radio sur freebox poo
Cam -
bazfile -

1 réponse