CXDI - Serve Technology

Posts

Add Auto Colorful Css TopBar on Website show automatic onload ft. AutoTopBar

Add Auto Colorful Css TopBar on Website show automatic onload ft. AutoTopBar Add Auto TopBar on Website onload See Demo on Repl.it AutoTopBar :- Automatic Top Loader onload Steps For Integration :- Just Copy Paste the CDN Just After Starting <body> Tag and Thats All <script src="https://rebrand.ly/AutoTopBarJS"></script> Here is Some Optional Advance Features of Topbar See the Frame :-

Adding captions and subtitles to HTML5 video with diffrent languages option - HTML Track Tag

Adding captions and subtitles to HTML5 video - HTML Track Tag See Demo on CXDI-Tutorials (https://tutorials.sh20raj.repl.co/add-subtitles-to-html5-video/) Source Code on Repl or on GitHub

How to blur background/element in html using css - Css Filters - grayscale , hue-rotate and blur()

How to blur background/element in html using css - Css Filters - grayscale , hue-rotate and blur() Visit W3Schools :- https://www.w3schools.com/cssref/css3_pr_filter.asp filter : blur ( 10px ); filter : grayscale( 100% ) ; filter : hue-rotate( 90deg ) ; CSS Syntax filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); Tip: To use multiple filters, separate each filter with a space (See "More Examples" below). Filter Functions Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75). Filter Description Play it none Default value. Specifies no effects Play it » blur( px ) Applies a blur effect to the image. A larger value will create more blur. If no value is specified, 0 is used. Play it » brightness( % ) Adjusts the brightness of the image. 0% will make the image completely black

Convert entire div data into image and save it into directory using JavaScript ft html2canvas.js

Convert entire div data into image and save it into directory using JavaScript ft html2canvas.js GET MORE + DEMO :- https://codexdindia.blogspot.com/2021/05/convert-entire-div-data-into-image-and-save-it-into-directory-using-JavaScript-ft-htmltocanvasjs.html See Demo :- https://sh20raj.github.io/Tutorialsdiv/html-to-canvas/ See Codes :- https://replit.com/@SH20RAJ/Tutorials#html-to-canvas/index.html About html2canvas :- https://html2canvas.hertzen.com/ GItHub :- https://github.com/niklasvh/html2canvas Copy the JavaScript CDN :- < script src = "https://cdn.jsdelivr.net/npm/html2canvas/dist/html2canvas.min.js" > </ script > ` Copy The Code :- < script > function doCapture ( ) { window .scrollTo( 0 , 0 ); // Convert the div to image(canvas) html2canvas(document.getElementById("capture")).then(function(canvas) { // Get the image data as JPEG and 0.9 quality (0.0 - 1.0) var imgdata = canvas.toDataURL("image

HTML5 Video Player with Playlist Using JavaScript - A Simple HTML5 Video Playlist Design

HTML5 Video Player with Playlist Using JavaScript - A Simple HTML5 Video Playlist Design See Demo on Repl :- https://tutorials.sh20raj.repl.co/video-player-with-playlist/ Codes :- https://replit.com/@SH20RAJ/Tutorials#video-player-with-playlist/index.html

Creating QRCode Generator Using JavaScript ft. QRCode.js

Creating QRCode Generator Using JavaScript ft. QRCode.js Add the QRCode Generator widget to your Blogger... <div style="text-align: center;"><iframe src="https://qrcodejs.sh20raj.repl.co/index.svg"></iframe></div> Copy the JavaSCript CDN :- <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script> Here is A Sample Code :- <div id="qrcode"></div> <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "http://jindo.dev.naver.com/collie", width: 128, height: 128, colorDark : "#000", colorLight : "#fff", correctLevel : QRCode.CorrectLevel.H }); </script>

Plyr.io Video Player - Integration - Skin Customizing - Adding Download Button

Plyr.io Video Player - Integration - Skin Customizing - Adding Download Button See the Pen Plyr.io Video Player - Skin Customizing to pink by SH20RAJ ( @SH20RAJ ) on CodePen . Integration :- or Get Plyr CDNS From CDNJS Plyr  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.css" /> or Use CDNJS for CDN <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.min.css" />  <video controls data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" class="vid1">  <source src="https://rebrand.ly/sample-video" type="video/mp4" size="576" /> </video> <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.min.js"&g