Hi there. I’m creating a web page that randomly shows images when when a button is clicked. I appear to be having 2 main problems with it so I’ll begin with what seems to be the easiest one to tackle.
as the user scrolls down the page I need to keep the button statically, in the top right corner. i’ve been at it for hours so any help would be appreciate. here’s the relevant code:
css
#button{
position: absolute;
top: 10px;
right: 10px;
width: 120px;
height: 24px;
z-index: 999;
opacity: 0.8;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 300%, 70% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
/* Label */
font-family: Lucida Sans, Helvetica, Verdana, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#button:hover{
cursor: pointer;
opacity: 1;
}
javascriptto implement button:
function adddiv(){
var newD = document.createElement(“div”);
newD.id = (“button”);
newD.innerHTML = “Show Photos”;
document.body.appendChild(newD);
document.getElementById(“button”).onclick = addpic;
}
and this is the script I’m using to try to keep the button static:
function buttfollow(){
button.style.top = document.body.scrollTop + document.button.scrollTop+10;
}
window.onscroll = buttfollow;
The error console is telling me that “button.style” is undefined so I tried “document.getElementById” but the same error message came up.
I’ve been doing javascript for a while but please make your reply as simple as possible because I confuse myself easily!
Thanks!