Latest topics

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 cause scripts to be executed differently. This makes your website loading much faster than before and appears contents of your site by loading at first. Loading JavaScript Asynchronously using as...

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 JavaScript To 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, image, speed and name. You can create number of new slideshows using this function below using new keyword. i.e. var slideshow1=new slideshow(slideList1, 'slide1', 3000, 'slideshow1'); function SlideShow(slideList, image, speed, name) { this.slideList = slideList; this.image = image; this.speed = spee...

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 how the animation will play like ease, ease-in, ease-in-out, ease-out and linear and animation-iteration-count:number of times animation should play. Simple fade effect image slideshow    Here is a sample CSS code for creating simple fade effect image slideshow written for safari browser. <style type="text/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, border-radius-top-left, border-radius-bottom-right, border-radius-bottom-left keywords. For example you can use the following CSS code to make each corner rounded. border-radius-top-right:10px; border-radius-top-left:10px; border-radius-bottom-right:5px; border-radius-bottom-left:5px; The above code makes radius of left and right cor...