Tips for overlaying a button on each HTML element with the class WSEDIT.
My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element.
Below is an example of the JavaScript loop and how the button is created:
$(function()
$(".WSEDIT").each(function(){
var btnConfigure = $("<div class='BBtnConfigure'>");
$(this).prepend(btnConfigure);
});
);
<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
</p>
<div>
<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
<h2>Sale For First Trimestriel</h2>
<img src="/graph.png" />
<div>
<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
<table>
<tr><td>Name</td><td>Sex</td></td>Age</td<td>Country</td></tr>
...
</table>
<div>
Here's a visual representation of what I'm aiming to achieve.
Now, the question arises - What should be the CSS styling for my button class BBtnConfigure?
In the image provided, you can see that BtnConfigure is positioned to overlay each section.