I want to make a "full screen" progress bar : a 100% x 100% border who just fill in. Not easy to explain so i've made a quick draw.
http://hpics.li/998ef2e
Thanks a lot for ure ideas !
I crafted a solution using four divs, which approximates closely enough I think:
https://jsfiddle.net/svArtist/jexb9egm/
var i=0;
var myVar=setInterval(function () {myTimer()}, 10);
function myTimer() {
i++;
if(i<=100){
$("#top").css("width", i+"%");
}else if(i<=200){
$("#right").css("height", (i-100)+"%");
}else if(i<=300){
$("#bottom").css("width", (i-200)+"%");
}else if(i<=400){
$("#left").css("height", (i-300)+"%");
}else{
clearInterval(myVar);
}
}
#main, html, body{
height:100%;
width:100%;
position:relative;
margin:0;
overflow:hidden;
}
.loadbar{
background-color:#f00;
position:absolute;
}
#top, #bottom{
height:20px;
}
#left, #right{
width:20px;
}
#top{
top:0;
left:0;
}
#right{
top:0;
right:0;
}
#bottom{
bottom:0;
right:0;
}
#left{
bottom:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="loader">
<div id="top" class="loadbar">
</div>
<div id="right" class="loadbar">
</div>
<div id="bottom" class="loadbar">
</div>
<div id="left" class="loadbar">
</div>
</div>
</div>
(just incrementing from 0 to 400 here, use your progress percent*4 instead)
Although I've never seen this done, you could probably create this effect using Divs that disappear as the page loads. Basically, put a solid color as the background, and use a white div across each side (top left to top right, top right to bottom right, bottom right to bottom left, bottom left to top left) that shrinks as loading completes. This is the same effect as if the colored bar 'loaded' across the screen.
This may be a lot of work for a purely cosmetic effect.
Related
Things I'm trying to accomplish:
Images go to the next one based on scroll.
The images will cycle through, and when they are all done the view will proceed to the bottom section. A problem with what I have right now is that, when I scroll, the view doesn't stay on the image, but moves on to the rest of the page--so even if the image changes, the image is no longer in the viewport.
fadeIn when it goes to the next image (or use another animation).
When scrolling up, it goes back up the image sequence.
If there is a jQuery plugin that does this, please feel free to refer.
jsfiddle: http://jsfiddle.net/jzhang172/gcSe8/145/
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$(".img-container > img").fadeIn("slow").attr('src',' http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449');
} else if ($(document).scrollTop() > 110) {
$(".img-container > img").fadeIn("slow").attr('src','http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508');
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
}
.img-container img{
height:100%;
width:auto;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>
Try this:
$(document).ready(function () {
var images_index = 0;
var act_cycle = 0;
var n_cycles = 5;
var images = ["https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg","http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449","http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508",]
$(window).on('DOMMouseScroll mousewheel', function (e) {
if ($(".img-container").is(':hover')){
if (e.originalEvent.wheelDelta < 0) {
if(images_index < images.length-1){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if(++act_cycle % n_cycles == 0){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[++images_index]).fadeIn("slow");
}
}
}
else {
if(images_index > 0){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if (--act_cycle == -n_cycles){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[--images_index]).fadeIn("slow");
}
}
}
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
z-index: 2;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
z-index: 1;
}
.img-container img{
height:100%;
width:auto;
z-index: 1;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>
Explanation:
Images go to the next one based on scroll.
To solve this I just put in an array all the images, changing the src depending on the index of the array that I'm updating depending on the scroll direction (see wheelDelta)
The images will cycle through, and when they are all done the view
will proceed to the bottom section. A problem with what I have right
now is that, when I scroll, the view doesn't stay on the image, but
moves on to the rest of the page--so even if the image changes, the
image is no longer in the viewport.
To prevent the normal scroll I used the DOMMouseScroll and mousewheel events, then preventDefault and stopPropagation and I only fire this logic if the img-container is hover.
fadeIn when it goes to the next image (or use another animation).
I just first fadeOut, the change src and finally fadeIn
When scrolling up, it goes back up the image sequence.
Solved with the array of images.
In adition, I add some z-index, because of the behavior of the jQuerys fadeIn/Out and a scrollTop to fix the view on the image when is changing
UPDATE: If you want to change the image in a certain numbers of 'cycles' you can add a var to control it (here is n_cycles, change his value to change the number of cycles you want wait until image changes, I set it to 5 as you say in comments).
Here I have a jsFiddle
you can See there are 3 images of Players now What I want is Whenever I click on the image it should show the pop-up below the players.
Player can be In any position it will not be in a grid
so My question is What is the best way perform this.
I have something in my probably the wast it is like..
-- whether onclick of an Image I should change the position of the position of the popup image as well as span tag's text.
-- I should provide a popup to the every Player and just hide and show them
or something else you can suggest.It will help me a lot.
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
margin-left:50px;
}
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' id='p3'/>
<div id='player-popup'>
<span>Player1</span>
</div>
</div>
Thank you for spending time for me in advance Thank you.
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/>
<div id='player-popup' style="display:none">
<span>Player1</span>
</div>
</div>
Script:
$("img").click(function(){
var top = $(this).offset().top + $(this).width() + 2;
var left = $(this).offset().left - $(this).height() / 2;
$("#player-popup span").text("Player "+$(this).data("playerid"));
$("#player-popup").css({ top: top, left: left }).show();
});
css:
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
position:absolute;
}
Demo: https://jsfiddle.net/astm1o3p/21/
Here make chqnges in the css for popup set
position:absolute;
I want to create an horizontal animation controlled by the skrollr.
Scrolling down, the elements of my page have to move from left to right of my container.
Assuming that my elements have all the same width, I set the scrolling data from 100% to 0% and it works.
But what if my images have different widths?
Also I want to preserve the opacity animation that create this fade-in fade-out effect.
Here's HTML code:
<div id="container">
<div class="bg" style="background-color:red"
data-0="transform:translate3d(0%,0%,0); opacity:1"
data-5000="transform:translate3d(-100%,0%,0); opacity:0">
</div>
<div class="bg" style="background-color:green;"
data-0="transform:translate3d(100%,0%,0); opacity:0"
data-5000="transform:translate3d(0%,0%,0);opacity:1"
data-10000="transform:translate3d(-100%,0%,0);opacity:0">
</div>
<div class="bg" style="background-color:orange"
data-5000="transform:translate3d(100%,0%,0); opacity:0"
data-10000="transform:translate3d(0%,0%,0); opacity:1">
</div>
</div>
And the CSS:
#container {
background-color:black;
width:500px;
height:300px;
overflow:hidden;
}
div {
position:fixed;
}
.bg {
width:500px;
height:300px;
}
Here's a Demo in Fiddle
Just set the widths to 100% and contain your images within:
#container {
background-color:black;
width:100%;
height:300px;
overflow:hidden;
}
div {
position:fixed;
}
.bg {
width:100%;
height:300px;
}
Here's a Demo in Fiddle
I don't see how the different width would be a problem. You could set all width to 100% and overflow: hidden; or use jQuery to check the best way to fit the image in the container.
I am trying to design a collapsible/hide-able sidebar for my web application, in the vain of Facebook's Chat/Event Ticker. It needs to have two separate sections, separated vertically, and both independently scrollable.
I have tried to implement this using jakiestfu's Snap.js plugin.
https://github.com/jakiestfu/Snap.js/
While this works great, it moves the content on my page out of view, and breaks my position: fixed header elements due to CSS transform: tranlate3d().
Since there's no good fix the these CSS issues, I was wondering if anyone knew of a solution to mimic functionality of the Facebook Chat/Event Ticker sidebar.
I've done something similar using CSS3 resizing on the fixed sidebar (mine was on the left) and adjusting the main page's margin-left when the sidebar size changed. You could likely do something similar on the sidebar first, then split the sidebar in two the same way.
var sizeme = 200,
sizeItBro = function () {
if ($("#sidebar").width() != sizeme) {
sizeme = $("#sidebar").width() + 40;
$("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
}
};
window.setInterval(sizeItBro, 150);
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
#main {
margin-left:200px;
min-height:100%;
padding:20px;
}
#sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
background:#ffa;
width:200px;
min-width:100px;
max-width:500px;
resize:horizontal;
overflow:auto;
border-right:2px ridge #fe9;
padding:20px;
}
#tophalf {
background:#fe9;
height:300px;
min-height:100px;
max-height:500px;
resize:vertical;
overflow:auto;
border-bottom:2px ridge #fe9;
margin:-20px -20px 20px;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
<div id="tophalf">Sidebar A</div>
<p>Sidebar B</p>
</div>
I'm almost there. However, there is a bug which I can't work out. I think the problem is to do with using percentages rather than pixels (as I want the banner to resize for different screen widths).
The banner scrolls every 5 seconds, but only gets to the 3rd image before heading back to the beginning. Also - when I resize the window very small, the banner only rotates between the first two images (and sometimes scrolls to a non-existent 5th image, displaying white space).
I've played about with the Javascript. Changing the IF statement to be < -400% (still rotates across 3 images). When I set it to < -800% it goes to 2 images, and < -1000% it never returns to the beginning! I'm very confused, but maybe I'm missing something obvious.
HTML:
<div id="wrapper">
<div id="subwrapper3">
<div class="bannerwrapmain">
<img src="/images/banner-image-1.jpg" />
</div>
<div class="bannerwrapmain">
<img src="/images/banner-image-2.jpg" />
</div>
<div class="bannerwrapmain">
<img src="/images/banner-image-3.jpg" />
</div>
<div class="bannerwrapmain">
<img src="/images/banner-image-4.jpg" />
</div>
</div>
</div>
CSS:
#wrapper
{
width:100%;
overflow:hidden;
margin:0px 0px 0px 0px;
padding:0px;
}
#subwrapper3
{
width:400%;
overflow:hidden;
margin: 0px;
padding:0px;
}
.bannerwrapmain
{
display: block;
width:25%;
margin:0px;
padding:0px;
float:left;
}
.bannerwrapmain img
{
width:100%;
margin:0px;
padding:0px;
height:auto;
border:none;
}
JAVASCRIPT:
window.setInterval(function(){
if ($("#subwrapper3").css("marginLeft") < "-300%") {
$("#subwrapper3").animate({ marginLeft: '0%' });
} else {
$("#subwrapper3").animate({ marginLeft: '-=100%' });
}
}, 5000);
Try setting your main wrapper to a fixed dimension, say 1000px. then your subwrapper to 100%, and your images to max-width:100%;
#wrapper{width:1000px;}
#subwrapper3, .bannerwrapmain{width:100%;}
.bannerwrapmain img{max-width:100%;}
You can then use media queries to change the main wrapper width based on screen size, and the contained elements will scale with it:
#media screen and (max-width:500px){
#wrapper{width:500px;}
}
I created a content slider a few months ago, it may be of some help to you... http://codepen.io/lukeocom/pen/mHyBv