Fenétre pop-up

navy_d Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
navy_d Messages postés 11 Date d'inscription Statut Membre Dernière intervention - 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,

Afficher la suite

A voir également:

Fenétre pop-up
Pop up mcafee - Accueil - Piratage
Fenetre windows - Guide
Pop corn time - Télécharger - TV & Vidéo
Fenêtre hors écran windows 11 - Guide
Serveur pop - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 ....
}

navy_d Messages postés 11 Date d'inscription Statut Membre Dernière intervention

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,

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 !

navy_d Messages postés 11 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

C'est quelle librairie que tu as utilisé pour générer ton graphique ?????

navy_d Messages postés 11 Date d'inscription Statut Membre Dernière intervention

C'est Jquery !!

Discussions similaires

Notifications pop UP sous Android 14

Comment lire un DVD avec un pop-up mobile external DVD-RW

Freebox pop

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

Votre réponse

Discussions similaires