Cмотреть пример
<html>
<head>
<title>
Линк показа блока или слова с мерцающим фоном, затем возврат страницы вверх
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
// Realised by apacheJeff
// www.huntingground.freeserve.co.uk
flashme=""
step=5
pause=3000
flashrate=250
timer=""
function hlite_Init(){ // get page height and set top and bottom limit positions, prevent over-run
Top_Limit=16
Bottom_Limit=document.body.scrollHeight-(document.body.clientHeight+Top_Limit)
}
function whichway(callerID,targetID,dir,col){
clearTimeout(timer)
if(dir=="down"){
CallerID=callerID
TargetID=targetID
Dir=dir
Col=col
scrolldown(CallerID,TargetID,Dir,Col)
}
else{
CallerID=targetID
TargetID=callerID
Dir=dir
Col=col
scrollup(CallerID,TargetID,Dir,Col)
}
}
function scrolldown(callerID,targetID,dir,col){ //scroll down
caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2) // calling elements position - half window height
target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2) // target elements position - half window height
if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past page top
if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit} // prevent scrolling past page bottom
clearInterval(flashme)
flash(targetID,col)
/*
while(document.body.scrollTop >-5&&document.body.scrollTop<target_pos){ // scroll to target element
window.scrollBy(0,step)
}
*/
timer=setTimeout(function(){scrolldown(callerID,targetID,dir,col)},10)
if(document.body.scrollTop >-5&&document.body.scrollTop<target_pos){
window.scrollBy(0,step)
done=0
return
}
else{
clearTimeout(timer)
done=1
}
if(done==1){
if(dir=="down"){
Dir=dir
CallerID=callerID
TargetID=targetID
setTimeout("document.getElementById(TargetID).style.backgroundColor='';clearInterval(flashme);scrollup(CallerID,TargetID,Dir)",pause)
}
}
}
function scrollup(callerID,targetID,dir,col){ //scroll up
caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2)
target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2)
if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past top of page
if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit} // stop scrolling past page bottom
clearInterval(flashme)
flash(callerID,col)
/*
while(document.body.scrollTop >= caller_pos+5){
window.scrollBy(0,-step)
}
*/
timer=setTimeout(function(){scrollup(callerID,targetID,dir,col)},10)
if(document.body.scrollTop >= caller_pos+5){
window.scrollBy(0,-step)
done=0
return
}
else{
clearTimeout(timer)
done=1
}
if(done==1){
if(dir=="up"){
Dir=dir
CallerID=callerID
TargetID=targetID
setTimeout("document.getElementById(CallerID).style.backgroundColor='';clearInterval(flashme);scrolldown(CallerID,TargetID,Dir)",pause)
}
}
}
flashme=""
function flash(whichID,col){
clearTimeout(flashme)
if(document.getElementById(whichID).style.backgroundColor==""){
document.getElementById(whichID).style.backgroundColor=col
}
else{
document.getElementById(whichID).style.backgroundColor=""
}
WhichID=whichID
Col=col
flashme=setTimeout("flash(WhichID,Col)",flashrate)
}
// -->
</script>
</head>
<body onload="hlite_Init()">
<a id="caller9" href="#null" onclick="whichway('caller9','target9','down','gold')">проверка</a> When you have a large amount of text on your page so that your reader has to scroll down the page
and you explain something at the top of the page that is refering to something further down the page (out of view), sometimes it would be better if you could actually point out what you are
referencing.
<p>
Example 1:
</p>
<p>
I want to make sure you read the 3<sup>rd</sup> <a id="caller1" href="#null" onclick="whichway('caller1','target1','down','gold')"><font color="blue"><b>paragraph</b></font></a> that I am
referring to now, but which you cannot see because it is lower down the page<br>
So ... I create a keyword by emphasising the word paragraph, in bold, and make it a link.
</p>
<p>
When you click the link the page scrolls down to bring the paragraph into view, the background of the paragraph flashes, and the page scrolls back up.
</p>
<p>
Example 2:
</p>
<p>
I want to point out a specific <span id="target3"><a id="caller2" href="#null" onclick="whichway('caller2','target2','down','red')"><font color="blue"><b>word</b></font></a></span> in that
paragraph<br>
</p>
<hr>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
<div style="margin-left: 2em">
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
</div>
<div id="target1">
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy <span id="target2">This Word!</span> Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
</div>
<div style="margin-left: 2em">
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
</div>
<p>
<a id="caller3" href="#null" onclick="whichway('caller3','target3','up','gold')"><font color="blue"><b>Try Me</b></font></a>
</p>
<hr>
To create a <font color="blue">keyword</font> place it in a link, and give the link a unique <font color="red">ID</font>, include the onclick event which will pass the relevant arguments to
function whichway('caller_ID','target_ID','direction','colour').
<div style="margin-left: 2em">
<a id="<font color=">caller1" href="#null" onclick="whichway('<font color="red">caller1</font>','target1','down','gold')"><font color="blue">Keyword</font></a>
</div>
<p>
The target is simply:<br>
<span id="target1">Highlighted Text</span>
</p>
<p>
Each separate caller and individual target must have its own unique identity, but you can call the <span id="tar">same target</span> with more than one caller.
</p>
<p>
IE:<br>
Caller1 - Target1, Caller2 - Target1
</p>
<p>
<a id="caller4" href="#null" onclick="whichway('caller4','tar','up','#000000')"><font color="blue"><b>Try Me</b></font></a> and <a id="caller5" href="#null" onclick=
"whichway('caller4','tar','up','white')"><font color="blue"><b>Me</b></font></a>
</p>
<div class="copy">
<pre>
<script type="text/javascript">
<!--
// Realised by apacheJeff
// www.huntingground.freeserve.co.uk
flashme=""
step=5
pause=3000
flashrate=250
function hlite_Init(){ // get page height and set top and bottom limit positions, prevent over-run
Top_Limit=10
Bottom_Limit=document.body.scrollHeight-(document.body.clientHeight+Top_Limit)
}
function whichway(callerID,targetID,dir,col){
if(dir=="down"){
CallerID=callerID
TargetID=targetID
Dir=dir
Col=col
scrolldown(CallerID,TargetID,Dir,Col)
}
else{
CallerID=targetID
TargetID=callerID
Dir=dir
Col=col
scrollup(CallerID,TargetID,Dir,Col)
}
}
<\/pre>
function scrolldown(callerID,targetID,dir,col){ //scroll down<br>
caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2) // calling elements position - half window height<br>
target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2) // target elements position - half window height<br>
if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past page top<br>
if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit}<br>
clearInterval(flashme)<br>
flash(targetID,col)<br>
<pre>
while(document.body.scrollTop >-5&&document.body.scrollTop<target_pos){ // scroll to target element
window.scrollBy(0,step)
}
if(dir=="down"){
Dir=dir
CallerID=callerID
TargetID=targetID
<\/pre>
setTimeout("document.getElementById(TargetID).style.backgroundColor='';clearInterval(flashme); scrollup(CallerID,TargetID,Dir)",pause)
<pre>
}
}
function scrollup(callerID,targetID,dir,col){ //scroll up
caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2)
target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2)
if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past top of page
if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit} // stop at page bottom
clearInterval(flashme)
flash(callerID,col)
while(document.body.scrollTop >= caller_pos+5){
window.scrollBy(0,-step)
}
if(dir=="up"){
Dir=dir
CallerID=callerID
TargetID=targetID
<\/pre>
setTimeout("document.getElementById(callerID).style.backgroundColor='';clearInterval(flashme); scrolldown(CallerID,TargetID,Dir)",pause)
<pre>
}
}
function flash(whichID,col){
if(document.getElementById(whichID).style.backgroundColor==""){
document.getElementById(whichID).style.backgroundColor=col
}
else{
document.getElementById(whichID).style.backgroundColor=""
}
WhichID=whichID
Col=col
flashme=setTimeout("flash(WhichID,Col)",flashrate)
}
// add onload="hlite_Init()" to the opening BODY tag
// -->
<b>
</script>
<a id="caller1" href="#null" onclick="whichway('caller1','target1','down','gold')">Keyword</a>
<span id="target1">Highlighted text</span>
<a id="caller2" href="#null" onclick="whichway('caller2','target1','up','blue')">Keyword</a>
</pre>
</div>
<p>
Note:<br>
In order to test the script yourself, once you have copied the above into your page you need to make your page long enough to scroll. To do this add about 20 line breaks<br>
between caller1, target1, and caller2.
</p>
<p>
The script ended up longer than anticipated because I had to include some preventative measures to stop the browser locking up.<br>
This happened because I am using the <i><b>while</b></i> statement, and through experimental mishaps (positioning the caller and/or target at the extreme top or bottom of the page) I found that
if the scroll went over the upper and lower limits of the page the <i><b>while</b></i> loop would not terminate, hence a lockup.<br>
Function <b>Init</b> and two if statements in each function prevent this from happening.
</p>
<p>
If you use this script and should have the misfortune to experience a lockup just increase the variable <b>Top_Limit</b> value <span id="target9" width="200"><img src="00001.jpg" width="150"
id="caller9"></span>
</p>
</body>
</html>
|