I want to use display: table and display: table-cell for my layout in browsers that support it. In IE7 I simply want to float my columns (since I assume it's not possible to get it to work in that browser), but cannot find anything about how to do it using Modernizr. Can anyone help me please?
I suppose I could use a browser conditional, but was hoping to not have to break out another CSS file.
Thanks!
If all you want to do is apply a single different rule for IE7 and less, I'd be tempted not to use Modernizr for this specific job.
Simply do something like this, to avoid having to "break out another CSS file":
#menu li {
display: table-cell;
*float: left;
}
This uses the Star Property Hack to provide a rule to only IE7 and below.
Another option is the !ie7 hack, which is for some odd reason my highest voted answer.
... And if you want to use Modernizr, you could use this snippet:
(function() {
var displayTests = ["table", "table-caption", "table-cell",
"table-column", "table-column-group", "table-footer-group",
"table-header-group", "table-row", "table-row-group"];
var rules = document.createElement("div").style;
for (var c=0; c<displayTests.length; c++) {
var testValue = displayTests[c];
Modernizr.addTest("display" + testValue, function() {
try {
rules.display = testValue;
return rules.display == testValue;
} catch (e) {
return false;
}
})
}
}());
Source [Link]
IE 8 does not tell the truth when the created element is a 'tfoot', and the display value is 'table-header-group'. The following snippet will not fail, even though IE 8 ignores the CSS setting and continues to display 'tfoot' below 'tbody'.
try {
var x = document.createElement('tfoot').style;
x.display = 'table-header-group';
console.log('Both IE 8 and Chrome end up here.');
} catch (e) {
console.log('Except IE 8 should have ended up here, since it does not move the tfoot element.');
}
It might be 'correct', in the sense that 'tfoot' has already set display to 'table-footer-group'; but it's 'wrong' in the sense that it (a) doesn't allow the user to override, and (b) doesn't tell the user that it isn't going to work. I haven't tested other browsers.
Related
we can get the browser name from javascript but is there any way to change css accordingly.I mean some classes of css file because I dont want to link another css file , I want to write styles on
if chrome
a img
{
margin:0;
}
//if mozila
a img
{
margin:5px;
}
Maybe something like
body.chrome a img
{
margin:0;
}
body.mozilla a img
{
margin:5px;
}
then use Javascript to set a class on the body as required.
There are two ways:
Client side: you need to use Javascript to detect the browser and import the appropriate CSS style. Have a look at this article. (link no longer available)
Server side: you need to detect the user agent and serve the appropriate HTML. Here's a PHP source link for this.
You can go for:
conditional CSS
IE Conditional Comments
What you're describing is conditional CSS (or for IE, conditional comments).
I have done this in the past with conditional includes. Detect the browser from its headers, then include a .css file based on the condition
Use the URL-prefix for the Mozilla extension:
#-moz-document url-prefix() {
a img {
margin:5px;
}
}
I use this:
let userAgent = navigator.userAgent;
let b = "";
if(userAgent.indexOf("Firefox") > -1){
b = "firefox";
}
if(userAgent.indexOf("Chrome") > -1){
b = "chrome";
}
let styles = document.createElement('link');
styles.rel = "stylesheet";
styles.type = "text/css";
styles.media = "screen";
styles.href = "css/options." + b + ".css";
document.getElementsByTagName('head')[0].appendChild(styles);
u can detect with js the browser version. And link the right css file.
For IE you can use
Sometimes I use -moz-CSS_ATTRIBUTE für Mozila, but it works not everytime.
I think JS is the best solution
I use this jQuery code to set the mouse pointer to its busy state (hourglass) during an Ajax call...
$('body').css('cursor', 'wait');
and this corresponding code to set it back to normal...
$('body').css('cursor', 'auto');
This works fine... on some browsers.
On Firefox and IE, as soon as I execute the command, the mouse cursor changes. This is the behavior I want.
On Chrome and Safari, the mouse cursor does not visibly change from "busy" to "auto" until the user moves the pointer.
What is the best way to get the reluctant browsers to switch the mouse pointer?
It is a bug in both browsers at the moment. More details at both links (in comments as well):
http://code.google.com/p/chromium/issues/detail?id=26723
and
http://code.google.com/p/chromium/issues/detail?id=20717
I would rather do it more elegantly like so:
$(function(){
$("html").bind("ajaxStart", function(){
$(this).addClass('busy');
}).bind("ajaxStop", function(){
$(this).removeClass('busy');
});
});
CSS:
html.busy, html.busy * {
cursor: wait !important;
}
Source: http://postpostmodern.com/instructional/global-ajax-cursor-change/
I believe this issue (including the mousedown problem) is now fixed in Chrome 50.
But only if you are not using the developer tools!!
Close the tools and the cursor should immediately respond better.
I got inspired from Korayem solution.
Javascript:
jQuery.ajaxSetup({
beforeSend: function() {
$('body').addClass('busy');
},
complete: function() {
$('body').removeClass('busy');
}
});
CSS:
.busy * {
cursor: wait !important;
}
Tested on Chrome, Firefox and IE 10. Cursor changes without moving the mouse. "!important" is needed for IE10.
Edit: You still have to move cursor on IE 10 after the AJAX request is complete (so the normal cursor appear). Wait cursor appears without moving the mouse..
Working solution on CodeSandbox
Some of the other solutions do not work in all circumstances. We can achieve the desired result with two css rules:
body.busy, .busy * {
cursor: wait !important;
}
.not-busy {
cursor: auto;
}
The former indicates that we are busy and applies to all elements on the page, attempting to override other cursor styles. The latter applies only to the page body and is used simply to force a UI update; we want this rule to be as non-specific as possible and it doesn't need to apply to other page elements.
We can then trigger and end the busy state as follows:
function onBusyStart() {
document.body.classList.add('busy');
document.body.classList.remove('not-busy');
}
function onBusyEnd() {
document.body.classList.remove('busy');
document.body.classList.add('not-busy');
}
In summary, although we have to change the cursor style to update the cursor, directly modifying document.body.style.cursor or similar does not have the intended effect, on some engines such as Webkit, until the cursor is moved. Using classes to affect the change is more robust. However, in order to reliably force the UI to update (again, on some engines), we have to add another class. It seems removing classes is treated differently from adding them.
First of all, you should be aware that if you have a cursor assigned to any tag within your body, $('body').css('cursor', 'wait'); will not change the cursor of that tag (like me, I use cursor: pointer; on all my anchor tag). You might want to look at my solution to this particular problem first : cursor wait for ajax call
For the problem that the cursor is only updated once the user move the mouse on webkit browsers, as other people said, there is no real solution.
That being said, there is still a workaround if you add a css spinner to the current cursor dynamically. This is not a perfect solution because you don't know for sure the size of the cursor and if the spinner will be correctly positioned.
CSS spinner following the cursor: DEMO
$.fn.extend(
{
reset_on : function(event_name, callback)
{ return this.off(event_name).on(event_name, callback); }
});
var g_loader = $('.loader');
function add_cursor_progress(evt)
{
function refresh_pos(e_)
{
g_loader.css({
display : "inline",
left : e_.pageX + 8,
top : e_.pageY - 8
});
}
refresh_pos(evt);
var id = ".addcursorprog"; // to avoid duplicate events
$('html').reset_on('mousemove' + id, refresh_pos);
$(window).
reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}
function remove_cursor_progress(evt)
{
var id = ".addcursorprog";
g_loader.css('display', 'none');
$('html').off('mousemove' + id);
$(window).off('mouseenter' + id).off('mouseleave' + id);
}
$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);
You will need to check if it is a touch device as well var isTouchDevice = typeof window.ontouchstart !== 'undefined';
In conclusion, you better try to add in your page a static spinner or something else that shows the loading process instead of trying to do it with the cursor.
Korayem's solution works for me in 100% cases in modern Chrome, Safari, in 95% cases in Firefox, but does not work in Opera and IE.
I improved it a bit:
$('html').bind('ajaxStart', function() {
$(this).removeClass('notbusy').addClass('busy');
}).bind('ajaxStop', function() {
$(this).removeClass('busy').addClass('notbusy');
});
CSS:
html.busy, html.busy * {
cursor: wait !important;
}
html.notbusy, html.notbusy * {
cursor: default !important;
}
Now it works in 100% cases in Chrome, Safari, Firefox and Opera.
I do not know what to do with IE :(
I don't think you'll be able to do it.
However, try changing the scroll position; it might help.
HERE is my solution:
function yourFunc(){
$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
.mouseXPos(e.pageX + 1)
.mouseYPos(e.pageX - 1);
});
}
As of jquery 1.9 you should ajaxStart and ajaxStop to document. They work fine for me in firefox. Have not tested in other browsers.
In CSS:
html.busy *
{
cursor: wait !important;
}
In javaScript:
// Makes the mousecursor show busy during ajax
//
$( document )
.ajaxStart( function startBusy() { $( 'html' ).addClass ( 'busy' ) } )
.ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )
Try using the correct css value for the cursor property:
$('body').css('cursor','wait');
http://www.w3schools.com/CSS/pr_class_cursor.asp
I haven't tried this, but what about if you create a transparent div that is absolutely positioned and fills the viewport just before changing the CSS. Then, when the css is changed on the body, remove the div. This might trigger a mouseover event on the body, which might cause the cursor to update to the latest CSS value.
Again, I haven't tested this, but it's worth a shot.
Hey Guys, I have a nitty gritty solution which works on all browsers. Assumption is protoype library is used. Someone can write this as plain Javascript too. The solution is to have a div on top of all just after you reset the cursor and shake it a little bit to cause the cursor to move. This is published in my blog http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html.
$('*').css('cursor','wait'); will work everywhere on the page including links
I'm trying to use the placeholder="xxx" attribute in my web application, and I don't want to have a special visual for IE9. Can people throw out some good suggestions for achieving this functionality in IE9?
I've found a couple links on here but none of the suggested scripts were sufficient... and the answers were from mid-2011, so I figured maybe there is a better solution out there. Perhaps with a widely-adopted jQuery plugin? I do not want to use anything that requires intrusive code such as requiring a certain css class or something.
Thanks.
EDIT - I also need this to work for password input fields.
// the below snippet should work, but isn't.
$(document).ready(function() {
initPlaceholders()();
}
function initPlaceholders() {
$.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
$.support.placeholder = true;
return function() { }
} else {
return function() {
$(function() {
var active = document.activeElement;
$('form').delegate(':text, :password', 'focus', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && _val == _placeholder) {
$(this).val('').removeClass('hasPlaceholder');
}
}).delegate(':text, :password', 'blur', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
$(this).val(_placeholder).addClass('hasPlaceholder');
}
}).submit(function() {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
$(':text, :password').blur();
$(active).focus();
});
}
}
}
We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:
Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.
Add var before test.
For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.
If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeout for detecting new elements.
Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):
(function () {
// ...
})()();
I wrote a jquery plugin a while back that adds the placeholder support to any browser that does not support it and does nothing in those that do.
Placeholder Plugin
Here's a jQuery plugin that works with password fields as well. It's not as tiny as the code suggested by Matthew but it has a few more fixes in it. I've used this successfully together with H5Validate as well.
http://webcloud.se/code/jQuery-Placeholder/
How can I make the drop down show all the content of one option when it is expanded? If an option in the drop down is, for instance, a whole sentence and select tag width is small, the user in IE will not be able to read whole option. This is not the case in Mozilla where the whole content is shown when drop down is expanded.
Is there any way to avoid this behavior in IE8,
Thanks
I had a similar constraint when working against IE8 and the oh so famous drop down list truncating. I have multiple drop down lists on my page, one after another, some inside top nav content, and IE8 decides to cut off my attribute option text properties. Now, like many of us, I don't want to set the width obscurely large, so this option is out of question.
After a lot of research, I couldn't find a great answer, so I went ahead and fixed it with jQuery and CSS:
First, let's make sure we are only passing our function in IE8:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
//fix me code
}
Then, to allow the select to expand outside of the content area, let's wrap our drop down lists in div's with the correct structure, if not already, and then call the helper function:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
$('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');
//helper function for fix
ddlFix();
}
Now onto the events. Since IE8 throws an event after focusing in for whatever reason, IE will close the widget after rendering when trying to expand. The work around will be to bind to 'focusin' and 'focusout' a class that will auto expand based on the longest option text. Then, to ensure a constant min-width that doesn't shrink past the default value, we can obtain the current select list width, and set it to the drop down list min-width property on the 'onchange' binding:
function ddlFix() {
var minWidth;
$('select')
.each(function () {
minWidth = $(this).width();
$(this).css('min-width', minWidth);
})
.bind('focusin', function () {
$(this).addClass('expand');
})
.change(function () {
$(this).css('width', minWidth);
})
.bind('focusout', function () {
$(this).removeClass('expand');
});
}
Lastly, make sure to add this class in the style sheet:
select:focus, select.expand {
width: auto;
}
we can get the browser name from javascript but is there any way to change css accordingly.I mean some classes of css file because I dont want to link another css file , I want to write styles on
if chrome
a img
{
margin:0;
}
//if mozila
a img
{
margin:5px;
}
Maybe something like
body.chrome a img
{
margin:0;
}
body.mozilla a img
{
margin:5px;
}
then use Javascript to set a class on the body as required.
There are two ways:
Client side: you need to use Javascript to detect the browser and import the appropriate CSS style. Have a look at this article. (link no longer available)
Server side: you need to detect the user agent and serve the appropriate HTML. Here's a PHP source link for this.
You can go for:
conditional CSS
IE Conditional Comments
What you're describing is conditional CSS (or for IE, conditional comments).
I have done this in the past with conditional includes. Detect the browser from its headers, then include a .css file based on the condition
Use the URL-prefix for the Mozilla extension:
#-moz-document url-prefix() {
a img {
margin:5px;
}
}
I use this:
let userAgent = navigator.userAgent;
let b = "";
if(userAgent.indexOf("Firefox") > -1){
b = "firefox";
}
if(userAgent.indexOf("Chrome") > -1){
b = "chrome";
}
let styles = document.createElement('link');
styles.rel = "stylesheet";
styles.type = "text/css";
styles.media = "screen";
styles.href = "css/options." + b + ".css";
document.getElementsByTagName('head')[0].appendChild(styles);
u can detect with js the browser version. And link the right css file.
For IE you can use
Sometimes I use -moz-CSS_ATTRIBUTE für Mozila, but it works not everytime.
I think JS is the best solution