alpham8 February 2016

how to repeat a phrase or single character n-times to fill the container width with it?

On a html page with parent div with a fixed width (e. g. 300px). As a child of it I got multiple div container which each of them contains one anchor. So, the structure is something like this:

<div class="tsstatus">
    <div class="tsstatusItem tsstatusServer">
        <!-- [...] -->
        <div class="tsstatusItem">
            <a href="#">
                <img src="image.png">Upload/Download
                <div class="tsstatusFlags">
                    <img src="image.png">
                </div>
            </a>
            <!-- -->
        </div>
    </div>
    <!-- [...] -->
    <div class="tsstatusItem *spacer">
    <a href="#" title="Wau [43]">
        <img src="image.png" alt="image.png">Wau
        <div class="tsstatusFlags">
        </div>
    </a>
    </div>
</div>

The css to it:

.tsstatus, .tsstatuserror {
    background-color: #ffffff;
    width: 300px;
}

.tsstatus, .tsstatus *, .tsstatuserror {
    color: #000000;
    font-family: Verdana, sans-serif;
    font-size: 10px;
}

.tsstatus label {
    border-bottom: 1px solid #aaaaaa;
}

.tsstatusItem a {
    color: #000000;
}

.tsstatusItem a:hover {
    background-color: #f6f6f6;
    color: #000099;
}

.tsstatuserror {
    color: #ff0000;
}

.tsstatus, .tsstatus * {
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

.tsstatus {
    position: relative;
    overflow: hidden;
}

.tsstatus label {
    display: block;
    padding: 2px 0;
}

.tsstatusItem {
    margin-left: 16px;
    position: relative;
    white-space:nowrap;
    text-align: left;
}

.tsstatusItem a {
    display: block;
    text-decoration: none;
}

.tsstatusItem img {
    border: 0;
    vertical-align: middle;
    margin-right: 2px;
}

.tsstatusFlags {
    position: absolute;
    right: 0;
    top: 0;
}

.tsstatusServer {
    margin-left: 0;
}

        

Answers


Dave F February 2016

The following code should do what you want:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src='jquery-2.2.0.min.js'></script>
    <script>
    $().ready(function() {
        // Process items to be repeated
        $('.item.repeat a').each(function() {
            var $this = $(this);

            var text = $this.text();

            // Remove these comments if spaces are needed
            /*text += ' ';
            $this.html($this.text()+'&nbsp;');*/

            var width = $this.outerWidth();
            var parentWidth = $this.parent('div').outerWidth();

            var numReps = Math.floor(parentWidth/width);

            $this.html(text.repeat(numReps));
        });
    });
    </script>
</head>
<body>
    <div class="wrapper" style="width:300px;">
        <div class="item repeat">
            <a href="#">phrase</a>
        </div>
        <div class="item">
            <a href="#">phrase</a>
        </div>
        <div class="item repeat">
            <a href="#">phrase</a>
        </div>
    </div>
</body>
</html>

If you need spaces between phrases, you can comment out the section that appends them.


Vytas Bradunas February 2016

Your class definition of *spacer is invalid. * is a reserved character in CSS and cannot be used in class names. I removed it from my solution.

The spacer element had property display: block which makes it hard to size its content. Block elements inherently take the full width of the parent making it hard to assess the joint size of the image and filler text. I changed it to display: inline-block. Now we can easily figure out the amount of space to fill.

To track the size of one unit of the filler text I created a <span> around the word Wau. This allows me to accurately measure the size of this guy. Now I know how many times to repeat it in order to fill the space. JS has new calculations to run this thing.

See attached js fiddle and code.

https://jsfiddle.net/rc4qyuzc/1/

HTML (removed * from class name)

<div class="tsstatus">
    <div class="tsstatusItem tsstatusServer">
        <!-- [...] -->
        <div class="tsstatusItem">
            <a href="#">
                <img src="image.png">Upload/Download
                <div class="tsstatusFlags">
                    <img src="image.png">
                </div>
            </a>
            <!-- -->
        </div>
    </div>
    <!-- [...] -->
    <div class="tsstatusItem spacer">
    <a href="#" title="Wau [43]">
        <img src="image.png" alt="image.png">
        <span class="spacer-text">Wau</span>
        <div class="tsstatusFlags">
        </div>
    </a>
    </div>
</div>

CSS (changed filler div to inline-block)

.tsstatus, .tsstatuserror {
    background-color: #ffffff;
    width: 300px;
}

.tsstatus, .tsstatus *, .tsstatuserror 

Post Status

Asked in February 2016
Viewed 1,198 times
Voted 6
Answered 2 times

Search




Leave an answer