swapping between two lines within a div

Question

swapping between two lines within a div

i'm developing a new music app and I am in need of the following chord progression:

Am    F          G           Am     Ab           Gdim       A#

Hello these are just placeholder lyrics for demonstration purposes, hey hey hello

which should look like this instead:

Am F G Am

Hello these are just placeholder lyrics

Ab Gdim A#

for demonstration purposes, hey hey hello

when you reach the end of the section

I came across a similar issue in an android project, where they recommended utilizing a linear layout to solve it.

edit: as requested, here is the current code snippet I am working with:

<div class="container">
    <div class="line">hello this is my first line, it has a lot of words and will wrap to the next line</div>
    <div class="line">A        B  C            D       E       F  G          H             I J      K L</div>  
</div>

There is no styling applied at the moment, the classes are empty

Edit: the line break should occur at the end of the div, allowing the word to wrap to the next line while still appearing as one continuous line (similar to the example provided)

html css

Answer 1

Answer №1

If you have a specific character limit per line and want to implement this dynamically, javascript can help: https://codepen.io/schart/pen/OJwdexj

The approach involves:

Extracting text content from both lines
Dividing the text into chunks based on the specified character limit
Generating new HTML by pairing up these chunked items as lines.

In case the link is no longer accessible, here's the Javascript code snippet:

const charsPerLine = 38;

const computeLine = (line) => {
  const regexp = `.{1,${charsPerLine}}`
  const newLines = line.match(new RegExp(regexp, "g"));
  return newLines;
}

const computeLines = () => {
  const [text, notes] = [...document.querySelectorAll(".line-container > .line")].map((line) => line.textContent);
  const [textLines, notesLines] = [text, notes].map((line) => computeLine(line));
  const maxLines = Math.max(textLines.length, notesLines.length);
  
  let newHTML = "";
  for (let i = 0; i < maxLines; i++) {
    newHTML += `<div class="line">${textLines[i] ?? ""}</div>`;
    newHTML += `<div class="line">${notesLines[i] ?? ""}</div>`;
  }
  document.querySelector(".line-container").innerHTML = newHTML;
}

computeLines();

This solution assumes that the primary text is in the first .line element and any additional notes are in the second .line.

Answer 2

If you have a specific character limit per line and want to implement this dynamically, javascript can help: https://codepen.io/schart/pen/OJwdexj

The approach involves:

Extracting text content from both lines
Dividing the text into chunks based on the specified character limit
Generating new HTML by pairing up these chunked items as lines.

In case the link is no longer accessible, here's the Javascript code snippet:

const charsPerLine = 38;

const computeLine = (line) => {
  const regexp = `.{1,${charsPerLine}}`
  const newLines = line.match(new RegExp(regexp, "g"));
  return newLines;
}

const computeLines = () => {
  const [text, notes] = [...document.querySelectorAll(".line-container > .line")].map((line) => line.textContent);
  const [textLines, notesLines] = [text, notes].map((line) => computeLine(line));
  const maxLines = Math.max(textLines.length, notesLines.length);
  
  let newHTML = "";
  for (let i = 0; i < maxLines; i++) {
    newHTML += `<div class="line">${textLines[i] ?? ""}</div>`;
    newHTML += `<div class="line">${notesLines[i] ?? ""}</div>`;
  }
  document.querySelector(".line-container").innerHTML = newHTML;
}

computeLines();

This solution assumes that the primary text is in the first .line element and any additional notes are in the second .line.

swapping between two lines within a div

i'm developing a new music app and I am in need of the following chord progression:

which should look like this instead:

when you reach the end of the section

Answer №1

Similar questions

I am trying to center align this image, but for some reason, it's not cooperating

JavaScript for rotating an element upon button click

Removing the active class from a Bootstrap menu can be achieved by targeting the specific

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

In Internet Explorer 8, the PNG image is visible but in IE7, it myster

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

What is the best way to retrieve information from an http website and display it in an html table using javascript

Incorporate JSON data to display SVG images

Experiencing issues with nested jQuery submit functions not triggering

Show a clear box over an HTML table row upon mouseover, without highlighting the row

Hovering over a link causes malfunction in CSS drop-down menu

Unable to use addEventListener on media queries exceeding 768px

Hover Effects on Facebook Tabs

Is there a way to append the current path to a link that leads to another URL?

Establishing a Connection with Node/Express Routing via JavaScript

`Can you guide me on the proper path for designing this website layout?`

How can you exhibit various images without relying on the <img> tag?

Tips for adjusting image and div sizes dynamically according to the window size

Adjust Vue FilePond dimensions

table with flexible cell width and fixed table width