I was thinking of using a css transition with a delay as sort of a small animated intro for a page the other day. Is css rendered immediately after its loaded (before the document if fully loaded/ready)? If so I suppose I could add the <link> tag after the document is ready for a similar effect.
On http://www.chapmansbuilding.co.uk/, I added a big white div with JS over the whole content, then did the animation, then removed the div. This meant that I could ensure the remaining content was rendered and preloaded etc at the same time.
Make sure you add it with JS, else the site won't be visible for a user without JS, or if your JS script fails for some reason.
As far as I can tell from the specs and other docs, the transitions are applied immediately when a computed value changes:
When the computed value of an
animatable property changes,
implementations must decide what
transitions to start based on the
values of the ‘transition-property’,
‘transition-duration’,
‘transition-timing-function’, and
‘transition-delay’ properties at the
time the animatable property would
first have its new computed value.
From here
So this happens with hover or focus or some other event.
If you wanted your transition to run on page load, you would need to use some javascript as shown here: https://developer.mozilla.org/en/css/css_transitions#Using_transition_events_to_animate_an_object
If you were worried about the transition happening too quickly, you could set a delay in the js.
Related
I have an SVG image inside my GWT application. For this I'm using lib-gwt-svg.
I can target elements by ids, add styles to them, no problem with that.
But I tried to animate using "skewX" and that is, what went wrong.
I have a barrier, that I want to open using that skewX property. I add the style, it animates to open. It also closes without problem. But when I change the presenter, and then return back to the SVG image, the barrier moves to different position. It can be fixed by closing and opening it again.
I tried using matrix, with the same result. I also found out, that it is caused by SVG elements using different coordinates for positioning. So when I apply CSS style (skewX), it uses CSS style for the SVG and it works correctly. But when I leave the presenter and return, those CSS styles are now handled like SVG styles, thus making the barrier display wrong. When I open or close the barrier, CSS styles are re-aplied and it is all ok again.
I tried some hacks, like re-apply styles when returning to SVG, but it makes no difference, as I'm adding the same style to the the SVG so it doesn't care. It only refreshes when I add diferent transformation, from the one already present.
I tried to work around this by using the "transform" attribute of SVG with calcutaion of the coordinates necessary for translate after skew. How to do that I found here: How to set transform origin in SVG
It works nicely, but there is no animation whe using this approach.
Any idea how to force SVG to refresh its styles? Only sollution I can think of is change its style from skewX(0.1) to skewX(0.11), which is different, so it refreshes, but when to apply it is also the question. Even when I apply it in Scheduler.get().scheduleDeffered, it doesn't work. If I apply it on button click, it works.
I am fiddling with the looks of a page from our web application. I need to make lots of small changes quickly to judge the effect, and the developer tools give me the functionality I need, as I'm editing the CSS directly in the element inspector.
However, there is a table on this page, which was created by some JavaScript library. The library inserts style="width:1024px" directly in the <table> tag. I need to change this width to make it 100% of the parent width, but it doesn't work.
Deleting the style attribute from the HTML without reloading the page does not change the width. Setting a new width in the stylesheet does not work because the inline CSS supersedes it. Reloading the page overwrites my changes made in the element inspector.
I cannot get into the code and change the setting used for the library (I assume it allows the developer to define a constant width and does not do it by itself). What options do I have to see the table at the width I need without reprogramming the whole thing?
If you really can't remove the inline style you can override it adding the !important keyword on your css style.
like that
table {
width: 100% !important;
}
I found out that it indeed works when I change the inline tag directly from style="width:1024px" to style="width:100%".
My mistake had been to first delete the complete inline tag, then write it back again with the new value. It seemed to not "get it" that there has been a change.
i have an issue where im using css to make a div appear circular on screen but it only works if the background image property is set first
normally that wouldnt be an issue if the image wouldnt need to be dynamicly inserted using PHP code
i created 3 jsfiddles to document my problem
https://jsfiddle.net/2wr2wajw/
No issue, background set first
https://jsfiddle.net/zvq3r0pd/
Issue,background doesnt get resized properly
link3 jsfiddle.net/x8g05uph/
Same issue as above, i would have expected the style code to be executed first
SO, whats the issue and whats the solution? thank you
EDIT
Found out adding the additional styles in the html code works, but thats not very nice and unnecessary to rewrite css code for everyone tag
thats what class selectors are for right?
link4 jsfiddle.net/q7sdwbfk/
not nice
The reason your code is not showing up properly in each scenario is because you are using the background shorthand property, which in turn is overwriting previously set values.
For instance, in example 2, you are setting the background-size prior to setting the background shorthand. By setting the background shorthand, you are overwriting the background-size property.
If you don't want to load them in order so that they don't get overwritten, don't make use of the shorthand background. Instead, utilize background-image, background-repeat, etc. This sets each property individually and will not cause anything to be overwritten, unless the property is called explicitly again.
Here is the updated fiddle for your example 2, utilizing individual properties instead of shorthand.
I have a Drupal website loaded with AJAX. Every time I edit my title, AJAX is checking whether or not I've actually changed it. But every time the AJAX starts checking, my whole lay-out is jumping around...
BEFORE
AFTER
I tried to edit the .ajax-threbber-css class with position absolute, relative and fixed, but no result. Every time the throbber reacts differently. A z-index of 99999999999 doesn't work either... Is there a way to float this ajax-throbber-div to the absolute top without influencing any other items?
You would first need to check its current CSS properties, it could be that you are having them overwritten by something else.
Firebug or Google Chrome developer tools would help. Setting the position to absolute, should do it for you, its just CSS gets murky if you don't consider other pieces of the puzzle acting upon your object that you are trying to style.
I have a bookmarklet that will come up with a iframe that will load a web form I have. On most site, it works fine with the bookmarklet on top of every element in the current html page. But for certain sites with a lot of javascript loading (e.g. meebo.com), the loaded iframe will go below. How can i troubleshot this? Thanks. attached screen shot.
If you are using a positionable element such as a div, you should ensure the z-index style is set to a value higher then any other element.
Of course the page you load in the iFrame may also be doing exactly this. Therefore you may need to use a timer (setTimeout) to delay for say 500ms and then get the current highest z-index and add 1 to it.
Also, because you don't know in advance anything about the page shown in the iFrame, you would actually need to manually search for all elements containing a z-Index style. Once you have a collection of these elements, then get the highest z-Index value.
I'd definitely look at using jQuery to make this much easier.