admin管理员组

文章数量:1278950

I have a DIV container filled with a dynamic text. The length of the text can be different. The DIV container has a fixed height but no width.

The Text is formatted as CSS3 Multicolumn Text width a fixed columns-width.

The result is n columns with the width of column-width. Now i want to know either how many columns are there or how is the puted width of the DIV.

CSS CODE:

.columnize{
    float: left;
    position: relative;
    width: 840px;
    overflow: hidden;
}
.columnize div{
    -moz-column-width: 259px;
    -webkit-column-width: 259px;
    -moz-column-gap: 16px;
    -webkit-column-gap: 16px;
    height: 560px;
}

HTML CODE:

<div id="columnWrapper class="columnize">
    <div id="content">
    ... content goes here ...
    </div>
</div>

I tried to get the width with JQuery like this:

$('#content').width();
$('#content').innerWidth();

both return the column-width, not the REAL width in all browsers except Firefox.

Any ideas how to get the width of the column layout?

I have a DIV container filled with a dynamic text. The length of the text can be different. The DIV container has a fixed height but no width.

The Text is formatted as CSS3 Multicolumn Text width a fixed columns-width.

The result is n columns with the width of column-width. Now i want to know either how many columns are there or how is the puted width of the DIV.

CSS CODE:

.columnize{
    float: left;
    position: relative;
    width: 840px;
    overflow: hidden;
}
.columnize div{
    -moz-column-width: 259px;
    -webkit-column-width: 259px;
    -moz-column-gap: 16px;
    -webkit-column-gap: 16px;
    height: 560px;
}

HTML CODE:

<div id="columnWrapper class="columnize">
    <div id="content">
    ... content goes here ...
    </div>
</div>

I tried to get the width with JQuery like this:

$('#content').width();
$('#content').innerWidth();

both return the column-width, not the REAL width in all browsers except Firefox.

Any ideas how to get the width of the column layout?

  • javascript
  • jquery
  • html
  • css
  • multiple-columns
Share Improve this question edited Dec 2, 2011 at 11:04 Emre Erkan 8,4823 gold badges51 silver badges54 bronze badges asked Dec 2, 2011 at 10:16 Wolfgang BeckerWolfgang Becker 931 silver badge6 bronze badges 1
  • No idea, but good question. Will look into it... – peduarte Commented Dec 2, 2011 at 10:20
Add a ment  | 

4 Answers 4

Reset to default 7

I ran into the same problem trying to paginate an article horizontally using css3 columns as pages. Here's my solution as a jQuery plugin:

http://jsfiddle/rkarbowski/Sfyyy/

Here's the idea: you insert a blank <span> tag at the end of your column content and use .position() to grab its left position relative to the parent container, and add one -webkit-column-width (because .position() only tells you the distance to the left coordinate of the <span>).

Here's a little quirk that I don't understand. To get the correct width, you also have to subtract one -webkit-column-gap. In my mind, the distance between .position().left and the edge of the container should only be the width of the final column, -webkit-column-width. Can anyone explain this one? Am I just bad at math?

Sorry if the plugin code is sloppy; my experience with jQuery is limited :)

(Credit where it's due: idea adapted from How to Get CSS3 Multi-Column Count in Javascript.)

This works for me. http://jsfiddle/peduarte/LRWL8/

Are you wrapping your js in $(document).ready()?

Here is the syntax to go about:

var div = document.getElementById(columnWrapper);               
var width = div.css("width"),
var height = div.css("height");

I also ran in a similar problem, where I had to get the size of the columns to be included in
paging mechanism.

I share the code, I hope could be useful.

Credit to rkarbowski for the idea :-)

http://jsfiddle/v2Wp4/

<!--
        Horizontal sliding carousel with multi columns.
-->

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <style>
            #prev,  #next, #infopage {
                position: fixed;
                width: 50px;
                height: 50px;
                background-color: yellow;
                margin: 10px;
            }
            #prev  {
                top: 600px;
                left: 0px;
            }
            #next  {
                top: 600px;
                left: 60px;
            }
            #infopage  {
                top: 600px;
                left: 120px;
                background-color: lavender;
            }
            .guide {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 1000px;
                height: 500px;
                -webkit-box-sizing: border-box;
                border: 20px solid red
            }
            #content {
                position: fixed;
                top: 0px;
                left: 0px;  
                width: 1000px;
            }
            #inner {
                -webkit-column-count: 2;
                -webkit-column-gap: 20px;
                -webkit-column-width: 490px;
                height: 500px; 
            }
        </style>
        <script>

            var cntWidth, // content total length
                areaWidth = 1000, // visible area
                columnWidth = 490, // 1 columns minus gap
                pageTot, // total number of pages
                pageCur = 1, // active page
                gap = 20, // space between columns
                animDuration = 400, /* jquery default 400 */
                contentPos = null; // content left position

            function renderInfoPage() {
                var elm = $('#infopage');
                elm.html('page ' + pageCur + ' of ' + pageTot);
            }

            function getPositionDom() {
                // keep in memory dom position
                var elm = $('#content');
                var pos = elm.offset();
                contentPos = pos.left;
            }

            // has content a jquery animation queue?
            function hasContentAnimateQueue() {
                var queueN = $('#content').queue().length;
                if (queueN !== 0) {
                    return true;
                } else {
                    return false;
                }
            }

            function next() {
                if (pageTot > 0 && pageCur < pageTot) {
                    if (!hasContentAnimateQueue()) {
                        var elm = $('#content');
                        var newPos = contentPos - areaWidth - gap;
                        contentPos = newPos;
                        elm.animate({left: newPos + 'px'}, animDuration);
                        pageCur++;
                        renderInfoPage();
                    }
                }
            }
            function prev() {
                if (pageCur > 1) {
                    if (!hasContentAnimateQueue()) {
                        var elm = $('#content');
                        var newPos = contentPos + areaWidth + gap;
                        contentPos = newPos;
                        //elm.css({left: newPos + 'px'}); // use this for no animation
                        elm.animate({left: newPos + 'px'}, animDuration);
                        pageCur--;
                        renderInfoPage();
                    }
                }
            }
            function start() {
                // add event listeners
                var elm = document.getElementById('prev');
                elm.addEventListener('click', prev);
                elm = document.getElementById('next');
                elm.addEventListener('click', next);

                // trick: add a span at the end of the scrolling, get its position so to find out total how long was were columns 
                var elmSpan = $('#inner').append('<span></span>');                
                var posSpan = $('#inner').find('span:last-of-type').position().left;  

                // add the width of the final column
                //posSpan += parseInt($('#inner').css('-webkit-column-width'), 10);
                posSpan += columnWidth;

                // subtract one column gap (not sure why this is necessary?)
                //pos -= parseInt($('#inner').css('-webkit-column-gap'),10);
                posSpan -= gap;

                // remove empty <span>
                $('#inner').find('span:last-of-type').remove();

                cntWidth = posSpan; // the total clumns width!

                var result = cntWidth  / areaWidth;
                if (result <= 1) {
                    pageTot = 1; // in case of content wich is wihtin the first page
                } else {
                    pageTot = Math.ceil(cntWidth / areaWidth);
                }
                // first time
                renderInfoPage();
                getPositionDom();
            }

        </script>
    </head>
    <body onload="start()">
        <div class="guide"></div>
        <div id="content"><div id="inner">
                <figure>
                    <img src="http://www.w3schools./images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
                    <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark</figcaption>
                </figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper mi velit, sit amet elementum libero ultrices sed. Praesent ut fermentum neque. Etiam mauris sem, placerat ac feugiat a, pulvinar sed nulla. Nam id augue erat. Sed a neque modo, fringilla magna a, sollicitudin nisl. Sed tellus nisi, pretium id turpis id, venenatis hendrerit lectus. Maecenas mauris enim, pulvinar a porttitor eu, volutpat sit amet magna. Sed sit amet orci libero. Pellentesque eu elit sit amet felis lacinia convallis. Cras vel dui egestas, vehicula nulla nec, modo quam. Pellentesque ligula leo, lobortis vitae eros in, pulvinar ornare elit. Suspendisse augue tortor, imperdiet ut ipsum id, pulvinar rhoncus odio.
</p>
<p>
Quisque in neque tempus, consectetur erat at, eleifend diam. Aenean bibendum sollicitudin velit, non dignissim eros tristique vel. Ut a risus vitae quam lobortis suscipit ut eget ipsum. Maecenas quis lorem non enim condimentum dictum vel sed augue. Curabitur scelerisque ut lorem ac fringilla. Suspendisse a condimentum eros. Phasellus luctus ipsum non arcu eleifend consequat ac ut massa. Nunc sed tortor sed orci viverra luctus. Mauris rutrum quam id velit aliquet, sed vestibulum erat dictum. Donec adipiscing mauris at nunc interdum auctor. Sed venenatis dictum justo, in condimentum orci interdum id. Curabitur id dignissim mi. Praesent blandit ac eros in faucibus. Ut modo euismod massa, quis aliquam tortor euismod volutpat. Suspendisse vehicula nulla in adipiscing vehicula. Vivamus dapibus tempus justo, sit amet suscipit ante.
</p>
<p>
Integer mauris turpis, pharetra feugiat nisi ac, mattis consectetur urna. Praesent condimentum venenatis lectus et aliquet. Maecenas id nunc quis augue eleifend fermentum molestie lacinia tellus. Pellentesque eleifend urna quis dui pretium feugiat. Nullam non quam nulla. Nulla in libero at turpis elementum sollicitudin non a justo. Nullam a arcu elementum, placerat elit in, posuere odio. Nam nisl ipsum, pretium vitae varius vitae, tempus non ligula.
</p>
<p>
Fusce at ullamcorper nibh. Nam quis sapien malesuada, porttitor lorem vel, dapibus mi. Ut lobortis tellus ut ultrices eleifend. Sed nec orci quis arcu pretium dictum. In nunc elit, ultricies in volutpat in, elementum eget lectus. Sed nec urna laoreet, bibendum odio quis, tincidunt lectus. Donec sagittis ultricies libero, et mollis magna.
</p>
<p>
Integer nisl urna, aliquam at dignissim id, vestibulum at tortor. Quisque aliquet risus eget augue ullamcorper, sit amet porttitor tellus vulputate. Vestibulum nisl sapien, malesuada quis mauris eu, fermentum egestas nisl. Maecenas scelerisque, eros in rutrum molestie, dui nibh fermentum sem, nec ultrices odio nisl et velit. Nunc a tincidunt nunc. Suspendisse potenti. Vestibulum in leo consequat, fringilla justo eu, rhoncus nibh. Praesent at justo sapien. Proin et tellus molestie, aliquam tellus at, imperdiet sapien. Proin id ante eget felis congue lobortis a ut lectus.
</p>

<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque lacinia massa nec enim cursus, ac malesuada nibh dignissim. Nullam vel purus feugiat nulla sollicitudin molestie. Vivamus vel nisi ante. Vestibulum at dui dignissim, volutpat dui id, egestas dolor. Nullam ullamcorper mi vitae facilisis dapibus. Suspendisse id auctor lorem. Donec facilisis pulvinar ligula, a porta risus ultrices ac. Integer enim odio, interdum id pharetra non, adipiscing ac velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec felis tortor, tempus at rhoncus eu, tempor id dui. Sed ultricies sem nec ante luctus, in facilisis quam tempus. Aliquam mollis sollicitudin risus non mattis. Nunc semper viverra diam eu volutpat. Sed id neque scelerisque, vehicula libero nec, pulvinar eros. Donec nec nisi eu lectus cursus dapibus.
</p>   
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero modo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
</div></div>
        <div id="prev">PREV</div>
        <div id="next">NEXT</div>
        <div id="infopage"></div>
    </body>
</html>

本文标签： javascriptDetermine the Width of a dynamic CSS3 Multicolumn DIV width fixed columnwidthStack Overflow

版权声明：本文标题：javascript - Determine the Width of a dynamic CSS3 Multicolumn DIV width fixed column-width - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741255297a2366555.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。