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;
}
Related
I use jQuery UI's new Tooltip and having trouble with figuring out how to set a maximum width of the tooltip. I guess it should be done with position, but how?
Based on Senni's reply, I added following to a separate CSS-file:
div.ui-tooltip {
max-width: 400px;
}
A sidenote: Make sure your separate CSS follows after the ui-css, otherwise there will be no effect. Otherwise you also could use the !important - marker.
If you subscribe to Tooltip's open event, you can update the style in code:
$(".selector").tooltip({
open: function (event, ui) {
ui.tooltip.css("max-width", "400px");
}
});
in script:
$(elm).tooltip({tooltipClass: "my-tooltip-styling" });
in css:
.my-tooltip-styling {
max-width: 600px;
}
Instead of modifying or overriding the jQuery UI CSS classes directly, you can specify an additional CSS class using the tooltipClass parameter:
Tooltip initialization
$(function() {
$( document ).tooltip({
items: "tr.dataRow",
tooltipClass: "toolTipDetails", //This param here is used to define the extra style class
content: function() {
var element = $( this );
var details = j$("#test").clone();
return details.html();
}
});
});
Then you would create that style class. You will want to import this CSS file after the jQuery UI CSS file.
Example CSS style
This class here would make the modal 1200px in width by default and add a horizontal scroll if there is any more content beyond that.
<style>
.toolTipDetails {
width: 1200px;
max-width: 1200px;
overflow:auto;
}
</style>
Sidenote: It is generally not recommended to use the !important tag but it could be used in this case to ensure that the intended CSS is rendered.
As pointed out by the jQuery UI api, the best you can do is override the classes ui-tooltip and ui-tooltip-content this way:
.ui-tooltip
{
/* tooltip container box */
max-width: your value !important;
}
.ui-tooltip-content
{
/* tooltip content */
max-width: your value !important;
}
Hope this helps!
Maybe you can set the width like this in the js
$("#IDOfToolTip").attr("style", "max-width:30px");
or
$("#IDOfToolTip").css("max-width", "30px");
.ui-tooltip{
max-width: 800px !important;
width: auto !important;
overflow:auto !important;
}
.ui-tooltip-content{
background-color: #fdf8ef;
}
div.ui-tooltip{
width: 210px; //if fit-content not worked in specifics browsers
width: fit-content;
}
I'm using Twitter-Bootstrap and I need to be able to print the page the way it looks on the browser. I'm able to print other pages made with Twitter-Bootstrap just fine but I can't seem to print my page that uses purely Twitter-Bootstrap. Am I missing a tag somewhere?
Official TB page when printed:
My page when printed:
What my page actually looks like:
Bootstrap 3.2 update: (current release)
Current stable Bootstrap version is 3.2.0.
With version 3.2 visible-print deprecated, so you should use like this:
Class Browser Print
-------------------------------------------------
.visible-print-block Hidden Visible (as block)
.visible-print-inline Hidden Visible (as inline)
.visible-print-inline-block Hidden Visible (as inline-block)
.hidden-print Visible Hidden
Bootstrap 3 update:
Print classes are now in documents: http://getbootstrap.com/css/#responsive-utilities-print
Similar to the regular responsive classes,
use these for toggling content for print.
Class Browser Print
----------------------------------------
.visible-print Hidden Visible
.hidden-print Visible Hidden
Bootstrap 2.3.1 version:
After adding bootstrap.css file into your HTML,
Find the parts that you don't want to print and add hidden-print class into tags.
Because css file includes this:
#media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
Be sure to have a stylesheet assigned for printing.
It could be a separate stylesheet:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
or one you share for all devices:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute
Then, you can write your styles for printers in the separate stylesheets or in the shared one using media queries:
#media print {
/* Your styles here */
}
Replace every col-md- with col-xs-
eg: replace every col-md-6 to col-xs-6.
This is the thing that worked for me to get me rid of this problem you can see what you have to replace.
There's a section of #media print code in the css file (Bootstrap 3.3.1 [UPDATE:] to 3.3.5), this strips virtually all the styling, so you get fairly bland print-outs even when it is working.
For now I've had to resort to stripping out the #media print section from bootstrap.css - which I'm really not happy about but my users want direct screen-grabs so this'll have to do for now. If anyone knows how to suppress it without changes to the bootstrap files I'd be very interested.
Here's the 'offending' code block, starts at line #192:
#media print {
*,
*:before,enter code here
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
select {
background: #fff !important;
}
.navbar {
display: none;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
Best option I found was http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/
html2canvas(document.body, {
onrendered: function(canvas) {
$("#page").hide();
document.body.appendChild(canvas);
window.print();
$('canvas').remove();
$("#page").show();
}
});
In case someone is looking for a solution for Bootstrap v2.X.X here. I am leaving the solution I was using. This is not fully tested on all browsers however it could be a good start.
1) make sure the media attribute of bootstrap-responsive.css is screen.
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />
2) create a print.css and make sure its media attribute print
<link href="/css/print.css" rel="stylesheet" media="print" />
3) inside print.css, add the "width" of your website in html & body
html,
body {
width: 1200px !important;
}
4.) reproduce the necessary media query classes in print.css because they were inside bootstrap-responsive.css and we have disabled it when printing.
.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
Here is full version of print.css:
html,
body {
width: 1200px !important;
}
.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
2 things FYI -
For now, they've added a few toggle classes. See what's available in the latest stable release - print toggles in responsive-utilities.less
New and improved solution coming in Bootstrap 3.0 - they're adding a separate print.less file. See separate print.less
To make print view look like tablet or desktop include bootstrap as .less, not as .css and then you can overwrite bootstrap responsive classes in the end of bootstrap_variables file for example like this:
#container-sm: 1200px;
#container-md: 1200px;
#container-lg: 1200px;
#screen-sm: 0;
Don't worry about putting this variables in the end of the file. LESS supports lazy loading of variables so they will be applied.
If you want to keep columns on A4 print (which is around 540px) this is a good idea
#media print {
.make-grid(print-A4);
}
.make-print-A4-column(#columns) {
#media print {
float: left;
width: percentage((#columns / #grid-columns));
}
}
You can use it like this:
<div class="col-sm-4 col-print-A4-4">
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>
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 trying to implement the latest sIFR. But I can't get even the simplest of tests to work. My test page is at http://www.kellymitchelljewelry.com/testsifr.asp. There should be an sIFR-generated line that says "2nd line" between the first and third lines. I'm using the examples provided on the sIFR page exactly.
My html looks like this:
<html>
<head>
<title>Kelly Mitchell Fine Jewelry</title>
<link rel="stylesheet" href="sifr.css" type="text/css">
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
</head>
<body>
First Line<br><br>
<h1>Second Line</h1>
<br>Third Line<br><br>
</body>
</html>
My sifr-config.js looks like this:
var cgoth = { src: 'cgoth.swf' };
sIFR.activate(cgoth);
sIFR.replace(cgoth, {
selector: 'h1'
});
My sifr.css file looks like this:
#media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
#media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
#media screen {
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
line-height: 1em;
}
*/
I've tried recreating my swf file just in case I did something wrong, and closely followed the instructions to make sure I didn't leave anything out.
Can someone help me figure what I'm doing wrong?
Tom
I don't think your Flash movie is correct, opening it directly should show "Rendered with sIFR 3" text. Make sure it was exported correctly.
I have never been able to get a .swf file exported from Flash to work with sIFR. I've always ended up having to use the online sIFR generator: http://www.sifrgenerator.com/wizard.html
I don't know if my version of Flash (CS3) is just not compatible with sIFR or what... I do always save as version 8 like it says to, and make sure every setting is as it should be, but no luck. However, using that generator always seems to solve it. So if your Flash is jinxed to, you might want to give it a try.