...

View Full Version : Recreating a pseudo class for IE



Blue_Jeans
08-31-2007, 05:48 PM
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:

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

/* 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 */

Arbitrator
09-01-2007, 08:06 PM
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.
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.

GJay
09-01-2007, 10:57 PM
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:


$$('a.parent, a.top_parent').invoke('insert',{after:' +'});


http://prototypejs.org

Arbitrator
09-01-2007, 11:25 PM
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.


http://www.w3.org/TR/css3-selectors/#pseudo-elements

Blue_Jeans
09-04-2007, 04:13 AM
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).

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?

Arbitrator
09-04-2007, 07:58 PM
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.

Blue_Jeans
09-05-2007, 04:12 PM
Gotcha. Thanks for the support! One more question, though. Does it work for ALL IE browsers?

Arbitrator
09-05-2007, 08:42 PM
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.


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum