Show multiline text svg circle

For creating a circle using svg, you can follow this post. Then add the below code within the svg view box.

Normally you can use text tag to show some text in a svg component. But in order to show multiline text, we need to use HTML inside foreignObject tag as shown below:

< foreignObject id="content" x="20" y="25" width="100" height="100" >
                    < div >
                        < p id="txt1" style="font-size: 12px;">Text 1< /p >
                        < p id="txt2" style="font-size: 12px;">Text 2< /p >
                    < /div >
                < /foreignObject >

The x, y values should be set according to the svg view box. You can also use normal Javascript to modify the text using innerText property as below:

document.getElementById("txt1").innerText = "New Text 1";

Circular Progress bar svg javascript

In this post, I’ll give the code to create a Circular progress bar which I tried with a Start button and it resets every time you click on the start button and ticks every second for 60 seconds. The start button is shown using media control html code. The start button will re-appear once timer is reset.

If you’re using Asp.net Core MVC template, I’ve put the below code in index.cshtml file.

The HTML is as below:

< div >
            < svg class="progress-ring"
                 width="120"
                 height="120" >
                < circle class="progress-ring__circle"
                        stroke="orange"
                        stroke-width="4"
                        fill="transparent"
                        r="58"
                        cx="60"
                        cy="60" / >
                < text id="play" x="40" y="70" onclick="startTimer()" >▶< /text >
            < /svg >
< /div >

Css is as follows in the site.css file:

.progress-ring {
}

.progress-ring__circle {
    transition: 0.35s stroke-dashoffset;
    transform-origin: 50% 50%;
}

#play {
    cursor: pointer;
    font-size: xx-large;
}

The below Javascript code is going to modify the svg stroke-dashoffset attribute as below in the site.js file:

var i = 0;
var interval;
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
console.log('radius', radius);
console.log('circumference', circumference);
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
    const offset = circumference - percent / 100 * circumference;
    circle.style.strokeDashoffset = offset;
}

function startTimer() {
    console.log('circumference', circumference);
    circle.style.strokeDashoffset = `${circumference}`;
    document.getElementById("play").textContent = "ok";
    interval = setInterval(increment, 1000);
}

function increment() {
    i = i % 360 + 1;
    var perc = (i / 60) * 100;
    console.log(i);
    if (i === 60) {
        clearInterval(interval);
        document.getElementById("play").textContent = "\u25B6";
        i = 0;
    }
    setProgress(perc);
}

The stroke-dashoffset value is reduced every time to increase the progress with stroke-dasharray. You can play around with the radius to increase the circle size.

Create html div as circle using HTML and css

Create the following div on your HTML page as below:

< div id=”circularDiv” class=”circluarDiv” >< /div >

Add the following css in your html file or common css file that you’re importing:

.circluarDiv {
     width: 100px;
     height: 100px;
     background-color: whitesmoke;
     border: 1px solid black;
     border-radius: 50%;
 }

Please note that the width and height should be equal for the div. Keep the border and background colours distinct to easily recognize the element.

The border-radius is giving rounded corners to the Div.

CSS Media queries adjust to screen width in asp.net

I have two html tables in my Asp.net project, first one has normal html and 2nd one has a Repeater control. Due to some recent changes, it was difficult to align the width of the two tables. Also, I was facing issue on 2 different resolutions as below:

  1. 1920×1080 on my laptop.
  2. 1366×768 on my Desktop.

To solve this, I used the css media queries to cater to minimum width resolution of 1400px for MyTable and for above 1400px width resolution for OthersTable as shown below:

@media only screen and (max-width: 1400px) {
    .MyTable {
        width: 92%;
    }

    .OthersTable {
        width: 90%;
    }
}

@media only screen and (min-width: 1400px) {
    .MyTable {
        width: 90%;
    }

    .OthersTable {
        width: 90%;
    }
}

Media queries introduced in CSS3 let you include some properties only if certain condition is met. In the above case, I’m using screen-width as the condition. Below I’m using the class in my html tables as defined in the media queries in the aspx code.

<table id="divMyTable" visible="false" style="border-collapse: collapse;" class="MyTable" runat="server">
	<tr><td></td></tr>
</table/>			

<table id="divOthersTable" visible="false" style="border-collapse: collapse;" class="OthersTable" runat="server">
	<tr>
		<td></td>
	</tr>
</table>

Show image when mouse over on radio button HTML CSS

This post shows the scenario where you need to show an image when doing a mouse-over on a radio button in html. You can customize the code further as per your requirement.

In your html or server side code file, add the below style under the head tags:

<style>
    span .hover-img { 
      position:relative;
    }
    span .hover-img span {
      position:absolute; left:-9999px; top:-9999px; z-index:9999;
    }
    span:hover .hover-img span { 
      top: 20px; 
      left:0;
    }
</style>

Add the below html code under the body tag of the file as below:

<span><div class="hover-img"><font face="Arial"><input type="radio" value="option1" name="myradio"><font size="2">Option 1
</font><span><img src="Mouseover1.png" alt="image" height="100" /></span></div></span><br />

<span><div class="hover-img"><font face="Arial"><input type="radio" value="option2" name="myradio"><font size="2">Option 2
</font><span><img src="Mouseover2.png" alt="image" /></span></div></span>

Run the final code in a browser to see the results.