<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> label { margin:0px 2px 4px 2px; padding: 1px; background-color: #eee; display: block; width: 50px; } .map-box { padding: 20px; background-color:red; } .map-box-active { padding: 20px; background-color:green; } </style> </head> <body> <form action="" method="get"> <label title="REQ13" id="REQ13"><input type="checkbox" value="checkbox" onchange="statecheck(‘REQ13’)" />AL</label> <label title="REQ14" id="REQ14"><input type="checkbox" value="checkbox" onchange="statecheck(‘REQ14’)" […]
Category: HTML
How to switch between the visibility of two div elements using a single button with pure JavaScript?
Click the “Try it” button to toggle between hiding and showing the DIV element: Try it This is my DIV element. This is my DIV elemsssent. Note: The element will not take up any space when the display property is set to “none”.
How to Convert HTML div into Multipage PDF using jsPDF
jsPDF is a nice library to convert HTML content into PDF. We can put the different type of elements in PDF from HTML like an icon, images, text, CSS styles. Here we will discuss an example of jsPDF to convert long HTML page into PDF document which will be generated client-side and download. See the […]
How to hide a div when a value is null or empty using pure css or pure javascript
A much cleaner approach is to just use CSS. The below style will hide divs which are emtpy. div:empty { display: none } Below code will hide the empty fields (including their labels) when the content is empty. This code will hide the email Heading with an empty value. Javascript code let empty = document.querySelectorAll(‘.row […]
How to create searchable list data using html and pure Javascript
You can preview the code See the Pen How to create searchable list data using html and pure Javascript? by vijay (@vijaywaskrishna) on CodePen. Full code given below <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <style> * { box-sizing: border-box; } #myInput[type=text]:focus { border: none; outline: none; } #myInput { width: 100%; font-size: 16px; […]
How to change the color of header bar and address bar in newest Chrome version?
You actually need 3 meta tags to support Android, iPhone and Windows Phone See the Pen How to change the color of header bar and address bar in newest Chrome version? by vijay (@vijaywaskrishna) on CodePen.
How to create counter with plus/minus using Pure Javascript
See the Pen How to create counter with plus/minus using Pure Javascript – Tutorialslides.com by vijay (@vijaywaskrishna) on CodePen.
How to create combine image and URL Sitemap 2021?
Sitemap.xml format 2021 Today iam going to show you how to create perfect sitemap for your websites which includes images. <urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1″ xsi:schemaLocation=”http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd”> <url> <loc>https://harbor.tutorialslides.com/</loc> <lastmod>2020-01-04T10:12:23+00:00</lastmod> <priority>1.00</priority> </url> <url> <loc>https://harbor.tutorialslides.com/index.html</loc> <lastmod>2020-01-04T10:12:23+00:00</lastmod> <priority>0.80</priority> </url> <url> <loc>https://harbor.tutorialslides.com/work.html</loc> <lastmod>2020-01-04T10:12:23+00:00</lastmod> <priority>0.80</priority> </url> <url> <loc>https://harbor.tutorialslides.com/what-we-do.html</loc> <lastmod>2020-01-04T10:12:23+00:00</lastmod> <priority>0.80</priority> </url> <url> <loc>https://harbor.tutorialslides.com/about.html</loc> <lastmod>2020-01-04T10:12:23+00:00</lastmod> <priority>0.80</priority> </url> <url> <loc>https://harbor.tutorialslides.com/gallery.html</loc> <lastmod>2020-01-04T10:12:23+00:00</lastmod> <priority>0.80</priority> […]
How to use google fonts in your website
Today, I am going to show you, How to use google fonts on your websites. Fonts are playing the main role when it comes to User Experience. In this tutorial. I am going to show you, how google fonts work and how you can easily integrate into your HTML, CSS Or Reactjs websites. what is […]
How to make a hyperlink in IE webpage to be open in Google Chrome or firefox
In this tutorial, we are going to learn How to make a hyperlink in IE webpage to be open in Google Chrome or Firefox. First Copy below code for Google Chrome <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=”en”> <head> <title>Tutorial slides</title> <hta:application applicationname=”Tutorialslides” scroll=”yes” singleinstance=”yes”> <script type=”text/javascript”> function openURL() { var shell = new […]
