0

I want to show content or image randomly in a div. I am able to show divs fadein and fadout but not able to show appear random position(here an there) in a div. here is my Fiddle.

var max = $('#line1').children().length;
var ctr = 1; 
var i,j,k,t,next;

// items in order (ex. [1,2,3,4,5,6])

var itms=[];
for(i=1;i<=max;i++)
    itms.push(i);  

// now scramble the items randomly (ex. [6,2,3,1,2,4,5])

for(i=0;i<max;i++)
{          
    // choose two items randomly
    j = Math.floor(Math.random() * max);
    k = Math.floor(Math.random() * max);
    // swap
    t = itms[j];                
    itms[j] = itms[k];
    itms[k] = t;
}

// fade in one item at time (following the scrambled list)

fadeIn(0, max, itms);

setInterval(function(){fadeOut(0, max, itms);},3000);

function fadeIn(current, max, itmsList)
{
    $('#it' + itmsList[current]).fadeIn(1000);
    if(current<max)
    {
        setTimeout( function() {fadeIn(current + 1,max,itmsList);}, 1000);//alert(current);

    }
}

function fadeOut(current, max, itmsList)
{
    $('#it' + itmsList[current]).fadeOut(8000);
    if(current<max)
    {
        setTimeout( function() {fadeOut(current + 1,max,itmsList);}, 8000);//alert(current);

    }
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
Praveen
  • 29
  • 4
  • Random position, here and there? Does this mean you want to render the divs in a random location on the screen? – Bill Effin Murray Jan 01 '14 at 09:02
  • i just want to catch fruits coming from different position of a tree. so that i can catch it. that is why i want to appear image or div in different positions. – Praveen Jan 01 '14 at 09:14

1 Answers1

0

You were a little vague so this answer is assumed on a lot.

//get height and width of view able area
var height = $(window).height();
var width = $(window).width();

//change these to a random function of your choice.
var randomx = 12; //rand(0, height)
var randomy = 47; //rand(0, width)

//subtract our random number from the view able area's dimensions
$('#it' + itmsList[current]).css({
        left: (width-randomy)+"px",
        top: (height-randomx)+"px"
});

Example random function: Generating random whole numbers in JavaScript in a specific range?

Community
  • 1
  • 1
Bill Effin Murray
  • 426
  • 1
  • 5
  • 13
  • i just want to catch fruits coming from different position of a tree. so that i can catch it. that is why i want to appear image or div in different positions. – Praveen Jan 01 '14 at 09:16
  • Yeah I read it the first time you posted it. Still don't know what it means – Bill Effin Murray Jan 01 '14 at 09:16
  • sorry, i am new here, you can see http://jsfiddle.net/n6U6j/ , i think there is a main div which creating problem, i can not figure it out. thanks – Praveen Jan 01 '14 at 09:24