Home/ Questions/Q 8970419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:43:31+00:00

This is a total n00b question. I am trying out using JQuery UI and

  • 0

This is a total n00b question. I am trying out using JQuery UI and it doesn’t seem like the JQuery CSS is making any difference in my HTML file.

Here are the steps that I took:
1) picked out a theme and included a link to it (I tried both remote and local)

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" type="text/css" rel="stylesheet" >

2) set up a class for a button to use the theme:

<button class="ui-button" id='button 1'>hello world</button>

At this point in time I thought that’s all that it would take. I read through some tutorials and they all assume that all the themes work out of the box and concentrate mainly on tweaking them.

What’s the bare minimum to get started?

Final HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery demo</title>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" type="text/css" rel="stylesheet" >

    <style>
        a.test { font-weight: bold; }
    </style>

</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<button class="ui-button" id='button 1'>hello world</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    });
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ve loaded the jQuery script, but not the jQuery-UI script. (jQuery-UI requires both a CSS and a JS file, in addition to jQuery itself.)

    Change your <script> tags to this:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
});
</script>
    • 0