bramstein/jlayout

JavaScript layout algorithms

jlayout's Issues

jLayout with marionette.js

As-salamu-alikum

Zazakallah khair for showing interest on my issue.

I am novice to programming and weak in javascript but I like the border layout and this work is fantastic.In blog\assets\js\app\view\bdrbapView.js my code is as follows

define(["require", "jq", "jqui", "jqs", "jlb", "jl", "mt"],
    function (require, jq, jqui, jqs, jlb, jl, mt) {
        var Mn = require('mt');
        return Mn.View.extend({
            onAttach: function (options) {
                jQuery(function ($) {

                    var container = $('#layout');

                    function layout() {
                        container.layout({
                            resize: false,
                            type: 'border',
                            vgap: 1,
                            hgap: 1
                        });
                    };

                    $('.east')
                        .resizable({
                            handles: 'w',
                            stop: layout,
                            resize: layout
                        });

                    $('.west')
                        .resizable({
                            handles: 'e',
                            stop: layout,
                            resize: layout
                        })

                    $(window)
                        .resize(layout);

                    layout();
                    layout();
                });
            },
            onRender: function (options) {
                // this.showChildView('content', new contentView());
                // this.showChildView('footer', new footerView());
                // this.showChildView('util', new utilView());
            }
        });
    });

But I am facing a strange problem.The code does not produce expected result.The code is attached here.
Please help me.I will be grateful to you.

Zazakallah khair for reading my post.

Allah-hafiz

Nadvi

jQuery UI 1.10.1 - Accordion.resize no longer works in demo

Upgrade to jQuery 1.9.1 and jQuery UI 1.10.1 caused the accordion to stop functioning. The line:
$('#accordion').accordion('resize');
Causes the following js error:
Error: cannot call methods on accordion prior to initialization; attempted to call method 'resize'

If you comment out that line, the accordion works, but it no longer fills the east div.

Changing this line:
$('#accordion').accordion({header: 'h3', fillSpace: true})
to:
$('#accordion').accordion({header: 'h3', heightStyle: "fill"});
Results in the accordion filling the east div, but only for the initial window size. Any resize, and the accordion doesn't update.

Any suggestions on how to fix this?

is possible to implement layout with RequireJS ?

is possible to implement jlayout
with RequireJS ?

The need for jquery.metadata plugin is not necessary with current jquery

The jquery.jlayout.js file could be updated to use html5 data- attributes which is built into jquery 1.4.3 +. That way the metadata plugin can be removed. Below I highlight the change that I believe needs to be made. I have included a version that still checks for the metadata plugin just in case you want to keep the check around for people that are still using it.

jquery.jlayout.js

current:

o = $.metadata && element.metadata().layout ? $.extend(opts, element.metadata().layout) : opts,

html5 data- attribute only:

o = element.data('layout') ? $.extend(opts, element.data('layout')) : opts,

backwards compatibility:

o = element.data('layout') ? $.extend(opts, element.data('layout')) : ( $.metadata && element.metadata().layout ) ? $.extend(opts, element.metadata().layout) : opts,

Little tip as far as jquery and data- attributes are concerned:

The attribute has single quotes around js objects instead of double quotes

<div data-layout='{"type": "grid", "hgap": 3, "vgap": 3}' class="column"></div>

Add package.json

Hey @bramstein,
How would you feel about adding a package.json file to jLayout so it can be pulled in with npm? I'm happy to create a pull request with this change if you're fine with it :)

Wrong links to scripts in most of examples

Some examples (not all) contains links like ../../lib, should be just ../lib

Also, examples doesn't work with for me with latest jquery 1.7.1. Firefox 8.0.1. No errors in firebug console, just wrong results (i.e. blocks in vertical layout are horisontally positioned).

Is there a future plan to do so responsive?

I congratulate you for your good work
Is there a future plan to do so responsive?

Greetings!

Examples for centering

Hi Bram, I love the library so far - just what I was looking for.

I'm wondering if there are some examples for additional layouts I need.

The folling is a screenshot of a one-row grid layout in xaml:

One often has this for button rows and such: The content should be centered, and all elements should be their natural size, but also centered vertically individually.

In xaml, you can "star-size" columns and rows and "auto-size" the rest. But that doesn't mean there's a different trick by which jlayout can achieve the same result.

Can you help me out there?

jlayout in on js file

hi,i have use you plugin ,there have a lot of js file,i think all in one file is simple to use.

Online demos and ie support?

Hello,

would take a look at examples / demo online, because I need IE <=10 support and would verify with an simple online demo.