Форум Сайтостроение Веб-строительство

Псевдокласс :target - как реализовать в IE 6?

Gevak
На сайте с 04.12.2007
Offline
88
Gevak
1320

Нашел интересную статью о псевдоклассе :target. Очень понравилось как меняется цвет для выбранного перехода по ссылке. Не понравилось только, что этот псевдокласс не работает в IE (тестировал на IE6). Никто не может подсказать кроссбраузерную альтернативу?

ЗЫ описанный автором пример хака для IE6 не работает: 

*:target, .IE-target {

  background-color: pink;

}
Предлагаю скидку от 8% до 12% (http://gevak.ru/skidki/fastvps.html) на хостинг, VPS и сервера компании FastVPS (https://billing.fastvps.ru/aff.php?aff=422).
S
На сайте с 14.05.2009
Offline
93
sportmaster
#1
Gevak:
Нашел интересную статью о псевдоклассе :target. Очень понравилось как меняется цвет для выбранного перехода по ссылке. Не понравилось только, что этот псевдокласс не работает в IE (тестировал на IE6). Никто не может подсказать кроссбраузерную альтернативу?

ЗЫ описанный автором пример хака для IE6 не работает: 
*:target, .IE-target {

  background-color: pink;

}

И в IE все работает, ищите ошибку у себя в коде. Вот попробуйте сохранить этот код

Html-файл

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Smooth scrolling demo</title>

<script type="text/javascript">

/* Smooth scrolling

Changes links that link to other parts of this page to scroll

smoothly to those links rather than jump to them directly, which

can be a little disorienting.

sil, http://www.kryogenix.org/

v1.0 2003-11-11

v1.1 2005-06-16 wrap it up in an object

*/

var ss = {

fixAllLinks: function() {

// Get a list of all links in the page

var allLinks = document.getElementsByTagName('a');

// Walk through the list

for (var i=0;i<allLinks.length;i++) {

var lnk = allLinks;
if ((lnk.href && lnk.href.indexOf('#') != -1) &&
( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
// If the link is internal to the page (begins in #)
// then attach the smoothScroll function as an onclick
// event handler
ss.addEvent(lnk,'click',ss.smoothScroll);
}
}
},

smoothScroll: function(e) {
// This is an event handler; get the clicked on element,
// in a cross-browser fashion
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;

// Make sure that the target is an element, not a text node
// within an element
if (target.nodeName.toLowerCase() != 'a') {
target = target.parentNode;
}

// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != 'a') return;

// Find the <a name> tag corresponding to this href
// First strip off the hash (first character)
anchor = target.hash.substr(1);
// Now loop all A tags until we find one with that name
var destinationLink= document.getElementById(anchor);

// If we didn't find a destination, give up and let the browser do
// its thing
if (!destinationLink) return true;

// Find the destination's position
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}

// Stop any current scrolling
clearInterval(ss.INTERVAL);

cypos = ss.getCurrentYPos();

ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);

// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
},

scrollWindow: function(scramount,dest,anchor) {
wascypos = ss.getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss.getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we've just scrolled past the destination, or
// we haven't moved from the last scroll (i.e., we're at the
// bottom of the page) then scroll exactly to the link
window.scrollTo(0,dest);
// cancel the repeating timer
clearInterval(ss.INTERVAL);
// and jump to the link directly so the URL's right
location.hash = anchor;
}
},

getCurrentYPos: function() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (window.pageYOffset)
return window.pageYOffset;
return 0;
},

addEvent: function(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
}

ss.STEPS = 50;

ss.addEvent(window,"load",ss.fixAllLinks);

</script>

<style type="text/css">
<!--
#TOC {
font-size: large;
background: #FFFF99;
float: left;
width: 25%;
margin-right: 2em;
border: 1px dashed #FF0000;
}
-->
*:target {
background-color: pink;
}
</style>

</head>
<body>
<h1 id="top">Smooth scrolling demo</h1>
<p>This script is by Stuart Langridge</p>
<p>Script updated 2006-01-31 to handle links with images in: thanks to
Gerd Xhonneux!</p>
<a href="#p0">Paragraph 0</a>
<a href="#p1">Paragraph 1</a>
<a href="#p2">Paragraph 2</a>
<a href="#p3">Paragraph 3</a>

<a href="#p4">Paragraph 4</a>
<a href="#p5">Paragraph 5</a>
<a href="#p6">Paragraph 6</a>
<a href="#p7">Paragraph 7</a>
<a href="#p8">Paragraph 8</a>



<a href="#zonk">I don't exist</a>
<h2 id="p0">Paragraph 0</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
<p><a href="#top">Back to top</a></p>
<h2 id="p1">Paragraph 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
<p><a href="#top">Back to top</a></p>
<h2 id="p2">Paragraph 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
<p><a href="#top">Back to top</a></p>

<h2 id="p3">Paragraph 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
<p><a href="#top">Back to top</a></p>
<h2 id="p4">Paragraph 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
<p><a href="#top">Back to top</a></p>
<h2 id="p5">Paragraph 5</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.</p>
<p><a href="#top">Back to top</a></p>




</body>
</html>

Gevak
На сайте с 04.12.2007
Offline
88
Gevak
#2

sportmaster, версия IE 6.0.2900.5512

переходы работают, но подсветка не работает(

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий