I thought the basic syntax for a slider was:
<div id="slider"></div>
$("#slider").slider()
But that doesn't make a visible slider. Inspecting the div element, I see that some stylings were applied, but the slider isn't visible.
Here's a fiddle: http://jsfiddle.net/yqNcn/
You have not included the CSS for jQuery UI so classes are applied but styles are not (there are actually none to apply). Here's an edited fiddle that includes the styles (look at the Resources panel); the slider is visible as it should be.
First Import your javascript Files* jquery.s and import Jquery UI widget Jquery-ui.js
Then
Put Your Css Div Tag with id <div id="slider"></div> this Example
<div id="slider"></div>
then Call Jquery slider function....
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
Related
using Jquery UI, I'm trying to drag elements and drop them inside bootstrap columns. A simple idea but doesn't work, as you may try yourself:
http://jsfiddle.net/r4rp93ac/1/
It only drops inside the first bootstrap column
I found related questions:
Bootstrap 3 column class interfering with jquery-ui droppable div
jQuery UI Draggable with Bootstrap layout
and tried to add
.ui-draggable-handle {
z-index: 1;
}
.ui-draggable-dragging {
z-index: 10000!important
}
to css, but doesn't help.
Id should be unique, so if you wan two droppable zones, use class instead:
<div id="droppable2" class="droppable col-xs-3">
<p>Drop
<br>here</p>
</div>
<div id="droppable2" class="droppable col-xs-3">
<p>Drop
<br>here</p>
</div>
And
$(".droppable").droppable({
drop: function (event, ui) {
$(this).find("p").html("Dropped!");
}
});
Working demo
I have a slider created using JQuery-UI which has 4 slider segments. The structure is something like this:
<div id="mySlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all disabled">
<div class="ui-slider-segment" title="1">
<div class="ui-slider-segment" title="2">
<div class="ui-slider-segment" title="3">
<div class="ui-slider-segment" title="4">
</div>
Initially the slider has the 'disabled' class. When I click on any segment of the slider, it triggers the slideChange event and the event handler which I wrote for that event removes the class 'disabled'. This works as expected in Chrome and Firefox browsers.
My problem occurs when I test this in casper.js. I've tried the following one after the other without success.
I followed the solution posted here: How to move jquery-ui slider with CasperJS
//left and top co-ordinates of the segments fetched using element.getBoundingClientRect()
this.mouse.down(242.890625,488.75);
this.mouse.move(214.46875,403.9375);
this.mouse.up(214.46875,403.9375);
I can't use CSS3 selectors for the triggering mousedown in casper.js, as there are no IDs for the segments, and every segment has the same classes (dynamically generated by JQuery-UI).
var slide = casper.evaluate(function(){
var sliderId = $('#mySlider');
sliderId.slider('value',2);
});
casper.then(function(){
var sliderClass = casper.evaluate(function(){
return document.getElementById('mySlider').className;
});
console.log(sliderClass); //still contains the class 'disabled'
});
Where am I going wrong? I've included both jquery and jquery-ui libraries. Is there any other way?
I have an element:
<td colspan="3" data-enhance="false">
<select id="CandidatesListBox" size="9" onchange="MoveToGeocode()" style="width: 100%" class="candidatesList" data-role="none"></select>
</td>
I want this element to have no jQuery Mobile styles. The problem is that I fill this item dynamically, and jQuery mobile will ignore all data-enhance="false" tags then adding dynamic elements through javascript. JQuery Mobile will also transform the control, so jQuery that would work on the item (.add(), for example) will not. I need to make a dynamic element with no jQuery mobile styles or elements. Is this possible?
Edit
I have also tried to disable all selects from using JQM, but get the same issue:
$(document).bind('mobileinit', function () {
$.mobile.keepNative = "select"; /* jQuery Mobile 1.4 and higher */
});
JQM adds styles and render them when you specify the JQM css file. Once it is called and unless you override the CSS by your own applying styles for a particular element cannot be stopped. Because JQM itself wrapps our elements with their elements. So as a solution get the element and remove additional class names added by JQM from the element. Also you will need to remove wrapping elements too.
I have a <p> in a jQuery UI accordion that appears:
<p class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 184px " role="tabpanel">
Earlier, when I had several text links in there, it fit perfectly. However, now I have image links, and the images are sharply clipped.
I can duct tape the matter by adding additional <br /> tabs to get more space, but I'd like the accordion panel to include all images, one above the other, and correctly sized.
In If I understand your question correctly you need to tell the accordion to base its height off the content.
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
This is stated and shown on the jQuery UI site here: http://jqueryui.com/accordion/#no-auto-height
Hopefully this is what you are looking for.
I had the same problem with the jQuery Accordion, and I just found the fix!
Simply add this CSS code at the top of your page. It will override the auto crop happening on the thumbnails:
.ui-accordion-content {
min-height:auto !important;
}
I have a page with several sections of significantly varying length within a jQuery UI Accordion. If I open a new section (which collapses one of the longer sections above), I'm left at the bottom of the page. Because the sections are of significantly different heights, I can't use the autoheight feature without it looking very strange. Is there any way to use something like scrollto to automatically go to the top of the section I've just expanded?
You can bind a function to the accordionchange event and use jQuery scrollTop():
JavaScript
$(function () {
$("#accordion").accordion({
autoHeight: false,
header: "h3"
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
HTML
<div id="accordion">
<div id="accordion-one">
<h3>First</h3>
<div>Some lengthy text</div>
</div>
<div id="accordion-two">
<h3>Second</h3>
<div>Less lengthy text</div>
</div>
<div id="accordion-three">
<h3>Third</h3>
<div>Other text</div>
</div>
</div>
I tested this in FF8.
Links
Accordion change event
jQuery scrollTop()