Based on the AjaxControlToolkit API for the CalendarExtender I can control the style of the selected date using:
.ajax__calendar_active { background-color:red }
And according to the API, I was hoping, that .ajax__calendar_today would allow me to control the style of today's table cell, if show. Unfortunately, this .ajax__calendar_today controls the style of the bigger "Today: XYZ" button at the bottom of the calendar.
Does anyone know how to style today's table cell, if/when displayed?
Update:
I inspected the HTML using Firebug and see that there is no special css class or other indicator for today's day cell. I guess that makes sense from a server side perspective... how to know what day it is on the user's machine, without adding code to capture GMT offset and such.
So know I think that i am stuck creating some javascript to get today's date client side and comparing to each cell's title attribute, which is set to something like "Friday, February 11, 2011".
Update:Sept 2011
The latest AjaxControlToolkit release has added the .ajax__calendar_today css class to control this.
I believe you could use the following CSS class:
.ajax__calendar_today .ajax__calendar_day { background-color:red;}
Couldn't find a special class for this, so I wound up putting a style in my site.master.
FYI, the padding 0 is because the border takes 2px, which is what default padding is set for.
<style type="text/css">
div.ajax__calendar_day[title='<%=DateTime.Now.ToString("dddd, MMMM dd, yyyy")%>']
{
border: 1px solid #F00;
padding-right: 0px;
}
</style>
The best solution I found is this post.
I just removed the first 2 lines of the function (set current day) and fixed typo error in dayDIVs[i].style.bordercolor to dayDIVs[i].style.borderColor (uppercase C for color). You can also add dayDIVs[i].style.borderStyle = "dotted";
So here is the transcript of it (with my modifications):
/* In HEAD section */
<script type="text/javascript">
function clientShown(sender, args) {
var today = new Date();
var currentTitle = today.localeFormat("D");
//Find all the Day DIVs in the Calendar's daysBody
var dayDIVs = sender._daysBody.getElementsByTagName("DIV");
for (i = 0; i < dayDIVs.length; i++) {
if (dayDIVs[i].title == currentTitle) {
//Change the current day's style
dayDIVs[i].style.borderColor = "#0066cc";
dayDIVs[i].style.borderStyle = "dotted";
}
}
}
</script>
/* and then in your BODY: */
<cc1:CalendarExtender ID="CE" runat="server" Enabled="True" TargetControlID="CalendarDateTextBox"
OnClientShown="clientShown" />
You need the following css class:
.ajax_calendar .ajax_calendar_active .ajax__calendar_day {background-color:red;}
Related
I add costum styles to the RTE with a CSS File:
RTE.default.contentCSS = EXT:netjapan/Resources/Public/css/rte.css
For some elements this works. For example for a ulElement:
ul.liststyle1 {
list-style: none;
padding-left: 17px;
}
When I select the ul in the RTE I can chose the Blockstyle liststyle1.
I want to do the same for p:
p.test {
font-size: 80%;
}
And when I select the p I can chose the Blockstyle test and the style is used. But when I save the Blockstyle is gone.
I added this Typoscript:
RTE.default {
removeTags = sdfield, strike
proc.entryHTMLparser_db.removeTags = sdfield, strike
}
So that p is not in the removeTags list. But it had no effect.
Anyone know how it comes that the Blockstyle is removed on the pElement?
I had simillar problem last week. Sometimes RTE is going crazy. I mean that there is no logical sense in it. Check this: marke the text and use the container style it will wrap it in div but there will be also <p> in it so you will have something like <div><p class="bodytext">text</p></div> - you can add style for that. At least this solved my problem
In FCE I dont want to use default TYPO3 elements like header, link etc. So I hide it with the following ts config:
TCEFORM.tt_content {
header.types.templavoila_pi1.disabled = 1
header_position.types.templavoila_pi1.disabled = 1
header_link.types.templavoila_pi1.disabled = 1
header_layout.types.templavoila_pi1.disabled = 1
date.types.templavoila_pi1.disabled = 1
subheader.types.templavoila_pi1.disabled = 1
}
After this unwanted fields are not shown. But when I save and close the content in backend, title part of the page content shows [No title].
Here is the screen short of page content:
So I desided to keep default heading field by removing the line:
header.types.templavoila_pi1.disabled = 1
from the tsconfig. How to prevent rendering of heading field?
Mark it as hidden. Edit your content (CASE#1) and from Type choose the last one named hidden.
or overwrite the header css config and set it to
display:none;
My backend template for my base template includes backend styling for the headline [no title]
<style>
.sortable_handle {
color: transparent;
}
.tpm-title-cell {
display: none;
}
</style>
###content###
In TYPO3v7 and v8, you can influence the content preview header by registering a hook for
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']
and resetting the $headerContent variable in your hook.
See https://stmllr.net/blog/customizing-preview-widgets-in-the-typo3-page-module/
I'm trying to find the best component to display date ranges among a year.
An idea is to display are months as boxes (12 boxes) and paint the seasons with a different colour.
GWT Datepicker does not really fit my needs since is not extendible enough (http://code.google.com/p/google-web-toolkit/issues/detail?id=3848). A calendar component is too much complicated. GXT datepicker lacks of extendibility too.
That's a sample of what I'd like to acheive:
Any idea? I'm using GXT as library.
In my opinion, using DatePicker isn't such a bad idea. Here's a little example that covers a single month. I think it won't be too hard to extend this to a full year by arranging 12 of these in a grid:
Java
final DateTimeFormat format = DateTimeFormat.getFormat("yyyy-MM-dd");
final DatePicker datePicker = new DatePicker();
datePicker.setCurrentMonth(format.parse("2012-01-01"));
datePicker.addStyleName("my-cal");
final Date start = format.parse("2012-01-17");
final Date end = format.parse("2012-01-28");
for (final Date date = start; date.compareTo(end) <= 0; CalendarUtil
.addDaysToDate(date, 1)) {
datePicker.addStyleToDates("my-green", date);
}
CSS
.my-green { background-color: green !important; }
.my-cal .datePickerPreviousButton { visibility: hidden; }
.my-cal .datePickerNextButton { visibility: hidden; }
With the "clean" theme, it looks like this:
P. S. Here's how the full calendar could look like:
Full code:
http://pastebin.com/xkrRQQht
I need to place several DatePicker widgets into the row. If there is not enough width to place all of them the rest widgets shift to the next row. It is the default HTML layout behavior. So I am trying to use FlowPanel. With any other widgets (Buttons, Labels, ...) everything ok, but DatePickers are placed one widget to the row. Here's the code
FlowPanel panel = new FlowPanel();
DatePicker picker1 = new DatePicker();
DatePicker picker2 = new DatePicker();
panel.add(picker1);
panel.add(picker2);
RootPanel.get().add(panel);
Any suggestions to solve this problem?
Thanks.
DatePicker's root element is a table so you'd have to give it a display: inline-table style, or put it in an element with display: inline-block style.
The following shouldn't break any other use of DatePicker, but won't work in IE 6 or 7; it's the Simplest Thing That Could Possibly Workâ˘:
.gwt-DatePicker { display: inline-table; }
If you really need IE 6/7 support, you could try the following, in a CssResource:
#if user.agent ie6 {
.gwt-DatePicker { display: inline; }
}
#else {
.gwt-DatePicker { display: inline-table; }
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Mobile Webkit reflow issue
I have been trying to figure this out. I have a fixed footer on ios with 4 links in it. Their are also 6 links under it that should not be clickable since they are below. However on ios when unless you scroll the page first the links on the fixed footer do not work and it instead clicks the link below it. After you scroll the slightest bit it works fine. I hope i explained this clearly enough.
You can see an example of it here:
amstar.m77950.com
(view on iphone)
I tried applying z-index to basically every element on the page to see if there was a fix. I also used jquery to make sure that the z-index was being applied onLoad (although it should have been anyway).
Yet i still cannot get the links in the footer to work until after you scroll the page.
Any help on this is much apprceiated. Thanks.
Here is the css i am applying to the element:
.alertsBarClass {
background: url("dynamicimage.aspx?id=21844") no-repeat scroll 0 0 #EA7E25;
border-bottom: medium none;
bottom: 0;
display: block;
position: fixed;
width: 100%;
z-index: 1000;
}
There are known issues with Position:Fixed in iOS 5.1 and anchors/links and scrolling. See the following bug #10301184, #10810232.
One thing that can help...sometimes... is to put cursor:pointer in the divs surrounding your links.
Had the same issue. Fixed it by scrolling up and down on orientation change using javascript.
I added the following script to each page, its ugly but it works:
<script type=\"application/x-javascript\">
addEventListener('load', function() { setTimeout(orientationChange, 0);}, false);
var currentWidth = 0;
function orientationChange()
{
if (window.innerWidth != currentWidth)
{
currentWidth = window.innerWidth;
var orient = (currentWidth == 320) ? \"profile\" : \"landscape\";
window.scrollTo(0, 0);
setTimeout(function() {window.scrollTo(0, 1); }, 250);
document.body.setAttribute('orient', orient);
}
}
setInterval(orientationChange, 400);
</script>