I want to add multiple css styles to a dom element and it should also work in different browsers.
So, performance wise which one of the below would be the better option?
Adding all different prefixed css together leaving the browser to work on which one to select
domElement.style.cssText = "-webkit-transform: scaleY(1.25); transform: scaleY(1.25)";
Adding css based on the browser or platform programmatically
if(platform == "Chrome"){ //assume platform is found initially using js
domElement.style.cssText = "-webkit-transform: scaleY(1.25);
} else {
domElement.style.cssText = "transform: scaleY(1.25);
}
You should not try to optimize what the browser already does on its own.
Just throw in as many invalid CSS properties as you want. An invalid CSS selector or property is not evaluated by the browser.
You are doing some mistakes/errors:
1.) Do not use inline stylesheets. There are already too many question on SO on how to overwrite such inline styles. The short answer is: you can't. The longer answer is: you can, but not without opening a door to the !important hell.
2.) You are doing client-detection in a case that clearly requires feature detection. There is no possibility for your code to recognize, that a newer Chrome version already uses the un-prefixed notation of that property.
It would be much simpler and gaining more performance if you can do that without any JS at all:
.my-element:hover {
-webkit-transform: scale(0, 1.25);
-ms-transform: scale(0, 1.25); // IE9 only
transform: scale(0, 1.25);
}
Related
I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have....
I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. I don't want it to disable the on hover function which is pure css though.
I have found this extremely difficult to implement.
The site is here:
www.samueljamesdesign.com
Any help would be greatly appreciated.
Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
To this:
.card-container:hover .front,
.card-container.selected .front,{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.
To make things stay flipeed when clicked, with your new CSS, you do:
var tiles = $('#tiles .card-container');
tiles.click(function() {
tiles.removeClass('selected');
$(this).addClass('selected');
//To change the image in maincontent to match the
//one in the flipcard clicked on:
$('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});
Update
Sorry for failing to add the minor detail that we also layer a lot of div elements on top of each other with z-index.
After working more with this problem, it seems that the webkit-transform actually messes with the z-index ordering, and that the actual problem is not related to the animations themselves.
End update
I am currently in a project where we develop an application which is quite heavy on CSS3 animations. We're animating a lot of div elements around with -webkit-transform and -webkit-transition.
All is well, until today where all of the to-be-animated elements of the page disappeared. It seems that Google Chrome has updated from 12.xx to 13.0.782.107m and now, all of a sudden, CSS3 properties with -webkit prefixes has stopped working, and elements which have this property applied to them just doesn't show anymore. Removing the -webkit-transform property through the Chrome debugger makes the elements visible again.
Has anyone else experienced the same issues, or know how to solve this problem?
I might add that I've tried to remove just the -webkit prefixes (leaving just transform), which then shows the missing elements, but then that won't animate the elements at all, as the CSS3 property transform is not supported.
I have also tried using el.style.webkitTransform and el.style.WebkitTransform, with no success.
Will pass some example code to explain. The desired result of this is to move sq1 away and reveal sq2.
HTML:
<div id="sq1" style="z-index:10;">
<div id="sq2" style="z-index:5;">
JS
/* fetch the element */
var el = document.getElementById("sq1");
/* apply CSS */
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";
Solved it myself through trial and error. Thought I'd report back if someone else stumbles upon this problem. It shall still be noted that this problem did not occur before Chrome updated itself to Chrome 13 (13.0.782.107m).
The trick here seems to be to add a translate3d operation to the underlying <div> (sq2) element upon declaration (or atleast before animating sq1).
Otherwise, the translate3d operation on the overlying <div> (sq1) will cause rendering to ignore the z-index and place sq1 below sq2. I'm guessing that this is because sq1 is defined before sq2 in the DOM, therefore sq2 will be rendered above it.
So, the solution seems to be to put translate3d in the definition of the <div>:s (add it to both just to be clear):
HTML:
<div id="sq1" style="z-index:10; -webkit-transform: translate3d(0px, 0px, 0px);">
<div id="sq2" style="z-index:5; -webkit-transform: translate3d(0px, 0px, 0px);">
This should only affect any elements which are positioned as absolute or relative. In order to remedy the issue, you can apply the following css statement to every element which is positioned this way and is causing issues:
-webkit-transform: translate3d(0,0,0);
This will apply the transform to the element without actually doing a transformation, but affecting it's render order so it is above the element causing the issue.
I think you need to try using -webkit-transform or webkitTransform instead of webkit-transform.
Use el.style.WebkitTransform (uppercase W).
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["webkit-transform"] = "translate3d(30px, 30px, 0px)";
Your missing the - on the second line, this could be the problem.
Is it possible to rotate a div element using Javascript & NOT using HTML 5?
If so what attributes of the element do I set/change to make it rotate? Ie, div.what?
PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.
Old question, but the answer might help someone...
You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).
Example of how to rotate a element 45 degrees using CSS:
.example {
-webkit-transform: rotate(45deg); /* Chrome & Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9+ */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}
Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.
I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).
Yes, it is possible to rotate a div not using HTML5, but using CSS3.
You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).
For more info, Google for: css rotate
If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.
I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts
You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.
http://kaisarcode.com/javascript-rotate
If you are looking for a way to do it instantaneously, than you can use
element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.
If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";
I would like to know how zoom property can be controlled through javascript,
like div.style.top , how to specify for zoom ?
The Firefox & Chrome (Webkit) equivalents to the IE-specific zoom property are, respectively, -moz-transform and -webkit-transform.
A sample code would be:
.zoomed-element {
zoom: 1.5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
}
You'd have to be a bit more careful with Javascript (test for existence first), but here's how you'd manipulate them:
el.style.zoom = 1.5;
el.style.MozTransform = 'scale(1.5)';
el.style.WebkitTransform = 'scale(1.5)';
It is a property of style, but it's not supported by all browsers. It's a non-standard Microsoft extension of CSS that Internet Explorer implements. It is accessed like this:
div.style.zoom
You might want to try a lightweight jQuery plugin called Zoomoz. It uses CSS3 transform properties (translate, rotate, scale). Check out the "Zooming the jQuery way section. Hope it helps.
$(document).ready(function() {
$("#element").zoomTarget();
});
I want to turn down the opacity on an element when a user performs an action.
The current code I have is:
document.getElementById('MyOpaqueElement').style.opacity = 0.3;
// There are checks in the real code for NULL, etc.
This works on Firefox, Safari, etc. IE8 has different ideas about opacity. I have read a couple of articles but have yet to find a definitive answer on the most portable method to do this in a cross-browser way.
There are various browsers-specific settings and notations you need to take into consideration.
See Quirksmode.org: CSS2 - Opacity
I suggest using a Framework like JQuery, Prototype, MooTools or Dojo. I know it seems ridiculous to add dozens of kilobytes of code just for some opacity at first, but it's really worth it. It just works in one way for all browsers.
EDIT- Poster is using jquery..
Easy way:
$(el).css('opacity', '0.3');
(I checked the jquery sources, and it handles opacity for cross-browser compatibility automatically, so that should work)
Or for a CSS solution:
Just give it a class, e.g. 'transparent', and add this to your CSS file:
.transparent {
filter: alpha(opacity=30); /* for IE */
-khtml-opacity: 0.3; /* khtml, old safari */
-moz-opacity: 0.3; /* old mozilla, netscape */
opacity: 0.3; /* good browsers: FF, safari, opera */
}
The equivalent should be document.getElementById('MyOpaqueElement').style.filter = 'alpha(opacity=30)';
By the way, even if you don't use a library like YUI or JQuery, you can download them and search their sources for the word
opacity
.