Bug When Using iFrame (jQuery Drop Down On Scroll with Google Chrome)

Hello All,
I am building a one page website here at work to promote a book we are releasing. I have a jQuery function setup so that once you scroll past the video_container div a bar appears at the top as is fixed with the page until you either submit the form, or scroll back up past the video_container again. We just finished the video and I implemented it into the site however now (in Chrome only as far as I can tell) the bar is buggy and does not appear past the div, however if you scroll back up you can see it very briefly.

Wondering what this could be? It appears to work just fine in Firefox. I’m just not sure what this could be?

http://postseasongameplan.com/index.php?forms=submits

That link will get you past the initial lead form and anyone who uses Chrome should be able to duplicate the problem.

Any help would be greatly appreciated.

I’ve noticed this only happens once the video has been played. Odd?

Hi,

I could reproduce your problem in Chrome.

I could also fix it (I think) by changing this:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

to this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />

Does that make a difference for you?

Thanks for the help. I tried that but it didn’t appear to fix anything. I’m going back to the original viewport settings I had which were “<meta name=“viewport” content=“width=device-width, initial-scale=1”>”

Anyone else have any ideas? I can’t seem to wrap my head around this. It has something to do with the iFrame because when I remove that, the drop down menu appears just as expected (when scrolled past the video_container <div>)

Hi,

Sorry for letting the thread go cold.
Did you get this sorted out in the meantime or does the problem persist?

Hey, no worries. But no, I have not figured out the problem yet. It only happens in Chrome it appears.

I just looked at the page and now I don’t see any bar in Chrome, regardless of where I scroll.
Did you remove it?

The console is also telling me:

Failed to load resource http://livepassdl.conviva.com/ver/2.72.0.13589/LivePass.js

does that have anything to do with it?

Whoops, I’m sorry. I forgot to update this, I changed the main site from having the scrolling bar. The ones that have them are in sub folders. http://www.postseasongameplan.com/premier/

And I’ll have to check where that is coming from. I don’t recall calling that at all.

Hi,

When I go to the page you link to and scroll down, I see the bar, but then am greeted by a modal dialogue that I can’t dismiss that wants my name, email address and phone number. :nono:

I also see four errors in the console:

Uncaught TypeError: Object #<Object> has no method 'split' player.js:135
Uncaught TypeError: Object #<Object> has no method 'match' ConvivaCommunicationProxy.html:142
Uncaught TypeError: Object #<Object> has no method 'match' ConvivaCommunicationProxy.html:142
Uncaught TypeError: Object #<Object> has no method 'match' ConvivaCommunicationProxy.html:142

I don’t mind attempting to help you debug this, but would it be possible that you make a simple test page which reproduces your issue, with no JS errors and only the player, the bar and no other content?

I apologize. I’m having a case of the Monday’s as they say. Here is a link where you can avoid the modal box. http://www.postseasongameplan.com/premier/index.php?forms=submits

I will go through my js files right now and see what I can find with those console errors. I’ll post an update here shortly.

Thank you!

Hi,

I’ve managed to whittle it down to this:

<!DOCTYPE html>
<html class="no-js">
  <head>
    <base href="http://postseasongameplan.com/premier/"/>
    <meta charset="utf-8">
    <title>Post Season Gameplan | Premier Planning</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  
  <body>
    <div id="container">
      <div id="stickyLogo">
        <a href="./index.php?forms=submits"><img src="../img/hidden_logo.png"/></a>
        <p style="float:right; margin-right:5px;">
          <a href="#bottom" style="">
            <button class="thoughtbot" style="margin-right:10px;margin-bottom:5px;clear:both;">Order Now!</button>
          </a>
        </p>
      </div>
      
      <div id="logo"></div>
      <div id="video_container">
        <iframe src="http://player.vimeo.com/video/74395873?title=0&amp;byline=0&amp;portrait=0" class="vimeo" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
      <div style="height:3000px;">&nbsp;</div>
      <div id="bottom">Copyright © 2013 Legacy Safeguard, LLC All rights reserved. </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
      $(document).ready( function() {
        $("#stickyLogo").hide(); //hide your div initially
        var topOfOthDiv = $("#video_container").offset().top;
        $(window).scroll(function() {
          if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $("#stickyLogo").slideDown("fast"); //reached the desired point -- show div
          } else {
            $("#stickyLogo").slideUp("fast");
          }
        });
      });
    </script> 
  </body>
</html>

It seems that the problem is the iframe.
If you comment it out with <!-- –> then the slide effect works in Chrome every time.

When the video plays however, I see a slew of errors in the console and frustratingly, not always the same ones:

Unable to post message to http://player.vimeo.com. Recipient has origin null.
Uncaught TypeError: Object #<Object> has no method 'match' ConvivaCommunicationProxy.html:142
Uncaught ReferenceError: axs is not defined

Do you have any idea what any of these could mean?

So, gotta go to bed now, but just wanted to add this before I do:

I swapped out the iframe for this:

<video controls>
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>

With no video in Chrome the sticky dropdown works perfectly.
With a video tag in Chrome it behaves very erratically and vanishes once you scroll past it.

I know that this is nothing we didn’t know anyway, but it proves that it was nothing to do with the JS errors I reported before.