Forum Replies Created

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter quintessence13

    (@quintessence13)

    Many thanks for these few lines of code.
    All the best !

    Thread Starter quintessence13

    (@quintessence13)

    No, alas, the problem remains.
    The choice list still does not close at the time of resizing the page…
    The last version did not bring me a solution.

    Thread Starter quintessence13

    (@quintessence13)

    The problem seems solved.
    Thank you for the solution and speed of your answer.
    All the best…`

    Thread Starter quintessence13

    (@quintessence13)

    Thank you for your quick and concise response.
    At least I know what to expect!
    All the best…

    Thread Starter quintessence13

    (@quintessence13)

    Sorry for the broken link Image 3

    Thread Starter quintessence13

    (@quintessence13)

    Image 1: My page, when loading.
    Image 2: I unfold the first selection list … Note that behind I have inserted a background.
    Image 3: When I resize my window, the list does not collapse (While it collapsed in the previous version). Suddenly, my background, which was erased with the list which collapsed, remains visible.

    - I tried to resize my background, in 'live', but it never correctly matches the edges of the selection list (with JQuery and the CSS clip method) ;
    - I noticed that a 'click' in the bottom of the document; Pressing the 'esc' key or the 'tabulation' key correctly hid the displayed list. I tried this approach, when resizing the window. But, obviously for security reasons, browsers no longer allow you to simulate the action generated by pressing a key using .trigger ("click") or other methods ; 
    I also tried, with JQuery, to remove class and attributes on the tags to try to restore the drop-down list to its initial state, but without success. If I manage to hide the list, the list no longer works afterwards. The list seems blocked: no more highlighting when the mouse is hovered and no more selection possible. The list just opens and closes
    I attach you the part of my JQuery code assigned to this task. Forgive his inaccuracy, I'm not a seasoned pragrammer .
    You have changed the structure of your code. I was able to correctly reinsert my background where I wanted. The problem is mainly due to the fact that the list, in the previous version, was collapsed when the page was resized and it is no longer ! 
    And if I am asking for your help, it is because I am pressed for time, within the framework of my exam ...
    Thank you in advance for your attention to my problem.
    // Fonction permettant d'adapter les listes de sélection présentes dans le document.
    		function adapter_listes_de_selection( $argument_1, $argument_2, $argument_3, $argument_4 ) {
    
    			// Les variables transmises à la fonction sont réaffectées à des variables locales aux noms plus explicites.
    			$id_select_actif = $argument_1;
    			$action_principale = $argument_2;            
                $id_select_passif = $argument_3;
                $action_secondaire = $argument_4;          
                
                // Déclaration de variables.
                $id_liste_de_selection_active = "";
                $id_liste_de_selection_passive = "";
                
                // Différenciation entre liste de sélection active et liste de sélection passive.
                if ( $id_select_actif == "#select2-profile_privacy-results" ) {
                    
                    $id_liste_de_selection_active = "#um_field_privacy_profile_privacy";
                    $id_liste_de_selection_passive = "#um_field_privacy_profile_noindex";
                    
                }
                if ( $id_select_actif == "#select2-profile_noindex-results" ) {
                    
                    $id_liste_de_selection_active = "#um_field_privacy_profile_noindex";
                    $id_liste_de_selection_passive = "#um_field_privacy_profile_privacy";
                    
                }                
                
    			// Si la fonction reçoit l'ordre d'afficher | d'actualiser le fond de l'une des listes de choix...
                if ( $action_principale == "afficher" ) {
                    
                    // Déclaration de variable.
                    $valeurs_padding = "";  
                    
                    // Récupération de la largeur du document.
                    $largeur_document = $( "body" ).width();
                    
                    // Les informations nécessaires concernant la section 1 sont récupérées.
                    $hauteur_section = $( "#id-611--section-1" ).height();
                    $largeur_section = $( "#id-611--section-1" ).width();
                    $padding_top_section = $( "#id-611--section-1" ).css( "padding-top" );
                    $padding_right_section = $( "#id-611--section-1" ).css( "padding-right" );
                    $padding_bottom_section = $( "#id-611--section-1" ).css( "padding-bottom" );
                    $padding_left_section = $( "#id-611--section-1" ).css( "padding-left" );
    				$coordonnes_affichage_section = $( "#id-611--section-1" ).offset();  
                    
                    // Détermination des valeurs du padding à appliquer au fond de la liste de selection activée.
                    $valeurs_padding = $padding_top_section + " " + $padding_right_section + " " + $padding_bottom_section + " " + $padding_left_section;
                    
                    // Les coordonnées d'affichage de l'élément qui contiendra le fond du select sont récupérées.
                    $coordonnes_affichage_conteneur_du_fond_select = $( $id_liste_de_selection_active ).offset();
                    
                    // Les coordonnées d'affichage du fond du select sont calculées.                
                    $position_top = ( $coordonnes_affichage_conteneur_du_fond_select.top - $coordonnes_affichage_section.top );
                    $position_left = ( $coordonnes_affichage_conteneur_du_fond_select.left - $coordonnes_affichage_section.left );                
                    
                    // Création du fond de la liste de sélection.
                    $( $id_liste_de_selection_active ).prepend( "<div id='fond_select' class=''></div>" );
                    
                    // Application des styles au fond de la liste de sélection.
                    $( $id_liste_de_selection_active + " #fond_select" ).css({
                        "background": "rgba(0, 0, 0, 0) url('http://localhost/hypnocloud/wp-content/uploads/Background-compte-onglet-3.jpg')",
                        "background-attachment": "scroll",
                        "background-repeat": "no-repeat",
                        "background-position": "center center",
                        "background-size": "cover",
                        "display": "none",
                        "height": $hauteur_section + "px",
                        "minHeight": $hauteur_section + "px",
                        "minWidth": $largeur_section + "px",
                        "top": "-" + $position_top + "px",
                        "left": "-" + $position_left + "px",
                        "margin": "0",
                        "padding": $valeurs_padding,
                        "position": "absolute",
                        "width": $largeur_section + "px",
                        "z-index": "-50"
                    });
                    
    				// Déclaration de variables...
    				$masquage_par_le_haut = "";				
    				$masquage_par_la_droite = "";				
    				$masquage_par_le_bas = "";
    				$masquage_par_la_gauche = "";			
    
    				// Les coordonnées d'affichage de la section 1 sont récupérées.
    				$coordonnes_affichage_section = $( "#id-611--section-1" ).offset();
    				// Les coordonnées d'affichage de la liste de choix à adapter sont récupérées.
    				$coordonnes_affichage__choix_select = $( $id_select_actif ).offset();			
    				// Les coordonnées d'affichage du footer sont récupérées.
    				$coordonnes_affichage__footer = $( "#main-footer" ).offset();
    
    				// Les valeur de découpe sont calculées...
    				$masquage_par_le_haut = Math.round( $coordonnes_affichage__choix_select.top - $coordonnes_affichage_section.top );				
    				$masquage_par_la_droite = Math.round( $coordonnes_affichage_section.left ) + ( $(window).width() - ( ( Math.round( $coordonnes_affichage_section.left ) * 2 ) + ( Math.round( $coordonnes_affichage__choix_select.left ) + $( $id_select_actif ).width() ) ) );
    				$masquage_par_le_bas = Math.round( $coordonnes_affichage__footer.top - $coordonnes_affichage_section.top ) - Math.round( $coordonnes_affichage__choix_select.top - $coordonnes_affichage_section.top ) - $( $id_select_actif ).height();
    				$masquage_par_la_gauche = Math.round( $coordonnes_affichage__choix_select.left - $coordonnes_affichage_section.left );	
    
    				// L'image à afficher dans le fond de la liste de choix de la liste de sélection est découpée...
    				// Puis elle est positionnée de façon adéquate dans l'ordre d'empilement des calques pour se trouver juste derrière la liste de choix...
    				// Enfin, elle est affichée...
    				$( $id_liste_de_selection_active + " #fond_select" ).css({
    					"-webkit-clip-path": "inset( " + $masquage_par_le_haut + "px " + $masquage_par_la_droite + "px " + $masquage_par_le_bas + "px " + $masquage_par_la_gauche + "px )",
    					"clip-path": "inset( " + $masquage_par_le_haut + "px " + $masquage_par_la_droite + "px " + $masquage_par_le_bas + "px " + $masquage_par_la_gauche + "px )",
    					display: "block",
    					"z-index": "50"
    				});
                                    
    			}            
                
                // Si la fonction reçoit l'ordre de masquer le fond de l'une des listes de choix...
                if ( $action_principale == "masquer" || $action_secondaire == "masquer" ) {
                    
                    // S'il s'agit de masquer le fond de la liste de sélection active...
                    if ( $action_principale == "masquer" ) {
                        
                        // Le fond est masqué.	
                        $( $id_liste_de_selection_active + " #fond_select" ).remove();
                        
                    }
                    
                    // S'il s'agit de masquer le fond de la liste de sélection passive...
                    if ( $action_secondaire == "masquer" ) {
                        
                        // Le fond est masqué.	
                        $( $id_liste_de_selection_passive + " #fond_select" ).remove();
                        
                    }  
                    
    			}
                
                // Si la fonction reçoit l'ordre de fermer l'une des listes de choix...
    			if ( $action_principale == "fermer" ) {
                    
                    // Déclaration de variable.
                    $class_a_retirer = "";
                    
                    //La liste de sélection est désactivée :
                    $( "body" ).removeAttr( "data-select2-id" );
                    $( "#id-611--ligne-2" ).removeAttr( "data-select2-id" );
                    $( ".et_pb_column_1" ).removeAttr( "data-select2-id" );
                    $( "#id-611--formulaire" ).removeAttr( "data-select2-id" );
                    $( "#id-611--formulaire > div:nth-child(1)" ).removeAttr( "data-select2-id" );
                    $( ".um" ).removeAttr( "data-select2-id" );
                    $( ".um-form > form:nth-child(1)" ).removeAttr( "data-select2-id" );
                    $( ".um-account-main" ).removeAttr( "data-select2-id" );
                    $( "div.um-account-tab:nth-child(6)" ).removeAttr( "data-select2-id" );                
                    $( $id_liste_de_selection_active ).removeAttr( "data-select2-id" );
                    $( $id_liste_de_selection_active + " #fond_select" ).remove();
                    $( $id_liste_de_selection_active + " .um-field-area" ).removeAttr( "data-select2-id" );                
                    $( $id_liste_de_selection_active + " #profile_privacy > option:nth-child(1)" ).removeAttr( "data-select2-id" );
                    $( $id_liste_de_selection_active + " #profile_privacy > option:nth-child(2)" ).removeAttr( "data-select2-id" );
                    if ( $( $id_liste_de_selection_active + " > div:nth-child(2) > span:nth-child(2)" ).hasClass( "select2-container--above" ) ) {
                        
                        $class_a_retirer = "select2-container--above";
                        
                    }
                    if ( $( $id_liste_de_selection_active + " > div:nth-child(2) > span:nth-child(2)" ).hasClass( "select2-container--below" ) ) {
                        
                        $class_a_retirer = "select2-container--below";
                        
                    }
                    $( $id_liste_de_selection_active + " > div:nth-child(2) > span:nth-child(2)" ).removeClass( "select2-container--open " + $class_a_retirer );        
                    $( $id_liste_de_selection_active + " .um-field-area > span:nth-child(2) > span:nth-child(1) > span:nth-child(1)" ).removeAttr( "aria-owns aria-activedescendant" );
                    $( $id_liste_de_selection_active + " .um-field-area > span:nth-child(2) > span:nth-child(1) > span:nth-child(1)" ).attr( "aria-expanded", "false" );
                    $( $id_liste_de_selection_active + " span.select2-container:nth-child(3)" ).remove();
                    
    			}
                
    		}
Viewing 6 replies - 1 through 6 (of 6 total)