Support » Plugin: WP-FlyBox » Mozilla Firefox – content not shown

  • What’s the problem with Firefox, that it does not display a content of the tab(s)?
    please check:
    http://5element.in – custom tabs
    http://grupaslubna.pl – regular FB tab
    http://maor.pl – regular FB tab and regular Twitter tab.
    All plugins updated. All WP’s updated. Firefox is “out of the box” – no plugins, no settings, no history. Windows version. Checked on more than 1 computer.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author cconoly

    (@cconoly)

    What version and language of firefox are you using? I just downloaded the portable version (no install) so that it was fresh out of the box and everything showed up fine, just like in chrome.

    It’s Firefox 32-bit version 51.0.1, Polish language running on Windows 10, 64-bit, also Polish.

    Plugin Author cconoly

    (@cconoly)

    I cannot reproduce the problem with Firefox 32-bit 51 Polish language. The content shows up fine in the flyout box on all three sites. Could it be a region issue or proxy or something? Can you paste the html code of the wp-flybox when there is no content? thanks

    The code for SCRIPT (head) part: http://pastebin.com/22e06Y3K
    The code for HTML part: http://pastebin.com/rC6i6LSa

    The <script> part:

    <script type="text/javascript">
      var tab1_pos=0;
      var wpfb1_tab_width;
        var tab2_pos=0;
      var wpfb2_tab_width;
        var tab3_pos=0;
      var wpfb3_tab_width;
      jQuery(window).load(function(){
      var tab_width=33;
      wpfb1_tab_width=33;
      if (jQuery("#wp-flybox_tab1").length > 0 && tab1_pos==0) 
        {
        var i_width=jQuery("#wp-flybox_tab1").width()-tab_width;
        i_width='-'+i_width+'px';
        document.getElementById('wp-flybox_tab1').style.right=i_width;
        }
        var tab_width=33;
      wpfb2_tab_width=33;
      if (jQuery("#wp-flybox_tab2").length > 0 && tab2_pos==0) 
        {
        var i_width=jQuery("#wp-flybox_tab2").width()-tab_width;
        i_width='-'+i_width+'px';
        document.getElementById('wp-flybox_tab2').style.right=i_width;
        }
        var tab_width=33;
      wpfb3_tab_width=33;
      if (jQuery("#wp-flybox_tab3").length > 0 && tab3_pos==0) 
        {
        var i_width=jQuery("#wp-flybox_tab3").width()-tab_width;
        i_width='-'+i_width+'px';
        document.getElementById('wp-flybox_tab3').style.right=i_width;
        }
      });
    
    jQuery(document).ready(function(){
    var doc_height=jQuery(document).height()
    var scrollTooMuch=parseInt('');
    if (scrollTooMuch===NaN || scrollTooMuch==''){scrollTooMuch=0;}
    jQuery('#wpflybox_container').height(doc_height-scrollTooMuch);
      var tab_width=33;
      if (jQuery("#wp-flybox_tab1").length > 0) 
        {
        var i_width=jQuery("#wp-flybox_tab1").width()-tab_width;
        i_width='-'+i_width+'px';
        document.getElementById('wp-flybox_tab1').style.right=i_width;
        }
        var tab_width=33;
      if (jQuery("#wp-flybox_tab2").length > 0) 
        {
        var i_width=jQuery("#wp-flybox_tab2").width()-tab_width;
        i_width='-'+i_width+'px';
        document.getElementById('wp-flybox_tab2').style.right=i_width;
        }
        var tab_width=33;
      if (jQuery("#wp-flybox_tab3").length > 0) 
        {
        var i_width=jQuery("#wp-flybox_tab3").width()-tab_width;
        i_width='-'+i_width+'px';
        document.getElementById('wp-flybox_tab3').style.right=i_width;
        }
        jQuery("#wp-flybox_tab1 div.wp_but").click(function(){
        
        if(tab1_pos==0)
          {
          jQuery("#wp-flybox_tab1").animate({right:'0px'});
                    var tab_width=33;
              var wpfb1_tab_width=33;
              var j_width=jQuery("#wp-flybox_tab2").width()-tab_width;
              j_width='-'+j_width;
              jQuery("#wp-flybox_tab2").animate({right:j_width});
                        var tab_width=33;
              var wpfb1_tab_width=33;
              var j_width=jQuery("#wp-flybox_tab3").width()-tab_width;
              j_width='-'+j_width;
              jQuery("#wp-flybox_tab3").animate({right:j_width});
                      tab1_pos=0;
                    tab2_pos=0;
                    tab3_pos=0;
                  tab1_pos=1;
                } else {  
          var tab_width=33;   
          var i_width=jQuery("#wp-flybox_tab1").width()-tab_width;
          i_width='-'+i_width;
          jQuery("#wp-flybox_tab1").animate({right:i_width});
                 
          tab1_pos=0;
          }
      });
        jQuery("#wp-flybox_tab2 div.wp_but").click(function(){
        
        if(tab2_pos==0)
          {
          jQuery("#wp-flybox_tab2").animate({right:'0px'});
                    var tab_width=33;
              var wpfb2_tab_width=33;
              var j_width=jQuery("#wp-flybox_tab1").width()-tab_width;
              j_width='-'+j_width;
              jQuery("#wp-flybox_tab1").animate({right:j_width});
                        var tab_width=33;
              var wpfb2_tab_width=33;
              var j_width=jQuery("#wp-flybox_tab3").width()-tab_width;
              j_width='-'+j_width;
              jQuery("#wp-flybox_tab3").animate({right:j_width});
                      tab1_pos=0;
                    tab2_pos=0;
                    tab3_pos=0;
                  tab2_pos=1;
                } else {  
          var tab_width=33;   
          var i_width=jQuery("#wp-flybox_tab2").width()-tab_width;
          i_width='-'+i_width;
          jQuery("#wp-flybox_tab2").animate({right:i_width});
                 
          tab2_pos=0;
          }
      });
        jQuery("#wp-flybox_tab3 div.wp_but").click(function(){
        
        if(tab3_pos==0)
          {
          jQuery("#wp-flybox_tab3").animate({right:'0px'});
                    var tab_width=33;
              var wpfb3_tab_width=33;
              var j_width=jQuery("#wp-flybox_tab1").width()-tab_width;
              j_width='-'+j_width;
              jQuery("#wp-flybox_tab1").animate({right:j_width});
                        var tab_width=33;
              var wpfb3_tab_width=33;
              var j_width=jQuery("#wp-flybox_tab2").width()-tab_width;
              j_width='-'+j_width;
              jQuery("#wp-flybox_tab2").animate({right:j_width});
                      tab1_pos=0;
                    tab2_pos=0;
                    tab3_pos=0;
                  tab3_pos=1;
                } else {  
          var tab_width=33;   
          var i_width=jQuery("#wp-flybox_tab3").width()-tab_width;
          i_width='-'+i_width;
          jQuery("#wp-flybox_tab3").animate({right:i_width});
                 
          tab3_pos=0;
          }
      });
      
    });
    //get cookie and set cookie
    //write cookie
    var d = new Date();
        d.setTime(d.getTime() + (30*24*60*60*1000));
        var expires = d.toUTCString();
    document.cookie = 'wp-flybox-seen=1; expires='+expires+'; path=/';
     
    //auto out
    jQuery(window).load(function(){
      
    });
    
    //resize
    var resizeTimer;
    jQuery(window).on('resize', function(e) {
    
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
              var tab_width=33;
          if (jQuery("#wp-flybox_tab1").length > 0) 
            {
            var i_width=jQuery("#wp-flybox_tab1").width()-tab_width;
            i_width='-'+i_width+'px';
            document.getElementById('wp-flybox_tab1').style.right=i_width;    
            }
                var tab_width=33;
          if (jQuery("#wp-flybox_tab2").length > 0) 
            {
            var i_width=jQuery("#wp-flybox_tab2").width()-tab_width;
            i_width='-'+i_width+'px';
            document.getElementById('wp-flybox_tab2').style.right=i_width;    
            }
                var tab_width=33;
          if (jQuery("#wp-flybox_tab3").length > 0) 
            {
            var i_width=jQuery("#wp-flybox_tab3").width()-tab_width;
            i_width='-'+i_width+'px';
            document.getElementById('wp-flybox_tab3').style.right=i_width;    
            }
                      
      }, 350);
    
    });
    
    //resize
    /*
    var resizeId;
    jQuery(window).resize(function() {
        clearTimeout(resizeId);
        resizeId = setTimeout(doneResizing, 500);
    });
     
     
    function doneResizing(){
        var scrollTooMuch=parseInt('');
        if (scrollTooMuch===NaN){scrollTooMuch=0;}
        jQuery('#wpflybox_container').height(0);
        document.getElementById("wpflybox_container").style.height ='0px';
        var doc_height=jQuery(document).height()
        jQuery('#wpflybox_container').height(doc_height-scrollTooMuch); 
    }
    */
    </script>

    And the <body> part:
    <div class="wp-flybox_tab" id="wp-flybox_tab1" style="pointer-events:all;width:auto;display:inline-block;overflow:hidden;position:fixed;border:0px;right:-9990px;top:10px;z-index:9991 !important"><div style="height:10px;width:33px;display:inline-block;inline-block;float:right;"></div><div class="wp_but" style="display:inline-block;float:left;cursor:pointer;"><img id="wpfb_tab_img1" src="http://5element.in/wp-content/uploads/2015/05/facebook.png" style="width:33px;height:101px" alt="?"></div><div style="float:left;"><div style="background-color:#ffffff;border:1px solid black;display:inline-block"><div class="fb-page" data-href="https://www.facebook.com/organizacja5element" data-width="350" data-height="500" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/organizacja5element"><a href="https://www.facebook.com/organizacja5element">5 Element</a></blockquote></div></div></div></div></div><div class="wp-flybox_tab" id="wp-flybox_tab2" style="pointer-events:all;width:auto;display:inline-block;overflow:hidden;position:fixed;border:0px;right:-9990px;top:121px;z-index:9992 !important"><div style="height:10px;width:33px;display:inline-block;inline-block;float:right;"></div><div class="wp_but" style="display:inline-block;float:left;cursor:pointer;"><img id="wpfb_tab_img2" src="http://5element.in/wp-content/uploads/2015/05/facebook.png" style="width:33px;height:101px" alt="?"></div><div style="float:left;"><div style="background-color:#ffffff;border:1px solid black;display:inline-block"><div class="fb-page" data-href="https://www.facebook.com/feelrealclothing" data-width="350" data-height="500" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/feelrealclothing"><a href="https://www.facebook.com/feelrealclothing">Feel Real Clothes</a></blockquote></div></div></div></div></div><div class="wp-flybox_tab" id="wp-flybox_tab3" style="pointer-events:all;width:auto;display:inline-block;overflow:hidden;position:fixed;border:0px;right:-9990px;top:232px;z-index:9993 !important"><div style="height:10px;width:33px;display:inline-block;inline-block;float:right;"></div><div class="wp_but" style="display:inline-block;float:left;cursor:pointer;"><img id="wpfb_tab_img3" src="http://5element.in/wp-content/uploads/2015/05/facebook.png" style="width:33px;height:101px" alt="?"></div><div style="float:left;"><div style="background-color:#ffffff;border:1px solid black;display:inline-block"><div class="fb-page" data-href="https://www.facebook.com/5ElementNightWorkshops" data-width="350" data-height="500" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/5ElementNightWorkshops"><a href="https://www.facebook.com/5ElementNightWorkshops">5 Element Night Workshops</a></blockquote></div></div></div></div></div><link rel='stylesheet' id='gllr_stylesheet-css' href='http://5element.in/wp-content/plugins/gallery-plugin/css/frontend_style.css' type='text/css' media='all' />

    Plugin Author cconoly

    (@cconoly)

    try adding style="width:350px;height:500px" into the div in the custom HTML setting under wp-flybox settings. Let me know what happens! I still cannot reproduce the problem even with your exact code.

    It looks like this (after adding your styles):
    http://pl.tinypic.com/r/2iatr8j/9

    Plugin Author cconoly

    (@cconoly)

    It looks fine on my end. Are you sure it is not set to automatically fly out at the beginning?

    No, it’s not. I’m sure.

    The problem is with a tracking protection in Firefox. When disabled – the content is shown properly. Any ideas how to put a code so that it is ok for Firefox?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Mozilla Firefox – content not shown’ is closed to new replies.