0

I'm working on creating resizable DIVs in html and have found some code online as reference.

When running the HTML source code on chrome, the resizable function does not work and I can only see plain text with no functionality. However, the code works fine on JSFiddle.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Resizable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#resizable" ).resizable();
  } );
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>
 
 
</body>
</html>

This is the exact code that I'm working with. Any ideas why it's not functioning properly on chrome?

law jia hua
  • 37
  • 6
  • 2
    It works just fine in your snippet. – T.J. Crowder Jul 14 '19 at 08:37
  • `href`s of `` aren't correct? Also take a look at DevTools in Chrome, it may report errors already. – whatacold Jul 14 '19 at 08:40
  • check whether you have any console error regarding loading of jquery, if there is replace the jquery import with a cdn link `https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js` – BLACKMAMBA Jul 14 '19 at 08:54
  • 1
    **Danger**: jQuery 1.12.4 is beyond end of life. It does not get security updates. Upgrade to a supported version of jQuery. – Quentin Jul 14 '19 at 09:03

1 Answers1

1

I can only see plain text

Your CSS is not loading.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

This is a scheme relative URL.

It will work fine providing the HTML document you are viewing is loaded over HTTP or HTTPS.

Since it is not, you must be loading it directly from your local filesystem with a file: scheme URL (typically this will be because you double clicked the HTML document in Windows Explorer).

You need to load the HTML document from a web server or change the URL to the CSS so it uses an absolute URL (one which starts https:).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335