Grid-based timekeeping design

Question

Grid-based timekeeping design

Currently working on a clock grid layout and seeking some advice on the next steps. The layout has been created but still needs some adjustments to achieve perfection. What would be the most effective approach for correcting it? Would offsetting it using absolute positioning work or is there another method that would be more suitable? Additionally, I'm looking to resize the entire clock to 29 cm and then use printElement.js (I believe) to print it on A3 paper with padding around the edges for cutting purposes. Visit this link for reference.

    <div class="container">
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 12 -->
            <div class="col-1-7 clock-number-12"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 11 -->
            <div class="col-1-7 clock-number-11"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 1 -->
            <div class="col-1-7 clock-number-1"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <!-- 10 -->
            <div class="col-1-7 clock-number-10"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 2 -->
            <div class="col-1-7 clock-number-2"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
        </div>

   //rest of the code here...

CSS:

.col-1-7 {
  width: 14.28571428%;
  float: left;
}

html css bootstrap-4

Answer 1

Answer №1

If you're looking for an alternative to adjusting row widths and negative image margins, consider using javascript/jquery:

<div id="clock"></div>

<script src="jquery.printElement.js"></script>
<script>
$(document).ready(function(){
    var tx = 300; //distance from #clock == defines the clock size
    for(var i=-60; i<300; i+=30){ //-60 > 300 = to start the process from HOUR 1
        var rad = i * (Math.PI/180);
        var x = tx*Math.cos(rad);
        var y = tx*Math.sin(rad);
        $('#clock').append("<img src='img/placeholder.png' style='left:"+x+"px;top:"+y+"px'>");
    }

    $("#clock").printElement({
        printMode:'popup',
        leaveOpen:true,
        overrideElementCSS:[
            'clock.css'
        ]
    });
});
</script>

You can include styles like this in a clock.css file:

#clock{
    position: absolute;
    left: 50%;
    top: 50%;
}

img{
    width: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

In your actual HTML page, you have the flexibility to apply different styling as overrideElementCSS will take precedence over any CSS included on the page itself.

Answer 2

If you're looking for an alternative to adjusting row widths and negative image margins, consider using javascript/jquery:

<div id="clock"></div>

<script src="jquery.printElement.js"></script>
<script>
$(document).ready(function(){
    var tx = 300; //distance from #clock == defines the clock size
    for(var i=-60; i<300; i+=30){ //-60 > 300 = to start the process from HOUR 1
        var rad = i * (Math.PI/180);
        var x = tx*Math.cos(rad);
        var y = tx*Math.sin(rad);
        $('#clock').append("<img src='img/placeholder.png' style='left:"+x+"px;top:"+y+"px'>");
    }

    $("#clock").printElement({
        printMode:'popup',
        leaveOpen:true,
        overrideElementCSS:[
            'clock.css'
        ]
    });
});
</script>

You can include styles like this in a clock.css file:

#clock{
    position: absolute;
    left: 50%;
    top: 50%;
}

img{
    width: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

In your actual HTML page, you have the flexibility to apply different styling as overrideElementCSS will take precedence over any CSS included on the page itself.

Grid-based timekeeping design

Answer №1

Similar questions

Create a dynamic HTML design with a resizable left panel and a static right panel. The left panel should not wrap text and display ellipsis if necessary

Breadcrumb floating to the right, yet it still manages to obstruct other content, forcing it into a

What are the steps to create a CSS grid like this?

Clicking on Google Code Prettify does not trigger syntax highlighting

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Customizing Material UI: Grouping Tab components within a div container

Submitting documents via jQuery post

Utilizing Vue's v-for directive to manipulate data through custom looping

Taking steps when a number is enclosed within a span

The overflow property is not functioning as anticipated

Coloring a table in vue.js based on performance rankings

Managing a fixed footer in an Android webview to prevent it from obstructing an input field when the soft keyboard appears

Guide on duplicating an HTML page with a button click

Tips on utilizing Blazorise's numeric edit group with grouping functionality

An issue with type conversion arises in Visual Basic when trying to access data from an HTML

Safari's problem with auto-filling forms

Bootstrap tab toggle feature

React Href is not functioning as expected in relative paths

Why hasn't the string been properly encoded?

I am currently facing a challenge with Bootstrap, as I am trying to design a webpage for small devices using a 1:4:1 format, but I am struggling to get it right