I'm having an issue with the cross-browser compatibility of a css inset text-shadow effect. Specifically, I'm having an issue with Mozilla. Here is the code:
I have a container with various inner elements:
<div id='abstract'>
<span>Abstract</span>
</div>
Applied to it are the following styling rules:
#abstract span {
font-family : 'FuturaLT Heavy';
font-size : 21px;
line-height : 24px;
text-transform : uppercase;
color : transparent;
background-color : #565656;
text-shadow : 0px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip : text;
-moz-background-clip : text;
background-clip : text;
}
The span appears as I want it to in Safari and Chrome:
http://harrysolovay.com/non_site_related/images/stackoverflow/1.png
Unfortunately, this is what gets displayed in Mozilla:
http://harrysolovay.com/non_site_related/images/stackoverflow/2.png
I used modernizr to test both text-shadow and background-clip: both properties exist and are functional in Mozilla, which is keeping me from writing javascript that only inserts the styles if the property exists. In other words, I've ruled this out as a solution.
How else can I fix this issue? Are there any other detection and fallback methods I should try? Is there a simple css solution (please say yes)? Any help, suggestions or comments would be greatly appreciated. Thank you.
I found a solution to my question.
First, add the following test to Modernizr:
`Modernizr.addTest('backgroundcliptext', function() {
var div = document.createElement('div');
div.style.webkitBackgroundClip = "text";
var text = div.style.cssText.indexOf('text');
if (text > 0) return true;
'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
if (val+'BackgroundClip' in div.style) return true;
});
});`
This tests not only that the background-clip property exists in the browser, but also that the text value exists as an understood value. Then, the boolean Modernizr.backgroundcliptext is true if browser is compatible. I wrote something like this:
if(Modernizr.backgroundcliptext) {
$('#abstract > span').css({
'color' : 'transparent',
'background-color' : '#565656',
'text-shadow' : '0px 2px 3px rgba(255, 255, 255, 0.5)',
'-webkit-background-clip' : 'text',
'-moz-background-clip' : 'text',
'background-clip' : 'text'
});
}
(with the text css set to have a black color, no background-color and no background-clip or text-shadow)
Although I came up with an indirect solution to this problem, I hope there will soon be a way to patch browsers without the background-clip : text value understanding. Please comment if you have any news at all on this front. Thank you.
Related
I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space. However, I would like the inline-block element to wrap immediately to the width of its contents.
I found it hard to explain exactly what's going on, so below an animated gif to illustrate my issue:
Upon resizing the viewport:
To be clear, the image above is me continuously resizing the viewport.
Does anybody know a way to achieve what I'd like? Even with CSS hyphenation the white-space still remains (which I don't want).
JSFiddle. Resize the frames to see what I mean.
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
The inline-block indeed extends on resizing as your animation shows, so that it keeps place for the long word to go into that space again.
One simple solution would be to add text-align: justify, but I'm afraid it may not exactly be what you want (see demo).
Another one would be the use of media queries, as #Parody suggested, but you would have to know the dimentions of the containing div, and that would not be very scalable as you mentionned.
The word-break: break-all suggested by #yugi also works but causes the words to to collapse letter by letter, regardless of their length.
The only way to achieve the exact behavior is (as far as I know) to use javascript. For example, you would have to wrap your text into a span element inside the div, and then add something like this :
var paddingLeft = parseInt($('#foo').css('padding-left')),
paddingRight = parseInt($('#foo').css('padding-left')),
paddingTop = parseInt($('#foo').css('padding-top')),
paddingBottom = parseInt($('#foo').css('padding-Bottom')),
cloned = $('#foo span').clone(),
cloned_wrap = document.createElement('div');
$(cloned_wrap).css({
paddingLeft : paddingLeft,
paddingRight : paddingRight,
display : 'inline-block',
visibility: 'hidden',
float: 'left',
});
$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);
$(window).on('resize', function(){
$('#foo').css('width', cloned.width() + 1);
$(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();
Please see the jsfiddle working demo. (← edited many times)
That's quite a lot of code, but it works ; )
(PS : I assumed jquery was available, if not, quite the same is achievable in pure JS)
I don't think this is possible only with CSS for the one element. The reason for your behavior is that the width of the element is still 100% of its container. The only way I could think to accomplish this is by doing something a little bit "creative"...try setting the style to inline so you get the shrink-wrap behavior, but to get around the background color issue, also put it in a container that shares the same background. That should work.
If im understanding you correctly you could use the #media type to decide what css to use depending on the width of the screen
here is an example of what i mean
#media(min-width:0px) and (max-width:200px){
div {
display: block;
background-color: black;
color: white;
padding: 5px;
}
}
#media (min-width:200px){
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
}
I am still very appreciative of #lapin's answer (which I accepted and awarded bounty to), I found out after the fact that it didn't quite work on multiple elements next to each other (that has nothing to do with #lapin, I just didn't mention it in my original question as I thought it would be irrelevant information).
Anyway, I've come up with the following that works for me (assuming the elements it should be applied to are .title and .subtitle):
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $(document.createElement('span')),
bar = $(document.createElement('span'));
inner.addClass('inner');
bar.addClass('bar');
el.wrapInner(inner)
.append(bar)
.css({
backgroundColor: 'transparent'
});
});
function shrinkWrap() {
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $('.inner', el),
bar = $('.bar', el),
innerWidth = inner.width();
bar.css({
bottom: 0,
width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight'))
});
});
}
shrinkWrap();
$(window).on('resize', function() {
shrinkWrap();
});
Basically what I do is:
put the text in an inner wrap element
create an additional absolutely-positioned background element
get the width of the inline inner wrap element
apply said width to the background element (plus padding and whatnot)
The CSS:
.title, .subtitle {
position: relative;
z-index: 500;
display: table;
padding-left: 10px;
margin-right: 10px;
background-color: red;
}
.title .bar, .subtitle .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: -10;
background-color: red;
}
The nav starts out great once you lower the bowser width the nav becomes stacked, this is great. Once you open the window back up the nav items are in two rows. Here's a pic.
This is how it starts out:
http://reggi.myshopify.com/pages/about#
FWIW, I found that forcing a redraw of the .nav-justified element in question helps WebKit understand. Obviously, how you chose to do this is up to you—I opted for the fadeIn(), 'cause when life hands you lemons...
$(window).bind('resize', function(){
var w = $(this).width(),
threshold = 768;
if(w < threshold){
$('.nav-justified').hide().fadeIn();
}
});
Both answers seem to be lacking. The JS solution causes a lot of flicker, and the CSS solution doesn't seem to keep the integrity of the designed tabs. Here's what I came up with.
If you're not using less with your bootstrap styles just replace #screen-sm with 768px
#media (min-width: #screen-sm) {
.nav-tabs.nav-justified > li {
display: block;
float: left;
width: 32.9999%
}
}
The problem is display: table-cell; instruction in the .nav-justified class.
Let's take a look at the bootstrap.css file, I believed that you are using Bootstrap version 3.0, at line 4109.
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
You must change it to :
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: inline-block;
float: left;
margin-left: 100px;
}
}
This will solve your problem.
This is a known bug with Bootstrap.
This has been fixed in Chrome Since 2013, but is still an open bug in WebKit and occurs in Safari.
Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.
— cvrebert
I recommend to not use .nav-justified or be ok with it not working properly in Safari.
many old mobile brwoser do not support position:fixed, I tried writing a sloution myself,it works, but not smooth enough.
I googled, no luck for now.
so I would like to know if there is "smooth" solution for this, thanks.
i think it would be better to mention the browsers that you have problems with. for example I assume you have problems with IE6. I will try to answer your question according to my assumptions. So the 100% height on the body and html stuff is in case you want to do fixed positioning along the bottom edge of the browser window.
like so:
* { margin:0; padding:0; }
html, body {
height: 100%;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
top: 0;
right: 0;
}
#page-wrap {
width: 600px;
margin: 0 auto;
font: 16px/2 Georgia, Serif;
}
hope this will help please also check this site when having problems related to CSS
http://css-tricks.com/snippets/css/fixed-positioning-in-ie-6/
When we start sorting or other things datatables has option to show 'Process' message. All is fine , only when it hides 'Processing' there is still stay space where 'Processing' is placed. So html table jumping down when Processing showing then when data have been loaded Processing hidding but html table isn't jumping back up so there is stay visible place for it.
Question, how to make datatable to remove Processing tag instead of just hide. Thanks
EDIT. I add html code
<div id="search_table_processing" class="dataTables_processing" style="visibility: hidden;">Processing...<img alt="< <" src="/themes/third_party/linkedin_search/img/165.gif"></div>
Well drat, I just ran into this and had to dig into it myself.
In version 1.9.0 you can search for this snippet:
an[i].style.visibility = bShow ? "visible" : "hidden";
(Found after searching for visibility.)
In the minified version it's currently this (using the NuGet package):
c[d].style.visibility=b?"visible":"hidden";
The problem is we neglected to style .dataTables_processing, as per the sample CSS files. Here's what one of the samples has for styling:
.dataTables_processing {
position: absolute;
top: 0px;
left: 50%;
width: 250px;
margin-left: -125px;
border: 1px solid #ddd;
text-align: center;
color: #999;
font-size: 11px;
padding: 2px 0;
}
Once it's styled (or bProcessing is set to false), there shouldn't be an issue.
If you're comfortable changing the functionality of the plug-in (if you think you can remember to change it back), then you could switch it to use display instead of visibility.
In case you are using Internationalisation - "oLanguage" attribute in your datatables constructor
replace the old sProcessing value with this in your localization file in order to place a custom image while processing :
"sProcessing": "<img src='/themes/third_party/linkedin_search/img/165.gif'/>",
and here is how you link your datatables to a localization file (which can be downloaded from the datatables website Internationalisation of datatables)
.
.
.
"oLanguage": {
"sUrl": "../../jQuery/dataTables/media/MyLanguageFilesFolder/en_US.txt"
}
.
.
.
If you not using the Internationalisation of datatables you can always set the "sProcessing" value with the suggested above...
here an example :
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sProcessing": "<img src='/themes/third_party/linkedin_search/img/165.gif'>"
}
} );
} );
Changing
an[i].style.visibility = bShow ? "visible" : "hidden";
to
an[i].style.display = bShow ? "block" : "none";
didn't work for me. However, I accomplished it by changing the statement to
if (bShow == false) {
an[i].style.display = "none";
}
else {
an[i].style.display = "block";
}
Hope this helps anyone who doesn't want to add any css code and just go right to the source!
For the Datatables version 1.9.4, just edit the file jquery.dataTables.js line 3005, and change the following:
an[i].style.visibility = bShow ? "visible" : "hidden";"block" : "none";
to
an[i].style.display = bShow ?
Worked for me!
If you want the text to go away while the backdrop should be there, why not just add:
div.dataTables_processing{ color: transparent; }
Well, my application requires me to disable the entire grid , on a button click.
I tried to use
var grid = dijit.byId('myGrid');
grid .set('disabled',true); , but it's not working.
I basically need to 'grey out' all the contents of the grid , so that the user cannot select any row. Thus, just changing the CSS doesn't help me.
Please reply.
Thanks,
Sonia
I actually don't know, but I have a rather ghastly way to do it myself. I create a partly transparent overlay over the grid when it's disabled.
So I'll have this CSS:
.gridOverlay {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 99;
display: none;
background: rgba(0,0,0,0.02);
}
.disabledGrid { color: #DDD; }
.disabledGrid .gridOverlay { display: block; }
And my button's click event will be something like this:
dojo.connect(dojo.byId("btn"), "onclick", function()
{
//dojo.byId, not dijit.byId, to get the outer DOM node
var grid = dojo.byId("myGrid");
if(!dojo.query(".gridOverlay", grid).length)
{
dojo.create("div", {"class": "gridOverlay"}, grid);
}
dojo.toggleClass(grid, "disabledGrid");
});
Like I said, ghastly, but for my use it actually did the trick. YMMV :)