So with my seekbar, image down below, users should be able to jump to a place in the song they desire by changing where the handle is on the seekbar, and the slider handle should change by what part of the song it's in right now.
What is happening right now is this.
This is my slider setup:
$("#progressbar1").slider({
value : 0,
step : 1,
range : false,
min : 0,
max : firstSongDuration,
change : function(){
var value = $("#progressbar1").slider("value");
$("#audio1")[0].currentTime = value;
}
});
This is my setup detecting where in the song it is at currently:
$("#audio1")[0].addEventListener('timeupdate',function(){
firstSongDuration = Math.floor($("#audio1")[0].duration);
setTime(firstSongDuration, $("#endingTime1"));
firstSongCurrently = Math.floor($("#audio1")[0].currentTime);
setTime(firstSongCurrently, $("#currentTime1"));
},false);
and what is happening right now is that when I click to a different spot on the slider, the slider and the audio just get confused and stay where it's at.
What seems to be happening is that when I move to a different part of the slider, firstSongCurrently(my variable for what part of the song it's at right now, integer) gets assigned the new value of the slider. But, in the same function, firstSongCurrently is also being assigned the value of what part of the song it is right now (the second code snippet).
The problem seems to maybe be at the fact that both of those things are in:
$(document).ready(function(){...});
???
I am lost in figuring out how to fix this and have looked into various different posts and articles on how to go about using the slider.
It MUST be simpler than this!!!
Thank you everyone!
Related
This question has been asked before and I've tried the posted solutions, however I am still unable to resolve and hoping someone might be able to help me.
I have a single noUISlider on a webpage that is used to apply a filter to a dataset. After submitting the values, the page is reloaded with updated results from the backend. When this happens, the noUISlider no longer appears on the page anymore.
As suggested in other posts, I added a conditional to check if the slider object is defined and then used 'slider.noUiSlider.updateOptions (options,true)' when the slider is already initialized. However, the slider does not appear in the UI and the slider div is not populated.
Can anyone help me? Not sure what I'm doing wrong.
I've also tried destroying the slider if it exists and then recreating it -- but the same thing happens.
var slider = document.getElementById('slider');
var slider_options = {start: [0,100],connect: true,step: 1,behaviour: 'drag',range:{'min': 0, 'max': 100}};
// If the slider doesn't exist, then create it
if (typeof slider.noUiSlider === "undefined") {
noUiSlider.create(slider,slider_options);
}
// If the slider already exists, then update the options with TRUE parameter
else {
slider.noUiSlider.updateOptions(slider_options,true);
}
I'm looking to create a interactive nav bar for my own personal study purposes, so the idea behind it is if you click on down the number in the corner of the screen changes and a new image and text pops up every time this goes til number(page 5) all the other elements would be on display none except that one page that is active
I'd like to know if it would be possible to create a nav bar and lets say you have a set up nav with 2 buttons up and down how to make certain things not show up and others show up, i think my counter or var is not calculating properly, this is my javascript if statement( more in depth js fiddle https://jsfiddle.net/emilegmn/1L3h51zw/ )
if(numberCount < 1 ) {
add class to nav showing only one button ( down )
}
and this is my counter
numberCount = numberCount + 1
and then after that between 2-4 to show 2 buttons ( up and down )
and at 5 to only show up.
If someone has any things or knows something online that does this, please link me to it if you want!
I have tried finding how to do this but I am still trying to get it all figured out,
Thanks in advance and for your time!
If I understand correctly, is this what you want to achieve:
User clicks between two buttons to make new things appear (like a slider maybe?) but in a nav bar.
To do so you need JavaScript as well as an HTML structure that helps you out. In summary, you could do something along these lines. Granted this only takes into account a sort of "next button", if you want a previous one then you just need to add another function that instead of adding to the current_slide , subtracts from it.
Happy coding!
HTML
<nav id="slider-nav">
<div id="slide-1" class="active"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</nav>
CSS
With this you make sure that only the <div> with class .active is visible
#slider-nav div:not(.active) {
display:none;
}
JS
This would be your sweet JavaScript (jQuery)
//To be placed within your document ready function
const nav_slides =[]; //Holds the id of all your slides
var current_slide = 0;
$('#slider-nav div').each(function(){
nav_slides.push('#' + $(this).attr('id'));
});
/*This would be the part of when clicking happens on the 'next' button in your nav.
Keep in mind that the definition of the function must be within the same
scope as the defined variable, current_slide and nav_slides.
Hopefully, all encapsulated into one single scope that is your api.*/
function nextSlide(){
$(nav_slides[current_slide]).removeClass('active');
current_slide = (current_slide + 1) % nav_slides.length;
//Move on to next slide
//It's a circular counter, when it reaches max slide 4, it'll go back to 0
$(nav_slides[current_slide]).addClass('active');
}
ps: The initialization of current_slide is not dynamic. If in your HTML you happen to change who the first slide with active class is, then you need to update it in your JS. It would be very useful to initialize that current_slide dynamically, in other words, not hard coded out of laziness.
I would like to know if it's possible to navigate between slides in reveal.js like moving on a grid or a checkerboard (reason is explained at the bottom of the post). At the moment when you move to a new stack of slides, the one that takes focus is the topmost of the next stack. This is a normal behavior for a presentation-oriented software but not for a slideshow-oriented tool.
I'd like to override this behavior for some presentations that require moving back and forth along rows of different columns, but I am not confident with Javascript at all. Until now I've found that the right places in the source where the changes should occur might be:
in the function slide (the one that actually changes slide): line 1464, set all vertical indices to same value, instead of the last slide only.
functions navigateLeft and navigateRight (lines 2537 and 2552) use the horizontal index only instead of 'indexh' and 'indexv'.
A possible solution that does not involve the source code was posted a year ago here on stackoverflow by jfriend00 (using-arrowkeys-to-navigate-through-4x4-grid) but I don't know how it should be implemented in an external .js file or in the main .html file.
Why do I think this is important?
I'll make an example that is not my case but easy enough to understand.
Let's assume that you perform a clinical study of 15 analyses on 50 patients, and you want to look at all graphs (generated by Python, MATLAB or R in raster or vector format) like they were on a photo grid, arranged with patients on columns and analyses on rows. And let's say that you want to see all the results of the 9th analysis for all the patients. The problem is that if you click "right arrow" key, reveal.js shows the 1st (or the last visited) slide on the next column.
Intuitively, this is what you would like to have during a presentation to a public audience, but not to your boss or collaborators during a private office/lab meeting.
Ok, I found the solution and I hope this is going to help somebody else with the same problem.
In the file reveal.js, you can just comment the lines 1550 and 1561, and replace the second argument of the function setPreviousVerticalIndex (a zero) with indexv. The final result looks like this.
//if ( document.querySelector( HOME_SLIDE_SELECTOR ).classList.contains( 'present' ) ) {
// Launch async task
setTimeout( function () {
var slides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.stack') ), i;
for( i in slides ) {
if( slides[i] ) {
// Reset stack
setPreviousVerticalIndex( slides[i], indexv );
}
}
}, 0 );
//}
In this way, every time you change slide (the function slide is called) every stack's vertical index become the same of the slide you're moving towards.
Please don't forget to minify the code again or just switch to reveal.js instead of reveal.min.js in you html file.
I have this fiddle, it's pretty cool, my first attempt at creating a jquery control. It is simple, just a star ratings control.
I want to be able to turn this into a control, so that, I can call:
$('#someDiv').starRating();
And it turns that div into a star rating.
I would like to be able to then setup some properties:
Empty Star Source
Hover Star Source
Star Rating (leave blank if new rating)
So it would look something like this:
$('#someDiv').starRating({
emptyStarSource : 'http://www.imageland.com/image.png',
hoverStarSource : 'http://www.imageland.com/image.png',
initialRating : 3
});
Similar to the Datepicker in how to change options etc.
If anyone could point me in the right direction that would be awesome!
EDIT
So I have had a go with the help of the answer I got. The img click events aren't working, I'm guessing that somehow I have to attach the click handlers after I append them to the page. how? After that, I just need to do the settings!
ratings control
To write a plugin in jQuery use the following syntax
$.fn.setRed = function(){
return $(this).each(function(){ //this is required for jQuery chaining to work and also if multiple html objects are passed
var _obj = $(this);
//work on the object here
_obj.css("background-color", "red");
});
}
You can then use
$(".ratings").setRed();
Im trying to build an image slider with little buttons at the bottom that you can click and it will show the appropriate slide. So if you click button #3, it will show slide #3...pretty standard stuff. Im using javascript to detect how many slides there are and show an equal number of buttons. But now I can't figure out how to connect the buttons to the slide so that when a user clicks on one, it will show the appropriate number slide. I know this must be a pretty simple task, I just can't figure out how to set it up.
My script looks like this:
<script>
$(document).ready(function() {
var count = $(".slider_class").length;
$("#slide_0").show();
var i=0;
while (i < count){
$(".slider_bullets").append('<a href="#" id="bullet_link_' + i +'"><img src="img/slider_down.png" alt="slider_down" />');
i++;
}
});
</script>
.slider_class is a class I have applied to each of the slides. Each slide also has a number id starting at zero so that the third slide is #slide_2. The .slider_bullets are the buttons I was talking about. You'll notice that I have given each of them a unique specified id as well that references the slide that they are associated with.
This is what I would use.
$(".slider_bullets a").click(function(){
$(".slider_class").hide();
$("#slide_"+$(this).index()).show();
});