Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer :before and :after pseudo elements fully working with IE!

    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:


    Code:
    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.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    A basic test of your method seems to yield no results.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Arbitrator View Post
    A basic test of your method seems to yield no results.
    Because its not completely javascript. Using this
    Code:
    		<!--[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
    Last edited by _Aerospace_Eng_; 06-07-2007 at 05:00 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.

    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.

    Quote Originally Posted by _Aerospace_Eng_ View Post
    Your demo using the correct code here: http://prod.freehostia.com/test.html
    Your 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.

    Quote Originally Posted by jammnrose View Post
    i don't think the blinking text will work though...
    Iíd probably have to use something like setInterval() for that. I donít think that the expense is worth the minor effect.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •