Category: Web Development
-
How to HTML open link in new in tab in browser
We can add this target=”_blank” in the <a> tag to open link in new tab Example code <!DOCTYPE html> <head> </head> <body> <!– Opens in the same tab –> <a href=”https://en.wikipedia.org/wiki/Main_Page”>Visit Wikipedia (same tab)</a> <br> <!– Opens in a new tab –> <a href=”https://en.wikipedia.org/wiki/Main_Page” target=”_blank”>Visit Wikipedia (new tab)</a> </body> </html> Copy Code
-
Change button text with jQuery
Its essential to change t he button text in some applications . For example Like button. If the current is “Like”, after click on the button it the button text will be “Liked” jquery makes process efficient. <!DOCTYPE html> <html> <head> <script src=”https://code.jquery.com/jquery-3.7.1.min.js”></script> </head> <body> <button class=”like-button”>Like</button> <script> $(document).ready(function(){ $(‘.like-button’).click(function(){ var buttonText = $(this).text(); if…
-
How to get current time from browser in JavaScript
Current Time From Browser The current time is: We can get the current time with built- in JavaScript object Date To get the time we have to create the Date object first simply like this As we created the date object we can console.log to get the result We get the result like this. we…
-
Optimize Website Performance: Pause Media Playback on Inactive Tabs
How pause media playback on inactive tabs can be very very useful? By using visibilitychange event, its possible stop playback when user move to another browser tab or inactive. So we can save bandwidth and which can be used for active users to give them the best quality uninterrupted media playback. Because in streaming platform…
-
How to prevent text selection in html
Its necessary to prevent text selection when the text is ui feature, to make the webpage more professional. We can prevent the text from selecting by using this in css You cannot select this text You can select this text example code
-
How to create tooltip in html
Is essential to add tooltip to make web page more professional and understandable The simplest way can we add tooltip is use html inline element <span> We will add the tool in div and tooltip text(tool description) in the span Toll description will be always hide ( display none in css) until the user hover…
-
Create your first chat application with Flask and Socketio
We will use socketio for real-time messaging First install our dependency for this application pip install flask pip install flask-socketio Copy Code How it will work. Every user will get an unique key. If the the other user submit the other users key that will send the message. its like sending message to unique username…
-
Ajax example with flask
One of the best ajax applied in real world is username checker. In this example we will check if there is existing username This is code /project we will Our first step: Check if username exists or not Imagine we have this existing username when the user enter a username we will check it from…
-
Build browser based Qr code generator with html css and javascript
The main features we will apply User will able to paste link or text and generate the qr code The dependency We will use qurcodejs a javascript library for this QR Code Generator QR Code Generator Generate QR Code The complete code. Try and customize by yourself. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta…
-
Create a Simple Image Gallery for Your Website (HTML, CSS & JavaScript)
Image Gallery The essential structure of the gallery The complete code. Just place your image link in the img tag to show the image <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Image Gallery</title> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .image-wrapper { position: relative; overflow: hidden; } .zoomable…