SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE workaround for :target psuedo-class

    I know very little about javascript but have found a very convenient way to display a hidden div using css3. Problem is that IE can't handle it. There is a js workaround I found by suckerfish but it has one flaw. When I refresh the page I get an error. Here is the basic code.

    Here is the JS code:

    Code:
    sfTarget = function() {
    	var sfEls=document.getElementsByTagName("span");
    	var aEls = document.getElementsByTagName("a");
    	document.lastTarget = null;
    	for (var i=0; i<sfEls.length; i++) {
    		if (sfEls[i].id) {
    			if (location.hash==("#" + sfEls[i].id)) {
    				sfEls[i].className+=" " + cls;
    				document.lastTarget=sfEls[i];
    			}
    			for (var j=0; j<aEls.length; j++) {
    				if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i]; aEls[j].onclick = function() {
    					if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\\b"), "");
    					if (this.targetEl) this.targetEl.className+=" sftarget"; document.lastTarget=this.targetEl;
    					return true;
    				}
    			}
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfTarget);
    The html:

    HTML Code:
      <a href="#item1" name="a">item 1</a>
      <a href="#item2" name="a">item 2</a>
      <a href="#item3" name="a">item 3</a>
      <a href="#default" name="a">clear</a>
    
    
    <div class="items">
      <span id="item1" class="content">... item 1...</span>
      <span id="item3" class="content">... item 2...</span>
      <span id="item3" class="content">...</span>
      <span id="default" class="content"><!-- by default, show no text --></span>
    </div>
    And this is the css:

    HTML Code:
    div.items span {display: none}
    div.items span:target {display: block}
    div.items span.sftarget {display: block}
    As I said it works fine in that it hides and displays the spans. Problem is that if I refresh the page I get an error and it stops working properly. Anyone want to look at the js and give me any advice??

    Thanks

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What error are you getting? and what version of IE?


Bookmarks

Posting Permissions

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