Latest Articles

How to Restore or Undo Windows Photo Viewer in Windows 10/11

Written by: Sir Chogyal -

How to Restore or Remove Windows Photo Viewer in Windows 10/11

Windows Photo Viewer was the default image viewer in Windows 7 and 8. Later, in Windows 10 and 11, Microsoft replaced it with a different photo viewer app. This is mainly because Windows Photo Viewer was unable to open certain image formats. For example, images received from apps like WeChat and Telegram are not supported. However, because of its simplicity, fast performance, and clean interface, many users still prefer the classic Windows Photo Viewer. So, if you would still like to use Windows Photo Viewer, you can still download from this blogpost and use for free.

Note: The registry file to activate Windows Photo Viewer works on both Windows 10 and 11. If you're not sure, you back up your registry before applying any changes. But don’t worry, it’s safe. If it causes any issues, you can download another registry file that can undo all the changes.

Restore Windows Photo Viewer

Download and Apply Registry File

Download the registry file to restore Windows Photo Viewer:

Follow the instructions below:

1. Click the download button above, which is labeled "Restore the Windows Photo Viewer file".
2. After downloading, double-click the registry file to apply the changes.
3. Click "Yes" when prompted by User Account Control
4. Click "Yes" to confirm you want to add the information to the registry
5. Click "OK" when you see the success message
6. Restart your computer for changes to take full effect

How to Set Windows Photo Viewer as Default

After applying the registry changes:

➣ Right-click any image file and select "Open with" > "Choose another app"
➣ Select "Windows Photo Viewer"
➣ Check the box that says "Always use this app to open .jpg files" (or whatever file type you're opening)
➣ Click "OK"

Undo Windows Photo Viewer (Remove It)

If you want to remove Windows Photo Viewer and revert to the default Photos app, follow these steps:

Option A: Download and Apply Registry File (Recommended)

Download the registry file to remove Windows Photo Viewer:

Click the download button above to get the registry file
Save the file to your computer
Double-click the downloaded .reg file
Click "Yes" when prompted by User Account Control
Click "Yes" to confirm you want to add the information to the registry
Click "OK" when you see the success message
Restart your computer for changes to take full effect

Troubleshooting

If Windows Photo Viewer doesn't appear after applying the registry changes:

Make sure you restarted your computer
Try right-clicking an image file, select "Open with" > "Choose another app" and look for Windows Photo Viewer in the list
If you don't see it, browse to C:\Program Files\Windows Photo Viewer and select PhotoViewer.dll
Some Windows 11 builds may require additional steps - try running the registry file again after a reboot

If you get errors when running the registry files:

Make sure you're logged in as an administrator
Right-click the .reg file and select "Run as administrator"
Check if your antivirus is blocking registry changes

Conclusion

Last but not least, I still use Windows Photo Viewer because it is very user-friendly and my favorite app for viewing images. So the two registry files above are very important: one is used to activate Windows Photo Viewer, and the other is used to undo the changes in Windows 10 and 11. Please note that Microsoft may completely remove Windows Photo Viewer in the future, so nothing is guaranteed. While it’s uncertain what will happen later, for now, at least in Windows 10 and 11, we can still use Windows Photo Viewer, and we’re quite lucky, actually.

Credits: This guide and registry files were created by Sey8. Visit our homepage at https://sey8.blogspot.com for more Windows tips and tricks.

Display flex - Responsive Layouts

Written by: Sir Chogyal -

Edit this post

My Responsive Flexbox Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a aliquet erat. Pellentesque sodales tortor massa, non facilisis sem sollicitudin sit amet. Curabitur vestibulum consectetur enim. Donec sit amet tincidunt justo. Praesent lacinia eros nec dictum cursus. Donec tempus, eros nec viverra fringilla, erat orci vestibulum diam, vitae tristique eros ex et est. Pellentesque venenatis, turpis quis suscipit consequat, lectus mi auctor odio, nec fermentum dolor nulla in odio. Duis fringilla, libero quis tristique suscipit, risus nisi tincidunt mauris, vitae efficitur leo quam id odio. Praesent diam ligula, consequat vel aliquet vitae, vestibulum eu neque.

Add HTML Document and CCS to New Context Menu

Written by: Sir Chogyal -

Edit this post

Watch the video at https://youtu.be/1ubdy1cL2PI for the instruction:-

1. For HTML File

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\.html]
@="htmlfile"
"Content Type"="text/html"
"PerceivedType"="html"

[HKEY_CLASSES_ROOT\.html\OpenWithList]

[HKEY_CLASSES_ROOT\.html\OpenWithProgids]
"AppX4hxtad77fbk3jkkeerkrm0ze94wjf3s9"=hex(0):
"ChromeHTML"=""
"IE.AssocFile.HTM"=""
"MSEdgeHTM"=""

[HKEY_CLASSES_ROOT\.html\PersistentHandler]
@="{eec97550-47a9-11cf-b952-00aa0051fe20}"

[HKEY_CLASSES_ROOT\.html\ShellNew]
"ItemName"=hex(2):00,00
"NullFile"=""

2. For CSS File

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\.css]
@="CSSfile"
"Content Type"="text/css"
"PerceivedType"="text"

[HKEY_CLASSES_ROOT\.css\OpenWithList]

[HKEY_CLASSES_ROOT\.css\PersistentHandler]
@="{eec97550-47a9-11cf-b952-00aa0051fe20}"

[HKEY_CLASSES_ROOT\.css\ShellNew]
"ItemName"=hex(2):00,00
"NullFile"=""

Transform-origin In CSS

Written by: Sir Chogyal -

Edit this post

The CSS property transform-origin defines the point around which a transformation is applied to an element. It is the point or origin of the transform property which can change the point of transformations like rotation, scaling, skewing, etc. By default, the transform-origin of an element is relative to the center of an element.

Video Tutoral at https://youtu.be/-MZvSn6pOyg

The transform-origin property is used along with the transform property. For example, if we use, transform: rotateZ(30deg); and transform-origin: top;, the point of transformation or rotation starts from the top center.

If you want to keep the transform-origin at the center, then there is no need to use the transform-origin property. This is because the transform-origin is at the center by default. However, if you want to shift your transform-origin, then you have to use it.

If we set here the transform-origin: bottom;, then the transform-origin is at the bottom center. Similarly, you can set transform-origin: left;, transform-origin: right;, transform-origin: top;, transform-origin: top right;, transform-origin: bottom left;, etc.

transform-origin: top right; Here the transform-origin has shifted to the top right corner.

Instead of using transform-origin: right bottom;, we can use transform-origin: 100% 100%;. Here, the first value is x, and the second value is y. Both x and y move 100% away from 0, intersecting at the right bottom corner. So, transform-origin: 100% 100%; is the same as transform-origin: right bottom;.

transform-origin: 50%; : Here, 50% represents the X value. Even though nothing is mentioned for Y, it still means that the Y value is 50% by default.

transform-origin: 50% 50%; : In this case, we find that both the x and y values are each specified as 50%.

transform-origin: 50% 0; : Here, the x value is 50% and the y value is 0, which sets the transform-origin to the top center.

Here are some examples of transform-origin values that give the same effects. Please go through all of these:


/* Left transform-origin */
transform-origin: 0;
transform-origin: left;
transform-origin: center left;
transform-origin: left center;
transform-origin: 0 50%;

/* Top left transform-origin */
transform-origin: top left;
transform-origin: left top
transform-origin: 0 0;

/* Top transform-origin */
transform-origin: top; 
transform-origin: top center;
transform-origin: center top;
transform-origin: 50% 0;

/* Top right transform-origin */
transform-origin: top right;
transform-origin: right top;
transform-origin: 100% 0;

/* Right transform-origin */
transform-origin: right;
transform-origin: 100%;
transform-origin: center right;
transform-origin: right center;
ransform-origin: 100% 50%;

/* Bottom right transform-origin */
transform-origin: bottom right;
transform-origin: right bottom;
transform-origin: 100% 100%;

/* Bottom transform-origin */
transform-origin: bottom;
transform-origin: bottom center;
transform-origin: center bottom;
transform-origin: 50% 100%;

/* Bottom left transform-origin */
transform-origin: bottom left;
transform-origin: left bottom;
transform-origin: 0 100%;

Index

<!DOCTYPE html>
<html lang="en">

<head>
<title>Transform Origin Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <h3>Transform-origin Property</h3> <br><br>

      <div class="square">transform-origin: 50% 100%;</div>   
</body>
</html>

CSS

.square {
    display: grid;
    place-items: center;
    width: 250px;
    height: 250px;
    background-color: rgb(167, 59, 19);
    color: yellow;
    transition: transform 0.5s ease;
}

.square:hover {
    transform: rotateZ(30deg);
}

.square {
    transform-origin: 50% 100%;
}

Result

transform-origin: 50% 100%;

Hover your mouse on the above square.

Transform-origin: x-offset value, y-offset value, z-offset value; This is the main syntax for transform-origin values. We have x-offset value which defines the horizontal position of the origin. The second one is y-offset value which defines the vertical position of the origin and the third is z-offset value which defines the position along the z-axis (depth) when using 3D transformations.

Transform-origin value can be one-value syntax, two-value syntax and three-value syntax. The three-value syntax can be used specially in a 3D element. Here are examples of one-value syntax, two-value syntax, and three-value syntax. Please go through all of these. Please note that z-offset cannot be used in percentage because there is no measurable or clear size on the z-axis.

Examples:


/* 1. One-value syntax */
transform-origin: 3px;
transform-origin: top;

/* 2. Two-value syntax */
transform-origin: 5cm 3px;
transform-origin: 80% 30%;
transform-origin: left 2px;
transform-origin: right top;
transform-origin: top right;

/* 3. Three-value syntax */
transform-origin: 2px 30% 10px;
transform-origin: left 5px -4px;
transform-origin: right bottom 5cm;
transform-origin: bottom right 9cm;

We can also use Global Values in transform-origin. Here, we have:


/* Global values: */
transform-origin: inherit; 
transform-origin: initial; 
transform-origin: revert; 
transform-origin: revert-layer; 
transform-origin: unset;

In CSS, global values control how properties are applied or reset by inheriting values, using default settings, or reverting to previous or default states.

So in conclusion, the transform origin is very useful when we animate or style our transformations. By changing the transform origin, we can make the visual effect of an element look much better.

Creating A Vertical Scrollbar with CSS in HTML

Written by: Sir Chogyal -

Edit this post

If you look at every website, you will find the vertical scrollbar on the right side of the webpage. The vertical scrollbar is showing by default yet we can design it into a better scrollbar on our website.

Video Tutoral at https://youtu.be/jB20Qhzt3dU

To improve the user experience when dealing with lengthy content or with a limited space, it's important to add a vertical scrollbar to a web page. By using the code provided below, you can create a vertical scrollbar with a unique style. CSS properties such as ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb allow you to define the width, color, and shape of the scrollbar. Feel free to experiment with different values to achieve the desired visual effect. It may also enhance your website's readability and aesthetics by implementing a customized vertical scrollbar in HTML using CSS.

<!DOCTYPE html>
<html>
<head>
 <style>

body {
font-family: Arial;
font-size: 18px;
text-align: justify;
padding: 20px 80px;
}

::-webkit-scrollbar {
	width: 20px;
}

::-webkit-scrollbar-track {
	border: 1px solid #9933ff;
	border-radius: 5px;
	background: yellow;
}

::-webkit-scrollbar-thumb {
	background: #ff00ff;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #ff6600;
}
 </style>
</head>

<body>

<div class="scroll-bar">
<h1 style="text-align: center">Sample Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue mauris augue neque gravida. Elementum curabitur vitae nunc sed velit dignissim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Ipsum dolor sit amet consectetur adipiscing. Volutpat sed cras ornare arcu dui vivamus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu bibendum at varius vel pharetra vel turpis. Tincidunt vitae semper quis lectus nulla. Turpis in eu mi bibendum neque egestas congue quisque. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque fermentum dui faucibus in ornare quam viverra. Nisi porta lorem mollis aliquam ut porttitor. Fringilla ut morbi tincidunt augue interdum velit. Id ornare arcu odio ut sem nulla. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacinia quis vel eros donec ac. Etiam erat velit scelerisque in. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean.
</p>
</div>

</body>
</html>

Automatic Digital Date, Month & Year

Written by: Sir Chogyal -

Edit this post

In this tutorial, we will delve into a simple approach for generating an automated digital representation of the date, month, and year using JavaScript and CSS. By integrating the given code, you can seamlessly showcase the current date in a format that is easily understandable for users on your webpage.

Video Tutoral at https://youtu.be/VaqLibBUiq8

The below are the code that can create date, month and year which be expressed in digits by using simple JavaScript and CSS.

Index

<!DOCTYPE html>
<html>

<head>
     <title>Date</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="date">
     <script src="script.js"></script>
</div>

</body>
</html>

Script

var d = new Date();
var date = d.getUTCDate();
var month = d.getUTCMonth() + 1;
var year = d.getUTCFullYear();

if (date < 10) {
    date = "0" + date;
}

if (month < 10) {
    month = "0" + month;
}

document.write("Date: ");
var dateStr = date + "/" + month + "/" + year;
document.write(dateStr);

Stylesheet


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

.date {
      padding: 15px;
      font-family: Arial;
      font-size: 2em;
      font-weight: bold;
      color: blue;
      text-align: center;
      letter-spacing: 3px;
}

Result ⤷

Creating Superscript and Subscript in an HTML

Written by: Sir Chogyal -

Edit this post

<html>
<title>sup_sub tag</title>

<head></head>

<body>
<h2>Superscript</h2>
<p>
5<sup>th</sup> December.
</p>

<p>
(a+b)<sup>2</sup>
</p>

<h2>Subscript</h2>
<p>
Nitric Acid, HNO<sub>3</sub>
</p>

<p>
Carbon dioxide, CO<sub>2</sub>
</p>

</body>

<footer></footer>

</html>

Result:

Superscript

5^th December.

(a+b)²

Subscript

Nitric Acid, HNO₃

Carbon dioxide, CO₂

Splitting Or Merging Cells In An HTML Table Using An HTML Code

Written by: Sir Chogyal -

Edit this post

Splitting or merging cells in HTML table

Video Tutoral at https://youtu.be/bo4HN8R_lPY

1. Code Before Using rowspan & colspan:

<title>HTML Table</title>

<style>
            table, th, td
                  {
                  border: 1px solid blue;
                  border-collapse: collapse;
                  }

             th, td
                  {
                   padding: 5px;
                   }
</style>

<table align="center" width="80%">
    
             <tr>
                    <td colspan="7" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td>
           </tr>

           <tr>
                  <th>SL No</th>
                  <th>Name</th>
                  <th>Class</th>
                  <th>Percentage</th>
                 <th>1st Position</th>
                 <th>2nd Position</th>
                 <th>3rd Position</th>
           </tr>

          <tr>
                 <td>1.</td>
                 <td>Jack</td>
                 <td>12 Commerce 'A'</td>
                 <td>98%</td>
                 <td>97%</td>
                 <td>95%</td>
                 <td>93.8%</td>
          </tr>

        <tr>
          <td>2.</td>
          <td>Dorji</td>
          <td>12 Commerce 'B'</td>
          <td>97.8%</td>
          <td>97.6%</td>
          <td>85%</td>
          <td>85.01%</td>
        </tr>
        
        <tr>
          <td>3.</td>
          <td>Oma Ghalley</td>
          <td>12 Science 'A'</td>
          <td>100%</td>
          <td>99.01%</td>
          <td>96.8%</td>
          <td>96%</td>
        </tr>
          
        <tr>
          <td>4.</td>
          <td>Rose Marry</td>
          <td>12 Science 'B'</td>
          <td>100%</td>
          <td>98%</td>
          <td>96</td>
          <td>85%</td>
        </tr>
          
        <tr>
          <td>5.</td>
          <td>Changying</td>
          <td>12 Arts 'A'</td>
          <td>100%</td>
          <td>97%</td>
          <td>96.8</td>
          <td>96%</td>
        </tr>
          
        <tr>
          <td>6.</td>
          <td>D.k Pradhan</td>
          <td>12 Arts 'B'</td>
          <td>98%</td>
          <td>97%</td>
          <td>95.8</td>
          <td>94.01%</td>
        </tr>
          
</table>

2. Code after using rowspan & colspan:

<title>HTML Table</title>

<style>
            table, th, td
                  {
                  border: 1px solid blue;
                  border-collapse: collapse;
                  }

             th, td
                  {
                   padding: 5px;
                   }
</style>

<table align="center" width="80%">
  
             <tr>
                    <td colspan="10" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td>
           </tr>

           <tr>
                  <th rowspan="2"></th>
                  <th>Name</th>
                  <th colspan="4">Class</th>
                  <th>Percentage</th>
                 <th>1st Position</th>
                 <th>2nd Position</th>
                 <th>3rd Position</th>
           </tr>

          <tr>
            
                 <td>Jack</td>
                 <td colspan="2">12 Commerce 'A'</td>
                     <td>Accountancy</td>
                     <td>Commerce</td>
                 <td>98%</td>
                 <td>97%</td>
                 <td>95%</td>
                 <td>93.8%</td>
          </tr>

        <tr>
           <td>Lopon</td>
          <td>Dorji</td>
          <td colspan="4">12 Commerce 'B'</td>
          <td>97.8%</td>
          <td>97.6%</td>
          <td>85%</td>
          <td>85.01%</td>
        </tr>
      
        <tr>
          <th rowspan="4">Sl No</th>
          <td>Oma Ghalley</td>
          <td>12 Science 'A'</td>
                  <td>Biology</td>
                  <td>Physics</td>
                  <td>Chemistry</td>
           <td>100%</td>
          <td>99.01%</td>
          <td>96.8%</td>
          <td>96%</td>
        </tr>
        
        <tr>
      
          <td>Rose Marry</td>
          <td colspan="4">12 Science 'B'</td>
          <td>100%</td>
          <td>98%</td>
          <td>96</td>
          <td>85%</td>
        </tr>
        
        <tr>
        
          <td>Changying</td>
          <td colspan="3">12 Arts 'A'</td>
              <td>Arts with Maths</td>
          <td>100%</td>
          <td>97%</td>
          <td rowspan="2">96.8</td>
          <td>96%</td>
        
        </tr>
        
        <tr>
        
          <td>D.k Pradhan</td>
          <td  colspan="4">12 Arts 'B'</td>
          <td>98%</td>
          <td>97%</td>
        
          <td>94.01%</td>
        </tr>
        
</table>

3. Behind rowspan & colspan, Hiding Border Lines In An HTML Table By Using Background Color:
remove table cell

Full code:↓

<title>HTML Table</title>

<style>
            table, th, td
                  {
                  border: 1px solid blue;
                  border-collapse: collapse;
                  }

             th, td
                  {
                   padding: 5px;
                   }

</style>

<table align="center" width="80%">
  
             <tr>
                    <td colspan="7" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td>
           </tr>

           <tr>
                  <th>SL No</th>
                  <th>Name</th>
                  <th>Class</th>
                  <th>Percentage</th>
                 <th>1st Position</th>
                 <th>2nd Position</th>
                 <th>3rd Position</th>
           </tr>

          <tr>
                 <td>1.</td>
                 <td>Jack</td>
                 <td>12 Commerce 'A'</td>
                 <td>98%</td>
                 <td>97%</td>
                 <td>95%</td>
                 <td>93.8%</td>
          </tr>

        <tr>
          <td>2.</td>
          <td>Dorji</td>
          <td>12 Commerce 'B'</td>
          <td>97.8%</td>
          <td>97.6%</td>
          <td>85%</td>
          <td>85.01%</td>
        </tr>
      
        <tr>
          <td>3.</td>
          <td>Oma Ghalley</td>
          <td>12 Science 'A'</td>
          <td>100%</td>
          <td>99.01%</td>
          <td>96.8%</td>
          <td>96%</td>
        </tr>
        
        <tr>
          <td>4.</td>
          <td>Rose Marry</td>
          <td>12 Science 'B'</td>
          <td>100%</td>
          <td>98%</td>
          <td>96</td>
          <td>85%</td>
        </tr>
        
        <tr>
          <td>5.</td>
          <td>Changying</td>
          <td>12 Arts 'A'</td>
          <td>100%</td>
          <td>97%</td>
          <td>96.8</td>
          <td>96%</td>
        </tr>
        
        <tr>
          <td style=" border-left:1px solid white; border-bottom:1px solid white; border-right:1px solid white;"></td>
          <td style=" border-left:1px solid white; border-bottom:1px solid white;"></td>
          <td>12 Arts 'B'</td>
          <td>98%</td>
          <td>97%</td>
          <td style="border-bottom:1px solid white;  border-right:1px solid white;"></td>
          <td style="  border-bottom:1px solid white; border-right:1px solid white;"></td>
        </tr>        

</table>

Subscribe to: Posts ( Atom )

NEW POSTS

Main Menu

Recent

Pages

Contact Form

Latest Articles

How to Restore or Undo Windows Photo Viewer in Windows 10/11

How to Restore or Remove Windows Photo Viewer in Windows 10/11

Restore Windows Photo Viewer

Download and Apply Registry File

How to Set Windows Photo Viewer as Default

Undo Windows Photo Viewer (Remove It)

Option A: Download and Apply Registry File (Recommended)

Troubleshooting

Conclusion

Display flex - Responsive Layouts

My Responsive Flexbox Layout

Add HTML Document and CCS to New Context Menu

Transform-origin In CSS

Creating A Vertical Scrollbar with CSS in HTML

Automatic Digital Date, Month & Year

Creating Superscript and Subscript in an HTML

Result:

Superscript

Subscript

Splitting Or Merging Cells In An HTML Table Using An HTML Code

Recent

Latest Posts

Pages