Develop Reference

Issues with rotating jqueryUI modal

I am trying to build a modal that rotates to a particular element, $(.linkmoddet), based on a clicked element in the navbar $('.selectcircle') using the .switchClass function in jQueryUI.
However, I am having issues with the actual math involved, often causing:
only one or two elements to rotate at a time.
multiple elements gaining classes but not losing them.
occasionally losing all the classes involved, defaulting the element in question to a standard size and position in CSS.
Code
Edit: This has now been fixed.
http://codepen.io/yeasayer/pen/ZWxYZG
var selectcircle = $('.selectcircle');
var linkmoddet = $('.linkmoddet');
selectcircle.click(function(){
var circleindex = $(this).index()-1;
var centerindex;
console.log(circleindex);
selectcircle.each(function (index){
if (circleindex == index)
{
console.log($(this));
}
});
linkmoddet.each(function (index){
if ($(this).hasClass('moddetcenter'))
{
centerindex = $(this).index();
console.log("the center is index #"+centerindex);
}
var rotation = centerindex - circleindex;
//This is where I start having issues.
var i = $(this).index() + rotation;
var j;
if (i <= -1)
{
j = i + moddetids.length-1;
$(this).switchClass(classes[i+$(this).index()],classes[j]);
}
if (i >= moddetids.length)
{
j = i - moddetids.length;
$(this).switchClass(classes[i-$(this).index()],classes[j]);
}
else
{
if (rotation < 0)
{
j = i-1;
}
else
{
j = i+1;
}
$(this).switchClass(classes[i], classes[j]);
}
});
});
Does anyone have an idea on how to achieve the desired results, possibly in a simpler manner than described above?

Alright, it turns out that I figured it out by doing the following:
linkmoddet.each(function (index){
var classnum;
var newrot;
if ($(this).hasClass('moddetcenter'))
{
classnum = 2;
if (rotation < 0)
{
rotation += classes.length;
}
if (classnum + rotation >= classes.length)
{
newrot = classnum + rotation - classes.length;
$(this).switchClass(classes[classnum],classes[newrot]);
}
else if (rotation != 0)
{
$(this).switchClass(classes[classnum],classes[classnum+rotation]);
}
}
/* This is repeated for all the classes available in the classes array.
* ie: 0 being the first class, 1 being the second, etc. It's not an
* elegant solution, but it works for my current needs at the moment
* while I put it in a function in the future. */
Thanks!

Slideshow with FadeOut/FadeIn events, using Javascript

So I built a fairly simple slideshow, but can't quite figure out how to incorporate the fade in / fade out effect. I've read that it's best to use JQuery, but some have suggested that standard JavaScript would also do the trick - in any case, I've tried several scripts, but none seem to work. If someone here could help, I'd be in their debt!
Here's my code:
<script type = "text/javascript">
var Image = new Array("pics/21cents.png", "pics/22cents.png", "pics/23cents.png");
var Image_Number = 0;
var Image_Length = Image.length - 1;
var x;
function change_image(num) {
Image_Number = Image_Number + num;
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
document.slideshow1.src=Image[Image_Number];
return false;
}
function auto() {
x = setInterval("change_image(-1)", 5000);
}
function stop() {
clearInterval(x);
}
auto();
</script>

The easiest way to do this is by far by using jQuery. In addition to a handful of useful UI effects (e.g. slideDown(), fadeOut(), etc), you also get the ability to select and manipulate DOM elements with ease.
For example, if you were going to use jQuery it would be as easy as something like:
var $img = $("<img>").css({"display": "none"}).prop("src", "http://placehold.it/500x500");
$("div").html($img);
$("img").fadeIn();
Otherwise to get the fadeIn/Out effect you will have to set somesort of setInterval() loop, changing the opacity by a percentage at each iteration. E.G.:
setInterval(function() {
var img = document.getElementById("image");
var opacity = img.style.opacity;
if(opacity !== 1) {
img.style.opacity += 0.01;
}
}, 100);

Is there an universal solution for looping through and animating series of .png frames with jQuery / JavaScript?

I want to display a few animated "illustrations" on a website I'm working on.
.gif is not an option due to significant loss of quality.
Is there any solution out there that would allow me to iterate through a folder of PNG's and display them on screen?
Thanks in advance.

something like this will work if the images are named 1.png through 25.png for example.
var slides = 25; //number of slides
var i = 1; //first slide
var delay = 200; //set delay
var timer;
function pngani() {
if (i <= slides) {
$('#show img').attr('src', 'pathtofile/' + i + '.png');
}
i++;
}
$('#start').click(function () {
timer = setInterval(pngani, delay);
pngani();
});
$('#pause').click(function () {
clearInterval(timer);
timer = null;
});
$('#reset').click(function () {
i = 1;
$('#show img').attr('src', 'pathtofile/' + i + '.png');
});
I added a start, pause, and reset button, so the execution can be controlled.
made a fiddle: http://jsfiddle.net/filever10/Kur9u/

How to move DIV pixel by pixel

I have a DIV setup like this.
<div id="parent" class="parent">
<div id="child" class="child">
</div>
</div>
Styles
<style>
.parent{
float:left; height:300; width:300px; background-color:#00ff00;
}
.child{
float:left; height:60; width:60px; background-color:#00ff00;
}
</style>
<script>
function move(){
while(m < 100){
document.getElementByid('child').style.marginTop = m;
m = m+1;
}
}
move();
</script>
I want to move inner DIV ( named child) pixel by pixel from top to bottom by 100 pixels.
I think it can be done using style.marginTop = '' and settimeout() function
But still not able to get this working.

Here is how you can animate your div with vanilla JavaScript: http://jsfiddle.net/z6F7m/1/
JavaScript
var elem = document.getElementById('animated'),
top = parseInt(elem.style.marginTop, 10) || 0,
step = 1;
function animate() {
if (top < 100) {
requestAnimationFrame(animate);
elem.style.marginTop = top + 'px';
top += step;
}
}
animate();
I highly recommend you to use requestAnimationFrame instead of setTimeout, if the browser does not supports requestAnimationFrame you can fallback to setTimeout.

Try this
var element = document.getElementById('child');
for (var i=0; i != 100; i++){
element.style.marginTop += 1;
}
That'll loop 100 times and add 1 to the marginTop each loop.
I'd suggest using jQuery thought, because with jQuery you can simply do
$("#child").animate({ marginTop: 100 });
EDIT
Top example doesn't make sense, try this.
var element = document.getElementById('animated');
for (var i = 0; i != 100; i++) {
currentTop = parseInt(element.style.marginTop) || 0;
newTop = parseInt(currentTop + 1);
element.style.marginTop = newTop + "px";
}
This is also stupid because it loops way to fast and by the time the browser renders the box, it's already 100px from the top. See here
Again, go with the jQuery solution.

One way of doing it is using jQuery's animate function, which would require merely writing:
$(element).animate({ 'top': '100px' });
Example

Check the following fiddle. I did it without jquery.
var step = 0;
window.setInterval(function(){
var value = (++step)*100;
if (value<300)
document.getElementById("child").style.marginTop=value+"px";
else
step = -1;
},1000);
http://jsfiddle.net/pasindur/EbHt5/

jQuery/Javascript NaN when doing addition on number

I'm attempting to create a simple link scroller but run into some trouble working out the current position.
Basically, in my code I've initialised the currentPos variable outside of the function. Then try to add 1 to it but I'm getting some erratic behaviour. Sometimes getting NaN.
This is on a localhost xampp installation, the same code works fine in jsfiddle so I can't understand it.
jsfiddle: http://jsfiddle.net/w654X/
My code is below, any help would be greatly appreciated.
var currentPos = 1;
$('#test').click(function() {
// exit if animation is already playing
if ($(':animated').length) {
return false;
}
height = $('#inner').height();
noOfLinks = height / 53;
lastPos = noOfLinks - 4;
alert(currentPos);
if (currentPos != lastPos) {
$('#inner').animate({
marginTop: "-=106px"
});
}
else {
$('.arrow-up').hide();
}
currentPos += 1;
});

Please try the below code
$(document).ready(function(){
var currentPos = 1;
$('#test').click(function() {
// exit if animation is already playing
if ($(':animated').length) {
return false;
}
height = $('#inner').height();
noOfLinks = height / 53;
lastPos = noOfLinks - 4;
alert(currentPos);
if (currentPos != lastPos) {
$('#inner').animate({
marginTop: "-=106px"
});
} else {
$('.arrow-up').hide();
}
currentPos += 1;
});
});
Let me know where you have used the script in load or document ready perivously.
Thanks

Well, this has driven me crazy for far too long but it turns out that I had already used the variable name 'direction' in another script. Used different names and all is well.