To address the “iframe refused to connect” issue on an Nginx server, you need to configure Nginx to allow embedding your site within an iframe. This involves setting appropriate HTTP headers in your Nginx configuration. Use below code in .conf Ngnix file location / { proxy_set_header X-Forwarded-Proto https; proxy_hide_header X-Frame-Options; add_header X-Frame-Options “ALLOWALL”; } Now […]
<!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’)" […]
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”.
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 […]
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 […]
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; […]
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.
See the Pen How to create counter with plus/minus using Pure Javascript – Tutorialslides.com by vijay (@vijaywaskrishna) on CodePen.
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> […]
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 […]
