个人中心
gpt4 book ai didi

3cx change bubble button style in Wordpress functions.php - move up an async button and styling it after waiting fetch for async dom created(3cx更改WordPress函数中的气泡按钮样式。php-上移一个异步按钮，并在等待获取创建的异步DOM后对其进行样式设置)

转载 作者：bug小助手 更新时间：2023-10-25 17:17:44 24 4
gpt4 key购买 nike



I have been struggling with the moving up of the chat bubble overriding my theme bottom login/out web app bar for 2 days:

我一直在努力向上移动的聊天气泡覆盖我的主题底部登录/退出Web应用程序栏2天：


Tryed to:

尝试：



  1. modify in Wordpress the child style.css and the functions.php


The style of the theme was not applying
in style.css modified the <button id="wplc-chat-button"

样式中未应用主题样式。css修改了


`/* 
 Theme Name:   Alukas child
 Theme URI:    
 Description:  Tema child di Alukas
 Author:       admin
 Author URI:   https://monbi.it
 Template:     alukas
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/
#wplc-chat-button {bottom: 100px!important}
`


  1. using jquery to add css to the chat bubble
    after manually applying the bottom:70px!important to Chrome



  2. using jquery to add css to the chat bubble parent div



  3. using jquery to add css to the chat bubble grandparent div




更多回答

Welcome to StackOverflow, hope you will find new knowledge here. You can help us answering your question, by adding a minimal-reproducible-example StackOverflow Snippet. It will help readers execute your code with one click. And help create answers with one click. Thank you.

欢迎来到StackOverflow，希望你能在这里找到新的知识。您可以通过添加一个可重现的最小示例StackOverflow片段来帮助我们回答您的问题。它将帮助读者一键执行您的代码。只需一次点击即可帮助创建答案。谢谢。

@danny-365csi-engelman copy paste the code below in functions.php of your wordpress with 3cx chat plugin installed (it.wordpress.org/plugins/wp-live-chat-support)

@dini-365csi-Engelman Copy将下面的代码粘贴到安装了3cx聊天插件的(it.wordpress.org/plugins/wp-live-chat-support)的wordPress的函数.php中

优秀答案推荐


    function add_custom_js() {
    ?>
    <script type="text/javascript">

        function querySelectorAllShadows(selector, el = document.body) {
          // recurse on childShadows
          
             /**
             * Finds all elements in the entire page matching `selector`, even if they are in shadowRoots.
             * Just like `querySelectorAll`, but automatically expand on all child `shadowRoot` elements.
             * @see https://stackoverflow.com/a/71692555/2228771
             */
          const childShadows = Array.from(el.querySelectorAll('*')).
            map(el => el.shadowRoot).filter(Boolean);

          // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`);

          const childResults = childShadows.map(child => querySelectorAllShadows(selector, child));
          
          // fuse all results into singular, flat array
          const result = Array.from(el.querySelectorAll(selector));
          return result.concat(childResults).flat();
        }

        jQuery(document).ready(function(){
            setTimeout(function() {
            // sposta la bubble chat
                
            // Sposta il div #callus-container
                var allMatches = querySelectorAllShadows('#wp-live-chat-by-3CX');
                if(allMatches && allMatches.length > 0){
                    var callusContainer = jQuery(allMatches[0]); // Prendi il primo match
                    if(window.innerWidth <= 430) {
                        callusContainer.css({'position':'fixed','bottom':'105px','right':'5px'});
                    }
                }
                
            }, 3000);  // 3 secondi di ritardo
        });
    </script>
    <?php
}
    add_action('wp_head', 'add_custom_js', 100);

更多回答

the main struggle have been to deal with async creation of the button solved with a js delay of 3 sec. and that the jQuery querySelectorAll function that it is not working inside the shadow-dom created

主要的斗争一直是处理按钮的异步创建，解决了JS延迟3秒的问题。并且jQuery querySelectorAll函数不能在创建的卷影DOM中工作

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach?

请记住，Stack Overflow不仅仅是为了解决眼前的问题，也是为了帮助未来的读者找到类似问题的解决方案，这需要理解底层代码。这对于我们社区的初学者和不熟悉语法的成员来说尤其重要。考虑到这一点，你能编辑你的答案，包括你正在做的事情的解释以及为什么你认为这是最好的方法吗？

24 4 0
文章推荐： Host 'xxx.xx.xxx.xxx' is not allowed to connect to this MySQL server(不允许主机‘xxx.xx.xxx.xxx’连接到此MySQL服务器)
文章推荐： Attaching debugger with Apache Age - MACOS(将调试器与ApacheAge-MACOS连接)
文章推荐： Book a specific appointment on a specific day(在特定的日子预定特定的预约)
文章推荐： How do I attach calculated properties or methods to collections in Astro?(如何将计算的属性或方法附加到Astro中的集合？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com