SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot mike.fro's Avatar
    Join Date
    Jun 2005
    Location
    Lewisville, Texas
    Posts
    130
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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.
    Michael John Froseth
    Creative Manager | Premier Planning
    Freelance Web Developer | MichaelFroseth | dotCom

  2. #2
    SitePoint Zealot mike.fro's Avatar
    Join Date
    Jun 2005
    Location
    Lewisville, Texas
    Posts
    130
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I've noticed this only happens once the video has been played. Odd?
    Michael John Froseth
    Creative Manager | Premier Planning
    Freelance Web Developer | MichaelFroseth | dotCom

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    I could reproduce your problem in Chrome.

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

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

    Code:
    <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?

  4. #4
    SitePoint Zealot mike.fro's Avatar
    Join Date
    Jun 2005
    Location
    Lewisville, Texas
    Posts
    130
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    I could reproduce your problem in Chrome.

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

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

    Code:
    <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>)
    Michael John Froseth
    Creative Manager | Premier Planning
    Freelance Web Developer | MichaelFroseth | dotCom

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

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

  6. #6
    SitePoint Zealot mike.fro's Avatar
    Join Date
    Jun 2005
    Location
    Lewisville, Texas
    Posts
    130
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    Michael John Froseth
    Creative Manager | Premier Planning
    Freelance Web Developer | MichaelFroseth | dotCom

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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:

    Code:
    Failed to load resource http://livepassdl.conviva.com/ver/2.72.0.13589/LivePass.js
    does that have anything to do with it?

  8. #8
    SitePoint Zealot mike.fro's Avatar
    Join Date
    Jun 2005
    Location
    Lewisville, Texas
    Posts
    130
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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:

    Code:
    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.
    Michael John Froseth
    Creative Manager | Premier Planning
    Freelance Web Developer | MichaelFroseth | dotCom

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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.

    I also see four errors in the console:

    Code:
    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?

  10. #10
    SitePoint Zealot mike.fro's Avatar
    Join Date
    Jun 2005
    Location
    Lewisville, Texas
    Posts
    130
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

    I also see four errors in the console:

    Code:
    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/pr...?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!
    Michael John Froseth
    Creative Manager | Premier Planning
    Freelance Web Developer | MichaelFroseth | dotCom

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    I've managed to whittle it down to this:

    Code:
    <!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:

    Code:
    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?

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    So, gotta go to bed now, but just wanted to add this before I do:

    I swapped out the iframe for this:

    Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •