We Keep Coding

Move divs that are inside a div using JS

Im trying to make a "spinner" much like on csgoempire.com, but I'm having some issues (I'm almost totally new to JS and I'm not good at HTML). I have tried a bunch of stuff like making one div for each picture, and having a separate JS function for each, but after some thinking I realised that it wouldn't be efficient at all and it would make it hard to change stuff later. I then decided to make separate divs for each photo, but placing them all in another div which would be moved by the JS function. This would make it a lot more efficient than before, but I can't seem to get it to work, and there are (hopefully) better ways of doing it. Id really appreciate some tips on how I can make it more efficient, and a fix for my current problem :)
Here is the code in all its glory:
console.log("Connected to server.")
function spin() {
console.log("Starting Spin.");
var boxElement = document.getElementById('allBoxes');
var pos = 900;
var id = id;
setInterval(frame, 1);
function frame() {
if (pos == 100) {
clearInterval(id)
} else {
pos--;
boxElement.style.left = pos + 'px';
}
}
}
<div id="allBoxes">
<div id="box2" style="position:absolute; left:712pt; top:150pt; width:50px; height:50px;"><img src="http://www.theaa.ie/winterhub/wp-content/uploads/2015/12/AA-logo-50x50.png" /></div>
<div id="box1" style="position:absolute; left:675pt; top:150pt; width:50px; height:50px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAALVBMVEXGAA4fHx////98fHz8/Pzy8vItLS1xcXFnZ2eIiIhdXV2PCxQtHR64Aw9XFRmYSViLAAAAnklEQVRIie2UyQ6DMAxEyZAd2v//3JolAuWQdKyqAok5WDn4ZRQvGYZHj0SmqTsivs71PSS7KBEwJUaX24h3sOGMBAvn2y7RAuOBjICNvbcEAKkgckDoV0wuRkGwWH5R5HRGUr/I2FWff4toun9V5G8VY1upGRh+LPnh16wYv8ia70LR/SsilaaZSN71etNIMaKQzYhDViMWESMauZE+q+cGCDwyhBUAAAAASUVORK5CYII="
/></div>
</div>
<button onclick="spin()"> Click Me! </button>
This was made by just googling around, and testing stuff, so I'm sure its insanely bad and inefficient :P (I dont even know if its possible to do what I want to do this way.. )
The issue is that the spinner won't spin anymore.. It does when I move them separately, but not when they are both inside a div, and I move said div. Is there a way to move multiple divs by only moving one of them? Can you recommend another way of doing this if you know a better way that is more.. dynamic?
The end goal is to fetch each user's image from steam and use those images in the "spinner", make an arrow that points to the middle that will output the username of the person it lands on and have the "spinner" start once a timer reaches 0, but for now I'm just trying to learn, and I figured that the best way to learn is to have a project to work on.. (may have picked a bit of a difficult project though..)

You didn't save the interval so you can stop it:
...
var pos = 900;
var id = setInterval(frame, 1);
function frame() {
...
Made a jsFiddle with the solution: https://jsfiddle.net/bfrhw7rf/1/
Consider using css to create the spinner, like here: https://projects.lukehaas.me/css-loaders/
Since you are using a very short interval you are using up the single thread that runs your javascript, with css you are not blocking the rest of your code.

Automatically rotate through content

I have 7 graphs that are accessible to me through a web site. I want to develop my own web application that automatically cycles through each of these graphs, so I can display them on a huge monitor.
I want the functionality to be similar to an image carousel but it would be for web pages instead of images. What are my options? A jQuery plugin? AJAX and an iframe? Keep in mind that I want the data to be live while I display it.

You could use javascript, and a Frame with a simple timer to load it.
Nothing complex needed,
In the title frame set add this:
<script language="JavaScript">
var toShow;
var URL = new Array ('http://www.google.com','www.yahoo.com','www.bit.ly');
function setupTimer() {
toShow = 0;
loadNext();
var t=setTimeout("loadNext()", 3000);
}
function loadNext(){
parent.reportframe.location=URL[toShow];
toShow++;
if (toShow>3) toShow = 0;
}
</script>
<body onLoad="setupTimer()">
Then it will keep reloading the frames.
I just wrote this, did not test it, let me know if you need more help.

http://jsfiddle.net/5dazE/5/show
That's a basic slideshow. You can add or remove sites and then press play. It will rotate every 30 seconds. the code can be fond here: http://jsfiddle.net/5dazE/5
it could use more work, but I am in agreement with #nycynik. It is a great idea.

delay images for display purposes not efficiency using javascript?

I have run into numerous sites that use a delay in loading images one after the other and am wondering how to do the same.
So i have a portfolio page with a number of images 3 rows of 4, what i want to happen is for the page to load,except for the images in img tags. Once the page has loaded i want images 1 of each row to load then say 0.5 seconds later the next image in the row(s) and so no. I'm going to have a loading gif in each image box prior to the actual image being displayed.
I know its doable but cant seem to find the term for doing this. This is purely for looks as it is a design site.
Thanks for the help.

This is very easy to do in jQuery
$('img').each(function(i) {
$(this).delay((i + 1) * 500).fadeIn();
});
Fiddle: http://jsfiddle.net/garreh/Svs7p/3
For fading in rows one after the other in a table it just means changing the selector slightly. Remember to change from div to img -- I just used div for testing
$('tr').each(function(i) {
$('td div', this).delay((i + 1) * 500).fadeIn();
});
Fiddle: http://jsfiddle.net/garreh/2Fg8S/

Here is what you can do, you can load the image tags with out the src and using a custom property:
<img alt='The image' path='image/path.jpg' />
then you can use javascript to load the images when the site is loaded or whenever you please;
// simplified
window.onload = function () {
var images = document.getElementsByTagName('img');
// loop and assign the correct
for (var i =0; i < images.length;i++){
var path = images[i].getAttribute('path');
images[i].src = path;
}
}
I hope you get the concept of how the images are delayed
**please note the path attribute is not a standard one.

The easiest way I can think to do this is to have a table set up that will eventually hold the image tags, but have none on load. Javascript can loop through an array of image urls, and insert those image tags into random locations on the table.
If you want to have the delay, setInterval is the perfect tool. http://www.w3schools.com/jsref/met_win_setinterval.asp
// You can hard-code your image url's here, or better still, write
// a server-side script that will read a directory and return them
// so it is fully dynamic and you can add images without changing code
unpickedImages = array();
// Start loading
loadAllImages = setInterval( insertImage, 600 );
function insertImage() {
if( unpickedImages.length > 0 ) {
var imageUrl = unpickedImages.shift();
// pick empty x, y on your table
// Insert the image tag im that <td></td>
} else {
clearInterval( loadAllImages );
}
}

You really don't need javascript to do this. If you specify the image sizes in the HTML or CSS, the browser will layout and display the page while loading the images, which will likely be loaded in parallel. It will then display them as soon as it can.
That way if users re-visit your site and have the images cached, they all show up immediately. If you have a script to load the images after a delay, you are making visitors wait for content unnecessarily and all their efforts to have a faster browser and pay for a fast internet connection has gone to waste.

How can I reveal content and maintain its visibility when mousing to a child element?

I'm asking a question very similar to this one—dare I say identical?
An example is currently in the bottom navigation on this page.
I'm looking to display the name and link of the next and previous page when a user hovers over their respective icons. I'm pretty sure my solution will entail binding or timers, neither of which I'm seeming to understand very well at the moment.
Currently, I have:
$(document).ready(function() {
var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');
dropdown.hide();
$(navigator).hover(function(){
$(this).siblings(dropdown).fadeIn();
}, function(){
setTimeout(function(){
dropdown.fadeOut();
}, 3000);
});
});
with its respective HTML (some ExpressionEngine code included—apologies):
<p class="older_entry">Older<span class="hide_me">Older entry:
<br />
{title}</span></p>
{/exp:weblog:next_entry}
<p class="blog_home">Blog Main<span class="hide_me">Back to the blog</span></p>
{exp:weblog:prev_entry weblog="blog"}
<p class="newer_entry">Newer<span class="hide_me">Newer entry:
<br />
{title}</span></p>
This is behaving pretty strangely at the moment. Sometimes it waits three seconds, sometimes it waits one second, sometimes it doesn't fade out altogether.
Essentially, I'm looking to fade in 'span.hide_me' on hover of the icons ('a.paginate_link'), and I'd like it to remain visible when users mouse over the span.
Think anyone could help walk me through this process and understand exactly how the timers and clearing of the timers is working?
Thanks so much, Stack Overflow. You guys have been incredible as I walk down this road of learning to make the internet.

If you just want to get it working, you can try to use a tooltip plugin like this one.
If you want to understand how this should be done: first, get rid of the timeout, and make it work without it. The difference (from the user's point of view) is very small, and it simplifies stuff (developing and debugging). After you get it working like you want, put the timeout back in.
Now, the problem is you don't really want to hide the shown element on the navigator mouse-out event. You want to hide it in its own mouse out event. So I think you can just pass the first argument to the navigator hover function, and add another hover to dropdowns, that will have an empty function as a first argument, and the hiding code in its second argument.
EDIT (according to your response to stefpet's answer)
I understand that you DO want the dropdown to disappear if the mouse moves out of the navigator, UNLESS its moved to the dropdown itself. This complicates a little, but here is how it can be done: on both types of items mouse-out event, you set a timer that calls a function that hides the dropdown. lets say the timer is 1 second. on both kind of item mouse-in even, you clear this timer (see the w3school page on timing for syntax, etc). plus, in the navigator's mouse-in you have to show the dropdown.

Another issue with the timer in your code is that it will always execute when mouse-out. Due to the 3 seconds delay you might very well trigger it again when mouse-over but since the timer still exist it will fade out despite you actually have the mouse over the element.
Moving the mouse back and forth quickly will trigger multiple timers.
Try to get it to work without the timer first, then (if really needed) add the additional complexity with the delay (which you must keep track of and remove/reset depending on state).

Here was the final working code, for anyone who comes across this again. Feel free to let me know if I could have improved it in any ways:
$(document).ready(function() {
var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');
dropdown.hide();
$(navigator).hover(function(){
clearTimeout(emptyTimer);
$(this).siblings(dropdown).fadeIn();
}, function(){
emptyTimer = setTimeout(function(){
dropdown.fadeOut();
}, 500);
});
$(dropdown).hover(function(){
clearTimeout(emptyTimer);
}, function(){
emptyTimer = setTimeout(function(){
dropdown.fadeOut();
}, 500);
});
});

Javascript/JQuery: Gallery with very large images. How can I have it on click fade out, load the next image, and then fade in w/ the new image?

my boss has me working on a website that basically has a very large gallery right in the middle.
The way this one part needs to work is that the user clicks a next/prev button, the image fades out, displays a loading spinning image gif, and then fades in with the new image when it's down downloading. I have no idea where to even begin.
I know jquery somewhat, but I'm very new to actual javascript. My only reference book at hand is a copy of "Javascript for Dummies" for 1997. Is this of any use to me at all, or has Javascript changed since then?

There are lots of jQuery plugin for image gallery: Galleria, GalleryView, Pikachoose, and this one.
Or you can search from jQuery plugins page.

Please get a newer book, or just use the web as a resource, any info. from 1997 is going to be horribly outdated.
This is a very simple site I've recommended to beginners before: http://htmldog.com/guides/javascript/
No, it doesn't cover everything, but that's what's good about it, you'll get some key things down, and then be able to search on google for more specific stuff.
To give you some barebones ot start with, I would do something like this:
$(document).ready(function() {
$('#nextBtn').click(function() {
transitionToNextImage ();
});
});
transitionToNextImage = function() {
$('img.active-image').fadeTo(1000,0), function() {
// fade out complete.
$('#inProgressGif').show();
getNextImage();
});
};
getNextImage = function() {
// make ajax call to get new image, and
// in the success callback of the ajax call,
// remove the inProgressGif, and
// add the image ot the DOM with opacity 0,
// then slowly fade it in to opacity 1 (opposite
// of what was done above
};