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 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts

    Recreating a pseudo class for IE

    I have a site where I use a CSS navigation system with javascript compatibility for everything less than IE7. Every time in the menu a list holds a submenu, I gave it the class named "parent" so I could style those links differently, and change the way I style them all in one place. My css code:
    Code:
    a.parent::after
    	{
    		content: " +";
    	}
    This adds a plus sign at the end of the hyperlink so visually you see a difference in the normal links and the ones that hold sub-menus. It may not be the best way, but it is unique (I haven't seen it anywhere else) and this is how I want to do it.

    This is all fine and dandy but not a single version of Internet Explorer supports the pseudo-element "::after". So I need a script that will add a plus sign after each link. I have no idea how to do something like this. I have done some JavaScript before, but nothing like this. I just want to attach a pseudo-selector.js so it's easy to target which IE versions to apply it to.

    If you guys could help me write it, I would sincerely appreciate it. Like I said, I've never done anything like this before. I just make baby scripts!

    My HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style2.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    	<script language="JavaScript" src="pseudo-selector.js" type="text/JavaScript"></script>
    <![endif]-->
    </head>
    
    <body>
    <div id="menuh-container">
        <div id="menuh">
            <ul>
                <li><a href="http://wssd.k12.id.us/index.php" class="top_parent">District</a>
                    <ul>
                        <li><a href="http://wssd.k12.id.us/index.php">Main Page</a></li>
                        <li><a href="http://wssd.k12.id.us/dist_staff.php">Staff</a></li>
                        <li><a href="http://wssd.k12.id.us/board_of_trustees.php">Board of Trustees</a></li>
                        <li><a href="http://wssd.k12.id.us/contact_information.php">Contact Information</a></li>
                        <li><a href="http://wssd.k12.id.us/dist_employment.php">Employment</a></li>
                        <li><a href="http://wssd.k12.id.us/dist_news.php">News</a></li>
                        <li><a href="http://wssd.k12.id.us/documents/dist/dist_calendar.pdf" target="_blank">Calendar</a></li>
                    </ul>
                </li>
             </ul>
             <ul>
             	<li><a href="http://wssd.k12.id.us/hs_index.php" class="top_parent">High School</a>
    				<ul>
                    	<li><a href="http://wssd.k12.id.us/hs_index.php">Main Page</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_sports.php" class="parent">Sports</a>
                        	<ul>
                                <li><a href="http://wssd.k12.id.us/hs_sports_football.php">Football</a></li>
                                <li><a href="http://wssd.k12.id.us/hs_sports_crosscountry.php">Cross Country</a></li>
                                <li><a href="http://wssd.k12.id.us/hs_sports_volleyball.php">Volleyball</a></li>
                                <li><a href="http://wssd.k12.id.us/hs_sports_basketball_boys.php">Boys' Basketball</a></li>
                                <li><a href="http://wssd.k12.id.us/hs_sports_basketball_girls.php">Girls' Basketball</a></li>
                                <li><a href="http://wssd.k12.id.us/hs_sports_wrestling.php">Wrestling</a></li>
                                <li><a href="http://wssd.k12.id.us/hs_sports_softball.php">Softball</a></li>
                                <li><a href="http://wssd.k12.id.us/hs_sports_track.php">Track and Field</a></li>
                            </ul>
                        </li>
                        <li><a href="http://wssd.k12.id.us/hs_clubs.php">Clubs</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_lunch.php">Lunch</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_library.php">Library</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_news.php">News and Events</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_staff.php">Staff</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_studentcouncil.php">Student Council</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_counseling.php">Counseling Resources</a></li>
                    </ul>
                </li>
         	</ul>
            <ul>
            	<li><a href="http://wssd.k12.id.us/ms_index.php" class="top_parent">Middle School</a>
                	<ul>
                        <li><a href="http://wssd.k12.id.us/ms_index.php">Main Page</a></li>
                        <li><a href="http://wssd.k12.id.us/ms_sports.php" class="parent">Sports</a>
                            <ul>
                                <li><a href="http://wssd.k12.id.us/ms_sports_football.php">Football</a></li>
                                <li><a href="http://wssd.k12.id.us/ms_sports_volleyball.php">Volleyball</a></li>
                                <li><a href="http://wssd.k12.id.us/ms_sports_basketball_boys.php">Boys' Basketball</a></li>
                                <li><a href="http://wssd.k12.id.us/ms_sports_basketball_girls.php">Girls' Basketball</a></li>
                                <li><a href="http://wssd.k12.id.us/ms_sports_wrestling.php">Wrestling</a></li>
                                <li><a href="http://wssd.k12.id.us/ms_sports_track.php">Track and Field</a></li>
                            </ul>
                        </li>
                        <li><a href="http://wssd.k12.id.us/ms_clubs.php">Clubs</a></li>
                        <li><a href="http://wssd.k12.id.us/elms_lunch.php">Lunch</a></li>
                        <li><a href="http://wssd.k12.id.us/ms_news.php">News and Events</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_staff.php">Staff</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
            	<li><a href="http://wssd.k12.id.us/el_index.php"class="top_parent">Elementary</a>
                	<ul>
                        <li><a href="http://wssd.k12.id.us/el_index.php">Main Page</a></li>
                        <li><a href="http://wssd.k12.id.us/el_high5_index.php" class="parent">High Five Club</a>
                            <ul>
                                <li><a href="http://wssd.k12.id.us/el_high5_archive.php">High 5 Archives</a></li>
                            </ul>
                        </li>
                        <li><a href="http://wssd.k12.id.us/elms_lunch.php">Lunch</a></li>
                        <li><a href="http://wssd.k12.id.us/el_news.php">News and Events</a></li>
                        <li><a href="http://wssd.k12.id.us/hs_staff.php">Staff</a></li>
    			        <li><a href="http://ar.wssd.k12.id.us/">Accelerated Reader</a></li>
                    </ul>
                </li>
            </ul>
            <ul>	
                <li><a href="https://ps.wssd.k12.id.us/">Powerschool</a></li>
            </ul>
            <ul>
                <li><a href="http://datawav.com/webmail/src/login.php">Webmail</a></li>
            </ul>
            <ul>
                <li><a href="mailto:web@wssd.k12.id.us">Contact Webmaster</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    Please help!

    Edit: I figure you might want the css file too...
    Code:
    /* Begin CSS Drop Down Menu */
    #menuh-container
    	{
    		position: absolute;		
    		top: 1em;
    		left: 1em;
    		max-width: 1024px;
    	}
    #menuh
    	{
    		font-size: small;
    		font-family: arial, helvetica, sans-serif;
    		width: 100%;
    		float: left;
    		margin: 2em;
    		margin-top: 1em;
    	}
    #menuh ul li a
    	{
    		display: block;
    		border: 1px solid #000;
    		white-space: nowrap;
    		margin: 0;
    		padding: 0 6px;
    		font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
    		background-color: #900;
    	}
    #menuh ul li a, #menuh ul li a:visited /* menu at rest */
    	{
    		color: white;
    		text-decoration: none;
    	}
    #menuh ul li:hover a /* menu at mouse-over  */
    	{
    		color: white;
    		background-color: #b00;
    	}			
    a.parent::after, a.top_parent::after /*if they are a parent, style it*/
    	{
    		content: " +";
    	}
    #menuh ul li ul li, #menuh ul li ul li a
    	{
    		background-color: #b00;
    	}
    #menuh ul li ul li:hover a, #menuh ul li ul li a:hover
    	{
    		background-color: #c00;
    
    	}
    #menuh ul li ul li ul li:hover a, #menuh ul li ul li ul li a:hover
    	{
    		background-color: #d00
    	}
    #menuh ul
    	{
    		list-style: none;
    		margin: 0;
    		padding: 0;
    		float: left;
    		width: auto;	/* width of all menu boxes */
    	}
    #menuh li
    	{
    		position: relative;
    		width: auto;
    		min-height: 1px; 
    		vertical-align: bottom; 
    	}
    #menuh li li
    	{
    		width: 160px;
    		text-align: left;
    	}
    #menuh ul ul
    	{
    		position: absolute;
    		z-index: 500;
    		top: auto;
    		display: none;
    		padding: 1em;
    		margin: -1em 0 0 -1em;
    	}
    #menuh ul ul ul
    	{
    		top: 0;
    		left: 100%;
    	}
    div#menuh li:hover
    	{
    		cursor: pointer;
    		z-index: 100;
    	}
    div#menuh li:hover ul ul,
    div#menuh li li:hover ul ul,
    div#menuh li li li:hover ul ul,
    div#menuh li li li li:hover ul ul
    	{
    		display: none;
    	}
    div#menuh li:hover ul,
    div#menuh li li:hover ul,
    div#menuh li li li:hover ul,
    div#menuh li li li li:hover ul
    	{
    		display: block;
    	}
    /* End CSS Drop Down Menu */
    Last edited by Blue_Jeans; 08-31-2007 at 06:53 PM. Reason: Added CSS

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by Blue_Jeans View Post
    This is all fine and dandy but not a single version of Internet Explorer supports the pseudo-element "::after". So I need a script that will add a plus sign after each link. I have no idea how to do something like this.
    Code:
    a.parent, a.top_parent { content: expression(this.innerText.substring(this.innerText.length - 2, this.innerText.length) == " +" ? null : this.innerText = this.innerText + " +"); }
    The CSS expression checks the last two characters to see if they are the desired characters. If they are not, the characters are appended; otherwise, nothing happens.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Blue_Jeans (09-04-2007)

  • #3
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    have you tried it with just one : in IE 7? Kinda suprised it works anywhere with 2...

    if you were to use prototype.js, you could do:
    Code:
    $$('a.parent, a.top_parent').invoke('insert',{after:' +'});
    http://prototypejs.org
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by GJay View Post
    have you tried it with just one : in IE 7? Kinda suprised it works anywhere with 2...
    See the CSS3 Selectors Module (Working Draft) [1]. It proposes the use of a two Colon (:) character syntax for the purpose of distinguishing between pseudo‐classes (:) and pseudo‐elements (::).

    The specification is still a draft, but Firefox 2, Opera 9, and Safari 3 (beta) all support the double‐Colon syntax. Internet Explorer 6 and 7, on the other hand, don’t support the :: syntax for the two pseudo‐elements that they do support. after and before are not either of those two supported pseudo‐elements though, so using the :: syntax with them should be fine.

    1. http://www.w3.org/TR/css3-selectors/#pseudo-elements
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    GJay (09-02-2007)

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Forgive me for my ignorance, but right now I am very tired and I cannot get the given examples to work. I am not that good in JavaScript to start with, so if you guys would be so kind as to help me out, I would greatly appreciate it.

    Edit: I slept on it and got the below code to work (thanks, Arbitrator).
    Code:
    a.parent, a.top_parent
    	{
    		content: expression(this.innerText.substring(this.innerText.length - 2, this.innerText.length) == " +" ? null : this.innerText = this.innerText + " +");
    	}
    Question, though. Why does this only work in IE? I only have IE7 to test it on right now, not sure on the others. Is 'content: expression' IE only?
    Last edited by Blue_Jeans; 09-04-2007 at 04:04 PM.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by Blue_Jeans View Post
    Question, though. Why does this only work in IE? I only have IE7 to test it on right now, not sure on the others. Is 'content: expression' IE only?
    CSS expressions are a Microsoft creation and will only work in their Internet Explorer browser. Internet Explorer does not actually support the content property; I just chose that name so that one could easily associate the declaration with what it does. The property name used can be substituted with whatever filler name that you prefer, though you may want to avoid choosing the names of properties that Internet Explorer does support since I don’t know if anything weird will happen.

    If you haven’t guessed yet, CSS expressions can be used with any property. For example, you could use it with the width property in Internet Explorer 6 to simulate the unsupported min-width and max-width properties. If the expression does something directly to the document instead of returning a value for the property to use, then the property used becomes irrelevant, as in the code that I provided.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Gotcha. Thanks for the support! One more question, though. Does it work for ALL IE browsers?

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by Blue_Jeans View Post
    One more question, though. Does it work for ALL IE browsers?
    Being that CSS was not supported by the earliest iterations of Internet Explorer, this is obviously not the case.

    I’ve used them in Internet Explorer 6 and 7, so I know that they work in those two versions. According to the Microsoft document regarding them [1], they’re supported by Internet Explorer 5, so I would say that they’re supported by versions 5 through 7.

    According to that same document, they should also be supported in Internet Explorer 4.0, but I suspect that those assertions are misstatements. Internet Explorer 4 is irrelevant anyway, so I guess that the point is moot.

    1. http://msdn2.microsoft.com/en-us/library/ms537634.aspx
    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
    •