views:

2499

answers:

2

Here is my simple code to try and test if jQuery resizable is working. I use other jQuery components just fine using the google.load, and I've tried swapping out the google.load for a local version with no difference. I've tested in 3 browsers, I've copied code from several demo/tutorial sites (where it works find on their site).

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=blahblah_obviously changed_blahblah-blahblah_blah_blahblahblah"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");google.load("jqueryui", "1.7.1");</script>
<style type="text/css">
   #resizable { width: 100px; height: 100px; background: silver; }
</style>
<script type="text/javascript">
  $(document).ready(function(){
  $("#resizable").resizable();
});
</script>
</head>
<body>  
 <div id="resizable"></div>
</body>
</html>

I don't get any error messages. I'm at my wit's end. What am I doing wrong? Why doesn't even this simple case work?

UPDATE: the jQuery UI libraries are included by the line google.load("jqueryui", "1.7.1");

+1  A: 

Have you tried:

<script type="text/javascript">
google.setOnLoadCallback(function() {
  $(function() {
    $("#resizable").resizable();
  });
});
</script>

It's worth noting that google.load() is an async call and you won't be able to call the jQuery functions until they're loaded hence the callback.

Ok, had a look at your example and you've got a few problems:

  1. This is the biggest: you have no jQuery UI stylesheet;
  2. You're double including jQuery, jQuery UI and SWFObject from both Google and locally;
  3. The last div inside your resizable div is blocking resizing. Not sure exactly why but I commented it out and it works fine; and
  4. You don't need an API key for Google's AJAX Libraries API. This odesn't cause a problem. It's just FYI.

Working version of yours:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css"&gt;
<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
google.load("swfobject", "2.1");
google.setOnLoadCallback(function() {
  $(function() {
    $("#resizable").resizable();
  });
});
</script>
<style type="text/css">
  #resizable { width: 100px; height: 100px; background: silver; }
</style>
</head>
<body>
<div id="resizable">
  <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
  <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
  <!--<div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>-->
</div>
</body>
</html>
cletus
That didn't work. To prove I tried it and this isn't working for me, goto: http://www.bcsfanpoll.com/test/test.php
MECU
Adding the stylesheet link solved it. I don't see how I'm including the libraries twice? That last div is being added by jQuery (or Firefox), it's not part of my base code. The `<div id="resizable"></div>` is what is part of my code, nothing inside. Thanks for the no-API tip.
MECU
+6  A: 

jQuery UI is working fine in your sample, the issue you have is because you don't have any CSS Theme included in your last test, and the "resizable handle" icon is not shown.

Add your own theme or the default one:

<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/&gt;

See your sample here.

CMS
Adding this stylesheet link solved it. Thanks!
MECU