I'm using jQuery to use it's hide function but I can't seem to get it to work. The image is normally set to a scale of 0 0 0, and after a period of time, the scale changes to 1 1 1 (so, image becomes visible). I want to do this on an interval and can use setInterval for that. However, I also want to hide the image while inside that same interval. So, it becomes visible and then invisible on a loop, basically. Here is the code:
<script>
function PopUp(scale) {
var indicator = document.getElementById('FeelIndicator');
indicator.setAttribute('scale', '1 1 1');
$("#FeelIndicator").hide(8 * 1000) }
setInterval(PopUp, 10 * 1000);
</script>
As of now, the indicator does pop up after 10 seconds, but never becomes hidden. I don't get an error message in the console, but I'm guessing that I'm not using the jQuery code correctly. Any help would be greatly appreciated!
edit: Thank you Jaromanda. I've edited the code but it still doesn't seem work.
Muhammad, I just want it to appear for a few seconds and then disappear. It will also disappear if the user clicks on the image but I'm not worried about figuring out that code.
Your jquery/javascript selectors don't match.
Assuming the actual element Id is #FeelIndicator:
$('#FeelIndicator').hide(8 * 1000)
instead of:
$('#indicator').hide(8 * 1000)
Related
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.
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!
I have one fine square box as a "div",On which after clicking gets splitted into n X n form every-time, with a random background color evrytime...Now the problem what I am facing is that after splitting of div i want to apply again some CSS to the random "div" inside it after clicking...Currently in my code it is applicable only in the first "div" inside it as u can see from my code,as i have taken "next" property intentionally just to explain my question more specifically over here...
I hope i made my question clear..
Thanks,a lot in advance..
My code is provided in below link ...
https://drive.google.com/file/d/0B8vz7Fs9vsK2MXUxeDlLR3hyVVU/view?usp=sharing
Since your div is dynamically inserted, you need the live method and bind a click event to it.
$('selecteor').live('click',function() { //code });
See an example here
If I am getting you correctly then, you can get a random integer in range by this :
Math.floor(Math.random() * (max - min + 1)) + min;
and you can get the all the div's based on some class $('.some_div') and get some random div based on above code line. min and max can again be set according to the size of the $('.some_div'). hope that helps
I am making a simple image gallery
http://jsfiddle.net/QEh53/1/
Imgs array can store upto 36 images and i wants to display only first 6 onload. there is one next and back button, I need it when click on Next it will show next 6 images from Imgs array and on clicking Back last 6 images should slide in. if there is no img left in prev or next it should loop through next 6 images.
Thank you for any help.
Edit:
I have tried this with just back button but for some reason it is not removing old list before adding new one http://jsfiddle.net/QEh53/6/
Edit:
here was solution:
jQuery gallery turn over with next and previous buttons
I belive this code will help you: example.js
total is the amount of "pages", you can set it as Math.ceil( totalImages / 6 ).
This, nonstopping pages was called loop in that code. It returns a correct page, as you wanted.
function loop( value )
{
return value < 0 ? total + value : ( value >= total ? value % total : value );
}
I have a page that has 2 columns of words, 20 total, that are of a certain class (dim) and each a unique id. The ‘dim’ class defines the words as hidden. I have the following jQuery code running when I press a button:
$().ready(function()
{
var x = 20; // will be dynamic later :-)
$("#btn1").click(function()
{
for(i=1 ; i <= x ; i++)
{
//alert(i);
$(".dim").removeClass("hilite");
// this 'turns off' all the words
$("#wrd-"+i).addClass("hilite");
// this turns on the i'th word
}
});
});
When I uncomment the alert line I’m able to see that each word becomes visible and then hides again, just like it’s supposed to. The only problem is that it happens too fast. I want a way to make each loop wait a given number of nanoseconds. I’ve tried the setTimeout method but I can’t get it to do anything. Any idea how to slow this down? I’ve tried using .show and .hide but all the effects seem to happen at once.
My goal is to have the first word in column 1 display for 2 seconds. Then it goes away and word 1 in column 2 displays for 2 seconds. Then word 2 column 1, then word 2 column 2 and so on.
Thanks
You shouldn't need IDs like #wrd3 to step through the list of elements.
I haven't tailored the DOM selection for you, but this code will show and hide each item in a set, with a pause between. The interval in .fadeIn means the item will be showing for that about of time before the .fadeOut() function starts.
var things = $('.foo');
var index = 0;
things.hide();
var showHide = function() {
things.eq(index).fadeIn(2000,function(){
$(this).fadeOut(2000);
});
index++;
setTimeout(showHide,3000);
};
showHide();
Of course, you can change the fades to .show() and .hide(), or whatever other animation you want.