Tips for creating random CSS values for an element generated with javascript?

Question

Tips for creating random CSS values for an element generated with javascript?

Apologies for the blunt title, but I couldn't find a more precise way to phrase it. I recently stumbled upon this fantastic slider tutorial. Before implementing it on my own page, I would like to customize it by replacing the small circles at the bottom with small squares of varying widths, giving it a 2D barcode appearance. I managed to turn them into squares by removing border-radius, but I am unsure how to make each one's width dynamically different. I have traced it back to a section in the Javascript where the navigation buttons (basically) are created:

        this.vars.slides.forEach(function(s,i){
        var e=document.createElement("li"),r=document.createElement("a");

Do you have any suggestions on how to achieve this desired style?

javascript jquery html css

Answer 1

Answer №1

You can achieve this using CSS alone, no need to make changes in the JavaScript code. Check out this simple demonstration:

ul {list-style: none;}
li {
  float: left;
  width: 10px;
  height: 20px;
  margin: 0 2px;
  background-color: #000;
}
li:nth-child(2n) {width: 5px;}
li:nth-child(3n) {width: 15px;}
li:nth-child(4n) {width: 20px;}

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Answer 2

You can achieve this using CSS alone, no need to make changes in the JavaScript code. Check out this simple demonstration:

ul {list-style: none;}
li {
  float: left;
  width: 10px;
  height: 20px;
  margin: 0 2px;
  background-color: #000;
}
li:nth-child(2n) {width: 5px;}
li:nth-child(3n) {width: 15px;}
li:nth-child(4n) {width: 20px;}

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Tips for creating random CSS values for an element generated with javascript?

Answer №1

Similar questions

Center Your Text Vertically on Google Sites

Linking a radio button to another mirrored radio button for selection

Unusual thin border of white pixels on IE 9

Updating attribute values in a dynamic JSON file with Node.js: A step-by-step guide

Tips for aligning text vertically within a definition list

Is there a way to retrieve a CSS file using AJAX from a separate origin?

Content is not centered with Bootstrap's flexbox

How can I extract the id of a clicked item and pass it to a different page with Jquery?

Adjust the position of the xAxis on the Highcharts chart to move it downward or

Don't forget to retain the checkboxes that were chosen in the

Extracting POST information through PHP's AJAX Request

Increase the Step Size of an HTML Number Input by Holding Down the Time

Tips for iterating through an associative array/object within a MongoDB schema instantiation using mongoose without the need to specify schema configuration parameters

Showing the result of a backend script on the current page using PHP

Exploring Grafana Panel Development: Harnessing external libraries in plugin development

Utilize JQuery to extract data from an Ajax XML response

Steps to configure ExpressJS to listen on a custom domain

Retrieving Multiple Arrays of Variables in PHP Output

The most convenient method for automatically updating Google Charts embedded on a webpage

Embed an audio file onto a webpage