Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm putting together a Loch Ness Monster website.
I have two images of Nessie that I've been trying to slide onto the screen from the left and right side at random intervals without having to be prompted by the user.
In details, the images are supposed to:
slide on the screen from the left hand side, then slide off, and then
slide on from the right hand side, then slide off.
both on random intervals.
I realize I need to probably be using the .animate function, math.random, and possibly .toggle but I'm very new to JavaScript and jQuery and have no idea how to piece the code together.
If anyone could help me I'd be extremely thankful !
$(function() {
});
function animateNessie() {
var randomTime = // use Math.random to update randomTime var for its next use
setTimeout(function() { // animate Nessie graphic (see jQuery.animate)
$().animate({
left: '50px'
});
//hide Nessie graphic
//call function again
animateNessie();
}, randomTime);
}
(Someone in my class tried to put together a loose outline, but they weren't really sure either.
I'd rather not use bootstrap because of having to go through the process of downloading it,
plus I'm not really good with it yet)
What you're thinking of is a carousel. It's easier to use Bootstrap for this, but I do know of a natural jQuery solution. I thought this might be helpful.
You'll want to use setInterval but pass in random values for this. Let's say for example, you wanted the intervals to randomly be between 1 and 10 seconds.
var randomTime = Math.floor(Math.random() * 9000) + 1000;
This will select a random number between 1000 and 10000, which will be passed into the second parameter of setInterval. This measures the number of miliseconds it will take for your code to run.
You then need to get your images. Assuming you only have two images, you would use this code.
var image1 = $("img:eq(0)"); // Selects your first image
var image2 = $("img:eq(1)"); // Selects your second image
Hide the second image with the hide() method.
image2.hide();
To run a function continuously, we use setInterval. Since we want to alternate, we just call the toggle() method which checks if an image is hidden or not.
setInterval(function() {
$("img").toggle();
}, randomTime);
Here's a fiddle
http://jsfiddle.net/sx3fnpuy/1/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'd like to remove an id from an image after its animation is completed. I have this in my code:
if(index == 1 && direction =='down'){
$('#slidetext1 #rock').animate({right:"0"});
$('#slidetext1 #deer').animate({left: "0"}).addClass('open').removeAttr('id');
}
It's not working because it removes the id before even starting the animation, but what I want to do is to remove the id #deer from the image and add ('open') after the .animate() has been executed.
so here i made a jsfiddle: http://jsfiddle.net/67oe1jvn/45/ . pay attection to the left image as you scroll down under the HELLO h1. the thing i want to achive is: when i get to the second section, i'd like to see both of the images slide in the view with the directive "transition:all 1.2s ease-out;" AND whenever the section gets changed make them slide out of the view with a faster transiction, so it won't been noticed that much.
First of all, as pointed out in the comments, you don't want to remove the id attribute of a DOM element, that's bad practice. Rather, add and remove a specific class, for example. (your code works almost the same if you change #deer to .deer)
As for doing this when the animation is done: see the jQuery docs on animate, in its second, options param it actually accepts a callback to run when the animation is over:
Complete Function:
If supplied, the complete callback function is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole.
Which means you can write something like:
$('#slidetext1 .deer').animate({left: "0"}, {complete: function(){
this.removeClass('deer');
}})
Note: it's doubtful whether this is the best way to structure your animation, I'm just answering the original question you had: how to do something after the animation has finished.
This question already has answers here:
refresh DOM after append element
(5 answers)
Closed 8 years ago.
UPDATE
I think I have to be a little more precise.
I have this long running code that adds content to my DIVs.
This is an example of the code:
m = jQuery('#test').clone();
//do some work
jQuery('#test2').append(m);
The Problem is that this can really take a while because sometimes I am adding 100 items. And the content only appears on the page after all 100 items have been added. So the user had to wait like 30 seconds or so.
What I would like to is to update the #test2 - DIV after adding 10 elements or so and then continue adding elements
Is there a way to refresh the DOM or (better) refresh the test2 - DIV and then continue adding Elements ?
OLD Description
I have a long running jQuery method that clones DIVs and appends them to the page.
It looks like this:
m = jQuery('#test').clone();
//do some work
jQuery('#test2').append(m);
This code is called several times (sometimes up to 100 times) and it takes pretty long for the content to appear in the page.
Is there a way to refresh the dom and print the content onto the page so that the user is not getting bored because nothing happens ?
You can do what you want using setTimeout. It's like the same logic we use for doing animations.
// Code goes here
function load(index) {
var m = jQuery('#test').clone();
m.html("Element" + index)
jQuery('#test2').append(m);
if(index < 100) {
setTimeout(function() {
load(index + 1);
},100);
}
}
$(document).ready(function(){
load(0);
});
here is a plunker
This is not exactly what you want, but why don't you put a spinner on your page whilst this is loading, which then goes away when the operations are done? It may be a cleaner method of doing things rather than the page just randomly refreshing for the user whilst they are using it.
I want to have a page turn effect like the one seen on this page: jFlip demo except I want to automate the page turning, like make it happen every second, 20 times (or however many images I have). I want to be able to trigger this animation to run either on page load, when a button is clicked, etc.
Unfortunately I don't understand jQuery all that well and the plugin's events seem rather complicated to me, probably mostly due to my inexperience with jQuery. Any help on which direction I should go, methods I should try? I am not limiting myself to jQuery or even Javascript, this is just the example I have found that achieves my desired effect.
You can find the updated code here. replace this with old one.
Usage :
var jFlip = new Flip("#g1",300,300,{background:"green",cornersTop:true,scale:"fit"});
// here #g1 is a jquery selector (make sure it returns only one).
// The structure is Flip(JQselector,width,height,options)
then use the jFlip object to flip slides/pages
jFlip.flipMe() // for next slide
jFlip.flipMe(true) // for prev slide
for binding a function to slide change event you can use
$("#g1").bind("flip.jflip",function(event,index,total){
$("#l1").html("Image "+(index+1)+" of "+total);
});
// here the selector is same as the one passed inside jFlip function.
Try this and let me know the feedback.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have four columns that I want to toggle on hover.
Each column will have default content (visible when the page loads)
and content that will only show when the mouse hovers over the column.
I want the on-hover content to show with a smooth toggle effect (sliding down)
Just to make sure we're on the right track, I don't need to know how to do this.
I know how, what I need to know is the "best" way to do this.
You will have to work with the "onmouseover" and "onmouseout" events.
JavaScript:
document.getElementById('IDOfTheElement').onmouseover = function() {
// Whatever your hover code goes here
document.getElementById('IDOfElementYouWantToShow').style.display = "block";
});
document.getElementById('IDOfTheElement').onmouseout = function() {
// Exit hover code goes here
document.getElementById('IDOfElementYouWantToHide').style.display = "none";
});
jQuery has a nice way of dealing with this:
$('#IDOfTheElement').on('mouseover', function() {
// Whatever your hover code goes here
$('#IDOfElementYouWantToShow').show();
// Or you can
$('#IDOfElementYouWantToShow').fadeIn("slow", function() {
alert('Fading in!');
});
});
$('#IDOfTheElement').on('mouseout', function() {
// Exit hover code goes here
$('#IDOfElementYouWantToHide').hide();
// Or you can
$('#IDOfElementYouWantToShow').fadeOut("slow", function() {
alert('Fading out!');
});
});
Note that some browsers may have issues with show() and hide(), so you may need to use document.getElementById('ID').style.display = 'block'; or document.getElementById('ID').style.display = 'none';.
According to the tag you picked for your question, following is a good solution that olny requires JQuery (no CSS is involved). It's actually pretty easy using the hover() and toggle() functions.
$('tbody.restricted').hide();
$('table').hover(function() {
$(this).find('tbody.restricted').slideToggle("slow");
});
There's a little more complex challenge that is introduced by your will to animate multiple rows as a block. A solution I find suitable for that purpose is to encapsulate (dynamically or not) the rows you want to animate as a whole within a tbody that will be displayed as a block with CSS.
tbody {
display:block;
}
N.B.I went that way because of the usage of a table (columns was mentionned), but you could always design this solution without using tables and only markups displayed as blocks (div by default). This wouldn't require the previous CSS alteration.
See this fully functional JSFiddle
Don't want to just copy some other code, i think this jsfiddle link would solve your problem nicely.
http://jsfiddle.net/NKC2j/2/
$("#menu").hover(function(){
$('.flyout').slideToggle();
});
For performance you would need to toggle a CSS class, otherwise you will need to traverse your DOM a few times to show/hide elements
This is the original post: https://stackoverflow.com/a/11114735/1231079
I have some images from another source that need to refresh from their offsite source every 30 seconds. I would like to use JavaScript to accomplish this so as to avoid an entire page reload.
Presently I've attempted something similar to this question: "reloading a page after every 10 sec in rails 3.1"
(This is a Rails application, but I probably don't need a Rails specific answer in this case.)
Notwithstanding, I am ending up with no appreciable result when I add a div around the link + image nor when I add a div to the image itself. I have attempted both solutions in this example by creating a element-reload.js.
The first solution that's marked as the answer simply reloads the page with nearly all of the page elements absent. The second solution makes the image that I'm trying to refresh actually disappear upon first refresh when I surround the link + image with a div, but when I place the id upon which it's acting on the actual image tag, it yields nothing.
I'm sure I'm missing something rather simple since JS is not a strong suit for me at the moment.
Finally, I do have a number of sources to refresh and would like to see an example of performing this for a class vs an id if possible, but having more granular control over each one may be best in the end for varied times for the refreshes.
If you're up for jQuery, this can be done quite easily:
$(function() {
setInterval(function() {
$('img').each(function() {
$this = $(this);
$this.attr('src', $this.getAttribute('src') + '?timestamp=' + new Date().getTime());
console.log($this.prop('src'));
});
}, 30 * 1000);
});
In order to prevent browser caching, you have to fool the browser and load the image with a GET request variable timestamp. It doesn't matter what the parameter is, but the image will load brand-new and not from cache because the URL changes.
jQuery is famous for its use of CSS-like selectors.
Replace $('img') with one of these:
$('img.yourClassName'); // Class
$('#your_id, #another_id, ...'); // ID(s). Omit the comma for a single id
$('img[id^="common_base_id"]'); // Selects all images with an id that starts with "common_base_id".
There's also the :not() selector, which can filter your results:
$('img.yourClassName:not(.do-not-reload)');
$('img.yourClassName:not([src="img/spinner-skip.gif"])');