-1

I was trying to run the Connected List example on this page: jQuery UI #Connected Lists

But when I copy the html and the style.css file into a local directory and open up the html, I don't get the highlight color and border as seen in the picture

What I get from the URL From The URL

What I get when run locally From Local

In the html code, the first column has the class "ui-state-default" and the second column is "ui-state-highlight"

The drag-and-drop functionality is still all there, just not the styling.

Is there some initialization of the demo environment that isn't included in the supplied code?

RufusVS
  • 4,008
  • 3
  • 29
  • 40
  • 1
    Did you copy the two style sheets referenced in the code, as well as the local stuff...The background color comes from the referenced jquery.ui.css file. – Mark Schultheiss Mar 04 '17 at 17:45
  • Thanks for the comment @MarkSchultheiss! You were right, and I had copied the local code, but didn't think I needed to copy the other one, but the problem is explained here [http://stackoverflow.com/questions/6785442/browser-support-for-urls-beginning-with-double-slash] in the answer at the bottom given by @MatasVaitkevicius – RufusVS Mar 05 '17 at 03:35

1 Answers1

0

The answer lay in the reference to the jQuery .css file given here:

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

The problem is the reference starting with the double //. I got it to work by adding https: before the double quotes, or copying it locally and removing the //. The problem is the // does not correctly interpret the file:// access. It is discussed here: Browser support for URLs beginning with double slash see the answer from @Matas Vaitkevicius

Community
  • 1
  • 1
RufusVS
  • 4,008
  • 3
  • 29
  • 40