www.webdeveloper.com
Results 1 to 12 of 12

Thread: Popbox won't work in IE10 on personal site.

  1. #1
    Join Date
    Jun 2013
    Posts
    10

    Popbox won't work in IE10 on personal site.

    I've been using the popbox plugin found here : http://gristmill.github.io/jquery-popbox/.

    The test site works fine with Chrome, Firefox, and IE10, but for the website I'm working on, only Chrome and Firefox are working correctly. For IE10, the buttons just link back to the top of the page, and don't actually open any box.

    Here is the code in my own html:
    Code:
    <div class='popbox'>
                                      <a class='open' href='#'>Click Here!</a>
                                          <div class='collapse'>
                                            <div class='box'>
                                                  <div class='arrow'></div>
                                                      <div class='arrow-border'></div>
                                                           <form action=\"newWorkerSubmit.php\" method=\"POST\" padding=\"1em\">
                                                            Name: <input type=\"text\" name=\"workerName\"/>
                                                            Date: <input type=\"text\" style=\"text-align:center\" name=\"workDate\" readonly=\"\" value=\"Friday, August 16th\">
                                                            Time: <input type=\"text\" style=\"text-align:center\" name=\"workTime\" readonly=\"\" value=\"9:00am - 10:00am\">
                                                            <!-- The values that really matter. Day, row, column to be submitted -->
                                                            <input type=\"hidden\" name=\"workDay\" value=\"16\">
                                                            <input type=\"hidden\" name=\"workerTime\" value=\"1\">
                                                            <input type=\"hidden\" name=\"workerNumber\" value=\"1\">
                                                            <input type=\"submit\" Value=\"Reserve this spot!\" name=\"submit\">
                                                        </form>
                          <a href=\"#\" class=\"close\">close</a>
                        </div>
                      </div>
                    </div>
    I have linked the CSS and the JS file correctly to the site :
    Code:
    	<script src="js/vendor/jquery.js" charset="utf-8" type="text/javascript"></script>
      	<script src="js/vendor/popbox.js" charset="utf-8" type="text/javascript"></script>
    	<link rel="stylesheet" href="css/popbox.css" type='text/css'/>
    but to no avail.

    The site DOES work correctly on Firefox/Chrome - but the site was developed by someone else FOR Firefox/Chrome - I added popbox and am now working on making the site IE compatible.
    I have double and triple checked against the example code and everything seems to be right - can anything think of any reason WHY this would not work in IE10 for my site, but it does on the example site?

    Thanks in advance!

  2. #2
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Press F12 in IE to bring up a developer window. Check the console when you try to execute the function. Post any errors here.

  3. #3
    Join Date
    Jun 2013
    Posts
    10
    SCRIPT438: Object doesn't support property or method 'popbox'
    tent.php, line 20 character 8


    As well as a bunch of warnings about using a hyphen.

  4. #4
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    It's hard to say without seeing the full code but it sounds like the 'popbox' is firing before it's script is loaded.

  5. #5
    Join Date
    Jun 2013
    Posts
    10
    Yeah here is lines 18-22:

    Code:
     	<script type='text/javascript' charset='utf-8'>
        	$(document).ready(function(){
    		$('.popbox').popbox();
       		});
      	</script>
    But the example website works the exact same way - Here is the order I list the scripts in:
    Code:
    	<script src="js/vendor/jquery.js" type="text/javascript"></script>
      	<script src="js/vendor/popbox.js"  type="text/javascript"></script>
    
    	<script src="js/vendor/custom.modernizr.js"></script>
     	<script type='text/javascript' charset='utf-8'>
        	$(document).ready(function(){
    		$('.popbox').popbox();
       		});
      	</script>
    Is there anyway I can make it load only when it is ready?

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,265
    Why \" in HTML code ?
    Code:
     <input type=\"text\" style=\"text-align:center\"
    It seems to be a copy of a javascript HTML code...

  7. #7
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    What you are doing should make it wait until the DOM is ready.

    I basically copied what you did, I just put the JS and CSS compressed inline and it worked.

    Try using this in place of what you have for the div:
    HTML Code:
    <div class='popbox'>
        <a class='open' href='#'>Click Here!</a>
        <div class='collapse'>
            <div class='box'>
                <div class='arrow'></div>
                <div class='arrow-border'></div>
                <form action='newWorkerSubmit.php' method='POST' padding='1em'>
                    Name: <input type='text' name='workerName'/>
                    Date: <input type='text' style='text-align:center' name='workDate' readonly='' value='Friday, August 16th'>
                    Time: <input type='text' style='text-align:center' name='workTime' readonly='' value='9:00am - 10:00am'>
                    <!-- The values that really matter. Day, row, column to be submitted -->
                    <input type='hidden' name='workDay' value='16'>
                    <input type='hidden' name='workerTime' value='1'>
                    <input type='hidden' name='workerNumber' value='1'>
                    <input type='submit' Value='Reserve this spot!' name='submit'>
                </form>
                <a href='#' class='close'>close</a>
            </div>
        </div>
    </div>
    Here is the full code I used:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            (function(){$.fn.popbox=function(e){var t=$.extend({selector:this.selector,open:".open",box:".box",arrow:".arrow",arrow_border:".arrow-border",close:".close"},e);var n={open:function(e){e.preventDefault();var r=$(this);var i=$(this).parent().find(t["box"]);i.find(t["arrow"]).css({left:i.width()/2-10});i.find(t["arrow_border"]).css({left:i.width()/2-10});if(i.css("display")=="block"){n.close()}else{i.css({display:"block",top:10,left:r.parent().width()/2-i.width()/2})}},close:function(){$(t["box"]).fadeOut("fast")}};$(document).bind("keyup",function(e){if(e.keyCode==27){n.close()}});$(document).bind("click",function(e){if(!$(e.target).closest(t["selector"]).length){n.close()}});return this.each(function(){$(this).css({width:$(t["box"]).width()});$(t["open"],this).bind("click",n.open);$(t["open"],this).parent().find(t["close"]).bind("click",function(e){e.preventDefault();n.close()})})}}).call(this)
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.popbox').popbox();
            });
        </script>
        <style type="text/css">
            .popbox{text-align:center;position:relative;margin:0 auto}.collapse{position:relative}.open{border:solid 1px #FFF;border-radius:5px;box-shadow:0 0 5px #CCC;background:linear-gradient(top,#f4f4f4,#e8e8e8);padding:8px}.box{display:none;background:#FFF;border:solid 1px #BBB;border-radius:5px;box-shadow:0 0 15px #999;position:absolute}.box a.close{color:red;font-size:12px;font-family:arial;text-decoration:underline}.arrow{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #FFF;position:absolute;left:1px;top:-10px;z-index:1001}.arrow-border{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #BBB;position:absolute;top:-12px;z-index:1000}
        </style>
    </head>
    <body>
    <div class='popbox'>
        <a class='open' href='#'>Click Here!</a>
        <div class='collapse'>
            <div class='box'>
                <div class='arrow'></div>
                <div class='arrow-border'></div>
                <form action='newWorkerSubmit.php' method='POST' padding='1em'>
                    Name: <input type='text' name='workerName'/>
                    Date: <input type='text' style='text-align:center' name='workDate' readonly='' value='Friday, August 16th'>
                    Time: <input type='text' style='text-align:center' name='workTime' readonly='' value='9:00am - 10:00am'>
                    <!-- The values that really matter. Day, row, column to be submitted -->
                    <input type='hidden' name='workDay' value='16'>
                    <input type='hidden' name='workerTime' value='1'>
                    <input type='hidden' name='workerNumber' value='1'>
                    <input type='submit' Value='Reserve this spot!' name='submit'>
                </form>
                <a href='#' class='close'>close</a>
            </div>
        </div>
    </div>
    </body>
    </html>

  8. #8
    Join Date
    Jun 2013
    Posts
    10
    That is what is echo'd. It's actually in a php file, I have to check if the spot is filled before placing a button there.

  9. #9
    Join Date
    Jun 2013
    Posts
    10
    NoEffinWay, I tried to copy and paste that, but it didn't work for IE10, and broke functionality in Chrome/Firefox.

  10. #10
    Join Date
    Jun 2013
    Posts
    10
    Quote Originally Posted by skania View Post
    NoEffinWay, I tried to copy and paste that, but it didn't work for IE10, and broke functionality in Chrome/Firefox.
    Whoop - I had to change the location of the jquery file , but it worked!

  11. #11
    Join Date
    Jun 2013
    Posts
    10
    Quote Originally Posted by skania View Post
    Whoop - I had to change the location of the jquery file , but it worked!
    Spoke too soon, worked on a test file in the directory, didn't work for the actual file. :/

  12. #12
    Join Date
    Jun 2013
    Posts
    10
    After copying each section one by one here was the culprit:
    Code:
      <script>
      document.write('<script src=' +
      ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
      '.js><\/script>')
      </script>
    I have no idea what that does, or why it was there - but from what I can tell the site works now.

    Thanks for your help guys!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles