views:

52

answers:

2

Hi,

I am using Colorbox to load some content from an external (but local) file.

The content appears in everything except Google Chrome.

The linke with the event handler attached:

    <div id="content">
        <p><a id="modal" href="popup.html" target="_blank">link to popup</a></p>
    </div>

This is the jQuery:

 $(document).ready(function(){
   $("#modal").colorbox({
        innerHeight:200,
        innerWidth:530,
        title:false,
        transition:"none",
        onComplete:function(){
            $("#cboxLoadedContent div:first").attr("id", "pop");
        }
   });
 });

And the page i am trying to inject:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Hotels.com</title>
    <meta name="title" content="" />
    <meta name="keywords" content="Hotels, travel" />
    <meta name="author" content="Ryan Pays" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />  
</head>
    <body id="pop">
        <div class="wrap">
            <div class="section">
                <div class="redBar">
                    <p>Lorem ipsum</p>
                </div>
                <form id="frmExp" name="frmExp" method="post" action="#">
                    <fieldset>
                        <legend>A form</legend>
                        <ul>
                            <li>
                                <input type="radio" id="radYes" name="rdAnswer" value="Yes" />
                                <label for="radYes">Yes</label>
                            </li>   
                            <li>    
                                <input type="radio" id="radNo" name="rdAnswer" value="Yes" />
                                <label for="radNo">No</label>
                            </li>
                            <li>
                                <button type="submit">
                                    <span>Button</span>
                                </button>
                            </li>
                            <li>
                                <button type="submit">
                                    <span>Bigger button</span>
                                </button>
                            </li>
                            <li>
                                <button type="submit" class="back">
                                    <span>Back button</span>
                                </button>
                            </li>
                        </ul>
                    </fieldset>
                </form>
            </div>
            <div class="aside">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam placerat aliquet nibh</li>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam placerat aliquet nibh</li>
                </ul>
            </div>
        </div>
    </body>
</html>
+2  A: 

Google Chrome and ColorBox on Windows XP SP3, in particular, had a known bug just like this. This was fixed in 1.3.9 so make sure you update your plugins.

You can find the source here http://github.com/jackmoore/colorbox/raw/master/colorbox/jquery.colorbox-min.js

Meke
Using the latest code but still no joy :(
RyanP13
Have you tried this? http://stackoverflow.com/questions/2216926/jquery-load-ie-ff-and-chrome
Meke
+1  A: 

Chrome does not by default allow access to local files by AJAX under its security settings. You have to explicitly enable it with the --allow-file-access-from-files launch parameter.

lonesomeday