How to make button always present on the page?

Question

4.00/5 (1 vote)

See more:

Guys I'm sure that already exists, but I'm not google in the right way, sorry for that.

I need a simple script where in the side of the page there is a button that is always present as long as user scroll the page.

I know how to do the "go to bottom" thing, I just dont know how to make that button/link always present.

Any idea?

Posted 16-Apr-11 5:21am

Maxdd 7

Add a Solution

2 solutions

Solution 1

use the style position & set it to 'fixed'

eg:

<div style="removed:fixed;">
 Your content
</div>

Also use the left & top style elements to position it in the page

== edited ==
use position:fixed. It's shown as removed:fixed above. Don't know why

Posted 16-Apr-11 7:15am

strogg

Updated 16-Apr-11 8:06am

v2

Comments

Maxdd 7 16-Apr-11 17:32pm

It's perfect, thanks!

Maxdd 7 16-Apr-11 17:34pm

Wow... those div's do not appear on Firefox 3.6. There's any trick for that?

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

strogg · Accepted Answer · 2011-04-16T22:53:00

Solution 2

It works. Save this piece of text to a html file & check

<html>
<body>

<div style="position:fixed; left:20px; top:20px; background-color:#ff4;">
Fixed element<br/>&nbsp;
</div>


<div style="height:1000px;"></div>

</body>
</html>

I've checked this in Firefox 3.6.2

However, it will not work in IE6. IE 7 & 8 supports it only if you have turned on standards compliant mode (when you include the DOCTYPE ) like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Posted 16-Apr-11 22:53pm

strogg

Updated 16-Apr-11 22:57pm

v2

Comments

Maxdd 7 17-Apr-11 10:03am

I was using

#fixed { position: fixed; left: 40px; width: 40px; height: 40px; }

but in firefox it was off limits. With top=90% I have it where I want. Thanks again for the excelent answer.

Maxdd 7 17-Apr-11 10:06am

By the way for some reason I'm placing images on those divs and on firefox they appear with less resolution than on Chrome. Is any way to avoid that ?

strogg 18-Apr-11 3:08am

Can't tell unless i see the code & the picture. By the way, you don't have to use top:90% to place it at the bottom. It'll only be approximate. Use bottom position instead :
left:0px; bottom:0px;
(without specifying top). It'll stick to the bottom & the element's height won't have any adverse effects on the position. (Likewise, you can also use bottom & right)

Maxdd 7 18-Apr-11 11:11am

Thanks again for the bottom atribute :)

The code is this:
<div style="position: fixed; left: 20px; bottom:0px;">
a href="#" önclick="window.scrollTo(0,0); return false">
<img src="images/down.jpg" alt="Go to bottom" BORDER=0 width="40"
height="40" />
</div>

And the images here (firefox on the left)
http://img62.imageshack.us/img62/8559/screenshotvxt.png

What do you think?

Maxdd 7 18-Apr-11 11:27am

With .png images happens the same. Tested on another computer, last Chrome version, IE8 and Firefox 4. Happens only with Firefox and with the last version it's even worse picture quality.

You can look at it directly :) http://apkitchen.pt.vu (i hope not desrespecting any rule posting here this website - it's just for comparison)

strogg 19-Apr-11 7:31am

Couldn't see the img @ imageshack - it was blocked. But looked at apkitchen and Holy Macro!! The image's size is 1280x1024 & you're resizing it to 40x40? Browsers don't do a good job at such big resizes and neither should you expect to. For best results, you must resize images to your requirement using imaging tools and upload. Try not to set height & width inside img tag.
Good luck

Maxdd 7 19-Apr-11 13:20pm

I had no idea, thank very much :) That solved the problem :)