I created some progress bars using boostrap 3 which will show some different results every time the page is refreshed. Here is the HTML for my progress bars:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-5">
<p>Progress bar1</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
<p>Progress bar2</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
<p>Progress bar3</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
</div>
and this is my JavaScript function
$( document ).ready(function() {
$(".progress-bar").each(function (index ) {
var percent = Math.floor((Math.random() * 37) + 60);
$(this).html(percent+"%");
$(this).animate({width: percent+"%"}, 2500);
if (percent<79){
$(this).addClass('progress-bar-danger');
} else if(parseInt(percent)<89){
$(this).addClass('progress-bar-warning');
} else{
$(this).addClass('progress-bar-success');
}
})
});
So, I want to make the generated data appear every 5 or 10 minutes. not every page is refreshed, how can i do that based on my script ? Thank you
Fiddle Link
How about using setInterval? Something like this
$( document ).ready(function() {
$(".progress-bar").each(function (index ) {
setInterval(() => {
var percent = Math.floor((Math.random() * 37) + 60);
$(this).html(percent+"%");
$(this).animate({width: percent+"%"}, 2500);
if (parseInt(percent)<79){
$(this).removeClass('progress-bar-danger');
$(this).removeClass('progress-bar-warning');
$(this).removeClass('progress-bar-success');
$(this).addClass('progress-bar-danger');
} else if(parseInt(percent)<89){
$(this).removeClass('progress-bar-danger');
$(this).removeClass('progress-bar-warning');
$(this).removeClass('progress-bar-success');
$(this).addClass('progress-bar-warning');
} else{
$(this).removeClass('progress-bar-danger');
$(this).removeClass('progress-bar-warning');
$(this).removeClass('progress-bar-success');
$(this).addClass('progress-bar-success');
}
}, 300000);
})
});
Related
I've been trying to create a text scroller to display one div at a time using jQuery and I'm very new to this.
I used divs and have been trying to scroll through using two buttons-previous and next. I'm not able to figure out how to scroll through the texts whilst maintaining the position of the scroll.
Issue 1: It works fine if I hit next, however, At any given point during the scroll, when I hit previous, the output gets messed up and I'm really getting stuck here.
Issue 2: The first and the last captions are shown twice during the scroll. I've tried my best to fix this but in vain.
Any kind of help will be highly appreciated. Thank you so much in advance!
jQuery(document).ready(function($) {
var state = 0;
function loadOne(state) {}
function displayFirst(value) {
$('.caption' + value).show();
}
function hideall() {
$('.caption').hide();
}
function reset(value) {
state = -1;
}
function updateCounter() {
state = state + 1;
}
hideall();
//alert(state);
$(".next-update").click(function() {
state = state + 1;
if (state >= 1 && state <= 5) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});
$(".prev-update").click(function() {
state = state + 1;
if (state >= 5 && state <= 1) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caption caption1">Hello 1</div>
<div class="caption caption2">Hello 2</div>
<div class="caption caption3">Hello 3</div>
<div class="caption caption4">Hello 4</div>
<div class="caption caption5">Hello 5</div>
<button class="prev-update">Prev</button>
<button class="next-update">Next</button>
Hope the following code will work for you.
$(window).ready(function(){
var state = 1;
$(".caption").hide();
$(".caption.caption" + state).show();
$(".prev-update").click(function(){
if(state > 1){
state--;
}
$(".caption").hide();
$(".caption.caption" + state).show();
})
$(".next-update").click(function(){
if(state < 5){
state++;
}
$(".caption").hide();
$(".caption.caption" + state).show();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caption caption1">Hello 1</div>
<div class="caption caption2">Hello 2</div>
<div class="caption caption3">Hello 3</div>
<div class="caption caption4">Hello 4</div>
<div class="caption caption5">Hello 5</div>
<button class="prev-update">Prev</button>
<button class="next-update">Next</button>
var r1=Math.floor(Math.random()*255)
var g1=Math.floor(Math.random()*255)
var b1=Math.floor(Math.random()*255)
$(".color1").click(function (){
$(this).css("background", "rgb(" + r1 + "," + g1 + "," + b1 + ")")
})
$(document).ready(function () {
$(document).on('click', function (event) {
$target = $(event.target);
$target.addClass('clicked');
});
})
var numItems
var getfirstclass
var getsecondclass
$('div').click(function saveclassnames(){
var getfirstclass=$(this).attr('class')
console.log(getfirstclass)
var getsecondclass=$(this).attr('class')
console.log(getsecondclass)
getfirstclass===null
getsecondclass===null
})
$('div').click(function remove(){
var numItems = $('.clicked').length
if(numItems===2 && getfirstclass === getsecondclass){
$('.clicked').css('opacity', '0')
}
else{
$('.clicked').css('background', 'black')
}
})
<body>
<div class="container">
<div class="row">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
</div>
<div class="row">
<div class="color5"></div>
<div class="color3"></div>
<div class="color1"></div>
<div class="color6"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color6"></div>
<div class="color8"></div>
<div class="color5"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color8"></div>
<div class="color4"></div>
<div class="color2"></div>
</div>
</div>
</body>
I am trying to make a game called "Memory" (if 2 flipped cards are same, the cards will disappear, but if the cards are not the same, they will flip back). But there is a difference between the original one). I am using random colors instead of card pictures, but I cannot make <div> elements with the same background-color disappear, or flip back if they are not the same. Can someone explain to me why this code does not work?
Thanks.
opacity: 0; hiding generates a lot of space although the element is not visible.
background: black; – the element needs to blend in with the background, otherwise it will not work (technically it won't work)
You can either do this:
$('yourItem').css({
display: 'none'
});
Or, the "simplest way to hide an element":
$('yourItem').hide();
For more information see https://api.jquery.com/hide/
You could use
display: none
If that messes with other stuff, use
visiblity: hidden;
I have a site with fullheight sections using fullpage.js. Every section has a unique class of ".row" and classes ".light" or ".dark", depending on the row.
I'm trying to change between 6 dark & light svg logos randomly on every scroll.
Every logo has a unique name like so:
dark_logo_1.svg
dark_logo_2.svg
dark_logo_3.svg
...
light_logo_1.svg
light_logo_2.svg
light_logo_3.svg
...
HTML:
<nav>
<a id="logo" href="#">
<img id="moody-logo" src="">
</a>
</nav>
<body>
<div class="row light">CONTENT</div>
<div class="row dark">CONTENT</div>
<div class="row light">CONTENT</div>
<div class="row dark">CONTENT</div>
...
</body>
This is my jquery code so far, using scrollspy.js:
<script src="http://path-to-js-folder/scrollspy.js"></script>
$(document).ready(function() {
var randomNumber = Math.floor((Math.random() * 5) + 1);
$('.row').on('scrollSpy:exit', function() {
if (jQuery(this).hasClass('dark')){
var newColor = "light";
} else {
var newColor = "dark";
}
var logoFileName = newColor + "_logo_" + randomNumber + ".svg";
$("#moody-logo").attr("src", "http://path-to-logos-folder/" + logoFileName);
});
});
Kinda stuck, can't get the src in html for my #moody-logo to show anything other than blank src (src="").
Many thanks for your help!
I've one div that contains to other one:
<div>
<div id="card-container">....</div>
<div id="wait-for-result-container" style="display: none;">...</div>
</div>
On some event, I want to change the displayed element, with a fadeIn/fadeOut effect.
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
(I put some big number to really see the effect)
But when I trigger my effect, it is instantaneous, there is no fade-in/fade-out.
I'm not sure it matters, but I'm using jquery-3.1.1 and bootstrap 4 alpha.
Any idea what is going wrong?
EDIT
As asked, here is some clarification.
The element that I'm trying to hide is hided immediatly and the one I show is appearing immediately.
EDIT
I tried to put a demo here with the code from above:
$('#myBt').click(function(){
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Click me</button>
If you can use the full version of jQuery, give jQuery fadeOut and fadeIn a try :)
$('#myBt').click(function(){
var duration = 5000;
$('#card-container').fadeOut(duration);
$('#wait-for-result-container').delay(duration).fadeIn(duration);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example1</button>
If you have to stick with the slim version, you can use setInteval
$('#myBt').click(function(){
var duration = 5000;
var op = 0.9; // initial opacity
var timer1 = setInterval(function () {
if (op <= 0.1){
clearInterval(timer1);
op = 0;
$('#card-container')[0].style.display = 'none';
}
$('#card-container')[0].style.opacity = op;
op -= 100/duration;
}, 100);
var timer2 = setInterval(function () {
if (op <= 0){
$('#wait-for-result-container')[0].style.opacity = 0;
$('#wait-for-result-container').show();
}
if (op >= 1){
clearInterval(timer2);
}
if($('#wait-for-result-container').is(':visible')){
$('#wait-for-result-container')[0].style.opacity = op;
op += 100/duration;
}
}, 100);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example2</button>
I'm trying to make a slideshow of HTML pages outputting to a screen 24/7. What I have works, but different slides need different intervals. How can I achieve this?
The output is fullscreen with a fixed footer which displays logo, some messages and the time.
jQuery
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = ['welcome','movie']; // Which slides
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 1; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index === slides.length) { // If at end
index = 0; // Start again
}
div.attr('src', folder + '/' + slides[index] + '.' + extension); // Load next one
index++;
}
setInterval(function () {
loop();
}, time);
});
HTML
<iframe id="content" src="slides/welcome.html" width="100%" height="100%" frameborder="0"></iframe>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>
Using setTimeout and buttons to start and stop the loop.
http://jsfiddle.net/nirmaljpatel/75tmnmbq/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>
<div id="content"></div>
</body>
<script>
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = [{"ImageName":"Welcome", "Time":200},{"ImageName":"Image1", "Time":5000},{"ImageName":"Image3", "Time":1000},{"ImageName":"Image4", "Time":500},]; // Which slides
//var slideObj = JSON.parse(slides);
//alert(slides);
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 0; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index == slides.length) { // If at end
index = 0; // Start again
}
div.html("ImageName: "+slides[index].ImageName + "; Image Time Interval: "+slides[index].Time); // Load next one
index++;
}
if(index==0)
loop();
setInterval(loop, slides[index].Time);
});
</script>
</html>