The events I display each day have many types, each type defined by a specific color.
When I have multiple events in a day, same color, the opacity of second, third, etc. color is reduced, step by step.
This is happening only on Safari. Somebody had this bug?
I didn't had that problem so far, can you show the .fullCalendar() method you're calling?
Related
I am replacing the cursor with an SVG, and it doesn't match the color of other elements on the page.
I have attached an image below (taken with my phone, because I cannot screenshot the cursor) Both SVGs were saved from the same file, both have a color value of #FF0000. This persists across all browsers.
The TOP button is applied as a background to the element.
How can I fix this?
Apparently, the two colors appear to be identical on some monitors, but drastically different on others. In particular it's the Apple Color LCD profile on Macbook Pros that creates a drastic difference. Unfortunately this isn't something I will be able to solve.
If I have several lines (blocks, polygons, whatever) spread about the canvas, and I want their stroke-width to remain the same even when I zoom in ...
for example, I have a graph of temperature vs time, and there is a little line on the time axis to mark each hour - so the distance between them increases as I zoom in, but I don't want them to get any thicker ...
Then I can provide an attribute vector-effect="non-scaling-stroke" for the t-axis object.
But suppose I have several texts ...
for example, every 24th hour has a date written beside it ...
then there seems to be no way to prevent the text from being stretched; i.e. I cannot provide an attribute text-effect="non-scaling-text" ...
In my example, I am only zooming in one dimension, and stretched-out text is ugly, and squashed-in text is unreadable.
Is there any workaround for this?
Here are more details, as requested.
I am drawing a graph on a canvas much wider than the viewing area (and which will get even wider if it gets zoomed). Sliders are provided so the viewer can pan and zoom to inspect any part of it in detail.
So there are two objects graphobj which comes from the application data and tlineobj which is the time axis, and which consists of a line the length of the canvas, with short vertical lines to mark off the hours and bigger ones to mark the start of each day. So each time the viewer alters a slider it obeys something like
tlineobj.setAttribute("transform", 'translate('+someamount+',0), 'scale('+someamount+',1)')
ans similarly for graphobj.
So I am stretching it out horizontally, but not vertically.
Now tlineobj is constructed by a Javascript routine. For simplicity, forget about names of days and months, and let us just write daynos in the proper places. So I write a function like:
Function doDate(i) {
dayno = some_model.cloneNode(false)
dayno.appendChild(document.createTextNode(i))
dayno.setAttribute("x", i*some_factor)
tlineobj.appendChild(dayno)
}
But now when the tlineobj gets zoomed, not only does the distance between the daynos get increased (which is what we want), but each dayno itself gets stretched out, because there is no way to tell the SVG zooming machanism not to do this (although there is such a mechanism to do it for vector objects).
The only way I can see to do it is to cause the whole of the tlineobj to be regenerated from scratch each time the graph is re-zoomed, and that seems a very kludgy way to so it (or I could go though all the dayno objects and change some attribute within them, but that is just as bad).
Has anybody ever had any issues with transitioning the opacity of an SVG text element? I'm using both the fill-opacity style and the stroke-opacity style to fade the text elements into and out of existence. It works fine on most browsers, but doesn't transition at all in Chrome on Mac -- the text just pops in and out all at once.
I tried setting the "opacity" attribute in addition to fill-opacity and stroke-opacity and that does seem to make it work, although now I see a weird flicker effect just before and after the transition runs. It's like it's setting it to opacity=1 for a split second before it sets it to 0 and then transitions to 1.
Another interesting thing is that other shapes (circle, rect) fade in and out just fine with nearly identical code to what I'm using with text.
This does seem to be weirdness with a specific browser, but I'm wondering about other people's experiences with opacity on text elements. Are there tricks to get it to behave consistently?
What version of Chrome are you using? I noticed a bug in Chrome dev some time ago when working on the word cloud but it appears to have been fixed as of 19.0.1077.3 dev. Perhaps the fix hasn't made it into your particular version yet?
In my case, using opacity fixed the problem temporarily. The flicker effect could be due to exponent notation not being parsed for very small numbers; you can try using 1e-6 instead of 0 to get around this.
For an animation I made some months ago I toggled the style and used webkit-transition, in combination with visibility: hidden. This seems to work well. If that doesn't work, you could try transitioning to an opacity near zero.
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)
this is my first question on stackoverflow after doing a lot of research without the appropriate success :-(.
I'm struggling with the task to do a three-column-layout with various amount of content and thereby differing height for each columns content. But the columns should be of same height, so that their background-color reaches down to the bottom. So, I found examples like this
How to make rounded corners on equal height columns
and of course this one
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
But they don't do the trick, as they use overflow:hidden and do a fake height pretty much longer than the page would ever be. So of course, the background-color of each column goes down to the bottom and further. That's fine, but not enough, as I do have to shape the content element's background with rounded corners. It should look like the image on following adress:
http://www.addorange.de/uploads/3columns_rounded_corners.jpg (sorry, I'm not allowed to post images yet :-()
Maybe anybody of you encountered a similar challenge to fix this by pure css.
Thank you,
Christian
Two solutions:
You can use display: table-cell for your three columns
Resize them with javascript