javascript - How to fix "Uncaught TypeError: undefined is not a function"? -
here's jsfiddle: http://jsfiddle.net/mostthingsweb/crayj/1/
i'll include code , explain what's wrong
here's html header show should linked:
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel='stylesheet' href='test.css'/> <script src='test.js'></script> </head> here's css:
.draggable { width: 80px; height: 80px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .ui-widget-header p, .ui-widget-content p { margin: 0; } #snaptarget { height: 140px; } body, html { background: url('http://i.imgur.com/fbs3b.png') repeat; } here's js:
$(document).ready(function() { $("#draggable5").draggable({ grid: [80, 80] }); }); so grid launch , paragraph there, if seek drag it, won't work. when inspect page gives me error saying: "uncaught typeerror: undefined not function" points line 2 of js code. doing wrong?
here's whole html:
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel='stylesheet' href='test.css'/> <script src='test.js'></script> </head> <body> <div class="demo"> <div id="draggable5" class="draggable ui-widget-content"> <p>i snap 80 x 80 grid</p> </div> </div> </body> </html>
i pasted code you've submitted local html file , works fine me (i did not add together test.js pasted code in script tags before closing body tag. here's entire file (tested in chrome only)
<!doctype html> <html lang="en"> <head> <title>test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel='stylesheet' href='test.css'/> <style type="text/css"> .draggable { width: 80px; height: 80px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .ui-widget-header p, .ui-widget-content p { margin: 0; } #snaptarget { height: 140px; } body, html { background: url('http://i.imgur.com/fbs3b.png') repeat; } </style> </head> <body> <div class="demo"> <div id="draggable5" class="draggable ui-widget-content"> <p>i snap 80 x 80 grid</p> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#draggable5").draggable({ grid: [80, 80] }); }); </script> </body> javascript jquery html css
No comments:
Post a Comment