This is the stranges thing, this works:
$('#box').css({"backgroundPosition": "0px 250px"});
But this does not work, it just doesn't change position:
$('#box').animate({"backgroundPosition": "0px 250px"});
Tested in FF and chrome using jQuery 1.5.2 and 1.6.1.
FF reports "Warning: Error in parsing value for 'background-position'. Declaration dropped."
My CSS is:
#box { padding-left: 30px; background: url(../img/arrow.gif) 0px 30px no-repeat; }
Any ideas as to why animate won't work?
jsfiddle at http://jsfiddle.net/wyhqu/ try changing animate to css and you will see it works
I'm pretty sure you can't do this.
The animate documentation says this:
most properties that are non-numeric cannot be animated using basic
jQuery functionality
While you are passing 2 numbers, you could pass "center" or some other non-numeric value.
There does appear to be a plugin to allow you to do it:
http://plugins.jquery.com/project/backgroundPosition-Effect
I haven't used it though so I have no idea how good it is.
Try this:
$('#box').animate({"background-position": "0px 250px"});
In the CSS case, it's relying on the browser to parse "backgroundPosition", which it does just fine. In the animate case, jQuery has to do the parsing. Maybe the developers only added the hyphenated case.
Related
I am working on a jQuery plugin to allow you to apply a customizable preloader to your webpage. As a first release, I had an idea for this "futuristic circle" effect. The only issue is, the box-shadow property doesn't support percentage for the spread value. My css code for the plugin is available at https://github.com/tupperkion/preloader-plugin/blob/master/preloader.css. On line 27, you can see that I try to set the spread for box-shadow to 50%. But Firefox just says Error in parsing value for 'box-shadow'. Declaration dropped.. I am wondering if I can use some sort of alternative method to support this without setting it to something like 9999999999px, because that would screw up the animation that I plan on implementing at the end. The code is as follows:
.futuristic-circle-icon-inset-stage2 {
box-shadow: 0px 0px 10px 50% white inset
}
Have you seen MDN ?
True, all dimensions must be <length> and not <percentage>.
Nevertheless you have a malformed property: inset must be the first token in it.
You can assign relative units to the dimensions, see length.
i want to add style to an element using css() and save it
first step works fine but when i want to save it the code that jquery gives me is too detailed
for example
<div id="d"></div>
$('#d').css("border-radius","55px");
and
alert($('#d').attr('style'));
gives
border-top-left-radius: 55px;
border-top-right-radius:55px;
border-bottom-right-radius:55px;
border-bottom-left-radius:55px;
is there anyway to get less detailed code like
border-radius:55px
?
I think you can see it by:
$('#d').css("border-radius");
Or may be
$('#d').attr("style");
try something like this
alert($('#d').css(border-radius'));
I tested this in Firefox and I got:
border-radius: 55px 55px 55px 55px;
In other browsers tested I got what you wrote. The output appears to be browser-specific - if you inspect the element in the DOM, even there it's already written differently in Firefox than the other browsers I tested (Safari, Chrome, Opera all write the explicit, extended definition).
Also found this, although in a different context:
Different browsers may return CSS color values that are logically but
not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).
http://api.jquery.com/css/
In conclusion, if you want the style definitions in a specific formatting, you will have to do something like regex-replacing on the string that attr('style') returns. Hope this helps.
try this
alert($('#d').attr('style'));
I ended up with different method by capturing all input[type=text] where i set value of properties ,there i can have full control on output
I have a background image for an input box..It works fine in IE/FF, but for some reasons it is not visible in iPad Safari..Below is the CSS for the same;
#rightContent .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}
Please help. Thank you.
I would suggest splitting out the background style into seperate parts. Not all browsers support transparent (and possibly other parts of that style).
When a browser sees a style they don't know what to do with, they usually ignore the whole style. Putting the background-image onto it's own line (eg. it's own style) will let that property get picked up by browsers that can deal with it, rather than getting missed because it is lumped in with things the browser doesn't know about.
I believe the default value of background-color is transparent. Have you tried not setting a color? Also, since you have a set image with no-repeat, why not make the image a jpg/png and set a color to match the background-color you want.
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I am having the same problem, but I found that the image slice I was using was too thin to display on iPad. It is a texture, so I was using a 15px slice and an x-repeat, which is fine in all browsers but not iPad. After some experimenting I found that the threshold for iPad seems to be 130px.
I'm trying to apply unknown styles to unknown selectors and it would seem that shorthand css cannot be applied using jQuery's .css() method. Is this correct? Is there a work-around?
Note that I am building the object dynamically to be passed in to the .css() and do not want to use .css('background','#000') syntax.
$('#example').css({background:'#000000 url("images/bg.gif") repeat-x scroll 0 0 transparent'});
The code above doesn't work. However, the code below does.
$('#example').css({background:'#000'});
And so does this.
$('#example').css({background:'url("images/bg.gif")'});
But when used together they naturally overwrite each other. Any suggestions?
background: #000000 url("images/bg.gif") repeat-x scroll 0 0 transparent;
… is invalid CSS. You've specified the background-color twice (#000000 and transparent). It should work if you use valid CSS.
That said, using classes and external stylesheets is usually a better bet.
Your better option would be to have a set of pre-defined CSS classes in your CSS file and then apply those target styles on the fly as necessary.
This has the added benefit of keeping your jQuery code down to a readable and manageable level.
So instead of writing:
$('#example').css({background:'url("images/bg.gif")'});
You can opt for the simpler:
$('#example').addClass('myClass1');
I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property outline:none; works for Firefox, but how can I do it in IE? Preferably using CSS expressions or jQuery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions:
The jQuery (for IE browsers):
$('a').focus(function() {
$(this).blur();
});
Another jQuery option (for IE browsers only):
$('a').focus(function() {
$(this).attr("hideFocus", "hidefocus");
});
The CSS (for all other browsers that force an outline):
a {
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.
Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
...
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx
It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
link
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i
Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!
For IE, you can use Javascript like this:
Click Here
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/
Does this not work?
a
{
border: 0;
}
a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.
a {
outline: 0 none !important;
border: none;
}