Populate the div element with asterisks and prepare for printing

Is there a way to create a div filled with asterisks (*) without setting an exact width, but still keeping it on a single row like a border?

I understand that using an asterisk image for the borders would be ideal, but due to constraints involving only having a single HTML page and no linked images, this is not feasible in my case.

So how can I achieve a complete DIV filled with "*" (Asterisks) where the width of the DIV is not fixed?

Edit

Additionally, this must be able to be printed. Therefore, using an asterisk image as the background of the DIV is not an option due to user preferences regarding printing background images.

javascripthtmlcss

Answer №1

If the main concern is to avoid an external file, you can opt for using a data URI for the image.

For instance:

div {
  height:14px;
  border-width:7px 0 0;
  border-style:solid;
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAJFBMVEX///+KioowMDBAQEAMDAxiYmLm5ubMzMxQUFC2trYiIiIAAAA2IPbUAAAAAXRSTlMAQObYZgAAACVJREFUCB1jYAADLiDJNaOKgYEtpIGBgcO4mYGBk4kTKMjIwAAAMvcC1AqHZy8AAAAASUVORK5CYII=') 7 0 0 repeat;
}
<div class="asterisk"></div>

An updated version with a border image that will be displayed on the page:

div {
  height:14px;
  border-width:7px 0 0;
  border-style:solid;
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAJFBMVEX///+KioowMDBAQEAMDAxiYmLm5ubMzMxQUFC2trYiIiIAAAA2IPbUAAAAAXRSTlMAQObYZgAAACVJREFUCB1jYAADLiDJNaOKgYEtpIGBgcO4mYGBk4kTKMjIwAAAMvcC1AqHZy8AAAAASUVORK5CYII=') 7 0 0 repeat;
}
<div class="asterisk"></div>

Answer №2

If you're looking to determine how many asterisks can fit within a certain width of a div, one way could be to measure the width of an asterisk (let's call it w), then divide the total width of the div by w to find the number needed.

Here's a snippet of HTML:

<div id="calc-width" style="display: none">*</div>
<div id="fill" style="width: 150px; border: 1px solid black"></div>

And here's the corresponding JavaScript code:

var n = ~~($('#fill').width() / $('#calc-width').width());
var chars = Array(n + 1).join('*');
$('#fill').html(chars);

While this method might have some potential errors, it's worth checking out. I used jQuery for simplicity, but you can easily convert it to vanilla JavaScript if needed.

You can also view a working example on JSFiddle: https://jsfiddle.net/dvfcm1ud/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is JavaScript executed by Diffbot?

How does Diffbot API handle content that is dynamically added via JavaScript after the HTML has loaded? Does Diffbot capture this dynamic content or just the initially loaded HTML? ...

javascriptajaxweb-crawlerextractdiffbot

What is the proper method for sending a value using the XMLHTTPRequest Object?

In my table, I have a set of dynamically generated links. Each row in the table has a unique "id" property in its tag. The main objective is to use XMLHTTPRequest to inform the 'deletepost.php' page which specific record needs to be removed from ...

phpjavascriptjqueryajaxpost

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Suppose I have a scenario where I create a button like this: <button #myButton>My Button</button> ...and then use ViewChild in the following way: @ViewChild('myButton', { static: true }) createButton: ElementRef; In this case, creat ...

javascripthtmlangulartypescriptangular-material

Completing a form and reloading the page without including the reload in the browsing history

I am currently developing a compact web application using Flask, and I have encountered a challenging issue with navigating back to the previous page. Here are some approaches I have experimented with: Avoiding navigation away from the page - content ...

javascripthtml

Adjust the width of an element as its content dynamically shifts

I have a container that contains 6 input fields. Two of them are initially hidden (display: none), but when I click on a checkbox, these two inputs become visible (display: inline). I need the width of the container to adjust and increase when the other tw ...

htmlcss

How can PHP send a variety of error messages to an Ajax/Jquery script and display them in an HTML DIV?

In an attempt to send various error messages back to an HTML DIV based on the PHP outcome, I have scoured through different resources without a solution that fits my particular case. Hopefully, someone can provide assistance with this. The scenario involv ...

phpjqueryhtmlajaxjson

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

cssvue.jstailwind-css

What is the best way to store settings values permanently during the installation process in a react-native application?

I am looking for a way to save the settings of my app only during installation, rather than every time the app is opened, in order to prevent the options from resetting. I have tried searching on YouTube but most tutorials cover only user login persistence ...

javascriptreactjsreact-native

Align the text vertically in a Bootstrap button

Can anyone lend a hand with vertically aligning text in a Bootstrap button? When I use the align-middle class, the text is aligned as desired. However, if I use the align-top class, the text remains top-aligned no matter what I do. Any suggestions? Here& ...

htmlcssbootstrap-4

Issue: Error encountered while trying to use the removeAttribute() function in Selenium and Java: missing closing parenthesis after argument list

WebElement removeReadOnly=driver.findElement(By.xpath("//input[@id='mat-input-0']")); js.executeScript("document.getElementBypath('//input[@id='mat-input-0']').removeAttribute('readonly');",&quo ...

javascriptjavaseleniumselenium-webdriver

Looking to incorporate a pre-checked checkbox using Angular Material

I'm facing an issue with the following code snippet: <ng-container matColumnDef="Estado"> <th mat-header-cell *matHeaderCellDef>Estado</th> <td mat-cell *matCellDef=""> <mat-checkbox *ngIf ...

htmlangularcheckboxangular-material

What is the method for exporting data directly from an EC2 instance to a file, such as a .txt or .json file?

I tried exporting the security group rules from EC2 into a file, like .txt or .json, using javascript/node.js. However, my attempts were unsuccessful. I wrote a code to retrieve information about security groups (rules, ingress, egress, etc.) and save it ...

javascriptnode.jsjsonamazon-ec2aws-sdk

Manipulating JSON with ng-model in AngularJS

Let's say I have a simple JSON similar to this: { "Object 0": {} } I am trying to display it as a tree structure. This is the approach I am taking: <span>{{key}}</span> // Object 0 <span>{{value}}</span> // {} <ul> ...

javascriptangularjsjson

Having trouble loading Yeoman Webapp SASS

Every time I try to build a web application using 'yo webapp', I encounter a 404 Error. GET http://localhost:9000/styles/main.css 404 (Not Found) I removed compass from the project, but that shouldn't be causing the issue, correct? ...

csssasshttp-status-code-404

Tips for repairing a side bar and header with CSS when using a JS & jQuery scroller

I am working on a layout design and my goal is to have the left sidebar, right sidebar, and header remain fixed in place. Here is the CSS code I am using : #container { padding-left: 200px; /* Left Sidebar fullwidth */ padding-ri ...

javascripthtmlcsslayoutscroller

Modifying a div element upon the successful completion of an ajax/json request

Currently, I have a form on my webpage for creating a new album. Alongside this form, there is also a delete album form. After successfully creating an album, I want to automatically update the checkbox list in the delete album form with the details of the ...

phpjqueryhtmlajax

How can I create and utilize a nested array within an ngFor loop?

*ngFor="let arr = ['foo', 'bar', 'sla']; let item of arr; let i = index;" Why does setting the instantiation of arr before let item of arr; result in an exception displaying [object Object]? Why am I unable to structure it th ...

javascripthtmlarraysangulartypescript

Display a form with hidden input that dynamically updates on any input change

<form id="pricecal"> <input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" placeholder="Check in" value="" required /> <input type="text" onchange="calprice()" class="form ...

javascriptjqueryhtml

Execute the eslint loader within the node_modules of a specific directory that is npm linked and has not been compiled

One of the benefits of using webpack 4 is the ability to run eslint across the entire project folder with a specific configuration. { enforce: 'pre', test: /\.js|ts$/, exclude: /node_modules/, loader: 'eslin ...

javascripttypescriptwebpackeslint

Unexpected behavior when using Async.map in conjunction with async.waterfall

Utilizing Async, I am using async.map() to connect my data array with a function and incorporating async.waterfall() within that function to execute functions in a series. However, the waterfall function is not functioning as anticipated. I have also attem ...

javascriptnode.jsasync.js