Welcome to WebmasterWorld Guest from 54.163.35.238

Forum Moderators: open

Message Too Old, No Replies

Top button does not work

     

toplisek

11:56 am on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

12:26 pm on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



<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

5:44 pm on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

9:05 am on Jun 24, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month