Menu
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");
310
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"/>
See your sample here.
119
All CSS you need to get working jquery ui .resizable(): (don't forget to save image to local)
<style type="text/css">
.ui-icon { width: 16px; height: 16px; background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
</style>
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:
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">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
