CODEWITHSUNDEEP
jquerycssjquery-ui
A.D
A.D

Reputation: 1510

jquery UI slider does not show up (css attached)

Having looked at many similar issues I still can not figure out why I can not display jquery UI slider. Below is my code.

The js file is being loaded and the css file is in the same location. (in the same folder as the html file)

I know jquery ui is loaded because I do not see the alert message. But I still can not see the slider. I tried

What am I doing wrong? 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"/>
<script type="text/javascript" src="jquery-ui.js"/>
<link href="jquery-ui.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
    $(document).ready(function () {
         document.body.innerHTML = "ready..."
        //ready();
        if (jQuery.ui) {
            $("#slider").slider()
        } else {
            alert("no jquery ui")
        }
    });
</script>
<title></title>
</head>
<body id="mainBody">
<div id="slider"></div>
not yet ready...
</body>
</html>

Upvotes: 0

Views: 67

Answers (1)

Adam Dunn
Adam Dunn

Reputation: 132

You are replacing all of the HTML (including #slider) in body with "ready...". This makes $("#slider").slider() not work because there's no longer a #slider element. A better way to do it would be to wrap "not yet ready..." with a DIV like so:

<body id="mainBody">
<div id="slider"></div>
<div id="status">not yet ready...</div>
</body>

And then replace document.body.innerHTML = "ready..." with $("#status").html("ready...")

That should do the trick.

Upvotes: 1

Related Questions