Can't make some tiles' dimensions static in freewall jquery

StackOverflow https://stackoverflow.com/questions/23394350

  •  12-07-2023
  •  | 
  •  

Question

I ran across this awesome jquery plugin, called freewall (http://vnjs.net/www/project/freewall/), which despite it's awesomeness, sports a crappy-ass documentation (at least from my jquery-noob point of view).

So here's my problem: i have this simple page with 6-7 divs that freewall aranges according to its rules. the problem is that i want to make the tile's dimensions stay put, as they change when i resize the browser window. the reason i want this is that i will eventually fit some images and texts on those tiles, and resizing them in a random manner would pretty much f*ck everything up.

I tried using fix-size and in every manner described on their website, but with no success. I'm not very good at jquery too (i actually picked up js and jquery 2 days ago), so pardon me if my question is stupid.

Could you please give me a short answer (if you figured out what's wrong with fixedSize)?

Here's my code: html:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/freewall.js"></script>
<script src="js/body.js"></script>
<style type="text/css">
    #container{
        width: 70%;
        margin: auto;   
    }

    .tile{
        background: black;
        width: 320px;
        height: 320px;
    }

</style>
</head>

<body>
    <div id="container">
        <div class="tile" id="1"></div>
        <div class="tile" id="2"></div>
        <div class="tile" id="3"></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
        <div class="tile" id=""></div>
    </div>

</body>
</html>

jquery:

$(function(){
var wall = new freewall("#container");
wall.fitWidth(1140);

var fixd1 = $("#1");
var fixd2 = $("#2");
var fixd3 = $("#3");

wall.fixSize({
    block: fixd1,
    width: 150,
    height: 150
});

wall.reset({
    selector: '.tile',
    cellW: 300,
    cellH: 300,
    animate: true,
    gutterX: 12,
    gutterY: 12,
    onResize: function(){
        this.fitWidth();
        }
    });
 });
Was it helpful?

Solution

That fixSize couldn't work without you implement it in wall.reset({});. Put it like this:

wall.reset({
  fixSize:1;
  // other options...
});

According to Freewall's options documentation:

fixSize : boolean

Default: null

value is null or not set let blocks can adjust and resize to fill gap

value is 0 or false let blocks can adjust size but can't resize to fill gap.

value is 1 or true let blocks keep the size as init, can't resize to fill gap.

Can override the fixSize option by set data-fixSize attribute in the block.

There's two fixSize: one is a method, while other is an option. The first one wouldn't work if the former isn't defined.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top