I try to make a flip-page effect in IE10.
When i make the transformation with rotateY(180deg) it works well,
but with rotate3d(0,1,0,180deg) it makes a strange flip at 90deg (only on IE10!).
Have a look at this jsfiddle on IE10: http://jsfiddle.net/wG6gk/2/
Is this a IE Bug or does the container need any additional CSS attributes?
Css3 is in draft mode, each browser can have it's own perception of Css3.
I don't think that it is a bug.
According to my experience in css3, rotate3d is one the css3 properties that is hardware accelerated (more accelerated than rotateX and rotateY). But in this case you can't use rotate3d for IE, because it will not act the way you expect here.
Related
I am currently playing with latest Sitecore, just downloaded from SDN. The first, but quite annoying "feature" in new metro-like interface seems to be huge UX elements, big paddings in content tree between elements (it also quite ugly in Templates Builder). Also just restored a package of my existing solution (taken from 7.2) and I find it very inconvenient to use, as the one is quite big with many items.
Is there any way to switch it back to previous interface? Am also quite worrying about adapting our business users as I spent much time on justifying version upgrade and this type of people do usually judge by what they see.
I clearly understand your feelings as I had exactly the same first impression.
I dont think there is some switch to return to previous UI.
Nevertheless, it is all about themes. Default theme that is located at sitecore\shell\Themes\Standard\Default folder, so playing enough with developer tools or firebug you may produce any look-and-feel you want.
I have adjusted Sitecore 8 styles in order to fit both my visual expectations and general good look. To make it simple, I have created the module that replaces those dodgy styles with properly adjusted, to make it look similar to Sitecore 7.
Please read the blog post describing how to implement that; there also will be download link to that package:
http://blog.martinmiles.net/post/is-that-possible-to-cure-sitecore-8-styles-megalomania
The module replaces following style files from folder mentioned above:
Content Manager.css
Default.css
GlobalHeader.css
Ribbon.css
Shell.css
Startbar.css
Windows.css
Workbox.css
Hope this helps!
Update: Thank you for inspiring me with an idea of switch. I think it may make sense of implementing a SPEAK component, that allow to switch between conservative and new styles.
I want to detect whether a visitors browser is capable of running famo.us - if not redirect them.
My first thought was Modernizr and detect whether the browser is capable of CSS 3D transformations, though i'm worried that this may be too severe as famo.us is adding some backward compatibility perhaps through shims.
I'm currently using WURFL for device detection, though this doesn't give enough browser information as far as i can tell.
Any thoughts on this?
The standout feature that famo.us depends on is CSS preserve-3d which is key to doing CSS 3D transforms and what famo.us depends on to render correctly.
You can use the cutting edge 3.0 beta of Modernizr to test for this support specifically. I'd recommend using it over reading the User Agent, as you'll always get weird false positives somehow. Using the current 2.x release will not work, as testAllProps won't support the two parameter syntax.
if(Modernizr.testAllProps('transformStyle', 'preserve-3d')){
//true
// run famo.us code!
}
else
{
//false
// famo.us 3d transforms won't work right, so lets compromise
}
There's been quite an effort to track this one on the Modernizr teams part, so if you find any issues, let them know here.
You will need to do it via user agents to detect browsers and versions. See:
https://stackoverflow.com/questions/23219710/famo-us-browsers-supports
https://github.com/Famous/famous
Cocos2d-iphone uses the -hd extension for Retina images (and other assets). The cocos2d Retina guide speaks only vaguely of "some incompatibilities" regarding #2x:
Apple uses the ”#2x” suffix, but cocos2d doesn't use that extension
because of some incompatibilities. Instead, cocos2d has its own
suffix: ”-hd”.
WARNING: It is NOT recommend to use the ”#2x” suffix. Apple treats
those images in a special way which might cause bugs in your cocos2d
application.
Great. I feel well informed.
Through a 2-year old bug report regarding #2x I got the link to a forum thread that supposedly explains the issues with #2x. However, it does not. The only hints I found in there is that there are iOS (4.0/4.1) bugs regarding #2x which I suppose are no longer relevant. It's possible that I might have missed some crucial aspect (there was some talk about caching or repeat loading issues) - the thread is very long after all.
I'd like to know what specific issues might a cocos2d developer encounter if (s)he is using the #2x suffix for images instead of -hd?
Please give concrete examples of things that might go or actually will be wrong.
This seems to be the main reason from this link: http://www.cocos2d-iphone.org/forum/topic/12026
Specifically this post by riq:
I don't know if initWithContentsOfFile was fixed, but in 4.0 it was broken and it wasn't working with #2x, ~iphone extensions.
imageNamed caches all the loaded files so it consumes much more memory than initWithContentsOfFile
Also the #2x extension does something (I don't know exactly what) but it doesn't work OK with cocos2d.
Another good point: Back when the iPhone 4 was just released with the retina display, I am sure some users of Cocos2D were using an older version of it so when the user was using the retina display on a version of Cocos2D that didn't support it, things were twice as large as they should've been. Again this is now fixed to most unless you are using a VERY early version of Cocos2D.
Overview, so it seems that the main issue was with initWithContentsOfFile from iOS 4 but they have fixed this since because I use that exact API with Cocos2D 2.0-rc2 in my app and I do not have any issues whatsoever. I use all Apple specified extensions for images and everything works jolly good! :)
It seems as if this has a historic background.
What makes using -hd graphics still worthwhile is that loading them doesn't rely on Apple functionality but is rather done in framework code. So -hd can be loaded for iPads in iPhone Simulator mode and make use of the higher resolution pictures in 2x mode.
Other than that I couldn't find any more reasons to not use #2x when I was looking into this a week ago.
In case you want all the details it is probably best to drop riq an email.
What possible web technology Google might have used for this Gideon Sundback doodle (see video)
http://www.youtube.com/watch?v=utijBRRmAJo&feature=relmfu
I am really curious. in a web browser, can we really do this much? I guess it is not flash, else i would not wonder. Any source code or similar samples available?
Guess it shows off how much we can extend in web technologies now.
A Canvas element <canvas> is used. All modern browsers supports HTML5 now - Firefox, chrome and Opera. Yes it is possible to do these with the browsers of today!
The zipper teeth are drawn onto the canvas from a png sprite file. The zipper slider also resides in that png image. The whole interactive animation is coded in the Javascript. The zipper peel effect is done using the arc() method of the context object, context being 2d in this case.
As soon as you click on the slider, it hides all the Dom elements - buttons and text input and all what you see is the canvas drawing. Since using the javascript code that is used, can't alone recreate the effect on the local html file. I think some external libraries are used. I am not sure how the google.listen() method works as its not defined. Check out the javascript here, in this thread, which is beautified javascript code, using the jsbeautifier.org
I am looking for options to manage the ui-layout of an ember application I am currently working on.
The application has to be very flexible (configurable) when it comes to the ui-layout - so having layout-containers with regions like "top", "left", "center", "right" and "bottom" which can be nested whould be a good fit (thats how most layout-managers manage layout).
I found a few solutions, but am somehow undecided:
yui2-layout-manager (Demo)
Seems a bit old/clunky, successor, yui3-layoutmanager, is in "planning" stage since months (years?)
jquery-ui-layout (Demo)
Looks a bit bloated. Codebase is not public: As it seems the project-owner does not want it to be too public(?) (from what i read in the google-group, someone asked why its not on github...)
dojotoolkit (Demo)
Seems quit a bit "obtrusive"
All in all no solution feels "good" to me and I wonder if I should better write the layout-managing-logic myself. What do you think?
Check those two addons:
https://github.com/ghempton/ember-layout
https://github.com/ghempton/ember-routemanager
Also check the demo http://ghempton.github.com/ember-layout-example/
Edit: I think this project: https://github.com/flamejs/flame.js is extremely close to what you want.
JQuery ui-layout is a problem with Ember, because ui-layout requires a ui-layout-center element at layout time, but Ember {{outlet}}'s typically defer the presence of these.
You may have a look at Twitter's Bootstrap. It has a layout classes set.
http://twitter.github.com/bootstrap/scaffolding.html
I finally found it: http://www.bramstein.com/projects/jlayout
"[..] The jLayout JavaScript library provides layout algorithms for laying out components. A component is an abstraction; it can be implemented in many ways, for example as items in a HTML5 Canvas drawing or as HTML elements. The jLayout library allows you to focus on drawing the individual components instead of on how to arrange them on your screen. [..]"