What my code does:
stays blank for 3 seconds
displayes index 1 of my list of image
loops through the list and restarts at index 0
<div id="background" class="text-center background">
<script type = "text/javascript">
var background = document.getElementById("background");
var currentPos = 0;
var imagesb = ["/images/indeximg0.jpg", "/images/indeximg11.jpg", "/images/indeximg33.jpg", "/images/indeximg44.jpg", "/images/indeximg55.jpg"], i = 0;
function changeimage()
{
if (++currentPos >= imagesb.length)
currentPos = 0;
background.style.backgroundImage = "url(" + imagesb[currentPos] + ")";
}
setInterval(changeimage, 3000);
</script>
</div>
What I want it to do:
no 3 second blank background delay
starts with index 0
What I tried:
I set currentPos = 4
this fixed the issue with the first image being displayed but the 3 second delay was still there. I also don't like this way of doing it because I would have to manually change currentPos if i add or remove images to the list
I tried to initialize my background before the first div to fix the 3 second back background with he following code:
<script type = "text/javascript">
background.style.backgoundImage= "url(/images/indeximg0.jpg)";
</script>
nothing changed. still had the 3 second delay
You should
Call the function once before the setInterval() and
When doing ++currentPos you are actually incrementing the variable so the first time you set the background, the value is already 1. The easiest way to change that is to set the background before your if test.
var background = document.getElementById("background");
var currentPos = 0;
var imagesb = ["https://via.placeholder.com/100", "https://via.placeholder.com/200", "https://via.placeholder.com/300"];
function changeimage() {
background.style.backgroundImage = "url(" + imagesb[currentPos] + ")";
if ((++currentPos) >= imagesb.length) {
currentPos = 0;
}
}
changeimage();
setInterval(changeimage, 1000);
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.background {
height: 100%;
width: 100%;
}
<div id="background" class="text-center background"></div>
Related
Sorry guys, I am very new to Javascript. I have searched for similar solutions before posting here.
I want to change the background colour, every time that multiple div tags, with specific ids, come 150 pixels before they reach the browser top. I want it to work in different devices correctly. I tried different things in javascript but none gave me the responsiveness I want. When I reduce the browser's width, the text is folding and the div/ids positions change. So, my logic is... if, for example, a div with id="One" is 150px from top, change the background colour.
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
window.addEventListener('scroll', () => {
if(one.getBoundingClientRect().top < 150){
document.body.addClass = "bg-one";
}
});
.site-main{
background-color: white;
}
.bg-one{
background-color: red;
}
.bg-two{
background-color: blue;
}
.bg-three{
background-color: yellow;
}
<body class="site-main" id="main">
<div id="one" class="">Text</div>
<div id="two" class="">Text</div>
<div id="three" class="">Text</div
</body>
I was thinking about that, but it doesn't work.
My solution would be to add an event listener on window scroll
window.onscroll = function(){ft_onscroll()};
in this function, you get the current scroll position. Compare it to your element position to do what you want.
one_y = one.getBoundingClientRect().top;
function ft_onscroll(){
y = window.scrollY;
if(one_y > y){
//change background color
}
}
I made it. My final code is this. Maybe I will make it shorter.
window.onscroll = function(){
fromTop_onscroll();
};
function fromTop_onscroll(){
var main = document.getElementById("main");
var one = document.getElementById("one");
one_distance = one.getBoundingClientRect().top; // distance from top
var two = document.getElementById("two");
two_distance = two.getBoundingClientRect().top; // distance from top
if(one_distance < 150 && two_distance > 150){
main.classList.add("bg-one");
main.classList.remove("site-main");
main.classList.remove("bg-two");
} else if (two_distance < 150 && one_distance < 0) {
main.classList.add("bg-two");
main.classList.remove("bg-one");
} else if (one_distance > 150 && two_distance > 150){
main.classList.add("site-main");
main.classList.remove("bg-two");
main.classList.remove("bg-one");
}
}
I am trying to make an array of text elements to display every X number of seconds. For example "Hello" would display and then after X seconds the text would change and display "I am 2 years old.
I am grabbing a DOM element and using .innerHTML to change the text with the dialog array elements created in javascript. I troubleshot the code and it seems like setTimeout is not working because it is not waiting every X seconds to display each array element (I have it for 5 seconds). I believe this is why I am getting only the last element to display instead of seeing each one display X number of second. Can someone help me out? I am also very new to coding.
Thanks.
Also It would be great if you can help me with creating the effect of fading the text elements in an out each time the text is changed.
var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];
function changeText() {
var timer = 0;
for (var i = 0; i < dialog.length; i++) {
setTimeout(document.getElementById('h1').innerHTML = dialog[i], timer);
timer = timer + 5000;
}
}
changeText();
<div id="h1">Hello</div>
First, you are not using the setTimeout() function correctly. Corrected version would be.
var inside for loop should be converted to let. Read why?
var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];
function changeText() {
var timer = 0;
// Use let instead of var
for (let i = 0; i < dialog.length; i++) {
setTimeout(() => {
document.getElementById('h1').innerHTML = dialog[i];
}, timer);
timer = timer + 5000;
}
}
changeText();
<div id="h1">Hello</div>
Its better to use setInterval() instead of setTimeout. Also initialize let elem = document.getElementById('h1'); at once not each time timer has been called.
var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];
let displayIndex = 0;
let elem = document.getElementById('h1');
let delay = 1000; // 1 second delay
setInterval(() => {
if (elem) {
elem.innerHTML = dialog[displayIndex];
}
// Move to the next item in dialog
displayIndex++;
// If display index goes out of index range, start again
if (displayIndex >= dialog.length) {
displayIndex = 0;
}
}, delay);
<div id="h1"></div>
Fading effect version
To get fading effect you need to change you html structure as well as javascript accordingly.
let displayIndex = 0;
let elems = $('#h1 > span');
let delay = 1000;
setInterval(() => {
elems.removeClass();
elems.addClass('hidden');
// Move to the next item in dialog
displayIndex++;
// If display index goes out of index range, start again
if (displayIndex >= elems.length) {
displayIndex = 0;
}
$(elems[displayIndex]).addClass('visible');
}, delay);
#h1 {
position: relative;
}
#h1 span {
position: absolute;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease-in-out;
transition-delay: 0s;
}
span.visible {
opacity: 1 !important;
visibility: visible !important;
}
span.hidden {
opacity: 0;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="h1">
<span class="visible">Hello,</span>
<span class="hidden">My name is James</span>
<span class="hidden">I am 2 years old.</span>
<span class="hidden">I have a dog</span>
</div>
setTimeout accepts a callback, not plain code statements - pass it a function instead. Also use let instead of var so that each iteration has a separate binding for i:
var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];
function changeText() {
var timer = 0;
for (let i = 0; i < dialog.length; i++) {
setTimeout(() => document.getElementById('h1').innerHTML = dialog[i], timer);
timer = timer + 1000;
}
}
changeText();
<div id="h1">Hello</div>
Check docs for setTimeout. First argument needs to be anonymous function or function. Try to wrap your first argument in setTimeout in 'function() {}' .
I have a toast notification with a progress bar like the following image and I like the rounded corners but I can't figure out how to hide the portion of the loading bar that goes outside the rounded corners. How would I do that given the setup in this example. I would also like to know how I could reverse the direction of the indicator so it starts full and goes toward empty then the notification disappears. Lobibox doesn't appear to have either of these options out of the box but I would really like to add them. Thanks for the help!
Here is a sample of a lobibox notification:
Lobibox.notify('success', {
size: 'mini',
rounded: true,
delayIndicator: true,
msg: 'Project Saved Successfully!',
iconSource: 'fontAwesome',
position: 'top right',
delay: 50000,
});
you can override the css
Lobibox.notify('success', {
size: 'mini',
rounded: true,
delayIndicator: false,
msg: 'Project Saved Successfully!',
iconSource: 'fontAwesome',
position: 'top right',
delay: 20000,
delayIndicator: true
});
body {
background-color: black;
}
.lobibox-notify .lobibox-delay-indicator {
left: 22px !important;
width: 360px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lobibox#1.2.7/dist/css/lobibox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lobibox#1.2.7/dist/js/lobibox.min.js"></script>
Figured out how to reverse the indicator direction. Find the _addDelay function in the source and overwrite it with my updated version below. This adds the ability to set options.reverseDelayIndicator = true to reverse the direction of the indicator. It also allows you to have the indicator display properly on rounded and square edge notifications if you include the css snippet below in your solution.
var _addDelay = function ($el) {
if (!me.$options.delay) {
return;
}
if (me.$options.delayIndicator) {
var delay = $('<div class="lobibox-delay-indicator"><div></div></div>');
if (me.$options.rounded) {
delay.addClass("lobibox-delay-rounded");
} else {
delay.removeClass("lobibox-delay-rounded");
}
$el.append(delay);
}
var time = 0;
var interval = 1000 / 30;
var currentTime = new Date().getTime();
var timer = setInterval(function () {
if (me.$options.continueDelayOnInactiveTab) {
time = new Date().getTime() - currentTime;
} else {
time += interval;
}
if (me.$options.reverseDelayIndicator) {
var width = 100 - (100 * time / me.$options.delay);
if (width <= 0) {
width = 0;
me.remove();
timer = clearInterval(timer);
}
} else {
var width = 100 * time / me.$options.delay;
if (width >= 100) {
width = 0;
me.remove();
timer = clearInterval(timer);
}
}
if (me.$options.delayIndicator) {
delay.find('div').css('width', width + "%");
}
}, interval);
if (me.$options.pauseDelayOnHover) {
$el.on('mouseenter.lobibox', function () {
interval = 0;
}).on('mouseleave.lobibox', function () {
interval = 1000 / 30;
});
}
};
CSS To allow both rounded and square indicators display properly:
.lobibox-notify .lobibox-delay-indicator.lobibox-delay-rounded {
left: 22px;
width: calc(100% - 44px);
}
I have an image in my HTML page, and I would like it to change to a different image every 15 seconds.
<img src="img/img 1.jpg" alt="image">
In my local folder img, I have two images which are img 1.jpg and img 2.jpg. How do I change the img 1.jpg to img 2.jpg after 15 seconds?
Try it:
$(document).ready(function(){
var img = 0;
var slides = new Array();
while (img < 5) {
img++;
// put your image src in sequence
var src = 'assets/images/earth/Sequence' + img + '.jpg';
slides.push(src);
}
var index = 0,timer = 0;
showNextSlide();
timer = setInterval(showNextSlide, 15000);
function showNextSlide() {
if (index >= slides.length) {
index = 0;
}
document.getElementById('earth').src = slides[index++];
}
});
Try this (pure JS)
var myArray = ['img1', 'img2', 'img3', 'img4', 'img5', 'img6']
var count = 0;
setInterval(function() {
//use this below line if you want random images
//var rand = myArray[Math.floor(Math.random() * myArray.length)];
if (count >= myArray.length) count = 0; // if it is last image then show the first image.
// use this below line if you want images in order.
var rand = myArray[count];
document.getElementById('img').src = rand;
document.getElementById('img').alt = rand; // use 'alt' to display the image name if image is not found
count++;
}, 1000); // 1000 = 1 second
<img src="img/img 1.jpg" alt="image" id='img' />
To do this, you're going to need some Javascript to change the image. Here is a link to a popular website for help with Javascript, HTML, CSS, and a whole lot more. What you'll want to be looking at specifically though, is the setInterval() function on this page: http://www.w3schools.com/js/js_timing.asp
If you don't know Javascript at all, it is also not a bad place to start learning! If that's all you need it for though, you'll need very little Javascript at all.
Firstly include jQuery library in your page.
Then use this script:
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
if (_img_id == 3) {
_img_id = 1;
};
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
});
I'm using this on my site …
<progress id='video-progress' min='0' max='100' value=''></progress>
This is the entire styling of the element …
#video-progress {
-webkit-appearance: none;
border: none;
position:fixed;
bottom:0;
left:0;
height:3px;
width:100%;
z-index:1;
}
So all it does is move from 0 to 100% screen width on the bottom of the page.
The progress bar is updated via Javascript.
However since my video is only 30 seconds long, the single steps of updates are executed as "jumps" for the progress bar. So there is no smooth motion of the bar.
Any idea how I could animate the progress bar or smooth it between the updated steps?
UPDATE:
JavaScript …
function updateProgressBar() {
var progressBar = document.getElementById('video-progress');
var percentage = Math.floor((100 / fmVideo.duration) * fmVideo.currentTime);
progressBar.value = percentage;
}
You could animate it by incrementing its value every 15 millisecond using setInterval and stop incrementing if the value is greater than percentage using clearInterval.
This code extracts the current value and increments it until it reaches the percentage value.
Note: percentage is manually set to 70.
var progressBar = document.getElementById('video-progress');
function updateProgressBar() {
var percentage = 70;
var curr = progressBar.value;
var update = setInterval(function() {
if (curr > percentage) {
clearInterval(update);
}
progressBar.value = curr++;
}, 15)
}
updateProgressBar();
#video-progress {
-webkit-appearance: none;
border: none;
position: fixed;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
z-index: 1;
}
<progress id='video-progress' min='0' max='100' value=''></progress>
This works perfectly for me!
function smoothProgress(e) {
var id = $("#"+e.data.id),
dur = 5000,
seq = 100,
max = parseInt( id.attr("max"), 10),
chunk = max / dur * seq,
loop = setInterval(function() {
if( id.val() < max )
id.val( id.val() + chunk );
else
clearInterval(loop);
}
}, seq);
}
$(document).ready(function() {
$("#launch").on("click", {id: $("progress").attr("id")}, smoothProgress);
});
Of course, you can adjust the dur parameter or retrieve it dynamically based on your video's duration, as well as the seq parameter (the lower, the smoother).
Here is a fiddle for demo.