...

View Full Version : :before and :after pseudo elements fully working with IE!



jammnrose
06-06-2007, 01:01 AM
After looking around the net and finding very little on the topic, I decided I would figure this out once and for all.
Here you go:



tag-before { content: expression(this.innerHTML = this.innerHTML.substring(0,*number-of-characters-of-content*) == "*some-content*"? this.innerHTML: "*some-content*"+this.innerHTML ); }

tag-after { content: expression(this.innerHTML = this.innerHTML.substring(this.innerHTML.length-*number-of-characters-of-content*,this.innerHTML.length) == "*some-content*"? this.innerHTML: this.innerHTML.substring(0,this.innerHTML.length-1)+"*some-content*" ); }

tag-both { content: expression(this.innerHTML = this.innerHTML.substring(this.innerHTML.length-*number-of-characters-of-content*,this.innerHTML.length) == "*some-content*"? this.innerHTML: "*some-content*"+this.innerHTML.substring(0,this.innerHTML.length-1)+"*some-content*" ); }

replace *some-content* with what you want inserted before or after, replace *number-of-characters-of-content* with the number of characters that the content is.
hope this is useful.

Arbitrator
06-06-2007, 09:25 PM
A basic test (http://www.jsgp.us/demos/CF115428.html) of your method seems to yield no results.

_Aerospace_Eng_
06-07-2007, 05:49 AM
A basic test (http://www.jsgp.us/demos/CF115428.html) of your method seems to yield no results.

Because its not completely javascript. Using this

<!--[if IE]>
<style type="text/css">
a { content: expression(this.innerHTML = this.innerHTML.substring(0,2) == "➤ "? this.innerHTML: "➤ " + this.innerHTML); }
</style>
<![endif]-->
Should work. That expression thing is a proprietary of Microsoft. It can be ran in a CSS file. Most browsers should ignore but to be safe you should probably put it in conditional comments.

Article here: http://msdn2.microsoft.com/en-us/library/ms537634.aspx

Of course if JS is disabled it will fail.

Your demo using the correct code here: http://prod.freehostia.com/test.html

jammnrose
06-07-2007, 07:20 AM
yeah, this is to be put within style tags... IE supports javascript CSS expressions. go figure.
i don't think the blinking text will work though...:confused:

Arbitrator
06-07-2007, 05:03 PM
Because its not completely javascript.

[Ö]

Should work. That expression thing is a proprietary of Microsoft. It can be ran in a CSS file. Most browsers should ignore but to be safe you should probably put it in conditional comments.I know what a CSS expression is. Unfortunately, I wasnít paying attention and used the wrong element. I did use the style element initially but changed it for reasons that now escape me. Anyway, the demo should now work as expected.


Of course if JS is disabled it will fail.Well, I was fine in going without the effect since itís just stylistic in nature. Having it at all is just a bonus.


Your demo using the correct code here: http://prod.freehostia.com/test.htmlYour document seems to be misencoded, so I get question marks for the arrow character. The CSS expression does work though and I used this to fix my demo.


i don't think the blinking text will work though...:confused:Iíd probably have to use something like setInterval() for that. I donít think that the expense is worth the minor effect.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum