mercredi 18 novembre 2015

Random position multiple divs on load and click

Im coding a website as an assignment for university and in the center there are multiple divs containing text or images that are randomly positioned in the container div. That part works, but when you click on a link, content of a html file are loaded into the container and again the divs should be positioned randomly. It looks like it work at the first sight but immediately after it the divs are again positioned at the top left, not randomly.

You can have a look at the website here: http://ift.tt/1QO7S2D

I'm actually not very good at programming, but I try to find my way into it, so my coding can be a mess. I'm sorry for that. Here is what my javascript file looks like to position the divs:

function randomPos(){
function textPosition1(){
    box = document.getElementById('centercontent');
    //alert('#centercontent.width: ' + box.offsetWidth + ', height: ' + box.offsetHeight);
    title = document.getElementById('title');
    text1 = document.getElementById('text1');
    //alert('#text1.width: ' + text1.offsetWidth + ', height: ' + text1.offsetHeight);
    text2 = document.getElementById('text2');
    text3 = document.getElementById('text3');
    text4 = document.getElementById('text4');
    text5 = document.getElementById('text5');
    //alert('#text2.width: ' + text2.offsetWidth + ', height: ' + text2.offsetHeight);
    image1 = document.getElementById('image1');
    //alert('#image1.width: ' + image1.offsetWidth + ', height: ' + image1.offsetHeight);
    image2 = document.getElementById('image2');
    //alert('#image2.width: ' + image2.offsetWidth + ', height: ' + image2.offsetHeight);
    extra = 40 + 4;

    //alert(title.offsetHeight);
    //alert('textPosition1');

    w = box.offsetWidth - extra;
    h = box.offsetHeight - extra - title.offsetHeight;


    // Text box 2

    function randomText2(){

        //alert('randomText2');

        lt2=Math.floor(Math.random()*w) + (extra / 2);
        tt2=Math.floor(Math.random()*h) + (extra / 2) + title.offsetHeight;

        if(lt2>w-text2.offsetWidth){
            lt2=w-text2.offsetWidth;
        }
        if(tt2>h-text2.offsetHeight){
            tt2=h-text2.offsetHeight;
        }

        text2.style.left=lt2+'px';
        text2.style.top=tt2+'px';

    }
    randomText2();

    function randomText3(){

        //alert('randomText2');

        lt3=Math.floor(Math.random()*w) + (extra / 2);
        tt3=Math.floor(Math.random()*h) + (extra / 2) + title.offsetHeight;

        if(lt3>w-text3.offsetWidth){
            lt3=w-text3.offsetWidth;
        }
        if(tt3>h-text3.offsetHeight){
            tt3=h-text3.offsetHeight;
        }

        text3.style.left=lt3+'px';
        text3.style.top=tt3+'px';

    }
    randomText3();

    function randomText4(){

        //alert('randomText2');

        lt4=Math.floor(Math.random()*w) + (extra / 2);
        tt4=Math.floor(Math.random()*h) + (extra / 2) + title.offsetHeight;

        if(lt4>w-text4.offsetWidth){
            lt4=w-text4.offsetWidth;
        }
        if(tt4>h-text4.offsetHeight){
            tt4=h-text4.offsetHeight;
        }

        text4.style.left=lt4+'px';
        text4.style.top=tt4+'px';

    }
    randomText4();

    function randomText5(){

        //alert('randomText2');

        lt5=Math.floor(Math.random()*w) + (extra / 2);
        tt5=Math.floor(Math.random()*h) + (extra / 2) + title.offsetHeight;

        if(lt5>w-text5.offsetWidth){
            lt5=w-text5.offsetWidth;
        }
        if(tt5>h-text5.offsetHeight){
            tt5=h-text5.offsetHeight;
        }

        text5.style.left=lt5+'px';
        text5.style.top=tt5+'px';

    }
    randomText5();




    // Image 2

    function randomImage2(){

        li2=Math.floor(Math.random()*w) + (extra / 2);
        ti2=Math.floor(Math.random()*h) + (extra / 2) + title.offsetHeight;

        if(li2>w-image2.offsetWidth){
            li2=w-image2.offsetWidth;
        }
        if(ti2>h-image2.offsetHeight){
            ti2=h-image2.offsetHeight;
        }
        image2.style.left=li2+'px';
        image2.style.top=ti2+'px';

    }
    randomImage2();




    // Image 1

    function randomImage1(){

        li1=Math.floor(Math.random()*w) + (extra / 2);
        ti1=Math.floor(Math.random()*h) + (extra / 2) + title.offsetHeight;

        if(li1>w-image1.offsetWidth){
            li1=w-image1.offsetWidth;
        }
        if(ti1>h-image1.offsetHeight){
            ti1=h-image1.offsetHeight;
        }

        image1.style.left=li1+'px';
        image1.style.top=ti1+'px';

        // if image1 overlaps text2
        if(li1 <= (lt2 + text2.offsetWidth) 
        && li1 >= (lt2 - image1.offsetWidth) 

        && ti1 <= (tt2 + text2.offsetHeight) 
        && ti1 >= (tt2 - image1.offsetHeight)){
            //alert('image1 overlaps text2');
            //randomImage1();
        }

        // if image1 overlaps image2
        if(li1 <= (li2 + image2.offsetWidth) 
        && li1 >= (li2 - image1.offsetWidth) 

        && ti1 <= (ti2 + image2.offsetHeight) 
        && ti1 >= (ti2 - image1.offsetHeight)){
            //alert('image1 overlaps image2');
            //randomImage1();
        }

    }
    randomImage1();


    // Text box 1

    function randomText1(){

        lt1=Math.floor(Math.random()*w) + (extra / 2);
        tt1=Math.floor(Math.random()*h) + (extra / 2) + title.offsetHeight;

        if(lt1>w-text1.offsetWidth){
            lt1=w-text1.offsetWidth;
        }
        if(tt1>h-text1.offsetHeight){
            tt1=h-text1.offsetHeight;
        }
        text1.style.left=lt1+'px';
        text1.style.top=tt1+'px';

        // if text1 overlaps text2
        if(lt1 <= (lt2 + text2.offsetWidth) 
        && lt1 >= (lt2 - text1.offsetWidth) 

        && tt1 <= (tt2 + text2.offsetHeight) 
        && tt1 >= (tt2 - text1.offsetHeight)){
            //alert('text1 overlaps text2');
            //randomText1();
        }

        // if text1 overlaps image1
        if(lt1 <= (li1 + image1.offsetWidth) 
        && lt1 >= (li1 - text1.offsetWidth) 

        && tt1 <= (ti1 + image1.offsetHeight) 
        && tt1 >= (ti1 - text1.offsetHeight)){
            //alert('text1 overlaps image1');
            //randomText1();
        }

        // if text1 overlaps image2
        if(lt1 <= (li2 + image2.offsetWidth) 
        && lt1 >= (li2 - text1.offsetWidth) 

        && tt1 <= (ti2 + image2.offsetHeight) 
        && tt1 >= (ti2 - text1.offsetHeight)){
            //alert('text1 overlaps image2');
            //randomText1();
        }

    }
    randomText1();

}


function notMobile(){

    //alert('notMobile');

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || $(window).width() < 1024){}
    else{
        textPosition1();

        $(function() {
            var a = 3;
            $( "#text1,#text2,#image1,#image2" ).draggable({appendTo: '#centercontent', start: function(event, ui) { $(this).css("z-index", a++);}});
            $('#centercontent div').click(function() {
                $(this).addClass('top').removeClass('bottom');
                $(this).siblings().removeClass('top').addClass('bottom');
                $(this).css("z-index", a++);

            });
        });
    }
}
notMobile();

} window.onload = randomPos;




Aucun commentaire:

Enregistrer un commentaire