I just started creating these Loading bar by me:
<div id="loading">
<div style="width: 650px;height: 40px;background-color: white;left:calc(50% - 325px);top: calc(50% - 20px);position: absolute;">
<div style="width:640px;height:30px;background-color:#0087cc;margin-top:5px;margin-left:5px">
<div id="myBtn" style="width:20px;height:30px;background-color:white;transition: all 2s;transition: all 0.5s ease 0s;">
</div>
</div>
</div>
</div>
The white bar is increasing from left to right , so on the end of web page i put these JS - so it makes end of loading bar and change display property o whole loading div :
$(window).load(function() {
document.getElementById("myn").style.width = "640px";
setTimeout(function(){$('#loading').fadeOut()}, 2700);
})
But I need to change the div width of that bar on the most place (for example after loading 10 picture change with to 100px and after loading another 10 pics change with to 200px ect ) on the web to create progress change of loading bar when the page will loading.
How can I change that div width on the most places of web to create continuously move of loading bar on loading web page.
And : I dont want to use Progressbar, I like to make things by myself :-)
Thanks for your help
The following code snippet wil do, as far as I understand, what you want. On a press of a button (or when some images are loaded), the width will increase by 16 pixels. This could be any variable and jQuery can be used to animate it as well. This is just an example to illustrate the principle.
$('#button').click(function() {
var width = $('.progress').width();
if (width < 256) {
width = width + 16;
$('.progress').width(width)
}
});
div.progress-bar {
width: 256px;
height: 32px;
border: 1px solid black;
}
div.progress {
width: 0px;
height: 100%;
background-color: #e0e0e0;
}
button#button {
margin-top: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
<div class="progress">
</div>
</div>
<button id="button">MORE PROGRESS!</button>
Finally i Use this code to change div width on the place of loading web :
//First is width 20 in the css
#myBtn {width:20px;height:30px;background-color:white;transition: all 0.5s ease 0s;}
**The HTML :**
// width 62.5% after load div#2013
$('#2013').load("load" , function() {
$('#myBtn').css('width', '62.5%');
});
some images
//last 100% after load div#2010 with images and with fadeout
$('#2010').load("load" , function() {
$('#myBtn').css('width', '100%');
setTimeout(function(){$('#loading').fadeOut()}, 2700);
});
Related
I have this current UI
The arrow image is just a transparent image.
I'm trying to add animation on that image.
it will just move from low to high for every page reload / after the page being loaded.
My idea to do this is using jquery
I'm playing around with this code
<img class="meter-arrow" src="{!! url('public/images/arrow.png') !!}" >
<script src="{{url('public/js/libraries/jquery_file_3_1.js')}}"></script>
<script>
$(".meter-arrow").animate({left: '250px'});
</script>
Source: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1
Is it possible to do this
It is strangely quite hard to animate a rotation using jQuery. See here about how.
I think it is easier in plain JS:
// The image element
let arrow = document.querySelector(".arrow")
// It onload --rotation value
let rotation = parseInt(getComputedStyle(arrow).getPropertyValue("--rotation"))
// Rotation on an interval
let increase = setInterval(function(){
rotation = (rotation>25) ? clearInterval(increase) : rotation+1
arrow.style.setProperty("transform", `rotate(${rotation}deg`)
},20)
.arrow{
--rotation: -90deg;
margin: 5em;
height: 160px;
width: 150px;
transform: rotate(var(--rotation));
transform-origin: 68px 118px; /* the position of the rotation point in the image */
}
<img src="https://i.imgur.com/crRJmHg.png" class="arrow">
Animations like this are also possible through CSS. See this StackBlitz example.
Reference of tranfsorm
https://www.w3schools.com/cssref/css3_pr_transform.asp
How do I fade in an image once it's in view? I'm trying to make my website responsive, so having it fade in on the amount of pixels scrolled won't do. I need it to be exposed depending on the percent scrolled. Or if there's a way to have it fade in when it's in the field of vision?
Here's the code:
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 300) {
$("#bluprintdesign").fadeIn();
} else {
$("#bluprintdesign").stop().fadeOut();
}
Right now what I have going on is it fades in when scrolled 300px and fades out if you scroll back up. I like that, but I want it in percentages so it's responsive to all screen resolutions.
Thank you!
Here's a function showImages() that will measure your $.scrollTop() + $(window).height() to establish the scroll point of the bottom of the viewport, and will add a class to hidden images when half of the image has passed the bottom of the viewport. I'm calling it on $(document).ready(); and $(window).on('scroll'); so that it will load images in the viewport on page load and as you scroll.
Using opacity: 0 instead of display: none (what $.fadeIn()/$.fadeOut() will toggle) allows the image to still take up space in the document, allowing you to calculate it's height (needed to know when half of the image is in view) without having to do anything tricky, and will also maintain the page layout when the image fades in, versus the page jumping around if you toggle display.
There are also libraries that will do this for you. jQuery waypoints is a popular one.
function showImages() {
var $window = $(window),
thresh = $window.scrollTop() + $window.height();
$('img:not(.show)').each(function() {
if (thresh > $(this).offset().top + ($(this).outerHeight() / 2)) {
$(this).addClass('show');
}
});
}
$(window).on('scroll', function() {
showImages();
})
$(function() {
showImages();
})
section {
height: 200vh;
border-top: 1px solid black;
}
img {
opacity: 0;
transition: opacity .25s;
}
.show {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
Background:
Let's say you have a simple page which has a logo and a heading only and one paragraph
<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>
This is how that looks like
That page, obviously would not have vertical overflow / scroll bar for almost even tiny scale mobile devices, let alone computers.
Question
How can you bring that heading to the top left of the screen and move the logo out of focus unless someone scrolls up? Open to using any JavaScript library and any CSS framework
Attempts:
Tried using anchors but they only work if the page already had a scroll bar and anchor was out of focus.
Tried window.scrollTo but that also requires the page to have scroll already
Tried $("html, body").animate({ scrollTop: 90}, 100); but that also doesn't work when the page doesn't have overflow
Notes:
Please note that adding some extra <br/> to induce an overflow is not the way to go, it can be done that way but that's a very ordinary workaround
Why is it needed?
Its for a form for mobile devices, simple requirement is to take the first field of the form to top of the page and hide the logo (one can scroll up if they wish to see it) so it doesn't take attention away. Not using jQueryMobile for this particular task.
If you want the user to be able to scroll up and see the logo, then the logo must be within the top boundary of the body tag, because anything outside of that tag will not be viewable. This means you cannot use negative margins or offsetting like that. The only way to achieve this is to have the page scroll to the desired location that is within the top boundary of the body tag. You can set the time for this event to one millisecond, but there will still be a 'jump' in the page when it is loaded. So, the logic is: first make sure the page is long enough to scroll to the right place, then scroll there.
//Change the jQuery selectors accordingly
//The minimum height of the page must be 100% plus the height of the image
$('body').css('min-height',$(document).height() + $('img').height());
//Then scroll to that location with a one millisecond interval
$('html, body').animate({scrollTop: $('img').height() + 'px'}, 1);
View it here.
Alternatively, you can load the page without the image in the first place. Then your form field will be flush with the top of the document. Then you could create the element at the top and similarly scroll the page again. This is a round-a-bout way of doing the same thing though. And the page will still 'jump,' there is no way around that.
Only CSS and anchor link solution
With a pseudo element :
--- DEMO ---
First :
set : html,body{height:100%;}
Second :
Choose one of your existing tags. This tag mustn't have a relatively positioned parent (except if it is the body tag). Preferably the first element in the markup displayed after the logo. For your example it would be the h1 tag. And give it this CSS :
h1:before {
content:"";
position:absolute;
height:100%;
width:1px;
}
This creates an element as heigh as the viewport area. As it is displayed under the logo, the vertical scroll lenght is the same as the logo height.
Third :
Give the first element after logo an id (for this example I gave id="anchor").
Then you can use a link like this your_page_link#anchor and you will automaticaly scroll to the anchor (logo outside/above the viewport).
This works whatever height the logo is.
link to editable fiddle
Full code :
HTML
<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1 id="anchor">Foo Bar</h1>
<p>ABC12345</p> Anchor link
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
h1:before {
content:"";
position:absolute;
width:1px;
left:0;
height:100%;
}
You might need to add js functionality to hide the logo if user scrolls down but I guess following code will fullfill the first requirement.
Please see
<script src="js/jquery.js"></script>
<img id='logo' src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" style="display:none">
<h1>Foo Bar</h1>
<p>ABC12345</p>
<script type="text/javascript">
var p = $( "p:first" );
var isScrolled=false;
/* For Firfox*/
$('html').on ('DOMMouseScroll', function (e) {
isScrolled = true;
if(p.scrollTop()==0 && isScrolled==true){
$('#logo').css('display','block');
}
});
/* For Chrome, IE, Opera and Safari: */
$('html').on ('mousewheel', function (e) {
isScrolled = true;
if(p.scrollTop()==0 && isScrolled==true){
$('#logo').css('display','block');
}
});
</script>
I have referred this question to find solution.
You could use touchmove event to detect swipe up or down. This is my example. You can try it on mobile device.
<style>
#logo {
position: absolute;
top: -100%;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
}
#logo.show {
top: 0;
}
</style>
<script>
var perY;
var y;
$(window).on('touchmove', function(e) {
e.preventDefault();
y = window.event.touches[0].pageY;
if(!perY)
perY = y;
else
{
if(y > perY)
$('#logo').addClass('show');
else
$('#logo').removeClass('show');
perY = null;
}
});
</script>
<img id="logo" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>
This is the same problem i've encountered hiding the addressbar without the page overflowing. The only solution that fitted my needs was the following:
Set the min-height of the body to the viewportheight + your logo.
$('body').css('min-height', $(window).height() + 200);
This is a simple solution of getting the height of the contents to see if we can scroll to the part of the header, if not, we add height to the paragraph.
<img id="img" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" />
<h1 id="h" >Foo Bar</h1>
<p id="par" style="background:yellow;">
hello world
</p>
script:
function hola(){
var imgH = $("#img").outerHeight(true);
var titleH = $("#h").outerHeight(true);
var winH = $(window).height();
var parH = $('#par').outerHeight(true);
var contH = (imgH + titleH + parH);
var wishH = (imgH + winH);
console.log("wished height: " + wishH);
console.log("window height: " + winH);
console.log("content height: " + contH);
if(contH < wishH){
console.log("window is smaller than desired :(");
var newH = wishH - contH;
$("#par").height(parH + newH);
$(window).scrollTop(imgH);
}
}
Here is the working example:
http://jsfiddle.net/Uup62/1/
You may like this solution: http://jsfiddle.net/jy8pT/1/
HTML:
<div class="addScroll"></div>
<h1 class="logo"><img src="https://drupal.org/files/images/OQAAAI1PPrJY0nBALB7mkvju3mkQXqLmzMhxEjeb4gp8aujEUQcLfLyy-Sn4gZdkAas6-k8eYbQlGDE-GCjKfF5gIrUA15jOjFfLRv77VBd5t-WfZURdP9V3PdmT.png" height="100" alt="company logo"/></h1>
<h2>This is a sample page heading.</h2>
<p>This is a sample page text.</p>
JS:
function addScroll()
{
$(".addScroll").css({
"height": ($(window).height()+1) + "px",
"width": "100%"
});
}
$(document).ready(function(){
addScroll();
$(window).resize(function(){
addScroll();
});
$(window).scroll(function(){
if($(window).scrollTop() > 0)
{
$(".logo").animate({
marginTop: "-110px"
}, 500);
}
if($(window).scrollTop() == 0)
{
$(".logo").animate({
marginTop: "0"
}, 500);
}
});
});
CSS:
body
{
padding:0;
margin:0;
}
h1.logo
{
display:block;
margin:0 0 10px 0;
padding:0;
outline:0;
}
.addScroll
{
position:absolute;
display:block;
top:0;
left:0;
z-index:-1;
}
I need a full width (responsive) slider with fixed height and centered image ( the min width is 960px and people with a wider screens will see the rest of the image (the extra on the left and right)) and it needs to auto-rotate.
Now I got the html/css worked out, but my javascript is rubbish so i have no idea how to let the images slide. I've checked out a lot of Questions here but nothing seems to work. My image dimensions are 2300x350.
CSS:
body {
margin: 0 auto;
}
#slider_container {
width:100%;
height:350px;
overflow:hidden;
position: relative;
z-index: 1;
}
.image {
position:relative;
float:left;
height: 350px;
width: 100%;
overflow: hidden;
}
.image img {
position:absolute;
left:50%;
top:50%;
margin-left:-1150px;
margin-top:-175px;
}
HTML:
<div id="slider_container">
<div class="image">
<img src="images/header.jpg" />
</div>
<div class="image">
<img src="images/header2.jpg"/>
</div>
<div class="image">
<img src="images/header3.jpg" />
</div>
</div>
With this code the pictures come out nice in the middle on every screen but
how do I let it slide and autorotate? I guess the first image just needs to be replaced by the second so a z-index change? or + or - the width of one picture?
You need to only style the img tag if using flexslider. Try the fiddle link below. I have included four files for this.
jQuery 1.9.1
flexslider.css
jquery.flexslider-min.js
bg_direction_nav.png
jsfiddle
Please check this... http://www.jqueryscript.net/demo/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides/ it is full width and fixed height slider and auto rotate. Here you have options to styling according to your needs
$(function(){
var p=$('#content').responsiveSlides({
height:450, // slides conteiner height
background:'#fff', // background color and color of overlayer to fadeout on init
autoStart:true, // boolean autostart
startDelay:0, // start whit delay
effectInterval:5000, // time to swap photo
effectTransition:1000, // time effect
pagination:[
{
active:true, // activate pagination
inner:true, // pagination inside or aouside slides conteiner
position:'B_R', /*
pagination align:
T_L = top left
T_C = top center
T_R = top right
B_L = bottom left
B_C = bottom center
B_R = bottom right
*/
margin:10, // pagination margin
dotStyle:'', // dot pagination class style
dotStyleHover:'', // dot pagination class hover style
dotStyleDisable:'' // dot pagination class disable style
}
]
});
});
For more modification please see jquery.responsiveSlides.js
I'm writing my own small pager control in Javascript and jQuery and having trouble positioning it properly.
The pager is set to only be a specific width (340px in this case) which allows it to display roughly ten page buttons. If the user has selected a higher page, I'd like the reel to slide to the left and show the selected page in the center. Since the number of pages is set dynamically (I build the pager in js when the page is loaded) and their width is not constant (double-digit page number buttons are wider than single-digit buttons) how can I determine and then set the pager to the correct position?
I was attempting to use the following code:
(where my buttons are labeled "#Nav1", "#Nav2", etc...)
if (currentPage < 7) {
newPos = 0;
}
else {
newPos = $('#Nav' + (currentPage-5)).position().left;
}
$('#reel').animate({left: newPos*-1}, 700);
But the #reel div is wrapping so position().left doesn't return the position I need.
Suggestions?
Here is my HTML/CSS markup:
<style type="text/css">
div#pager div
{
display: inline-block;
}
#navContainer
{
width: 340px;
height: 28px;
overflow: hidden;
position: relative;
}
#reel
{
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="pager" class="buttons">
<div id="preButtons"></div>
<div id="navContainer">
<div id="reel">
</div>
</div>
<div id="postButtons"></div>
</div>
You'll need to manually give #reel a width equivalent to the number of items * the width of each item.
A dynamic way to do this is to load in all of the items, place them in a hidden, unbounded div, then set the width of #reel equal to the width of that div.
Try this before your carousel code:
var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});
This will allow you to dynamically set the width of the #reel div so it doesn't wrap without knowing the exact size of the contents statically.