Does anyone have a code for a page up button with endless scrolling? So no matter where the visitor is on the page, they will always see the button to bring them back to the top of the page.
Give this a try:
<div id="toTop" style="position: fixed; right: 20px; bottom: 20px;" onclick="javascript: scroll(0, 0);">Top</div>
You can fancy it up with more CSS and a smooth JavaScript scroll behavior if you want, but this should at least get you started.
Related
I've been working on a simple website for a friend and decided to use Weebly (yes I know, nooby) since I didn't want to start from scratch for a simple website. I've added a fixed navigation bar on the right side of the page in form of circular buttons with links attached to them. Unfortunately, as I'm scrolling, the links and hover effects stop working (buttons still scroll properly) once I reach a text box on the page. As soon as it passes it, they work again. Since I'm using Weebly I can't fully access all of the html in the page but I have full access to the CSS files. This is what my code looks like for the nav bar with 3 buttons:
<div data-spy="affix" class="offset8 span1 well offset7 small nav">
<ul class="nav nav-list">
<p><a href="#A"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
<p><a href="#B"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
<p><a href="#L384"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
</ul>
</div>
And here's the CSS:
nav {
position: fixed;
float: right;
right: 0px;
!important;
}
And here's a couple images of it in action, showing the issue:
Again, I unfortunately can't access the code for the textbox because it's in Weebly.
Any help would be much appreciated. Thanks!
Your css is wrong. It should be something like this:
ul.nav {
position: fixed;
z-index: 1000;
right: 0px;
top: 20%; /* Change this to your needs */
}
In order to teach the different components of a website, I have a giant image (made in photoshop) with a bunch of boxes labeled header, sidebar, content, footer etc all in one image. Using absolutely positioned divs with images inside, I have made it so that when moused over certain parts of the image, like for example the logo, a box appears with information about that specific part of the website and this box appears on top of the logo.
The problem is that this doesn't seem to work in internet explorer (the images never appear) and the images are out of place on a Mac in Safari. The feature I am describing can be seen here
and some samples from my code are below. Is there a better way I can accomplish this task, or solve the problem of the images not appearing in internet explorer and being positioned differently on Macs in Safari?
HTML
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326" height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890" alt="Website Layout">
CSS
.look:hover img{
visibility:visible;
}
.look {
position: absolute;
left: 320px;
top: 328px;
}
#look1 {
top:211px;
left:53px;
}
#look2 {
top: 205px;
left: 487px;
}
#look3 {
top: 282px;
left: 403px;
Something like this to complement the comment:
<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
<p style="width:800px;margin:0 auto;"> </p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div>
rest of look things here.
</div>
I have a modal popup window and I'm trying to position my error message for a required field. As you can see, I get a scroll bar but I would like the error message to hang off of the popup window (as I've highlighted with the dashed line). Is this possible?
HTML:
<span class="field-validation-error" data-valmsg-for="Street1" data-valmsg-replace="true" style="z-index: 99999; position: absolute; top: 96.953125px; left: 315.5625px;width: 150px;"><span for="Street1" class="" style="">This is a required field.</span></span>
I ended up moving the error message to the middle of the textbox. I didn't want to increase the width of the modal window just to make room for the error messages. That would be too much white space.
I have an animated canvas and i am trying to overlay a responsive web template on top of it, however the web template just sits at the bottom of the canvas and not on top of it. I have tried to change the absolute layout but that then removes the responsive aspect of the website.
I have also tried to add a zindex but again that didn't make any difference, any advice or nudge in the right direction would be appreciated.
A link to the template is below
http://www.redstardigitalmedia.co.uk/blue/index.html
Thanks
I modified your page using chrome developper tool, I've added to your canvas element:
<canvas id="world" width="1600" height="779" style="
z-index: -1;
position: absolute;">
and to your page :
<div class="gridContainer clearfix" style="
position: absolute;
z-index: 1;">
And it works fine (although the canvas animation fluency could be improved, do you use requestAnimationframe ?)
I have a div element that at the beginning is hidden. It appears when a button is clicked. the problem is that this div has a scroll and when it appears, it is at the end of scroll. How can I fix this?
The code is something like this:
<div style="width: 412px; height: 351px; overflow: auto; position: relative;">
<div style="width: 540px;">
Here is a form
</div>
</div>
The first div is that is hidden at the beginning.
On your button that displays the div, add this javascript to set the div to be scrolled to the top.
document.getElementById('id').scrollTop = 0;
Per your comment, if you want to set the scroll without modifying the button's code, you could try running it on page load:
<body onload="javascript: document.getElementById('id').scrollTop = 0;">
Or, you could run it at the bottom of the page:
<script type="text/javascript">
document.getElementById('id').scrollTop = 0;
</script>
I would suggest showing your code, providing a link, or creating a test page for people to view and debug. It's difficult to see what's going on without some context.
Here's an example that, I believe, shows what you want: http://jsbin.com/emoji4/edit
This uses the jQuery library, so I'm not sure it will meet your needs.