(Why) does jQuery make my slider look fat?_问答_开发者

(Why) does jQuery make my slider look fat?

开发者 https://www.devze.com 2022-12-09 02:34 出处：网络

I\'m teaching myself jQuery and starting on jquery-ui using a slider control.I have it hooked up and functionally it works well, setting some global page variables when I slide the handle.It does not,

I'm teaching myself jQuery and starting on jquery-ui using a slider control. I have it hooked up and functionally it works well, setting some global page variables when I slide the handle. It does not, however, look like the slider on the jquery-ui demo page.

It's a horizontal slider and I can control the length of the bar by setting the CSS width property of the that jquery-ui converts to the slider. But the bar is about two or three times "thicker" than the one on the demo page, and the slider handle is proportionately larger. It looks ok, but not as good as the one on the demo page.

Taking the width setting as a hint, I tried setting the CSS height property of the underlying . That changed the height of the bar part, but not the handle which now looked outsize.

Here is the header:

<head>
    <title>The Memory Game</title>
    <link href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/memoryGame.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.3.2.min.js" t开发者_运维问答ype="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="js/memoryGame.js" type="text/javascript"></script>
</head>

Here is the HTML markup:

<div id="control-panel"  class="ui-state-default">
<div id="slider" style="width: 150px"></div>
</div>

Here is my CSS for control-panel:

div#control-panel {
padding:    10px;
float:      right;
}

And here is the jQuery in which I apply the slider:

$('#slider').slider({
    max: 10000,
    value: waitTime,
    change: function(event, ui) {
        waitTime = ui.value;
        fadeTime = waitTime / 3;
    }
});

Can anyone suggest how I can scale the thickness of my slider or at least get the same thickness shown on the jquery-ui demo page?

The slider size is controlled by the 'font-size' css property. You want to decrease the font-size of the parent element.

All jQuery UI widgets have theming instructions associated with them. The instructions for the slider widget mention certain CSS classes that are assigned to the slider handle.

Looking at the jquery-ui.css (or ui.slider.css if you are using the development package) you can see that the default CSS is something like:

.ui-slider .ui-slider-handle {
  width: 1.2em;
  height: 1.2em;
}
.ui-slider-horizontal .ui-slider-handle { 
  top: -0.3em;
  margin-left: -0.6em;
}

You can override these CSS rules to create a handle of any size.

Edit

I've produced basic slider functionality here: http://jsbin.com/otika3 (Editable via http://jsbin.com/otika3). Please try and reproduce your problem on http://jsbin.com and share the public link with us.

Full source:

<!doctype html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <title>http://stackoverflow.com/questions/1616675</title>
  <style type="text/css" media="screen">
    html, body, #content { height: 100%; }
    body { background-color: #000; font-size: 62.5%; color: #fff; }
    #content { width: 700px; margin: 0 auto; border: 1px solid white; padding: 1em;}
    #slider { width: 200px; }
  </style>
</head>
<body>
  <div id="content">
    <div id="slider"></div>
  </div>
  <script>
    $('#slider').slider();
  </script>
</body>