I am trying to test out a concept for a loading animation, but I have no idea where to start. Basically, I have a text box that is filled in automatically with some JavaScript on the page, but it can take a few seconds to load. I am looking for a way to put something resembling the IE11 indefinite-time progress bar inside it. It would be like a bar about 1/2 of the width of the box and only a few pixels in height that animates across the box. Something like this:
How can I do this in a way that will work in all major browsers (including mobile)?
This is my solution, hope that it helps you in the right direction (and I hope you don't mind using some jQuery):
HTML
<div id="container">
<div id="loading_bar"></div>
<input type="text" value="" id="input">
</div>
CSS
#input {
width:296px;
padding:2px;
position:absolute;
top:0;
left: 0;
border:1px solid #ddd;
margin:0;
z-index:1;
}
#container {
position:relative;
background:#ddd;
}
#loading_bar {
width:0;
padding:0;
margin:0;
background:#00f;
height:4px;
position:absolute;
top:2px;
left:0;
z-index:2;
}
jQuery
function to_zero(){
$("#loading_bar").css({'width':'0'});
}
function to_max(){
$("#loading_bar").animate({'width':'300px'}, 2000);
}
setInterval( function(){to_zero();to_max(); }, 2200);
DEMO
Browsers render borders statically;
About animating the border of a TextBox (presuming input:text or textarea) cross-borwser AND cross-platform is impossible. For a lesser scoped of browser, per say, modern browsers, there is css-level3 with border-image.
But it will be painfull.
About displaying a progress bar upon a TextBox, it will be quite easier, especially if your content is loaded via AJAX. It's all about a container displayed position absolute left top. Then the css animes the container.
See jquery-ui or search the net for 'animated progess bar'
I've always done 2 spans. You have one as the wrapper, with 100px. Then, As the % of loading, you just have the other span being x pixels wide.
You could then make a setTimeout function to keep the animation going. Slowing adding pixels until the inside span is as wide as the wrapper span.
This should load very fast.
Related
Today i found amazing filter button with 'circle black background' and i really liked it.
I want to integrate it in my website to study how to create it but i dont know how to start?
Maybe with create circle?
I have created floating button on my site (bottom right corner).You can find it here.When you scroll down to my website, the button will appear.So now i dont know how to create this circle with blurry background like example below?
My floating button
Sorry for my bad English!
I just created a playground for you here https://jsfiddle.net/rxnc3zb7/.
In general I added the following:
width:400px;
height:400px;
bottom:-150px;
right:-150px;
to the .go-top:hover. Set width, height, bottom and right values according to your needs. I've no tested it with the icon but I think you should hide it on hover (so .go-top:hover i {opacity:0}). But, if you want to center it you should set .go-top like this:
display:flex;
align-items:center;
justify-content:center;
In this way your icon will be aligned in any case.
Blur effect
For the blur effect I added a js code that simply add the class blur-content to the content container (in the example is .content) when the mouse is over on .go-top and remove it when mouse is out.
$('.go-top').hover(function(){
$('.content').addClass("blur-content");
},function(){
$('.content').removeClass("blur-content");
})
Additionally, I defined the blur-content class like this:
.blur-content{
filter:blur(3px);
}
The basic idea would be something like this. You can use CSS further to make it look more elegant. These applications generally have an Overlay in place which reacts to user button click or hover and display it.
You can use the below link to blur out your page contents or something similar
Full Page Blur in CSS
onBtnClick = ()=>{
document.getElementById("idBgOverlay").classList.toggle("overlayDisp");
}
.fullBg{
width:100%;
height: 300px;
background:orange;
}
.mybutton{
border:none;
border-radius: 50%;
color:#000;
background:#fff;
width:3rem;
height:3rem;
font-size:2rem;
z-index:2;
position:absolute;
}
.bgOverlay{
background:#101010c7;
position:absolute;
height:13rem;
width:13rem;
border-radius:50%;
top:-2rem;
left:-2rem;
display:none;
}
.overlayDisp{
display:block;
}
<div class="fullBg">
<div id="idBgOverlay" class="bgOverlay"></div>
<button class="mybutton" onclick="onBtnClick()"> + </button>
<div>
I'm using Bootstrap 3 and want to achieve this effect when the user scrolls past the large header image on my page. I need the background of the navbar to go from transparent to white. I looked in their code and I KNOW it is done with javascript, and even saw WHERE it was happening I think (look for the ID '#main-header' in that JS)...
Not knowing advanced Javascript aside, I'm looking for a way to apply this to my navigation bar when scrolling past a certain point. The class for my code is called 'navbar' and I would like it to turn white when it passes "#main". Let me know if you need more information, and thanks in advance if anyone wants to help!
The easiest way to accomplish what you're trying to do is a combination of some simple javascript (jQuery powered in this case) and CSS3 transitions.
We'll use JS to check for the windows scroll position on every scroll event and compare it to the distance of the bottom of the #main element - if the scroll position is greater, then we'll apply a class to the body to indicate we've scrolled past #main, and then we'll use CSS to define the nav styling for that "state."
So, our basic markup:
<nav class="nav">
[logo]
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>
And our javascript:
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
var stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.nav').addClass('past-main');
} else {
$('.nav').removeClass('past-main');
}
});
And, our styles:
.nav {
background-color:transparent;
color:#fff;
transition: all 0.25s ease;
position:fixed;
top:0;
width:100%;
background-color:#ccc;
padding:1em 0;
/* make sure to add vendor prefixes here */
}
.nav.past-main {
background-color:#fff;
color:#444;
}
#main {
height:500px;
background-color:red;
}
#below-main {
height:1000px;
background-color:#eee;
}
A working example on Codepen
This is how I did it here. I also employ some scroll throttling and a bit more complicated styling semantics, but this is the gist of it.
If you're using Twitter Bootstrap this can be achieved with the 'Affix' plugin
It's pretty straight forward to set up, here is the documentation
You could probably just use javascript element.scrollTop along with Jquery addClass and removeClass. Haven't tried it myself though.
Here's an overflow link for getting scrollbar position: How to get scrollbar position with Javascript?
I am trying to bring in a overlay that comes on the top of a image when you hover with your mouse. Currently I have it coming just from the top, and eases down to the bottom. What I am trying to achieve though, is have the overlay split into 2 sections, coming from the top left and bottom right and join in the middle. I know this is hard to understand with just text, so I created an image.
I have seen this done before, but am not sure what it is called, or how to achieve the effect. Help would be appreciated
Here's my stab at it: http://jsfiddle.net/
The basic idea is that you're just doing this, but with the wrapper element rotated. This solution would obviously need to checked for compatibility.
This could be achieved without a .slide element, but would require more manual positioning of the elements.
Here is a basic example using jquery.
Note, the cool kids would do this with css3.
http://jsbin.com/eyilog/1/edit
In this example the divs are absolutely positioned outside the containing element. overflow:hidden; makes sure they are invisible. On hover jquery animates their positions back inside the div, overlaying the content of the div.
To make it diagonal just use transparent images.
$(".text").hover(function() {
$(".topleft").animate({top: "+0px"}, 500);
$(".bottomright").animate({bottom: "+0px"}, 500);
});
<div class="text">
<div class="topleft"></div>
text
<div class="bottomright"></div>
</div>
.text {
background-color:red;
width:100px;
height:100px;
margin:auto;
overflow:hidden;
position:relative;
}
div div {
background-color:black;
height:50px;
width:100px;
position:absolute;
}
.topleft {
top:-50px;
}
.bottomright {
bottom:-50px;
}
this is the link
When you take the mouse over the four image boxes under 'TUI Exclusive Offering', you get the effect described in the question title.
html :
<div class="maindiv">
<img src="img/img.jpg" />
<div class="lower_div">
this is the lower div1<br>
this is the lower div2<br>
this is the lower div3<br>
this is the lower div4<br>
this is the lower div5<br>
this is the lower div6<br>
</div>
</div>
the way to make the lower_div sit at the bottom is to make its position absolute and bottom 0. But for whatever reason in my big html page , this technique is not working though it does work in another html page containing only this snippet.
So I am looking for another way to make the div sit at the bottom. Besides I also need to make it show up fully on mousehover.
How to achieve those ?
Here is a working demo: http://jsfiddle.net/qbyeC/
The javascript is simple when jQuery is involved. All you have to do is define on mouseenter and mouseleave for each maindiv.
$('.maindiv').on({
mouseenter : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:0,marginTop:0});
},
mouseleave : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'});
}
});
This checks for the lowerdiv class and animates it to the right position on each event. NOTE: The marginTop on the second line of mouseleave should match the margin-top css property on the lowerdiv class. This is the amount that you want the div to stick up when the mouse is not over the element.
The css should be modified to your liking, but these are the important parts:
.maindiv {
overflow:hidden;
position:relative;
}
.lowerdiv {
position:absolute;
width:100%;
bottom:0px;
top:100%;
margin-top:-40px;
}
The html code is how you put it except I changed lower-div to lowerdiv to match maindiv.
May be this will help you out.
SCRIPT
$(function(){
$(".maindiv").hover(function(){
$(this).children('.lowerdiv').stop().animate({top:0})
},function() {
$(this).children('.lowerdiv').stop()..animate({top:150})
})
})
HTML
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
CSS
.maindiv{
height:200px;
width:200px;
background:#CCC;
position:relative;
overflow:hidden;
float:left;
margin:10px;
}
.lowerdiv{
height:200px;
width:200px;
background:#797987;
position:absolute;
top:150px;
}
jsfiddle - http://jsfiddle.net/tRYTq/4/
you need a negative position (as they did it on the tui page), start with something like
position:absolute;
bottom:-20px;
and try around until it fits.
using jquery you then can do something like:
$('.maindiv').hover(
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':0});
},
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':-20});
}
);
http://api.jquery.com/hover/
Of course this way you always have to change the original position (-20) in your css AND the js while you try around to find the best starting position. You could do this more elegantly by storing the original_position before the animation starts, but that is maybe going to far here? I am rather new to stackoverflow
UPDATE 2
I found a tentative solution that currently works for me in Chrome on Mac OS X. You can check out my answer below for details. For those of you who are still trying to come up with CSS only solutions or JavaScript solutions, please keep going and let me know what you come up with! Please :)
UPDATE
The answer below is really close to an all CSS solution, so I'm going to try to make it work. In the meantime, I'm opening up this question to JavaScript solutions as well. How would you do it using JavaScript? All solutions are now welcome :)
Let's see if we can solve this one together!
I'm trying to set up a layout, check out the image...
I'm using the "sticky footer" technique, which works great, and I've set it up so that whenever one of the two columns gets taller, the other will also match its height, as described in this article. The problem, however, is that these two columns don't reach the footer naturally... I'm forcing the height through JavaScript.
Anyway, all the relevant code can be seen in the fiddle...
CODE
http://jsfiddle.net/UnsungHero97/XrJMa/embedded/result/
QUESTIONS
First big problem: how can I set it up so that the height of these columns reaches the footer below? I want it so that when the page loads, both pink and blue columns reach the bottom automatically.
How can I get it so that when the pink column grows beyond its current height, a local scrollbar appears, but when the blue column grows beyond its current height, the overall page scrollbar appears and the footer is pushed down?
- basically, I want the height of the pink and blue columns to ALWAYS be the same height but the height is only determined by the blue column; blue is dominant so it can expand the height of both columns; pink cannot expand the height, just be at the same height as blue
Can this functionality be achieved using only CSS?
Let me know if I need to clarify anything.
There were many issues, so I rewrote it. I have created exactly what you want. Enjoy. =)
http://jsfiddle.net/hRkx8/53/
The trick is to have your main region have a margin-bottom the same height as your footer (which you absolutely position). Thus as your blue thing gets larger, it will start pushing the bottom of the page a bit earlier than it normally would.
(edit: this version moves the footer, which is more difficult to do; however the question asked that the blue area be initialized to be as large as possible, see below for one way to do this)
Here we go! Unfortunately I have to include it inline, since jsfiddle has some severe bugs that prevent proper display. This version has the blue area start all the way at the bottom.
absolutely-positioned elements seem to have some trouble automatically scrolling as the page gets bigger, so I created a dummy #main div much like you did and had it fill the entire viewport, then inside that is both the #footer and #content (your blue and red stuff). The #footer is absolutely positioned so it takes up no space / the document doesn't care about it. As the #content expands, the #main container expands with it, dragging the footer along. The use of a margin-bottom is necessary to prevent the footer from hiding text.
The actual amount of CSS required to do this is, if you remove the demo stuff, just about 5 lines and dummy element.
<html>
<head>
<style>
body {
margin:0; padding:0;
}
* { /* just for demonstration */
box-sizing:border-box;
padding:5px;
border:1px dashed red;
-webkit-border-radius:10px; -moz-border-radius:10px;
background-color:hsla(0,50%,50%, 0.1);
}
/*important to use min-height not height*/
#main {
position:relative; width:100%; min-height:100%;
border:3px solid green;
}
#footer {
position:absolute;
left:0px; right:0px; bottom:0px; height:5em; /*can be anything*/
background-color:lightgrey;
}
#content {
position:relative;
box-sizing:border-box;
background-color:skyblue;
margin-left:auto; margin-right:auto;
padding-bottom:5em; /*must be same as #footer's height*/
margin-top:10%; /*browser bug: actually acts like 20%*/
width:50%;
min-height:80%; /*should equal 100%-marginTop*/
border:3px solid blue;
}
/* dependent elements */
#sidebar {
position:absolute;
top:0px; bottom:0px;
right:100%; width:7em;
background-color:pink;
overflow-y:scroll;
}
#topbar {
position:absolute;
bottom:100%; height:3em;
right:-10%; left:10%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
setTimeout("$('pre').animate({height:1500}, 3000)", 1000);
</script>
</head>
<body>
<div id="everything">
<div id="main">
<div id="content">
<div id="sidebar">
alpha
<br/>
beta
<br/>
gamma
<br/>
etc.
</div>
<div id="topbar">
Menu1 * Menu2 * Menu3 * ...
</div>
This is my site.
Yay.
<pre>
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
</pre>
</div>
<div id="footer">
footer
</div>
</div>
</div>
</body>
</html>
Is it just me, or is the pink elephant in the room sitting on a ...
< T A B L E >
???
Update (April 20th, 11:40AM): Here's the <table> version:
http://juliusdavies.ca/stackoverflow/pink_elephant.html
Be sure to resize your browser window a few times to see it in action.
IE8 - perfect
Chrome - perfect
Safari - no scrollbar, otherwise okay
Firefox - no scrollbar, otherwise okay
based on your most recent answer, I take it you don't need the footer to be full width (only sticky, though yours isn't) and also I presume you know that your version will only work if you know the height of the "foo - not so important content", as you need the that height to set the top co-ordinate for the sidebar .
You version falls down in that when you narrow the window content disappears off the sides.. but based on the thinking behind it - I've used your logic extended it and built in the sticky footer, top menu - everything that was in the original example link.
the footer's not full width, but you can make it look like it is by putting a background image on the html element, I have a plain dummy image in my fiddle but it's not showing up, anyway you would make an image the same height/color as the footer with the 1px border built in
this absolutely relies on you being able to fix/calculate the height of everything above the pink/blue columns
there is a lot less container divs needed for this and the content is now before the sidebar in the source
Here's the fiddle : fullsize : to edit
I see this as a design having a top a middle and a footer. The middle section contains both the pink and blue columns.
Using CSS, place a repeating image in the background of the middle-section behind both the left and right columns. This image would show the edges of both columns. Hopefully your design will accommodate this. I admit I do not know, without really digging into the code, how to make the middle expand all the way down to the bottom. I should think there are some different ways to approach this.
Use css overflow: auto; for your pink column; for the blue, set overflow: auto; on the or tag.
I hope this helps...