search

svnlabs / google-caja

Automatically exported from code.google.com/p/google-caja
0 stars 1 forks source link

jQueryUI not loading in playground or Sites #1549

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
Minimal failure example:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" 
type="text/javascript"></script>

Runtime error:

Uncaught script error: 'Cannot read property 'style_v___' of null' in source: 
'precajole:///jqueryui/1.8.18/jquery-ui.js' at line: 0
precajole:///jqueryui/1.8.18/jquery-ui.js:0: Cannot read property 'style_v___' 
of null

User reporting:
http://stackoverflow.com/questions/12615179/jquery-ui-library-not-loaded-served-
by-google-cdn-from-the-google-site-insert-h
             ​

Original issue reported on code.google.com by cgoldfe...@google.com on 27 Sep 2012 at 2:54

GoogleCodeExporter commented 9 years ago

Original comment by felix8a on 27 Sep 2012 at 2:58

GoogleCodeExporter commented 9 years ago 
workaround: put some html before the <script>.  this works:

<span></span>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" 
type="text/javascript"></script>

what's happening is jquery.ui.position.js has code
   var body = document.getElementsByTagName( "body" )[ 0 ],
    testElement = document.createElement( body ? "div" : "body" );

when there's html before the script, getElementsByTagName('body') succeeds, and 
document.createElement('div') succeeds.

when there's no html before the script, getElementsByTagName('body") returns 
undefined, and jquery-ui tries to do document.createElement('body'), which we 
don't support, so testElement is null, which blows up.

Original comment by felix8a on 27 Sep 2012 at 3:26

GoogleCodeExporter commented 9 years ago 
How is this a Caja bug? In-browser test case:
  data:text/html,%3Cscript%3Econsole.log(document.getElementsByTagName(%22body%22)%5B0%5D)%3C/script%3E
logs undefined.

That said, we do have a bug in ES5 mode: IIRC, the <script> logic triggers 
before the tag-insertion rules, so a <script> as first thing will run before 
<html>, whereas it should end up in <head> — but there is still no <body> yet.

Original comment by kpreid@google.com on 27 Sep 2012 at 3:32

GoogleCodeExporter commented 9 years ago 
the bug is not getElementsByTagName, that's correct behavior.
the problem is createElement('body') fails, and jquery-ui doesn't expect that 
to fail.

Original comment by felix8a on 27 Sep 2012 at 3:34

GoogleCodeExporter commented 9 years ago 
Ah. That is a bug which will be fixed in my current draft (started yesterday) 
to replace all rejection of unsafe/unknown elements with virtualization!

If we need a fast fix, it should be safe to patch createElement to allow 
unsafe-but-virtualized tag names.

Original comment by kpreid@google.com on 27 Sep 2012 at 3:37

GoogleCodeExporter commented 9 years ago 
kpreid, the behavior seems to be undefined. Running your sample gives me <body> 
about half the time in Chrome; likely a race condition.

Regardless, as Felix says, the bug still stands.

Original comment by cgoldfe...@google.com on 27 Sep 2012 at 3:40

GoogleCodeExporter commented 9 years ago 
ok, I don't think we need a fast fix, because the workaround for jquery-ui is 
trivial (add some html before the jquery-ui script).

congrats, this is now your bug.

Original comment by felix8a on 27 Sep 2012 at 3:42

GoogleCodeExporter commented 9 years ago 
Gentlemen, from the discussion thread it would appear that a simple fix is to 
add html head or body tags to get the jquery-ui to conform --- however, below 
is the complete original code that I entered into the HTML Box tool and still 
with no success

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="x-ua-Compatible" content="chrome=1">
    <link rel=stylesheet  href=//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js">  </script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#featured").tabs({fx:{opacity: "toggle", duration:  "normal"}}).tabs("rotate", 5000, true);
     });
    </script>
    </head>

    <body>
      <div id="featured" > <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a  href="#fragment-1"><img src="https://dl.dropbox.com/u/94784795/APH/images/image1- small.jpg" alt="" /><span> CLEAN WATER</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img  src="https://dl.dropbox.com/u/94784795/APH/images/image2-small.jpg" alt="" /><span>  HEALTHCARE</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img  src="https://dl.dropbox.com/u/94784795/APH/images/image3-small.jpg" alt="" /><span>  EDUCATION</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://dl.dropbox.com/u/94784795/APH/images/image4-small.jpg" alt="" /><span> SANITATION</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="https://dl.dropbox.com/u/94784795/APH/images/image5-small.jpg" alt="" /><span> SECURITY</span></a></li>
           </ul>

     <!-- First Content -->
         <div id="fragment-1" class="ui-tabs-panel" style="">
           <img src="https://dl.dropbox.com/u/94784795/APH/images/image1.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >SUPPORT SAFE CLEAN WATER</a></h2>
        <p>EVERY CHILD DESERVES A CHANCE - Help us provide access to clean water supply by funding a borehole....<a href="#" >read more</a></p>
        </div>
         </div>

     <!-- Second Content -->
         <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
           <img src="https://dl.dropbox.com/u/94784795/APH/images/image2.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >HELP PROVIDE ACCESS TO HEALTHCARE SERVICES</a></h2>
        <p>ADOPT A HOSPITAL OR CLINIC - Regular medical checkups lead to early disease detection and saves lives....<a href="#" >read more</a></p>
        </div>
         </div>

     <!-- Third Content -->
         <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
           <img src="https://dl.dropbox.com/u/94784795/APH/images/image3.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >PROVIDE SCHOLARSHIPS and SUPPORT EDUCATION</a></h2>
        <p>ADOPT A SCHOOL OR STUDENT - Help us rebuild the classrooms and libraries for the next generation....<a href="#" >read more</a></p>
              </div>
         </div>

     <!-- Fourth Content -->
         <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
           <img src="https://dl.dropbox.com/u/94784795/APH/images/image4.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >PROPER ENVIRONMENTAL SANITATION SAVES LIVES</a></h2>
         <p>TAKE A STAND AGAINST POVERTY AND POOR HYGIENE - Support neighborhood sanitation and hygiene....<a href="#" >read more</a></p>
              </div>
         </div>

            <!-- Fifth Content -->
         <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
           <img src="https://dl.dropbox.com/u/94784795/APH/images/image5.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >HELP ENSURE SAFETY AND SECURITY</a></h2>
        <p>YOUTH CENTER - Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a> </p>
          </div>
         </div>

      </div>
    </body>
    </html>

    <style>
    #featured{ 
     width:410px; 
     padding-right:195px; 
     position:relative; 
     border:5px solid #ccc; 
     height:310px; 
     background:#fff;
    }
    #featured ul.ui-tabs-nav{ 
     position:absolute; 
     top:0; left:410px; 
     list-style:none; 
     padding:0; margin:0; 
     width:195px; 
    }
    #featured ul.ui-tabs-nav li{ 
     padding:1px 0; padding-left:1px;  
     font-size:12px; 
     color:#666; 
    }
    #featured ul.ui-tabs-nav li span{ 
     font-size:11px; font-family:Verdana; font-weight:bold;
     line-height:24px;
     color:#fff;
    }
    #featured .ui-tabs-panel{ 
     width:410px; height:310px; 
     background:#999; position:relative;
    }
    #featured .ui-tabs-hide{ 
     display:none; 
    }
    #featured li.ui-tabs-nav-item a{ 
     display:block; 
     height:58px; 
     color:#ff9935;  background:#333; 
     line-height:20px;
    }
    #featured li.ui-tabs-nav-item a:hover{ 
     background:#333; 
    }
    #featured li.ui-tabs-selected{ 
     background:url('https://dl.dropbox.com/u/94784795/APH/images/selected-item.gif')  top left no-repeat;
    }
    #featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
     background:#db9d00; 
    }
    #featured ul.ui-tabs-nav li img{ 
     float:left; margin:1px 1px; 
     background:#fff; 
     padding:1px; 
     border:2px solid #eee;
    }
    #featured .ui-tabs-panel .info{ 
     position:absolute; 
     top:230px; left:0; 
     height:70px; width:410px;
     background: url('https://dl.dropbox.com/u/94784795/APH/images/transparent- bg.png'); 
    }
    #featured .info h2{ 
     font-size:18px; font-family:Georgia, serif; 
     color:#fff; padding:5px; margin:0;
     overflow:hidden; 
    }
    #featured .info p{ 
     margin:0 5px; 
     font-family:Verdana; font-size:12px; font-weight:900;
     line-height:15px; color:#ff9935;
    }
    #featured .info a{ 
     text-decoration:none; 
     color:#fff; 
    }
    #featured .info a:hover{ 
     text-decoration:underline; 
    }
    </style>

Original comment by ad...@adoprojecthope.org on 27 Sep 2012 at 6:02

GoogleCodeExporter commented 9 years ago 
It's not actually a question of "any HTML", but rather that the script executes 
after the <body> is parsed; scripts in <head> are too early. If you move your 
$... to after the <body> tag it should work around this bug.

Original comment by kpreid.switchb.org on 27 Sep 2012 at 6:19

GoogleCodeExporter commented 9 years ago 
I moved the following script below the <body> tag as suggested, without success;

 <script type="text/javascript">
      $(document).ready(function(){
        $("#featured").tabs({fx:{opacity: "toggle", duration:  "normal"}}).tabs("rotate", 5000, true);
     });
    </script>

I tried moving including the entire library jquery/jquery-ui call script below 
as suggested, still not working?

Original comment by ad...@adoprojecthope.org on 27 Sep 2012 at 6:44

GoogleCodeExporter commented 9 years ago 
When I move the entire set of <script> elements after <body>, in the playground 
in ES5 mode, I get a failure due to assigning an undeclared variable "t" inside 
jQuery UI 1.8.18 (line 11779 unminified, in the definition of "rotate"):
    t = o.selected;
where "t" is declared in an earlier but non-enclosing function. I'm surprised, 
but this looks like a plain bug in jQuery UI.

That is all in ES5 mode. In ES5/3 mode, I get "Failed to load 
//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js", which appears to be 
due to the scheme-relative URLs; after I add "https:" to the JS URLs it works, 
and I even get cycling images and clickable tabs (despite the still-occurring 
"t" error).

Content author, could you confirm that adding "https:" causes your code to 
work, or at least have only different problems?

Original comment by kpreid.switchb.org on 27 Sep 2012 at 7:08

GoogleCodeExporter commented 9 years ago 
The code works fine outside(i.e. Browser environment) the "HTML box" tool 
with/without the "https:" JS URLs, but will not load the jquery-ui library from 
within the "html box" tool.

I tried the suggested changes below and still not working or cycling images;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="x-ua-Compatible" content="chrome=1">
<link rel=stylesheet 
href=//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css>

</head>

<body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
<script 
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#featured").tabs({fx:{opacity: "toggle", duration: "normal"}}).tabs("rotate", 5000, true);
 });
</script>

  <div id="featured" > <ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://dl.dropbox.com/u/94784795/APH/images/image1-small.jpg" alt="" /><span> CLEAN WATER</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://dl.dropbox.com/u/94784795/APH/images/image2-small.jpg" alt="" /><span> HEALTHCARE</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://dl.dropbox.com/u/94784795/APH/images/image3-small.jpg" alt="" /><span> EDUCATION</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://dl.dropbox.com/u/94784795/APH/images/image4-small.jpg" alt="" /><span> SANITATION</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="https://dl.dropbox.com/u/94784795/APH/images/image5-small.jpg" alt="" /><span> SECURITY</span></a></li>
       </ul>

     <!-- First Content -->
     <div id="fragment-1" class="ui-tabs-panel" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image1.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >SUPPORT SAFE CLEAN WATER</a></h2>
    <p>EVERY CHILD DESERVES A CHANCE - Help us provide access to clean water supply by funding a borehole....<a href="#" >read more</a></p>
    </div>
     </div>

     <!-- Second Content -->
     <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image2.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >HELP PROVIDE ACCESS TO HEALTHCARE SERVICES</a></h2>
    <p>ADOPT A HOSPITAL OR CLINIC - Regular medical checkups lead to early disease detection and saves lives....<a href="#" >read more</a></p>
    </div>
     </div>

     <!-- Third Content -->
     <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image3.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >PROVIDE SCHOLARSHIPS and SUPPORT EDUCATION</a></h2>
    <p>ADOPT A SCHOOL OR STUDENT - Help us rebuild the classrooms and libraries for the next generation....<a href="#" >read more</a></p>
          </div>
     </div>

     <!-- Fourth Content -->
     <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image4.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >PROPER ENVIRONMENTAL SANITATION SAVES LIVES</a></h2>
    <p>TAKE A STAND AGAINST POVERTY AND POOR HYGIENE - Support neighborhood sanitation and hygiene....<a href="#" >read more</a></p>
          </div>
     </div>

            <!-- Fifth Content -->
     <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image5.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >HELP ENSURE SAFETY AND SECURITY</a></h2>
    <p>YOUTH CENTER - Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
          </div>
     </div>

  </div>
</body>
</html>

Original comment by ad...@adoprojecthope.org on 27 Sep 2012 at 7:30

GoogleCodeExporter commented 9 years ago 
with updated JS URLs... still no luck.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="x-ua-Compatible" content="chrome=1">
<link rel=stylesheet 
href=//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css>
</head>

<body>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>  
<script 
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></s
cript>
<script type="text/javascript">
  $(document).ready(function(){
    $("#featured").tabs({fx:{opacity: "toggle", duration: "normal"}}).tabs("rotate", 5000, true);
 });
</script>

Original comment by ad...@adoprojecthope.org on 27 Sep 2012 at 7:56

GoogleCodeExporter commented 9 years ago 
The cajoler rejects your input because it claims to be XHTML but has XML syntax 
errors. You must either have it not claim to be XML (remove the <!DOCTYPE 
...XHTML...> and remove the xmlns=...) or fix the XML errors (missing quotes 
around the <link>'s attributes, and no "/>" for <meta> and <link>); if you 
choose the latter path, I recommend using an XML parser or validator to confirm 
the correctness of your document.

You also need to change the relative URL for jquery-ui.css.

Original comment by kpreid.switchb.org on 27 Sep 2012 at 8:09

GoogleCodeExporter commented 9 years ago 
Put code thru markup validation and removed all extraneous code and tried a 
variety of different script placement options, still without any success...

<!DOCTYPE html>
<html>
<head>
<title>APH Content Slider</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-Compatible" content="chrome=1">
</head>

<body>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></s
cript>
<script type="text/javascript">
      $(document).ready(function(){
        $("#featured").tabs({fx:{opacity: "toggle", duration: "normal"}}).tabs("rotate", 5000, true);
     });
    </script>

   <div id="featured" > <ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://dl.dropbox.com/u/94784795/APH/images/image1-small.jpg" alt="" /><span> CLEAN WATER</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://dl.dropbox.com/u/94784795/APH/images/image2-small.jpg" alt="" /><span> HEALTHCARE</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://dl.dropbox.com/u/94784795/APH/images/image3-small.jpg" alt="" /><span> EDUCATION</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://dl.dropbox.com/u/94784795/APH/images/image4-small.jpg" alt="" /><span> SANITATION</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="https://dl.dropbox.com/u/94784795/APH/images/image5-small.jpg" alt="" /><span> SECURITY</span></a></li>
       </ul>
...

Original comment by ad...@adoprojecthope.org on 27 Sep 2012 at 10:30

GoogleCodeExporter commented 9 years ago 
I'm afraid I can't tell what the problem is. I ran your latest example in the 
playground and I can't tell what it might be supposed to do that it isn't 
doing. There's an error in the console "jQuery UI Tabs: Mismatching fragment 
identifier.", but that would seem to be something jQuery-specific that doesn't 
suggest something Caja might be doing wrong.

Original comment by kpreid.switchb.org on 27 Sep 2012 at 10:35

GoogleCodeExporter commented 9 years ago 
I appreciate all the help and time invested so far... are you aware of any 
instance where the jquery-ui library has been called successfully from within 
the Google sites "html box" tool? 

It seems like calling a jqueryui library served by the Google CDN should not 
require this level of difficulty to roll-out a simple Content Slider; appears 
to defeat the purpose for electing Google sites for its supposed "ease" and 
"fault tolerance." 

Still no success. Thank you very much for the support!

<!DOCTYPE html>
<html>
<head>
 <title>APH Content Slider</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-Compatible" content="chrome=1"/>
</head>

<body>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></s
cript>
<script type="text/javascript">
  $(document).ready(function(){
    $("#featured").tabs({fx:{opacity: "toggle", duration: "normal"}}).tabs("rotate", 5000, true);
 });
</script>

  <div id="featured" > <ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://dl.dropbox.com/u/94784795/APH/images/image1-small.jpg" alt="" /><span> CLEAN WATER</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://dl.dropbox.com/u/94784795/APH/images/image2-small.jpg" alt="" /><span> HEALTHCARE</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://dl.dropbox.com/u/94784795/APH/images/image3-small.jpg" alt="" /><span> EDUCATION</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://dl.dropbox.com/u/94784795/APH/images/image4-small.jpg" alt="" /><span> SANITATION</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="https://dl.dropbox.com/u/94784795/APH/images/image5-small.jpg" alt="" /><span> SECURITY</span></a></li>
       </ul>

     <!-- First Content -->
     <div id="fragment-1" class="ui-tabs-panel" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image1.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >SUPPORT SAFE CLEAN WATER</a></h2>
    <p>EVERY CHILD DESERVES A CHANCE - Help us provide access to clean water supply by funding a borehole....<a href="#" >read more</a></p>
    </div>
     </div>

     <!-- Second Content -->
     <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image2.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >HELP PROVIDE ACCESS TO HEALTHCARE SERVICES</a></h2>
    <p>ADOPT A HOSPITAL OR CLINIC - Regular medical checkups lead to early disease detection and saves lives....<a href="#" >read more</a></p>
    </div>
     </div>

     <!-- Third Content -->
     <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image3.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >PROVIDE SCHOLARSHIPS and SUPPORT EDUCATION</a></h2>
    <p>ADOPT A SCHOOL OR STUDENT - Help us rebuild the classrooms and libraries for the next generation....<a href="#" >read more</a></p>
          </div>
     </div>

     <!-- Fourth Content -->
     <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image4.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >PROPER ENVIRONMENTAL SANITATION SAVES LIVES</a></h2>
    <p>TAKE A STAND AGAINST POVERTY AND POOR HYGIENE - Support neighborhood sanitation and hygiene....<a href="#" >read more</a></p>
          </div>
     </div>

            <!-- Fifth Content -->
     <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="https://dl.dropbox.com/u/94784795/APH/images/image5.jpg" alt="" />
    <div class="info" >
    <h2><a href="#" >HELP ENSURE SAFETY AND SECURITY</a></h2>
    <p>YOUTH CENTER - Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
          </div>
     </div>
  </div>

<style type="text/css">
#featured{ 
 width:410px; 
 padding-right:195px; 
 position:relative; 
 border:5px solid #ccc; 
 height:310px; 
 background:#fff;
}
#featured ul.ui-tabs-nav{ 
 position:absolute; 
 top:0; left:410px; 
 list-style:none; 
 padding:0; margin:0; 
 width:195px; 
}
#featured ul.ui-tabs-nav li{ 
 padding:1px 0; padding-left:1px;  
 font-size:12px; 
 color:#666; 
}
#featured ul.ui-tabs-nav li span{ 
 font-size:11px; font-family:Verdana; font-weight:bold;
 line-height:24px;
 color:#fff;
}
#featured .ui-tabs-panel{ 
 width:410px; height:310px; 
 background:#999; position:relative;
}
#featured .ui-tabs-hide{ 
 display:none; 
}
#featured li.ui-tabs-nav-item a{ 
 display:block; 
 height:58px; 
 color:#ff9935;  background:#333; 
 line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{ 
 background:#333; 
}
#featured li.ui-tabs-selected{ 
 background:none top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
 background:#db9d00; 
}
#featured ul.ui-tabs-nav li img{ 
 float:left; margin:1px 1px; 
 background:#fff; 
 padding:1px; 
 border:2px solid #eee;
}
#featured .ui-tabs-panel .info{ 
 position:absolute; 
 top:230px; left:0; 
 height:70px; width:410px;
 background:none; 
}
#featured .info h2{ 
 font-size:18px; font-family:Georgia, serif; 
 color:#fff; padding:5px; margin:0;
 overflow:hidden; 
}
#featured .info p{ 
 margin:0 5px; 
 font-family:Verdana; font-size:12px; font-weight:900;
 line-height:15px; color:#ff9935;
}
#featured .info a{ 
 text-decoration:none; 
 color:#fff; 
}
#featured .info a:hover{ 
 text-decoration:underline; 
}
</style>
</body>
</html>

Original comment by ad...@adoprojecthope.org on 27 Sep 2012 at 11:08

GoogleCodeExporter commented 9 years ago 
the $(document).ready() isn't firing, it seems to be a bad interaction with 
jquery and something we're doing with the <style> block.  when I narrow it 
down, I'll file a separate issue for that.

Original comment by felix8a on 28 Sep 2012 at 12:07

GoogleCodeExporter commented 9 years ago 
oh, workaround for the $(document).ready() problem is to use
  window.onload = function() { ... }
instead.  that gets me farther; there are still a few anomalies in the result, 
but the tabs mostly work.

Original comment by felix8a on 28 Sep 2012 at 12:13

GoogleCodeExporter commented 9 years ago 
error message in the console "Uncaught ReferenceError: t is not defined" is a 
bug in jquery-ui 1.8.18.
using a later version like 1.8.23 will fix that.

the bad flashing when you switch to another image is I think something we're 
messing up about zero opacity values.  I'll file a separate issue for that when 
I narrow that down too.

Original comment by felix8a on 28 Sep 2012 at 12:31

GoogleCodeExporter commented 9 years ago 
Assigning to Felix as he is making progress on analysis here and I'm just 
working on the original virtualization bug.

Original comment by kpreid.switchb.org on 28 Sep 2012 at 12:44

GoogleCodeExporter commented 9 years ago 
The $(document).ready problem is issue 1551

Original comment by felix8a on 28 Sep 2012 at 1:26

GoogleCodeExporter commented 9 years ago 
ok the animation anomaly is also caused by issue 1551

Original comment by felix8a on 28 Sep 2012 at 2:28

GoogleCodeExporter commented 9 years ago

Original comment by jas...@gmail.com on 28 Sep 2012 at 8:19

GoogleCodeExporter commented 9 years ago 
issue 1551 is fixed in caja trunk, so that will be fixed on Sites in the next 
update.
issue 1239 is still open, but the workaround for that is easy.

Original comment by felix8a on 1 Oct 2012 at 9:50

GoogleCodeExporter commented 9 years ago 
With the fix for Issue 1239, in a local playground, cgoldfeder's original 
example still fails. Playground 'Runtime Messages':

ES5/3 mode:
Uncaught script error: 'Error' in source: 
'precajole:///jqueryui/1.8.18/jquery-ui.js' at line: 0
precajole:///jqueryui/1.8.18/jquery-ui.js:0: Error

ES5 mode:
Uncaught script error: 'TypeError: Cannot read property 
'compareDocumentPosition' of null' in source: 
'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' at line: 1
(and then jQuery UI fails to load due to no jQuery)

Original comment by kpreid.switchb.org on 3 Oct 2012 at 11:12

GoogleCodeExporter commented 9 years ago 
Does anyone have a fix or solution to the problem detailed in this thread??
Or is it just not possible to call jquery-ui from the Google sites html
tool??

Original comment by ad...@adoprojecthope.org on 19 Oct 2012 at 4:28

GoogleCodeExporter commented 9 years ago 
Could someone please let us know when this issue will be fixed? I'm still 
seeing "failed to load external url jquery-ui.min.js" :(

Original comment by gu...@helmers.nu on 24 Nov 2012 at 11:36

GoogleCodeExporter commented 9 years ago 
Authors of Comments 27 and 28: JQuery UI is currently not one of the supported 
APIs on Google Sites. Can you please let us know if there are any other issues 
we can help with?

Original comment by ihab.a...@gmail.com on 28 Nov 2012 at 7:00

GoogleCodeExporter commented 9 years ago 
Thanks for your reply. I don't have any specific questions, but your answer 
raises two questions ;)

(1) Is there an overview of JavaScript APIs supported by Google Sites?
(2) Is Google working on jquery-ui support; if so, about when will it be 
available?

Original comment by gu...@helmers.nu on 28 Nov 2012 at 8:42

GoogleCodeExporter commented 9 years ago 
> (1) Is there an overview of JavaScript APIs supported by Google Sites?

http://support.google.com/sites/bin/answer.py?hl=en&answer=2500646

> (2) Is Google working on jquery-ui support; if so, about when will it be 
available?

As you probably see from watching our checkins and emails, we in the [Open 
Source] Caja project are continually and tirelessly working to make JQuery UI 
work better under Caja; this is a priority for us. And we are doing this work 
in our capacity as Google employees. :) But we are not the right people to ask 
about the specifics of other Google products or their future directions, sorry.

Original comment by ihab.a...@gmail.com on 30 Nov 2012 at 5:51

GoogleCodeExporter commented 9 years ago

Original comment by ihab.a...@gmail.com on 30 Nov 2012 at 5:58