jQuery Scroll to Top Control

[pookeyblow]

Hi guys!

Awesome little plugin!

I'm wondering if it's possible to have the up.png image set to 50% opacity, and when you hover it, it changes to 100% opacity.

And how do I do this? Does anyone know? I'm new to javascript, so I could need a little help here!


cheers,

pookey

[ddadmin]

Sure, try the below modified .js file.

[pookeyblow]

wow! thanks a lot!

a little question: in the modified version, the up.png will show when you hover even though you haven't scrolled yet. Is it possible to prevent it from doing this? It works with the old unmodified version..

thanks again!

[ddadmin]

Ah yes. Try the below improved version then.

[pookeyblow]

hey thanks a lot for doing this!!!

[WycheGnome]

I have been using the jQuery Scroll to Top Control v1.1 script with excellent results on a single level web site. Single level for this purpose means that all the html files are in the root directory of the site although the image itself is in an images sub-directory.

I now wish to use it on a web site with multiple levels - i.e. where some html is in the root directory and some in various sub-directories.

I use Dreamweaver to manage my files and the relevant script is held in a library file for automatic inclusion on all the web pages. Because Dreamweaver adds bits to the pages (not visible in its editor but locatable when viewing page source in the browser) I find that pages in the sub-directories cannot locate the scroll image file. If I alter the script so that it works on the sub-diectory pages, the problem of non display of image moves to the root directory pages.

Is there a way of either turning off this unwanted extra code in Dreamweaver or of modifying the script so it will find the scroll image file regardless of which level the html page is placed in?

Or is the only way to have library files and versions of scrolltopcontrol.js for each directory level which then negates the benefit of a single script does all approach in conjunction with the css.

Any guidance you can give will be appreciated.

[ddadmin]

The easiest way is just to use absolute URLs to both the .js file in the HEAD section of your pages, and within the .js file itself, use an absolute URL to the image. So for example:

<script type="text/javascript" src="http://mysite.com/subdir/scrolltopcontrol.js">

/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>

And inside the .js file:

	controlHTML: '<img src="http://mysite.com/subdir/up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

[WycheGnome]

Hi again, and thank you for responding quickly.

I'm still stuck I'm afraid and can't fathom out what I'm doing wrong or missing.

On the 'single level' site www.wychehome.co.uk I have changed the script calls to absolute http addresses and it is working fine.

On the multiple level site www.s-r-s.org.uk I have also changed the calls to absolute http addresses but it is now not working at all. To match the divs on the pages I have changed the div reference from topcontrol to main and the anchorkeyword to #topof page. The image name is also altered. I had made these changes previously when it was partially working.

I have also altered the call to the anylinkcssmenu routine to an absolute reference and this worked both before and after making the change.

I have test downloaded the scripts and image file and these are definately where they should be and where the scripts expect to find them.

The answer is probably a simple error or omission on my part - but I just can't see where.

Any additional help will be appreciated - but please don't interupt your Christmas festivities to rush out a reply.

Happy Christmas.
John

[ddadmin]

Hmm there might be a corruption in the jquery file you downloaded. In FF I get the error:

Error: illegal character
Source File: http://www.s-r-s.org.uk/scripts/jquery.min.js
Line: 1, Column: 1
Source Code:
{\rtf1\ansi\ansicpg1252\deff0\deflang2057{\fonttbl{\f0\fswiss\fcharset0 Arial;}}

Try replacing:

<script type="text/javascript" src="http://www.s-r-s.org.uk/scripts/jquery.min.js"></script>

in the HEAD section of your page with:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

[WycheGnome]

Hi there again. Christmas and visitors delayed my getting further with this.

I tried changing the call to the Google location but this made no difference. Then I downloaded a new version and saved it off as a unicode file rather than an ansi one. This doubled the size of the file! Still no joy.

I next tracked the code back to its origin at jquery.com and downloaded another copy. The file size was bigger again, although not a lot bigger. The wychehome.co.uk site worked perfectly with this new copy and the s-r-s.org.uk site produced an up arrow at top left instead of bottom right.

Time to revisit the changes I had made to scrolltotop.js and I found I had made one too many. I had changed one of the calls to "main" instead of "topcontrol" on the grounds that my pages did not have a div by the latter name; and I had only done this for the copy used on the s-r-s site.

Reverting that call to the "topcontrol" div cured the problem and the upward scroll now works as you had intended and I had wanted.

A cockup of my own making!

I now use the version obtained from jquery, located in my own web sites rather than Google, and called by absolute web address.

Many thanks for your help, it is much appreciated.

Happy New Year.

John