How to Load External JavaScript Asynchronously or Dynamically

JavaScript makes more easier to manipulate websites, now a days most of the browsers supporting JavaScript codes. When the HTML parser encounters a <script> element, by default, run the script before it can parsing and rendering the document. It is not much problem for inline scripts but if the script source code is in an external file specified with a src attribute, the portions of the document that follow the Script will not appear in the browser until the script has been downloaded and executed.This makes loading of the website much slower, which makes bad user experience for your website and may not also indexing of your website by the search engines.This Synchronous or blocking script execution is the default only. The <script> tag can have defer and async attributes, which...

Read more »

How to Add Multiple Slideshows on One Page Using Javascript

Most of our visitors asked "How to Add Multiple Slideshows on One Page Using JavaScript" by commenting on different previous posts for JavaScript slideshow and going to write this post about to add multiple slideshows on the same page. Using this script you can add number of slideshows on single page as your requirements. Multiple Slideshows on One Page Using JavaScriptTo make multiple slideshows, at first you have to make variable lists for each slideshows and have to create new slideshow using function slideshow( ). Here I have created two slideshows with variables SlideList1 and SlideList2 and uses function slideshow with parameters slideList,...

Read more »

How to create fade effect image slideshow using CSS

You can give fade effect animation for image slideshow using CSS. @keyframes 'at' rule and animation keyword in CSS can be used to make image slideshow with fade effect. With @keyframes 'at' rule, you can define the properties that will be animated in an animation rule and animation keyword to set all of the animation properties. Here I have used different types of animation properties like animation-name, animation-duration, animation-timing-function and animation-iteration-count. Where animation-name specifies name of the animation, animation-duration specifies animation duration in second(s) or milisecond(ms), animation-timing-function specifies...

Read more »

How to make rounded corners border using CSS

While designing website, website template or blog template, you may want to make buttons, menus, paragraphs or any others border corners rounded to make your template more beautiful and attractive. It is possible by using a keyword "border-radius" in CSS. The keyword border-radius is used to make all the corners rounded by specifying the radius of corner. For example you can use the following CSS code. border-radius:10px;                    // makes radius of all the corners 10px;You can also specify the radius for each corners by using border-radius-top-right,...

Read more »