I have a web app with multiple canvases displayed on a single page. This makes the page very long and a lot of scrolling is necessary from the client.
To enhance user accessibility I have added a footer class:
HTML:
<footer class="site-footer">
<a href="#" style="text-align:inherit; position: relative;
vertical-align: inherit; left: 399px; width: 146px;"
data-scroll="claims">TOP OF THE PAGE</a>
</footer>
CSS:
.site-footer, .page-wrap:after
{
height: 52px;
}
.site-footer
{
background: orange;
border:2px solid white;
}
This allows the user to directly jump up to the top of the page once they have scrolled to the very bottom of the page.
I was wondering if there was a way to make this footer available at all views of the page, and not just only at the very bottom. That way the client may choose to scroll to the very top of the page from only the middle of the page and not the very bottom.
I have tried playing around with the CSS property position, but to no avail. Can anyone help?
Also further suggestions on how to make my user experience cooler is very much appreciated.
Thanks.
Check out Smooth Page Scroll to Top with jQuery for an example of this type of effect.
Here is a demo.
Here is the code for that:
CSS:
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('icon_top.png') no-repeat;
}
HTML:
Scroll
...
Bunch of content here, big enough to make the page scroll in order to read it all.
...
JavaScript/jQuery:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
}
else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
Used fixed positioning:
.site-footer {
position: fixed;
bottom: 0;
left: 0;
}
position: fixed means the element will be removed from the normal document flow and positioned relative to the viewport (browser window).
The code above will force your .site-footer element to always be visible at the bottom left of the screen (use right: 0 instead if you'd like it on the right side). Some additional code may be required, but it's not possible to tell that from what you have provided.
Related
I'm currently trying something out which i saw on another website.
Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.
I already tried position: sticky etc. but it did not worked as I wanted.
Can someone help me? I would be so happy!
.poster-middle {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-middle-img {
margin-top: 500px;
}
.poster-left {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-left-img {
margin-top: -700px;
}
.poster-right {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-right-img {
margin-top: -700px;
}
<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>
right now everything is scrolling up together
You can achive this with pure css.
The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.
When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.
position: -webkit-sticky;
position: sticky;
bottom: -200px;
margin-bottom: 300px;
The rest is normal positioning.
I created a little fiddle to show a full example. You can build your solution from there very easily.
I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)
You can use jquery to do this
var src = ['url_image1.jpg', 'url_imafe2.jpg'];. // Array of source of images
var i = 0;
$(document).ready(function() {
$(window).bind('mousewheel',function() {
$('#imgs').hide().delay(1000).fadeIn();
if (i==1){
$('#imgs').attr('src', src[i]);
i=0;
}
else {
$('#imgs').attr('src', src[i]);
i=1;
}
});
});
<style>
div{height:500px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="imgs" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
</div>
I might me using the terms absolute and relative wrong, but hopefully you get what I mean. I want to give my footer some "bottom: 10px" so that it stays at the bottom of the page, no matter if the page's content is more or less than 100% of the browser window. I tried positioning it absolute but it will be positioned relative to the browser window then, not the body.
This is an example: http://public-demo.webflow.com
Any ideas? Thank you :)
add this to the body
position: relative
and add this to the footer
position: absolute
This way the footer will be positioned accordingly to the body
It would be good if you set the bottom to 0px.
If you want to fix this kind of problem, you can inspect your element with Mozilla, and play your code there.
FOOTER TO STICK BOTTOM IF CONTENT IS SMALLER THAN THE VIEWPORT and BEHAVE NORMAL IN OTHER CASE
You'll need a tiny JS for that.
$(function () {
var bht = $('body').height();
var wht = $(window).height();
if (bht < wht) {
$('#footer').css("position", "absolute");
$('#footer').css("bottom", "10px");
}
});
Check this fiddle - http://jsfiddle.net/3N4L9/4/
FOOTER TO STICK TO BOTTOM IN ANY CASE
This will generate same output as required :
Like page 1 : http://jsfiddle.net/3N4L9/1/
Like page 2 : http://jsfiddle.net/3N4L9/2/
It'll keep footer on the bottom of page irrespective of content and scroll.
.fixedFooter{
width:100%;
position:fixed;
bottom:10px;
}
That should work
.footer-text {
background-color: rgba(0, 0, 0, 0.49);
bottom: 10px;
color: white;
left: 0;
margin-top: 10px;
position: absolute;
right: 0;
text-align: center;
z-index: 999;
}
I would like to ask you guys if how can I create a floating window in code igniter. The scenario is when I clicked a textbox it would show a floating window with a close button on the upper right corner. I'm new in using code igniter. Thank you for the ones that would give me solution.
If I am correct, Code igniter is a PHP framework. What you usually build a modal pop up window with is javascript and CSS. The following code should be pretty readable. the fadeIn(); methods come with jQuery out of the box - and a tricky way of absolutely positioning the box requires a width and height. Here is a jsFiddle
HTML
<div class="box">
This is your box
<button id="close">close</button>
</div>
<button id="open">open</button>
CSS
.box {
position: absolute;
width: 400px;
height: 200px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: 1px solid red;
display: none;
}
jQuery
$('#open').on('click', function() {
$('.box').fadeIn();
$(this).hide();
});
$('#close').on('click', function() {
$('.box').fadeOut();
$('#open').show();
});
I want to make a header div (like a banner) fixed only when the header is trying to go out of the screen as the user scrolls down. Is it possible to do without using JS? For an example in Facebook timeline, if we scroll down a banner floats up as soon as the page's header goes out of the screen. My question is, is it possible to do with only CSS?
In case it is not clear enough, I want to know whether a style "position: fixed" can be applied conditionally like when 80px of the page is scrolled.
Yes. You can do it with just CSS. This is done by having a normal scrolling header, placed above a fixed one, which shows up only after the normal one scrolls up above it. This is kind of how http://techcrunch.com is doing it.
Update [10/31/2013] - Techcrunch changed their UI recently so you cannot see this there anymore!
Check this demo: http://jsfiddle.net/WDnyb/2/
HTML
<div class="header">Header</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
Relevant CSS
.header {
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
position: relative;
height: 100px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
margin-top: 100px;
}
This can now be done properly and without javascript with position: sticky.
Refer to https://css-tricks.com/position-sticky-2/ for examples.
warning: At the moment of writing, it is not supported on IE11, opera mini, and android's stock browser: https://caniuse.com/#feat=css-sticky
It is not possible using css. You can do using JavaScript or jQuery. Because it need some conditions.
Html----included my content within
<header1>
..............
</header1>
JS
<script>
$(document).ready(function() {
var $header1 = $("header1"),
$clone = $header1.before($header1.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$('body').toggleClass("down", (fromTop > 200));
});
});
</script>
i have used above script to make a header fixed,its working fine in googlechrome not in firefox.....
I have two divs:
-A header bar, which is fixed while scrolling, and stuck at the top of the page.
-A notification div, which contains a message banner that will slide down if triggered.
The header bar is fixed to the top fine, but I can't seem to get the notification div to fix itself just under it. Every time I try this, this div fixes to the top of the page in-front of my header bar; seemingly replacing it. Padding doesn't seem to help.
Can anybody offer me any suggestions, please?
Here is the working div:
#header {
text-align: left;
background-image:url(../Resources/Banner2.gif);
background-repeat:no-repeat;
background-color:#00ed32;
color:#FFF;
position:fixed;
width:100%;
top:0px;
left:0px;
padding:15px;
}
Here is the div I would like to fix under it:
.notify {
background: url(../resources/gradients.png)
repeat-x 0px 0px;
top: -40px;
left: 0px;
position:fixed;
z-index: 100;
width: 100%;
overflow: hidden;
}
The easiest way to do this is to put a "holder" bar at the top of the page and then nest the "header" and "notification" elements within there.
For example:
CSS
#holder {
left: 0;
position: fixed;
right: 0;
top: 0;
}
#header, .notify{
//what ever styles you have
//position: relative or static
}
HTML
<div id="holder">
<div id="header">...</div>
<div class="notify">...</div>
</div>
Edit
Working example: http://jsfiddle.net/Q6CWv/
Update
Adding a slide down effect on the .notify element should be fairly straight forward if you are using JQuery:
$('.notify').slideDown();
Working example: http://jsfiddle.net/Q6CWv/1/
Although the answer by #MyHeadHurts was somewhat helpful, it wasn't the best solution for me as when the notification popped down, it either overlapped the header bar or made it so that the header bar would not pop down until the notification did. I did have them in separate divs as suggested, but this could have been my fault.
My solution was to go into the JavaScript of the pop-down notification and change the "top" value to 3% of the page height. This now works perfectly, except that the header and notification bar don't align correctly if there are extreme levels of zoom applied.