Scrolling button on the side of the page

[alfordjj]

I'm not exactly sure what I'm looking to do is called, all I know is that I've seen it out there. I'm hoping one of you smart folks can at least point me in the direction I need to go.

I've got an order form page that creates itself by reading a flat file. There are a lot of items, so the page is very long. I've got a "Submit" button at the top and bottom of the page, but there is a lot of space between them and I'd like the "Submit" button to be more accessible. What is the method of creating one of those "sliding" (for lack of a better word) buttons that moves along with the scrolled main section?

At first, I thought it must be a JAVA thing, but then I wondered if I could do it with a <DIV>.

Thanks in advance for any ideas you might have!

 

[feherke]

Hi

You can solve it with CSS. Give it [tt]position: fixed[/tt].

( Note that [tt]position: fixed[/tt] works only in standard compliant browsers. However there are workarounds for Explorer 6. )

Feherke.

http://rootshell.be/~feherke/

 

[feherke]

Hi

By the way,

At first, I thought it must be a JAVA thing

Is certainly not. Java can not do such things. But JavaScript can.

Feherke.

http://rootshell.be/~feherke/

 

[vicvirk]

Here's a decent tutorial on how it is done...once the page loads, look at the top left hand corner for a box that reads "This content stays afloat..." then scroll up and down the page....

http://javascriptkit.com/javatutors/static3.shtml

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers

 

[alfordjj]

feherke,

HAHA!! Got me there. I was too busy multitasking to proof read my post.

vicvirk,

I did Google it, but I wasn't sure exactly what to call it. I tried several things, but didn't find the answer. Whenever my brain gets stuck in park, I come on here for you guys to give me a gear switch.

Thanks to both of you. I'm going to look into both of your solutions.

Thanks again!

 

[alfordjj]

Well, I went to the website vicvirk recomended and got a great code that I just cut and pasted into my page, tweaked it up for making 2 "static" items (one on each side), and it worked great. Or so I thought...

It works great in Chrome and Firefox, but not in IE. I should probably post this in the JavaScript section, but I started here, so I thought I'd go ahead and finish here. Here is my code:

<?php

...

echo "<div id=\"staticcontentL\" style=\"position:absolute; border:1px solid black; background-color: lightyellow;\">
<input type=\"submit\" value=\"Click Here to Preview Order\" />
</div>";
echo "<div id=\"staticcontentR\" style=\"position:absolute; border:1px solid black; background-color: lightyellow;\">
<input type=\"submit\" value=\"Click Here to Preview Order\" />
</div>";

?>

<script type="text/javascript">
//This script moves the <div> with id="staticcontent" down the page as it scrolls

//define universal reference to "staticcontent"
var crossobjL=document.all? document.all.staticcontent : document.getElementById("staticcontentL")
var crossobjR=document.all? document.all.staticcontent : document.getElementById("staticcontentR")

//define reference to the body object in IE
var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body

function positionit(){
//define universal dsoc left point
var dsocside=document.all? iebody.scrollLeft : pageXOffset

//define universal dsoc top point
var dsoctop=document.all? iebody.scrollTop : pageYOffset

//if the user is using IE 4+ or Firefox/ NS6+
if (document.all||document.getElementById){
crossobjL.style.left=parseInt(dsocside)+5+"px"
crossobjL.style.top=dsoctop+100+"px"
crossobjR.style.right=parseInt(dsocside)+5+"px"
crossobjR.style.top=dsoctop+100+"px"
}
}
setInterval("positionit()",100)
</script>

I know just enough JS to cut and paste my way into trouble! If I need to move this post to the JS section, let me know and I will.

Again, thanks in advance!

 

[Vragabond]

I think you should start anew. FF and Chrome should be able to produce such an effect without javascript and IE6 should be able to do it with a little hack. Search google for IE6 position fixed and you will find many tricks on how to do it (and the code using position: fixed will work in all other browsers).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]