I am using Trent Richardson's timepicker and I am having an issue with the jquery-ui sliders that are used in his widget. The draggable boxes in the sliders are not rendering fully. I am left with what looks like the border of what would have been the boxes on the far left side of the slider and it does not move when I click on it.
I have tried using this tool with the full version of jquery and jquery-ui packages so I know that I am not missing a package and I have not found anyone else with a similar problem. Everything else works just fine in the timepicker so I believe that this is a problem specific to the slider. My javascript is identical to the first example shown in the link above.
Has anyone experience a similar problem when working with sliders?
UPDATE
Found the issue. It turns out I did not have sliders selected when I downloaded the css files for my datepicker. I had since then downloaded the necessary slider functions but forgot to redownload the css...
DOH!
Yes that's it, the solutin is to add the slider css to your project. The file can be found here :
http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.slider.css
Related
I am using a jquery-ui select along with a theme and the jqgrid JS, however the options for the select do not drop down under the select's button. The appear in the top left of the browser. How can I fix that?
thanks for the reply. I have now resolved the issue. It seems for some reason that the jquery-ui theme that I had downloaded had issues. I pointed to the CDN for that theme and it is working great now.
The problem with my function is that when I scroll down, the clone of the element I want to drag is positioned under my mouse pointer, this only happens in FF, IE and Safari, Chrome works like it should.
I already tried all answers on this question :
jQuery draggable shows helper in wrong place after page scrolled
But without succes,
I use jQuery 1.8.3 & jQuery UI 1.10.3
hopefully anyone has any idea on how to fix this.
You can view a live version of my webpage here : http://www.solar-sell.eu/uw-pv-systeem/?gezin=true
The people are the draggable elements and the house is the drop area.
Thanks in advance!
It seems to me that the problem is a jQuery UI bug - http://bugs.jqueryui.com/ticket/9315
have download Jquery DatePicker and try to add to my View.
But the DatePicker only work fine when I remove all my page css file
If I keep both of them, the DatePicker display very strange with a small rectangle
I am using Jquery 1.8.2 and Jquery-ui 1.8.24
I think the main reason is that there is some duplication between css in my file with the css in the DatePicker
Please help me to solve it
Thank you in advance
I suggest you to download firebug,if you haven't it already, and select the datapicker.
In this way the firebug console display you on the right column the CSS style related to the selected item,here you can disable the CSS property and see wich one cause you the problem.
Also be sure that you have the jquery ui images in the correct folder
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.
I have a problem that drives me nuts, i have used themeroller from jquery mobile and i love this tool, it has its flaws and one of them is when you use dark backgrounds it leaves a little white stripe at the top of the list you can see it right here
http://yellowgreenmedia.info/1-theme/
it is on the top , left and right of the list, its small but it is there
Is there a fix for this, so i can remove the annoying white stripe
Thanks
Dave
On this:
div class="ui-btn-inner ui-li" ...
Give it:
border-top:0
Worked at my end.
First I would add a HTML DOCTYPE
http://www.w3schools.com/html5/tag_doctype.asp
I think you're missing the opening <html> tag
http://yellowgreenmedia.info/1-theme/ (right click to view source)
and last I think you also need to add just the custom theme and not jQM default css
http://jsfiddle.net/UEuKA/3/
Last I would give the jQM Theme Roller another go as it looks to be adding CSS from RC2
http://jquerymobile.com/themeroller/
http://yellowgreenmedia.info/1-theme/css/style.css (jQuery Mobile v1.0rc2)
One more thing, your custom CSS could be causing the extra line as well, Didn't look at it too much though
http://yellowgreenmedia.info/1-theme/css/custom.css