<style>
#fade p, table {
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
-o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
</style>
Works good but want to know if itâs possible to add a fadein for this NEXT button within a table. I have many of these that I did several years ago and donât want to change them so I was hoping that a selector could read this and have it delayed (fadein) 5 seconds.
My thought is that the code could it pick a key work(s), for example "a href=âpage.asp?DBâ? and then apply the longer fadein for that. Now âtableâ is already a fadein from the above CSS, so I am talking specifically the a href of the specific querystring. I want to avoid having to add a class or id to the table since I have so many of these, but if that is my only alternative, then I would consider this.
If this concept would best fit JS instead of CSS then @PaulOB would know that and perhaps needs to be moved to that category.
I donât disagree with that - thatâs why I mentioned it!! I will be doing that along with more ajax loaded pages but need this now. Have so many to change.
I did look at the attribute selectors before my original post, but donât know how to do that and as mentioned, wasnât sure if itâs best with CSS or as stated if @PaulOB thinks itâs best to do in JS. Paul is a master at that and he would know.
It depends on how your page is working exactly. Do you have the table fading in and working already?
If so when does it fade in? Is it fading in on page load or are you revealing the table with some JS?
How many tables are fading in and are they visible above the fold?
The problem is that if your page takes a long time to load the animation may well have already finished. You would then require JS to wait until the page has loaded and then add a class so the animation can run.
You can use the attribute selector as Sam said if you do something like this:
a[href*='page.asp?DB']{ etc...
You could then set a css animation and give it a delay in css so that it starts after so many seconds but it does depend on the questions above to know how effective it will be.
Iâll be back tomorrow as only on a mobile at the moment and will offer some css if you canât work it out.
I see the various thing I can do and will determine the sequence as @PaulOB suggests and will get back to him on that.
I couldnât find it, but using my example, is there a delay that I can use instead of #fade where I can not show to page until the time that I would specify? Of course, with a delay I would change to a greater number then the current fadein of 1s.
I saw this in the link and yes it looks like that can work, but I canât seem to apply it properly.
Hope these answers help.
The bottom line is that I want the page with any tags to fade in 1s and delay the href link for 5 seconds before it shows on page. Would like to be able to do this just css and JS with no other classes to add to code below the css/js. I have essential no table structure other than the href, so might be able to simply use css to fade the p tag and delay the table tag.
Iâm not sure what limitations you are imposing exactly but perhaps you can work from this example.
First of all get rid of your prefixes as they are not needed for those properties these days and indeed you have them in the wrong order anyway which could trip up the browser by implementing an older version of the property instead of the current one (as happened with border-radius in moziila).
To target anchors that have the partial string present (page.asp?DB) you could add it into your css like this.
Note that in the last table I have added an âxâ character in the string so that you can see it wonât work if the partial string is not as stated.
Also note that I havenât used html like that since before 1999
As mentioned if your page takes longer than a second to load then the animation for the table would be missed. You may want to set an animation delay for the table and a longer delay for the anchor tag.
As I said I donât know what restrictions you have and donât know what your page load times are like. You could as I said earlier add a script at the bottom of the body that adds a class to the html or body tag and then you use that class to trigger the animations as it will only be applied once the page has loaded (theoretically).
The yellow bgcolor is visible even though the NEXT doesnât show until the 5s animation-delay. Is there a way for that now be visible until the NEXT appears?
But more importantly, even the yellow table is visible which means that a user would figure it out and just click on the yellow for next page. So what is necessary is can the delay of the hyperlink be such where you canât click until the desired time has expired?
And lastly, if I have any unwanted tables needed to be exempt from this code, can I add a class or id (whichever is appropiate) to be excluded from the table delay? Other table fades ok, just no specific table delays.
The yellow background is the table itself and nothing to do with the link. If there was no background on the table then nothing would show so what would be the point of fading it in?
I assumed you had other content in the table which you were fading in.
If you want the link to have a yellow background then apply it to the link and not the table.
You were using opacity to hide the table and wanted to use the same routine for the link (thatâs what I thought you meant). Opacity doesnât remove the element but just makes it invisible which means itâs still there.
It would probably be better to move the link off screen so it canât be clicked accidentally although I guess users could still tab to it. Iâll have to have a play around tomorrow and see whatâs best.
You could either add a class to the tables you want this to effect to occur which would be the normal procedure. However you could instead add a class to tables where you donât want this to occur and set animation:none to those tables and their anchors or probably utilize the :not selector on existing rules.
Yes, you are exactly right! I tried that and obviously works. Ideally, it would be good if there was a delay so nothing is clickable in case a smart user knows the pattern.
The only problem with the above is that I have a few images and also links that I donât want to delay, fade is okay. I was looking for info about a no selector or exceptions from css using a class but was unsuccessful in getting anything to work.
Thanks for your help. I do know that if there is a way, you will know how to execute it! I will still be doing research after this reply! Sometimes I donât understand, but I donât give up. In general, what might take me 8 hours to find and execute, you would know in 5 minutes!
Thatâs very good - the NEXT delays and itâs not clickable until it appears on the page - excellent!
Still, I have one issue. I took your suggestions and took out the yellow bgcolor from the NEXT and made it the same color to the page.
I have been spending a lot of time tonight researching and using trials with the :not selector too. Didnât have a lot of success though!
I like what you did but need to be able to exclude certain tables with a class that just uses fadein, not delay. All href links not part of table or p tag should fadein, no delay.
Iâm not quite sure what you mean but the the last table in my example is excluded from the fade effect. If you wanted some other effect on that table then use the new class to apply a new animation or whatever.
Just make another rule for all your links with the animation required.
I.e. just add the extra rule to the comma separated list in my example.
That code doesnât seem to work any different than the last version. Perhaps I didnât communicate probably, but itâs not a class no-fade that I want - itâs a NO DELAY with the fade that I need.
So what I tried is using a div with a vertical alignment to middle and that gives me the no delay, but the link inside the div is still on a delay. It is a page.asp?DB, no perhaps thatâs why it delay, but it wasnât in a table which is why I experimented with the div. Prefer to use the div but will if necessary.
To summarize for a NO CLASS DELAY that would require using a class:
no delay of image and href in table (even if itâs page.asp?DB)
Not in table - any href (even if itâs page.asp?DB) no delay.
The code is working as it should but I think I confused you with the no-fade classname. I probably should have used no-delay as the name instead but none the less the code is doing what you asked for:) I thought you would have noticed that when you run it.
The link at the end of the html just fades in without a delay and so will any links in a table that have the class no-fade. Just change the references to no-delay if that makes more sense to you.
e.g.
<table align=center bgcolor=yellow>
<tr>
<td>
<span>Other stuff in table</span>
<a href="page.asp?DB=1a">
<font face=arial color=blue size=4><b>NEXT</b></font>
</a>
</td>
</tr>
</table>
<table align=center bgcolor=yellow>
<tr>
<td>
<a href="page.asp?DB=2a">
<font face=arial color=blue size=4><b>NEXT</b></font>
</a>
</td>
</tr>
</table>
<table align=center bgcolor=yellow>
<tr>
<td>
<a href="page.asp?DB=3a">
<font face=arial color=blue size=4><b>NEXT</b></font>
</a>
</td>
</tr>
</table>
<table align=center bgcolor=yellow>
<tr>
<td>
<a href="pagex.asp?DB=1a">
<font face=arial color=blue size=4><b>No fade because link is different</b></font>
</a>
</td>
</tr>
</table>
<table class="no-delay" align=center bgcolor=yellow>
<tr>
<td>
<a href="page.asp?DB=1a">
<font face=arial color=blue size=4><b>Table and link won't fade because of class on table</b></font>
</a>
</td>
</tr>
</table>
<a style="background:yellow;font-weight:bold;" href="page.asp?DB=1a">
Link not in a table
</a>
<br>
<a style="background:yellow;font-weight:bold;" href="pagex.asp?DB=1a">
Link not in a table
</a>
There is still an anomaly in whether you want all links to fade in as you previously only mentioned links with the partial string present (page.asp?DB). If you want all links to fade in just like tables then change the first rule just to a.
a,
#fade p,
etcâŚ
That doesnât happen in my code unless the div is in a table (without the no-delay class) and the link has the partial string matched. Otherwise it just fades in as shown in my demo above. (Not sure why you are talking about vertical alignment as that sounds like you are doing something odd anyway⌠but that will be another question.)
The code Iâve given above will cater for all your requirements so far. If you need a different behaviour then Iâm sure it can be accommodated into the routine above as I canât really second guess what comes next
You must have copied the css incorrectly or have something else in place I havenât accounted for.
Hereâs a codepen of the exact HTML and css I posted and the only links that are delayed are the next ones in red. The table you mention is not affected.
Ok, I know we can get this working without another steak dinner! I appreciate your help.
So this is what I have using the css and your own table - even though I see that the Codepen seems okay.
<table class="no-delay" align=center bgcolor=yellow>
<tr>
<td>
<a href="page.asp?DB=1a">
<font face=arial color=blue size=4><b>Table and link won't fade because of class on table</b></font>
</a>
</td>
</tr>
</table>
When I run this I get only the yellow showing (fading in) and then after the DELAY - then I get the text and the link associated with it.
What I want is that for that class of no delay, everything in the table, has no delay and just fades in.
------- EDIT -------
Check out this link for example⌠Starts off with the code written to the page (fully executed) and then I click on refreshâŚ
Sorry but unless I see your actual full code or a live page of what you are doing I canât really help. The video shows me what you see but I canât debug a video:)
There must be something else going on or you have an error somewhere⌠Post the full html and css that creates the example you just showed me. Better still put it all in a codepen and then we can easily see what the problem is.
