Heads dots with background image

Question

So, I am creating a website for a restaurant, and I am in a marinade. I am trying to create a menu there. The idea is to align the product name on the left, the price on the right, and fill the gap between them with dots. Like this

Hamburger ............................................ $ 4.00

XXL Hamburger ... $ 4.00

Milkshake .............................................. $ 4.00

I found a couple of solutions that work only if you have a background with one color and no texture. The idea was to fill in a whole line of dots and set the name / price background interval with the same color as the site background, so the points were not displayed. But I have a photo for the background.

I will not post my code here because it does not really matter or will help.

Is it possible? You don’t need to be just css, maybe you can also execute JavaScript.

Answer 1

This is easy to do with simple javascript and css, here's the fiddle: jsfiddle

The key is to set the width of the div that holds the dots to the width of the column minus the width of the product name minus the width of the price, and to make sure there are more than enough points to cover the distance and set the overflow: hidden for the div points.

$(".menu-row").each(function(index, element) {
    var menuRowWidth = $(element).width();
    var foodItemWidth = $(element).children('.food-item').width();
    var priceWidth = $(element).children('.price').width();
    var $dotFiller = $(element).children('.dot-filler');
    var dotFillerWidth = menuRowWidth - foodItemWidth - priceWidth;
    $dotFiller.width(dotFillerWidth + "px"); 
});

div , , . , : , , div javascript, , . CSS:

.food-item {
  float: left
}

.dot-filler {
  overflow: hidden;
  width: 0;
  float: left;
}

.price {
  float: right;
}

.menu-row {
  width: 400px;
}

html :

<div class="menu-row">
  <div class="food-item">Steak</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$18.00</div>
</div>

<div class="menu-row">
  <div class="food-item">Hamburger</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$8.00</div>
</div>

Answer 2

, :

.col {
  display: inline-block;
  vertical-align: top;
}

.names span {
  width: 200px;
  display: flex;
}

.prices span {
  display: block;
  text-align:right;
}

.names span:after {
  content: "";
  display: inline-block;
  height: 1em;
  flex-grow: 1;
  background: radial-gradient(black 25%, transparent 25%) scroll repeat-x bottom left/5px 5px;
}

<div class='names col'>
  <span>Hamburger</span>
  <span>Hot Dogs</span>
  <span>Superman Hamburger</span>

</div>
<div class='prices col'>
  <span>$1.00</span>
  <span>$0.50</span>
  <span>$400.00</span>
</div>

Hide result

JSFiddle Demo

Answer 3

display:table; display: table-cell; border-bottom: Xpx dotted black; .

ul{
  margin: 0;
  padding: 0;
}
ul li{
  display: table;
  width: 100%;
}
ul li div {
  display: table-cell;
}
ul li div.food {
  padding-right: 5px;
}
ul li div.dots {
  border-bottom: 1px dotted #000;
  width: 100%;
  position: relative;
  top: -4px;
}
ul li div.price {
  padding-left: 5px;
}

<ul>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots">&nbsp;</div>
    <div class="price">10.00$</div>
  </li>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots"></div>
    <div class="price">10.00$</div>
  </li>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots"></div>
    <div class="price">10.00$</div>
  </li>
</ul>

Hide result

Answer 4

+ .

css :

.wrapper {
  width: 300px;
  overflow: hidden;
  display: inline-block;;
  white-space: nowrap;
}

HTML- :

<div>
  <ul class="noDisc">
    <li>
      <div class="wrapper">
      <span>HAMBURGER </span>
      <span>...............................................................</span>
      </div>
      <span>$ 40.00</span>
    </li>
     <li>
      <div class="wrapper">
      <span>FRIED CHIKEN </span>
      <span>...............................................................</span>
      </div>
      <span>$ 13.00</span>
    </li>
     <li>
      <div class="wrapper">
      <span>STEAK ON A STICK </span>
      <span>...............................................................</span>
      </div>
      <span>$ 99.00</span>
    </li>
  </ul>
</div>

Live sample:

fiddle

Answer 5

Thanks. I used what you have here and improved it. This code is for woocommerce product elements, but can be edited for everything you need. $ containerElement is an element that you measure in width.

/**
 * dotFiller
 * adds dynamic dot leaders between product title and count element (<mark>)
 * @return void
 */
var dotFiller = function(){
    var $containerElement = $('ul.products li.product.has-children h2'),
        df  = '<div class="df">.....................................................................</div>';
        $containerElement.each(function(i,el){
                var $el = $(el),
                    w   = $el.width(),
                    mw  = $el.find('mark').width(),
                    tw  = $el.find('span').width(),
                    dfw = (w - mw - tw) - 24;
                // if its not there, lets add it
                if (!$(el).has('.df').length){
                    $el.find('span').after(df);
                }
                $el.find('.df').css('width',dfw + "px");
        });
};
dotFiller();

With this code, you can update / recount when resizing like this:

$('window').on('resize',function(){ dotFiller(); });

And here is my css for internal elements:

        mark {
            background-color: transparent;
            color: $secondary;
            display: inline-block; float: right;
            font-weight: normal;
        }
        div.df { 
            overflow: hidden; 
            display: inline-block; 
            margin-left: 10px; 
            position: relative; 
            top: 2px; 
            font-weight: normal; 
            opacity: 0.8; 
        }

Hope this helps someone!