| Top button does not work
|
toplisek
msg:4329314 | 11:56 am on Jun 22, 2011 (gmt 0) |
I have tested top button but do not know why it does not work.
Is there issue with 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" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript" src="javascript/motools.js"></script>
<style type="text/css">
.preload {display:none;}
#gototop{
width: 95px;
height: 30px;
position: fixed;
right: 3px;
bottom:3px;
z-index:1000000;
}
#top {
position:absolute;
top:0;
left:0;
}
#gototoplink {
text-decoration:none;
border: 0 none;
outline-width:0;
}
#gototopbutton{
cursor: pointer;
background: url(images/arrow.gif) no-repeat scroll 0px 0px;
background-color: transparent;
color: #000000;
font-size: 14px;
height: 30px;
padding-top: 7px;
padding-right: 0px;
padding-bottom:0px;
padding-left: 7px;
text-align: center;
width: 95px;
display: block;
}
#gototopbutton:hover,#gototopbutton:focus,#gototopbutton:active, a:hover #gototopbutton{
color: #4D87C7;
background: url(images/arrow_active.gif) no-repeat scroll 0px 0px;
background-color: transparent;
}
</style>
<script type="text/javascript">if( MooTools.version >= '1.2' ) {
window.addEvent('domready',function() {
new SmoothScroll({ duration: 250 }, window);
var gototop = $('gototop');
gototop.setStyle('opacity','0').setStyle('display','block');
});
window.addEvent('scroll',function(e) {
var gototop = $('gototop');
if(Browser.Engine.trident4) {
gototop.setStyles({
'position': 'absolute',
'bottom': window.getPosition().y + 10,
'width': 100
});
}
gototop.fade((window.getScroll().y > 200) ? 'in' : 'out')
});
} else {
window.addEvent('domready',function() {
$('gototop').setStyle('opacity','0');
new SmoothScroll();
var Change = new Fx.Style('gototop', 'opacity', {duration:250});
var scroll = window.getScrollTop();
if (scroll > 200){
if ($('gototop').getStyle('opacity','0') == 0){Change.start(1);$('gototop').setStyle('display','');}
}
});
window.addEvent('scroll',function(e) {
var scroll = window.getScrollTop();
var Change = new Fx.Style('gototop', 'opacity', {duration:250});
function Show(){ $('gototop').setStyle('display','');}
function Hide(){ setTimeout("$('gototop').setStyle('display','none')",250);}
if (scroll > 200){
if ($('gototop').getStyle('opacity','0') == 0){Show();Change.start(1);}
} else {
if ($('gototop').getStyle('opacity','1') == 1){Change.start(0);Hide();}
}
});
}
</script>
</head>
<body><a id="top"></a>
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="gototop" style="visibility: visible; opacity: 1;">
<a id="gototoplink" title="Top" href="">
<span id="gototopbutton">Top of page</span>
</a>
</div>
</body>
</html>
|
penders
msg:4329334 | 12:26 pm on Jun 22, 2011 (gmt 0) |
<a id="gototoplink" title="Top" href="">
<span id="gototopbutton">Top of page</span>
</a> |
|
Is this your 'top button'? You have nothing in your HREF attribute?! You need to set this to HREF="#top".
|
rocknbil
msg:4329503 | 5:44 pm on Jun 22, 2011 (gmt 0) |
Also set display block on your a . . . or put a border on it to see if it's rendering as anything other than a thin line.
#gototoplink {
display:block;
border: 1px solid #000; /* temporary */
text-decoration:none;
border: 0 none;
outline-width:0;
}
You also don't need a span inside the div to get a button. Put the BG on the anchor, skip the span, it's the display:block you were missing in sorting that out.
<a id="gototoplink" title="Top" href="#top">Top of page</a>
#gototoplink {
display:block;
height: 30px;
width: 95px;
text-decoration:none;
border:none;
outline:none;
background: transparent url(images/arrow.gif) top left no-repeat;
color: #000000;
font-size: 14px;
padding: 7px 0 0 7px;
text-align: center;
}
Then you can double the height of the actual arrow.gif and create a mouseover state like
mousout image
------------
mouseover image
and add
#gototoplink:hover { background-position: bottom left; color: #ff0000; }
|
toplisek
msg:4330411 | 9:05 am on Jun 24, 2011 (gmt 0) |
It works as posted rockbil.
1. Which setting is actually smooth scroll?
We have:
new SmoothScroll({ duration: 250 }, window);
if (scroll > 200){
if (scroll > 200)
{ var Change = new Fx.Style('gototop', 'opacity', {duration:250});
What are these settings?
2. I like to upgrade to updated version:
<script type="text/javascript" src="javascript/mootools-1.2.5-core-yc.js"></script>
<link rel="stylesheet" href="css/stylesheet1.css" type="text/css" />
Is this correct like:
<script type="text/javascript">if( MooTools.version >= '1.2.5' ) {
and how to move to separate file all after <script type="text/javascript">if( MooTools.version >= '1.2.5' ) {
3. How to show all the time Top button at the bottom locatio as I have to scroll to see Top button. It needs to be all the time seen on the bottom hand side.
|
|
|
