Code Monkey home page Code Monkey logo

Comments (15)

kombai avatar kombai commented on August 23, 2024

Thank for report, let me look on that :)

from freewall.

htrex avatar htrex commented on August 23, 2024

Wow, I've tried to have a look at the code, that's a pretty complex algorithm!
All I can say is that the math of my test case is fine and the problem seems to be in the engine, as runtime.blocks width, for a reason I still don't understand, is calculated wrong.
Have you got a glimpse of something in the mean time?

from freewall.

kombai avatar kombai commented on August 23, 2024

Thank for spend your time to look on that. Btw I see the problem of you caculator the colFixed
it should be:

var colFixed = ((documentWrap + gutter) / colNum) - gutter;

instead of

var colFixed = Math.floor(documentWrap / colNum) - gutter;

and the code test:

console.log((colFixed * colNum +  gutter * (colNum - 1))  + ' <= ' + documentWrap);

instead of:

 console.log(colFixed + ' * ' + colNum + ' = ' + colFixed * colNum + ' <= ' + documentWrap);

The idea is: if layout have N columns (4) it will have (N - 1) gutters (3). That why in your test it works with gutter = 0.

from freewall.

htrex avatar htrex commented on August 23, 2024

Thank you for pointing me to a perfect fit math, but I still see the problem with freewall,
here's a live test with updated code http://jsbin.com/cefodagi/2/edit?html,output
try to resize the output window between 1025px and 1060px, still getting 3 columns instead of 6
do you see any other problem with the test case or that's effectively a miscalculation inside the engine?

from freewall.

kombai avatar kombai commented on August 23, 2024

Thanks for your test, it is really get problem in this case, I will try to find way to fix it.
Infact the problem is each block image has 2 columns instead of 1 (your expect).
You can inspect in the container then see the atribute data-total-col="6". That mean the layout have 6 columns.
Thanks again with nice catch ;)

from freewall.

htrex avatar htrex commented on August 23, 2024

Hello @kombai,
yes I'm getting 3 columns instead of 6 between 1025px and 1060px and 1 column instead of 2 around 340px but can't go further than a test case for debugging as the freewall algorithm is quite complex.
Have you got an idea of what could be wrong here?

from freewall.

kombai avatar kombai commented on August 23, 2024

The problem is block already make around with the columns.
Example in this case the cellW about 1044 / 6 = 204px, and the block have width ~ 310 so it make around of column: round(310 / 204) = 2.

from freewall.

htrex avatar htrex commented on August 23, 2024

Can you please explain the concept of block? What's the difference between block and cellW?
Why freewall uses this calculation var col = !width ? 0 : Math.round((width + gutterX) / cellW); ?

from freewall.

kombai avatar kombai commented on August 23, 2024

The block is the item, which created the layout. In the setting block is the selector:

selector: 'article',

in the code

 var col = !width ? 0 : Math.round((width + gutterX) / cellW);

using for caculator a block have how many columns base on the width of block and gutterX, cellW.

cellW/cellH are unit for caculator. it same the columns witdh and row height.

from freewall.

htrex avatar htrex commented on August 23, 2024

If I understand well in that line of code you're checking how many column units the block should span basing the calculation on the original width of the block (data-width attribute) + gutterX, but in row 330 you're calculating cellW ignoring cellW passed from the parameters.

I'm not sure how to help you debug this, seems like the logic in the code is a bit tricky, I was looking to use freewall for a project but having trigger points for columns number is a requirement and this bug is a show stopper, sorry.

from freewall.

kombai avatar kombai commented on August 23, 2024

I'm sorry to hear you got the trouble with freewall. But could you give the requiment or the mockup of layout, maybe we have way to implement that.
example saw on your code:

var documentWrap = container.width();

                if (documentWrap > 1024) {
                    var colNum = 6;
                } else if (documentWrap > 768) {
                    var colNum = 4;
                } else {
                    var colNum = 2;
                }

I assume you want to show 6 blocks when document > 1024, and 4 blocks for 768 right.. ?
For do that you can follow try with this:

  • defined block with by css:
.for6col  article {
  width: 16.66%; /* 100 : 6 */
}

.for4col article {
 width: 25%;
}

.for2col article {
 width: 25%
}
var gutter = 50;

            var container = $('#freewall');

            function cellSize(containerWidth) {
                if (containerWidth > 1024) {
                    var colNum = 6;
                } else if (containerWidth > 768) {
                    var colNum = 4;
                } else {
                    var colNum = 2;
                }

                return (containerWidth / colNum) - gutterW;
            }


            var wall = new freewall("#freewall");
            wall.reset({
                selector: 'article',
                cellW: cellSize,
                cellH: 'auto', // try to experiment also with cellSize (function) to get different weird behaviours
                gutterX: gutter,
                gutterY: gutter,
                animate: true,
                onResize: function (container) {
                    var containerWidth = container.width();
                    if (containerWidth > 1024) {
                        container.addClass("for6col").removeClass("for4col, for2col");
                     } else if (containerWidth > 768) {
                        container.addClass("for4col")...
                     } else {
                        container.addClass("for2col")...
                     }
                    wall.fitWidth();
                }
            });
            wall.fitWidth();

Best

from freewall.

htrex avatar htrex commented on August 23, 2024

Thanks for the suggestion but it doesn't work, please check your code running here:
http://jsbin.com/jotigema/2/edit

it has the exact same problem.

from freewall.

kombai avatar kombai commented on August 23, 2024

Hi,
please try with this code:

<!DOCTYPE html>
<html>

<head>
    <title>Flex layouts demo with freewall</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://vnjs.net/www/project/freewall/freewall.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        article {
            float: left;
        }
        img {
            display: block;
            width: 100%;
            height: auto;
        }
        .for6col article {
            width: 16.66%;
        }
        .for4col article {
            width: 25%;
        }
        .for2col article {
            width: 50%
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            var gutter = 20;

            function cellSize(containerWidth) {
                if (containerWidth > 1024) {
                    var colNum = 6;
                } else if (containerWidth > 768) {
                    var colNum = 4;
                } else {
                    var colNum = 2;
                }
                return (containerWidth / colNum) - gutter;
            }


            var wall = new freewall("#freewall");
            wall.reset({
                selector: 'article',
                cellW: cellSize,
                cellH: 'auto',
                gutterX: gutter,
                gutterY: gutter,
                animate: true,
                onResize: function (container) {
                    var containerWidth = container.width();

                    container.find("article")
                        .removeAttr("data-width")
                        .removeAttr("data-height")
                        .each(function () {
                            this.style.width = "";
                            this.style.height = "";
                        });

                    if (containerWidth > 1024) {
                        container.attr("class", "for6col");
                    } else if (containerWidth > 768) {
                        container.attr("class", "for4col");
                    } else {
                        container.attr("class", "for2col");
                    }
                    wall.fitWidth();
                }
            });
            wall.fitWidth();
            $(window).trigger("resize");

        });
    </script>
</head>

<body>
    <div id="freewall">
        <article>
            <div class="block">
                <div class="entry-content">
                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
                </div>
            </div>
        </article>
        <article>
            <div class="block">
                <div class="entry-content">
                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
                </div>
            </div>
        </article>
        <article>
            <div class="block">
                <div class="entry-content">
                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
                </div>
            </div>
        </article>
        <article>
            <div class="block">
                <div class="entry-content">
                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
                </div>
            </div>
        </article>
        <article>
            <div class="block">
                <div class="entry-content">
                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
                </div>
            </div>
        </article>
        <article>
            <div class="block">
                <div class="entry-content">
                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
                </div>
            </div>
        </article>
    </div>
</body>

</html>

The main think I add this block code:

                       container.find("article")
                        .removeAttr("data-width")
                        .removeAttr("data-height")
                        .each(function () {
                            this.style.width = "";
                            this.style.height = "";
                        });

for clean cache with caculator.

Best

from freewall.

htrex avatar htrex commented on August 23, 2024

In your latest code CSS is used for trigger points instead of Freewall. Freewall API is still broken as it doesn't respect the documented API and the passed cellW.

from freewall.

kombai avatar kombai commented on August 23, 2024

please check with this example:
http://vnjs.net/www/project/freewall/example/live-size.html

from freewall.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.