homepage Welcome to WebmasterWorld Guest from 54.196.62.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Top button does not work
toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4329312 posted 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

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



 
Msg#: 4329312 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329312 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4329312 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved