Please use “playsinline” attribute in the video tag, find example below.
<video playsinline loop muted >
<source src="video.mp4" type="video/mp4">
</video>HTML
HTML button for Google Calendar
<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Avi Web Event&details=Event details&dates=20220720T053000/20220725T073000&location=Online" target="_blank">Add to Calendar</a>Redirect website with WWW and without WWW using .htaccess
Redirect without WWW
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.aviweb\.com [NC]
RewriteRule ^(.*)$ http://aviweb.com/$1 [L,R=301]
Redirect with WWW
RewriteEngine on
RewriteCond %{HTTP_HOST} ^aviweb\.com [NC]
RewriteRule ^(.*)$ http://www.aviweb.com/$1 [L,R=301]
svg image file not allowing in emails
Some of emails not allowed svg files in emails find below possibilities.
SVG file in image tag src find below
AOL Web – YES
Outlook 2013 – NO
Outlook.com – YES
Yahoo! – YES
Mail (OSX) – YES
Mail (iOS) – YES
Gmail – NO
Gmail (iOS) – NO
Gmail (Android) – YES
Android – NO
For more information about SVG file in emails please find https://css-tricks.com/a-guide-on-svg-support-in-email/
Get current location longitude and latitude using HTML5 GeoLocation
jQuery basic things
jQuery noConflict()
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $.
Difference b/w document.ready() & window.load()
$(document).ready is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.
$(window).load event is fired after whole content (including css, images etc..) is loaded.
DOM
The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term “document” is used in the broad sense – increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents.
Simple Share buttons for Static and dynamic blogs
<ul>
<li>
<a href=”http://www.facebook.com/sharer.php?u=<URL>&p%5Btitle%5D=<TITLE>” rel=”nofollow” target=”_blank” title=”Share on Facebook”>
Facebook
</a>
</li>
<li>
<a href=”https://plus.google.com/share?url=<URL>” rel=”nofollow” target=”_blank” title=”Share on Google Plus”>
Google Plus
</a>
</li>
<li>
<a href=”http://twitter.com/share?text=<TITLE>&url=<URL>&via=<TWITTER-HANDLE>&related=<TWITTER-HANDLE>” rel=”nofollow” target=”_blank” title=”Share on Twitter”>
Twitter
</a>
</li>
<li>
<a href=”http://www.linkedin.com/shareArticle?mini=true&url=<URL>&title=<TITILE>&summary=<DESCRIPTION>&source=<DOMAIN>” rel=”nofollow” target=”_blank” title=”Share on LinkedIn”>
LinkedIn
</a>
</li>
<li>
<a href=”http://pinterest.com/pin/create/button/?url=<URL>&description=<TITLE>” rel=”nofollow” target=”_blank” title=”Share on Pinterest”>
Pinterest
</a>
</li>
<li>
<a href=”http://www.tumblr.com/share/link?url=<URL>&name=<TITLE>&description=<DESCRIPTION>” rel=”nofollow” target=”_blank” title=”Share on Tumblr”>
Tumblr
</a>
</li>
<li>
<a href=”http://www.reddit.com/submit?url=<URL>&title=<TITLE>” rel=”nofollow” target=”_blank” title=”Share on Reddit”>
Reddit
</a>
</li>
</ul>
Google Maps traffic layer
<style type=”text/css”>
html { height: 100%;}
body { height: 100%; margin: 0px; padding: 0px; }
#map { height: 600px; width: 600px; }
</style>
/* script call here
http://maps.google.com/maps/api/js?sensor=false” type=”text/javascript”
*/
/*script start here*/
google.maps.event.addDomListener( window, ‘load’, init );
function init() {
var options = {
zoom: 7,
center: new google.maps.LatLng( 32.715738, -117.161084 ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
overviewMapControl: false
};
var map = new google.maps.Map( document.getElementById( “map” ), options );
var traffic = new google.maps.TrafficLayer();
traffic.setMap( map );
google.maps.event.addDomListener(
document.getElementById( ‘b’ ),
‘click’,
function() {
traffic.setMap( traffic.getMap() === null ? map : null )
} );
}
/*script end here*/
How to create a block to show a digital clock?
function show5(){
if (!document.layers&&!document.all&&!document.getElementById)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
if (hours”+hours+”:”+minutes+”:”+seconds+””
if (document.layers){
document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}
else if (document.all)
liveclock.innerHTML=myclock
else if (document.getElementById)
document.getElementById(“liveclock”).innerHTML=myclock
setTimeout(“show5()”,1000)
}
$(document).ready(function(){ show5(); });
//–>
<span id=”liveclock” style=”position:relative;left:0;top:0;”></span>
HTML5 Validations
Radio Button
<input type=”radio” name=”radio” value=”avi” required=”required”>
textbox
<input type=”radio” name=”test” id=”input” required value=”1″ />
<input id=”name” name=”name” value=”” aria-describedby=”name-format” required aria-required=”true” pattern=”[A-Za-z-0-9]+\s[A-Za-z-‘0-9]+” title=”firstname lastname”>
Checkbox
<input type=”checkbox” required name=”terms”>
textarea
<textarea rows=”4″ cols=”50″ name=”comment” required></textarea>
Website
<input type=”url” name=”website” required>
Email Address
<input type=”email” name=”email” required placeholder=”Enter a valid email address”>
Age
<input type=”number” size=”6″ name=”age” min=”18″ max=”99″ value=”21″>
Satisfaction
<input type=”range” size=”2″ name=”satisfaction” min=”1″ max=”5″ value=”3″>
date
<input type=”date” name=”date” required>
AviWeb 