CXDI - Serve Technology

Posts

Showing posts from May, 2021

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

Get URL Search String Parameters with JavaScript - getParameterByName(name,url)

Get URL Search String Parameters with JavaScript - getParameterByName(name,url) See Demo Here :- https://tutorials.sh20raj.repl.co/getparameterbyname/congrats.html?name=SHRaj&age=16&class=11 or https://tutorials.sh20raj.repl.co/getparameterbyname/ See Sample Codes :- https://replit.com/@SH20RAJ/Tutorials#getparameterbyname/congrats.html Here is the Code you can use to get the url parameters .... function getParameterByName(name, url = window.location.href) { name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } For Example :- I have URL :- https://mywebsite.com/about?name=John&age=17 and we want to see the value of name . Here value is John. So for getting the

Copy Text Using JavaScript Using document.execCommand()

Copy Text Using JavaScript Using document.execCommand() Here is a Sample Code - Click Here To Copy function copy(selector,command){ if(selector) document.querySelector(selector).select(); if(!command)command = 'copy'; document.execCommand(command); } Selector is for the querySelector of your Element like You have to copy a Text Under Element with id report so you have to pass #report here. Run This Function ... copy('#report') Here Second Option is Optional . Possible Values :- 1. Copy, Cut Default Value :- Copy. See Demo Codes Here :- https://replit.com/@SH20RAJ/Tutorials#copy-text-js/index.html See Demo :- https://tutorials.sh20raj.repl.co/copy-text-js/ Chats During Video Making :- https://simp.ly/p/vPDdmj Tips :- - See Example Code Here For Input and Copy Button. function copy(selector,command){ if(selector) document.querySelect

Unlimited Audio Hosting and Embed on Website/Blogger ft. Vocaroo with Direct Download

Unlimited Audio Hosting and Embed on Website/Blogger ft. Vocaroo with Direct Download We can use unlimited audio hosting using Vocaroo.com . By Uploading Audio on it for free. Steps :- 1. Click on Upload (You can Also Record Your Voice) and Upload your song/audio. And Now Your Song is Uploaded Completely. Let's Show the Audio on your Website. We can do it using 2 ways. 1. Embedding with default player. 2. Getting the direct download link and use in Audio Tag.( Advantage :- Removed Watermark, Use your own Custom HTML5 Audio Player...) Embedding with default player. Steps :- 1. Click on Embed Button. 2. Copy Embed Code.and Paste it to your website. Demo :- Code :- <div><iframe width="100%" height="60" src="https://vocaroo.com/embed/1iZmkgctAMVc?autoplay=0" fra