I need to make my jQuery mobile slider rails thicker. I also need to make the knob of the slider larger as well. I have visited other SO threads and tried to change the CSS rules of the slider. The class of the slider widgets has been set to jquerymobileslider.
Here is the relevant contents of a tag within my index.html:
.jquerymobileslider .ui-slider {
height: 50px;
}
.jquerymobileslider .ui-slider .ui-slider-handle {
height: 50px;
width: 50px;
}
However I see no changes.
Any ideas?
The default height is already 50px, try the following ensuring it's applied after the default CSS styles and see if you notice any visual changes:
.ui-slider-track {
height: 75px;
}
.ui-slider-handle {
height: 75px;
top: 0%;
}
I need to modify the image of primefaces rowToggler. This is what I'm trying in the css file:
.ui-datatable .ui-row-toggler {
cursor: pointer;
background-image: url("/resources/images/expand.jpg") ;
}
I have also tried changing the url to /images/expand.jpg, images/expand.jpg and simply expand.jpg. But none of them find the image.
What am I missing?
This is an old thread: adding an answer in case anyone else finds this on Google. The problem comes from the fact that the class used for adding the icon is hardcoded (see the source code) to be the class ui-icon-circle-triangle-e when the row is collapsed, and ui-icon-circle-triangle-s when the row is expanded. So the way to do this is to override the definitions of those classes in your style sheet. Here is what worked for me:
.ui-icon-circle-triangle-e {
background-image: url('../images/triangleRight.png') !important;
background-position: 0px 0px;
}
.ui-icon-circle-triangle-s {
background-image: url('../images/triangleDown.png') !important;
background-position: 0px 0px;
}
The defaults looked too much like simple bullet points - users were overlooking that they were clickable.
If you are putting your images inside the resources folder of your Project, you should access it like this:
.ui-datatable .ui-row-toggler {
cursor: pointer;
background-image: url("../javax.faces.resource/expand.jpg.xhtml?ln=images/") ;
}
The magical formula should be
../javax.faces.resource/<file-name>.xhtml?ln=<path-to-the-folder>/
So if your image is at /resources/car/bmw/series7.jpg, you should access it with ../javax.faces.resource/series7.jpg.xhtml?ln=car/bmw/
With the information you provided, its most likely because you have an app running on "localhost/APP_NAME/", and when you do "/resources/..." it points to "localhost/resources/..." which doesn't exist (it should resolve to "localhost/APP_NAME/resources/...".
Try this instead of url (its JSF specific)
url("#{resource['images:expand.jpg']}")
<script type="text/javascript">
/*<![CDATA[*/
$(document).on("click", ".ui-icon-circle-triangle-e", function() {
$(this).css({
background: 'url(#{request.contextPath}/images/data/silm.gif)'
});
});
/*]]>*/
</script>
<style type="text/css">
.ui-datatable .ui-row-toggler {
cursor: pointer;
background: url(#{request.contextPath}/images/data/eklem.gif) ;
}
</style>
i am using jquery ui draggable do drag a div around. whats the best way to smoothly ease out the drag after the drag stopped?
assuming the drag stopped abruptly.
thank you
Implementing draggables with easing might work for you. This is a simplified solution from my answer to a previous thread, which was more specific:
JQuery draggable with ease
HTML:
<div id="draggable">
</div>
CSS:
#draggable {
position: relative;
width: 100px;
height: 100px;
background-color: whitesmoke;
border: 2px solid silver;
}
Javascript:
$(function() {
$("#draggable").draggable({
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
var p = ui.helper.position();
$(this).stop().animate({
top: p.top,
left: p.left
},1000,'easeOutCirc');
}
});
});
jsFiddle demo: http://jsfiddle.net/NJwER/26/
On lots of sites now, you can see a Facebook "Like" Button.
- When depressed, it changes background color.
- When mouse-overed, it allows you to write some additional text
I love this interface - lightweight action, but allow for expression of more data if the user wants to.
Anyone has written a similar plugin?
UPDATE:
See: http://www.engadget.com/2010/05/30/htc-evo-4g-gets-hacked-froyo-port-sense-ui-be-damned/ at the bottom of a post, you will see the facebook like button
I don't know of such a plugin for jQuery, but writing the user-interface is quite simple.
(Edit: Actually I just thought of a place where I could use this feature myself. I might just as well write a proper plugin based on this next week if I have the time, and edit it here. For the time being, below is what I originally posted...)
All you need is a couple of divs:
<div id="thebutton">Click me!</div>
<div id="thebox" style="display:none;">Content goes here</div>
And some jQuery:
<script type="text/javascript">
$(function () {
$('#thebutton')
.click(function () {
//Show/hide the box
$(this).toggleClass('activated');
$(this).hasClass('activated') ? $('#thebox').fadeIn() : $('#thebox').fadeOut();
})
.mouseenter(function () {
//If the button is .activated, cancel any delayed hide and display the box
$(this).addClass('hovering');
if ($(this).hasClass('activated')) {
$('#thebox').clearQueue().fadeIn();
}
})
.mouseleave(function () {
//Hide the box after 300 milliseconds (unless someone cancels the action)
$(this).removeClass('hovering');
$('#thebox').delay(300).fadeOut();
});
$('#thebox')
//When hovering onto the box, cancel any delayed hide operations
.mouseenter(function () { $(this).clearQueue(); })
//When hovering off from the box, wait for 300 milliseconds and hide the box (unless cancelled)
.mouseleave(function () { $(this).delay(300).fadeOut(); });
});
</script>
The rest is pretty much just CSS for #thebutton, #thebox, .hovering and .activated.
Here's a spartan look I used while writing this:
<style type="text/css">
#thebutton { width: 100px; background-color: #eee; text-align: center; padding: 10px; cursor: pointer; }
#thebutton.activated { font-weight: bold; }
#thebutton.hovering { color: Blue; }
#thebox { background-color: #eee; position:relative; width: 300px; height: 200px; padding: 10px; top: 5px; display: none;}
</style>
How about this jquery plugin: http://socialmediaautomat.com/jquery-fbjlike-js.php
It's really simple to set up and lets you perform some neat tasks in combination with the jquery cookie plugin (have a look at the demo page).
You can handle the hover, mousedown, and mouseup events and change the button's content or style.
Is not a plugin it uses the Facebook Javascript SDK. You load it by placing this at bottom of your document:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Add this attribute to your HTML tag(the actual HTML tag right after the DOCTYPE):
xmlns:fb="http://www.facebook.com/2008/fbml"
And then you can place this snippet wherever you want a Like button:
<fb:like></fb:like>
Using the $('#your-button').button(); function from the jQuery UI library gives this functionality, and a whole lot more.
http://jqueryui.com/themeroller/
I'm using the jQuery DatePicker control for the first time. I've got it working on my form, but it's about twice as big as I would like, and about 1.5 times as big as the demo on the jQuery UI page. Is there some simple setting I'm missing to control the size?
Edit: I found a clue, but it opens up new problems. In the CSS file, it states the component will scale according to the parent element's font size. They recommend setting
body {font-size: 62.5%;}
to make 1em = 10px. Doing this gives me a nicely sized datepicker, but obviously it messes up the rest of my site (I currently have font-size: .9em).
I tried throwing a DIV around my text box and setting its font size, but it seems to ignore that. So there must be some way to shrink the datepicker by changing the font of its parent, but how do I do that without messing up the rest of my site?
You don't have to change it in the jquery-ui css file (it can be confusing if you change the default files), it is enough if you add
div.ui-datepicker{
font-size:10px;
}
in a stylesheet loaded after the ui-files
div.ui-datepicker is needed in case ui-widget is mentioned after ui-datepicker in the declaration
I can't add a comment, so this is in reference to the accepted answer by Keijro. I actually added the following to my stylesheet instead:
div.ui-datepicker {
font-size: 62.5%;
}
and it worked as well. This might be preferable to the absolute value of 10px.
Not sure whether some body has suggested following way, if yes, just ignore my comments. I tested this today and it works for me. By just resizing the font before the control gets displayed:
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
Using the callback function beforeShow
I change the following line in ui.theme.css:
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
to:
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }
Add
div.ui-datepicker, .ui-datepicker td{
font-size:10px;
}
in a stylesheet loaded after the ui-files.
This will also resize the date items.
For me, this was the easiest solution:
I added the font-size:62.5%; to the first .ui-datepicker tag in the jquery custom css file:
before:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;}
after:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }
I was trying these examples without success. Apparently other stylesheets on the page were setting default font sizes for different tags. If you adjust the ui-datepicker you are changing a div. If you change a div you need to make sure the contents of that div inherit that size. This is what finally worked for me:
<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>
Good luck!
I was using an input to collect and show the calendar, and to be able to resize the calendar I have been using this code:
div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}
It works like a charm.
$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');
This worked for me and seems simple...
$(function() {
$('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});
<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
with out changing the css file you can also change the calendar size by putting the the following code in to ur <head>.....</head> tag:
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
</style>
<script>
$(function() {
$( "#datepicker" ).datepicker({
//font-size:10px;
//numberOfMonths: 3,
showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
});
});
</script>
</head>
I tried the approach of using the callback function beforeShow but found I had to also set the line height. My version looked like:
beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
the best place to change the size of the calendar is in the file jquery-ui.css
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .7em; /* <--default is 1.1em */
}
This code will work on Calender buttons.
size of numbers will increase by using "line-height".
/* Change Size */
<style>
.ui-datepicker{
font-size:16px;
line-height: 1.3;
}
</style>
you can change jquery-ui-1.10.4.custom.css as follows
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Another approach:
$('.your-container').datepicker({
beforeShow: function(input, datepickerInstance) {
datepickerInstance.dpDiv.css('font-size', '11px');
}
});
$('div.ui-datepicker').css({ fontSize: '12px' }); work if we call it after
$("#DueDate").datepicker();
Fiddle
The Jacob Tsui solution works perfect for me:
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
We can alter in the default 'jquery-ui.css' file as below given code:
div.ui-datepicker {
font-size: 80%;
}
However, changing the default 'jquery-ui.css' file is not recommended as it might have been used somewhere else in the project. Changing values in the default file can alter datepicker font in other webpages where it has been used.
I used the below code to alter "font-size". I placed it just after datepicker() is called as shown below.
<script>
$(function () {
$( "#datepicker" ).datepicker();
$("div.ui-datepicker").css("font-size", "80%")
});
</script>
Hope this helps...
I think I found it - I had to go into the CSS file and change the font-size for the datepicker control directly. Obvious once you know about it, but confusing at first.
open ui.all.css
at the end put
#import "ui.base.css";
#import "ui.theme.css";
div.ui-datepicker {
font-size: 62.5%;
}
and go !
To get this to work in Safari 5.1 with Rails 3.1, I had to add:
.ui-datepicker, .ui-datepicker a{
font-size:10px;
}
I had datepicker appearing in a modal and because of the "date-display-container" on the left hand side, the calendar was partially out of view, so I added:
.datepicker-date-display {
display: none;
}
.datepicker-calendar-container {
max-height: 21em;
}
.datepicker-day-button {
line-height: 1.2em;
}
.datepicker-table > thead > tr > th {
padding: 0;
}