Plugin Installation

<!-- #1 jQuery-Include -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- #2 Include Downloaded Files --> <script type="text/javascript" src="/path-to-randposplugin.js"></script> <link href="/path-to-randposplugin.css" rel="stylesheet" type="text/css"/>



Plugin Usage

<div> <!-- (Empty surrounding element for scrolling) -->
    <div class="RandPosContainer"> <!-- (Container of Elements) -->
        <!-- (Elements to spread across parent) -->
        <div style="background-image: url(...)"></div>
        <div style="background-image: url(...)"></div>
        <div style="background-image: url(...)"></div>
        <div style="background-image: url(...)"></div>
        <div style="background-image: url(...)"></div>
    </div>
</div>
<script type="text/javascript">
    $(".RandPosContainer").RandPos(options);
</script>



Plugin Options

//Description, Settings-Name, Default-Value
$(".RandPosContainer").RandPos({
    //Height of random positioned element's parent
    ContainerHeight: 350,

    //Allow (true) or Forbid (false) overflow (used for scrollable containers)
    OverFlowAllowed: true,

    //Width of elements to be positioned random
    DefaultTargetsWidth: 55,

    //Height of elements to be positioned random
    DefaultTargetsHeight: 55,

    //Dimension-Randomizer: How many px enlargement is allowed?
    TargetsSizeRandomizePlus: 5,

    //Dimension-Randomizer: How many px shrinking is allowed?
    TargetsSizeRandomizeMinus: 15,

    //Should elements be hidden before they are positioned?
    InitiallyHideTargets: true,

    //Should animations be used for elements appearance?
    UseAnimation: true,

    //Duration of elements appearance animation
    AnimationDuration: 2500,

    //Friction of elements appearance animation
    AnimationFriction: 150,

    //Frequency of elements appearance animation
    AnimationFrequency: 115,

    //If elements should not be shown all at once: Time between showing them
    AnimationTimeBetween: 100,

    //Minimum horizontal distance betweeen elements in px
    MinSpreadX: 20,

    //Minimum vertical distance between elements in px
    MinSpreadY: 20,

    //Max number of tries to position element better (closer, more evenly) than before
    MaxTries: 1500,

    //Allow scroll to elements positioned outside of view
    Scrollable: true,

    //Is overflow also allowed to the left side?
    LeftOverflowAllowed: true,

    //Distance between container-top and elements in px
    MinPaddingTop: 10,

    //Distance between container-bottom and elements in px
    MinPaddingBottom: 10,

    //Animate elements with slight css-movement
    SlightMovementAnimation: true,

    //Speed of automatic scrolling in px/s (0 = no scrolling)
    AutoscrollSpeed: 5,

    //Time between elements are shown and automatic scrolling beginns
    ScrollWait: 0,
});



Information-PopOvers

<!-- Use Data-Attributes for PopOver's Showing on Hover() -->
<div>
    <div class="RandPosContainer">
        <!-- (Elements to spread across parent) -->
        <div data-popovertitle="Title" data-popovercontent="Content"></div>
        <div data-popovertitle="Title" data-popovercontent="Content"></div>
        <div data-popovertitle="Title" data-popovercontent="Content"></div>
        <div data-popovertitle="Title" data-popovercontent="Content"></div>
    </div>
</div>



Download




Sandbox


Number Of Elements
Container Height
Default Targets Width
Default Targets Height
Targets Randomize Plus
Targets Randomize Minus
Animation Duration
Animation Friction
Animation Frequency
Animation Time Between
Autoscroll Speed
MinSpread X
MinSpread Y
Max Tries
Min Padding Top
Min Padding Bottom
Scroll Wait


Please report bugs, ideas and improvements as well as solutions for problems, if you've got some, to office@manuelmaurer.at. We'll try our best to get them fixed as soon as possible.