Education: نوفمبر 2014

How to Load External JavaScript Asynchronously or Dynamically

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><br /><div style="text-align: justify;">JavaScript makes more easier to manipulate websites, now a days most of the browsers supporting JavaScript codes. When the HTML parser encounters a <b><script> </b>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.<br /><br /><br />This Synchronous or blocking script execution is the default only. The <script> tag can have <b>defer and async</b> 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.<br /><br /><br /><h3> Loading JavaScript Asynchronously using async or defer attributes </h3><br /><br />Both the defer and acync attributes are ways of telling the browser that the linked script does not use document.write() and won't be generating document content, and that therefore the browser can continue to parse and render the document while downloading the script. You can use async or defer attributes as the following.</div></div><pre class="prettyprint"><script defer src="deferred.js"></script> <br /><script async src="async.js"></script></pre><br /><div style="text-align: justify;"></div><div style="text-align: justify;">The defer attribute causes the browser to defer execution of the script until after the document has been loaded and parsed and is ready to be manipulated. The async attribute causes the browser to run the script as soon as possible but not to block document parsing while the script is being downloaded. If a <script> tag has both attributes, a browser that supports both will honor the async attribute and ignore the defer attribute. Deferred scripts run in the order in which they appear in the document, while acync scripts run as they load, which means that they may execute out of order.<br /><br />Here is an example of acync script uses in this blog for Intensedebate comments script source.<br /><br /><pre class="prettyprint"><script async='async' expr:src='data:post.commentSrc' type='text/javascript'/></pre><br /><br /><br /><h3></h3><h3> Loading JavaScript Asynchronously by loading scripts dynamically </h3><h3></h3><br /><br />You can load and execute scripts asynchronously, even in browsers that do not support the async attribute, by dynamically creating a <script> element and inserting it into the document. Here is an example how to load scripts dynamically.<br /><br /><pre class="prettyprint">function loadasync(url){<br />var head=document.getElementByTagName("head")[0]; <br />var s=document.createElement("script"); <br />s.src=url;<br />head.appendchild(s);<br />}<br /></pre></div></div><br /><div style="text-align: justify;">This loadsaync() function finds the <head> tag and attach <script> tag below opening of head tag and loads scripts dynamically. Scripts that are neither included inline within the web page or referenced statically from the web page are loaded into the document and become part of the running JavaScript program.<br /><a name='more'></a><br />You can use the following method to execute loadsync() function, when document finished loading.<br /><br /><blockquote class="tr_bq">function loadasync(){ ..................}<br />request.onreadystatechange=loadasync; </blockquote><br /></div><div style="text-align: justify;">Here is an example of loading JavaScript asynchronously by loading scripts dynamically used in this blog for external scripts from infolinks ads.<br /><br /><pre class="prettyprint"><div style='display:none'>  <div id='adsource-0'><br /><script type='text/javascript'><br />var infolinks_pid = 9993182;<br />var infolinks_wsid = 1;<br /></script><br />    <script language='javascript' src='http://resources.infolinks.com/js/infolinks_main.js' type='text/javascript'/><br />  </div><br /></div><br /><script type='text/javascript'><br />    source = document.getElementById("adsource-0");<br />    placeholder = document.getElementById("ad-0");<br />    placeholder.appendChild(source);<br /></script></pre><br />I have placed this code at the bottom of HTML codes, i.e. just before </body> tag and have placed the following code where I want to display ads.<br /><br /><pre class="prettyprint"><div id="ad-0" align="center"></div></pre><br /><br /></div><h3 style="text-align: justify;">Loading JavaScript Asynchronously when document finishes loading </h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /><br />You can load and execute scripts asynchronously by using setTimeout(), addEventListner(), and attachEvent(). Most objects that can be event targets have a method named addEventListner(), which allows the registration of multiple listeners.<br /><br /><blockquote class="tr_bq">window.addEventListner("load", function(){.....},false);<br />request.addEventListner("readystatechange", function(){......},false);</blockquote><br />The first argument to this function is the name of the event. For IE8 and earlier, you must use a similar method, named attachEvent().<br /><br /><blockquote class="tr_bq">window.attachevent("onload", function() {.....});</blockquote><br />Here is an example which define an onLoad() function that registers a function to be run when the document finishes loading. If the document has already loaded, run it asynchronously.</div><br /><pre class="prettyprint">function onLoad(f){<br />if(onLoad.loaded) <br /> window.setTimeout(f,0); <br />elseif (window.addEventListner)<br /> window.addEventListner("load",f,false);<br />elseif (window.attachEvent)<br /> window.attachEvent("onload",f);<br />}<br /><br />onLoad.loaded=false;<br /><br />onLoad(function(){onLoad.loaded=true;});<br /></pre><br /><br /><div style="text-align: justify;">In the above script <i><b>window.attachEvent </b></i>is used for IE8 and earlier. <i><b>onLoad.loaded=false; </b></i>sets a flag that indicates the document is not loaded yet and onLoad(function(){onLoad.loaded=true;}); register a function to set the flag when the document does load.</div><br /><br /><br /><h4 style="text-align: left;">Related Posts: </h4><br /><br /><ul style="text-align: left;"><li><a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a></li><li><a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a></li><li><a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a></li><li><a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/how-to-create-digital-clock-in-javascript.html">How to Create a Digital Clock in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a></li></ul></div>

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 element, by default, run the script before it can p…

مزيد من المعلومات »

24 Nov 2014

How to Add Multiple Slideshows on One Page Using Javascript

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div style="text-align: justify;">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. </div><br /><br /><h3 style="text-align: left;">Multiple Slideshows on One Page Using JavaScript</h3><div style="text-align: left;"><br /></div><div style="text-align: justify;"><br />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.<br /><br />You can create number of new slideshows using this function below using new keyword. i.e. var slideshow1=new slideshow(slideList1, 'slide1', 3000, 'slideshow1');<br /><br /><pre class="prettyprint">function SlideShow(slideList, image, speed, name)          <br />{<br />  this.slideList = slideList;<br />  this.image = image;<br />  this.speed = speed;<br />  this.name = name;<br />  this.current = 0;<br />  this.timer = 0;<br />}</pre><br />And the another function switchImage( ) given below allows you to  change images while playing slideshows.<br /><br /><pre class="prettyprint">function switchImage(imgName, imgSrc) <br />{<br />  if (document.images)<br />  {<br />    if (imgSrc != "none")<br />    {<br />      document.images[imgName].src = imgSrc;<br />    }<br />  }<br />}</pre><br />Here is a full JavaScript code for making multiple slideshows on one page using JavaScript. Copy the following codes inside body tag of your HTML file and replace given image source <img src=" "> with your image source.<br /><br /></div><div style="text-align: left;"><br /><pre class="prettyprint"><img src="image1.gif" name="slide1"><br /><img src="image2.gif" name="slide2"><br /><script type=text/javascript><br />var SlideList1 = ['image1.gif', 'image2.gif', 'image3.gif'];<br />var SlideShow1 = new SlideShow(SlideList1, 'slide1', 3000, "SlideShow1");<br />var SlideList2 = ['image4.gif', 'image5.gif', 'image6.gif'];<br />var SlideShow2 = new SlideShow(SlideList2, 'slide2', 1000, "SlideShow2");<br />function SlideShow(slideList, image, speed, name)          <br />{<br />  this.slideList = slideList;<br />  this.image = image;<br />  this.speed = speed;<br />  this.name = name;<br />  this.current = 0;<br />  this.timer = 0;<br />}<br />function switchImage(imgName, imgSrc) <br />{<br />  if (document.images)<br />  {<br />    if (imgSrc != "none")<br />    {<br />      document.images[imgName].src = imgSrc;<br />    }<br />  }<br />}<br />SlideShow.prototype.play = SlideShow_play;  <br />function SlideShow_play()       <br />{<br />  with(this)<br />  {<br />    if(current++ == slideList.length-1) current = 0;<br />    switchImage(image, slideList[current]);<br />    clearTimeout(timer);<br />    timer = setTimeout(name+'.play()', speed);<br />  }<br />}<br />window.onLoad=SlideShow1.play();SlideShow2.play();<br /></script></pre></div><div style="text-align: left;"><br /><br /><div style="text-align: justify;">Here the speed of first and second slideshows are specified 3000 and 1000 respectively, your can change them as your requirements. Also you can add more slideshows by adding more slideList and slideshow variables.</div><div style="text-align: justify;"><br /><a name='more'></a></div><div style="text-align: justify;"><br /></div><h3 style="text-align: left;">Preview of  JavaScript Code Given Above</h3><br /><br /><img alt="slide1" name="slide1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAH9O75gEgCIvjfvEeyHrnNOwcXBQTp1k-BVkcFaPFJh9kmXc__cMfmTrKx3p36xAwJ7fRG4IvLS-E06FNKyWq3_iJR4v87oswgukyK44xWiIRwdvmj-OTgaMew_6Ds5yjG8FRuD7joZZm/s1600/image2.jpg" /><br /><div><br /></div><img alt="slide2" name="slide2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJY-MF5V8LSqDdeS2lUcefKnaU1EQvraZ6WJdnuX2z6D1JsSa5JYimdns8EMEDSfKtbWuY25M2Pg_bgt-eST3ZsIcH31bVIEQOiy-v3iobwHZ6RHtI9d9T37iqOK6AOr-DDD7rv5Tg13Tq/s1600/image3.jpg" /><script type="text/javascript">var SlideList1 = ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNtYrVZqJmrKWltEw1Ya9xC35HEQt_BPJBVQ478cUYbFaC6nWSR59s1GrR6DpjIOFHpH91U1f2EmW1YZTmVGGqr_fcLwf2RIftFcG0-T4n7Ni6LnmHJZndttnHXMlNTTnRimBdFND0Sjb/s1600/image1.jpg', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAH9O75gEgCIvjfvEeyHrnNOwcXBQTp1k-BVkcFaPFJh9kmXc__cMfmTrKx3p36xAwJ7fRG4IvLS-E06FNKyWq3_iJR4v87oswgukyK44xWiIRwdvmj-OTgaMew_6Ds5yjG8FRuD7joZZm/s1600/image2.jpg', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJY-MF5V8LSqDdeS2lUcefKnaU1EQvraZ6WJdnuX2z6D1JsSa5JYimdns8EMEDSfKtbWuY25M2Pg_bgt-eST3ZsIcH31bVIEQOiy-v3iobwHZ6RHtI9d9T37iqOK6AOr-DDD7rv5Tg13Tq/s1600/image3.jpg']; var SlideShow1 = new SlideShow(SlideList1, 'slide1', 3000, "SlideShow1"); var SlideList2 = ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNtYrVZqJmrKWltEw1Ya9xC35HEQt_BPJBVQ478cUYbFaC6nWSR59s1GrR6DpjIOFHpH91U1f2EmW1YZTmVGGqr_fcLwf2RIftFcG0-T4n7Ni6LnmHJZndttnHXMlNTTnRimBdFND0Sjb/s1600/image1.jpg', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAH9O75gEgCIvjfvEeyHrnNOwcXBQTp1k-BVkcFaPFJh9kmXc__cMfmTrKx3p36xAwJ7fRG4IvLS-E06FNKyWq3_iJR4v87oswgukyK44xWiIRwdvmj-OTgaMew_6Ds5yjG8FRuD7joZZm/s1600/image2.jpg', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJY-MF5V8LSqDdeS2lUcefKnaU1EQvraZ6WJdnuX2z6D1JsSa5JYimdns8EMEDSfKtbWuY25M2Pg_bgt-eST3ZsIcH31bVIEQOiy-v3iobwHZ6RHtI9d9T37iqOK6AOr-DDD7rv5Tg13Tq/s1600/image3.jpg']; var SlideShow2 = new SlideShow(SlideList2, 'slide2', 1000, "SlideShow2"); function SlideShow(slideList, image, speed, name)           {   this.slideList = slideList;   this.image = image;   this.speed = speed;   this.name = name;   this.current = 0;   this.timer = 0; } function switchImage(imgName, imgSrc)  {   if (document.images)   {     if (imgSrc != "none")     {       document.images[imgName].src = imgSrc;     }   } } SlideShow.prototype.play = SlideShow_play;   function SlideShow_play()        {   with(this)   {     if(current++ == slideList.length-1) current = 0;     switchImage(image, slideList[current]);     clearTimeout(timer);     timer = setTimeout(name+'.play()', speed);   } } window.onLoad=SlideShow1.play();SlideShow2.play(); </script></div><br /><br /><br /><div style="text-align: justify;">You can add custom CSS codes to give different styles like setting border using border: property, give rounded corners using border-radius property as presented in the previous post "<a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS"</a> and can give different animation effects like fade effects, zoom effects, slide effects etc. </div><br /><div style="text-align: left;">You can refer to the following previous posts to give fade effect animations using CSS, JavaScript or JQuery codes.</div><div style="text-align: left;"><br /></div><ul style="text-align: left;"><li><a href="http://www.siteforinfotech.com/2014/11/fade-effect-image-slideshow-using-css.html">How to create fade effect image slideshow using CSS</a></li><li><a href="http://www.siteforinfotech.com/2013/08/create-simple-javascript-fade-effect-animation.html">How to Create Simple JavaScript Fade Effect Animation?</a></li><li><a href="http://www.siteforinfotech.com/2013/09/simple-javascript-fade-effect-animation-using-jquery.html">Simple JavaScript Fade Effect Animation Using Jquery</a><br /><br /> </li></ul><br /><br /><h4 style="text-align: left;">Related Posts: </h4><br /><br /><br /><ul style="text-align: left;"><li><a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a></li><li><a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a></li><li><a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a></li><li><a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/how-to-create-digital-clock-in-javascript.html">How to Create a Digital Clock in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a></li></ul><div style="text-align: left;"><br /><br /></div></div>

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 mu…

مزيد من المعلومات »

17 Nov 2014

How to create fade effect image slideshow using CSS

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a></div><div style="text-align: justify;"><br />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. <br /><br /><br />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.<br /><br /><h3>Simple fade effect image slideshow </h3>  <br />Here is a sample CSS code for creating simple fade effect image slideshow written for safari browser.<br /><br /><pre class="prettyprint"><style type="text/css"><br />@-webkit-keyframes fade{<br />from {opacity:.5;}<br />50% {opacity:1;}<br />to {opacity:.5;}<br />}<br />#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;<br />-webkit-animation-iteration-timing-function:linear;<br />position:relative;-webkit-animation-iteration-count:infinite;}<br /></style><br /></pre><br />Here is a full HTML code along with required JavaScript code for creating simple fade effect image slideshow.<br /><br /><pre class="prettyprint"><head><br /><title>CSS Animations</title><br /><style type="text/css"><br />@-webkit-keyframes fade{<br />from {opacity:.5;}<br />50% {opacity:1;}<br />to {opacity:.5;}<br />}<br />@-moz-keyframes fade{<br />from {opacity:.5;}<br />50% {opacity:1;}<br />to {opacity:.5;}<br />}<br />@-o-keyframes fade{<br />from {opacity:.5;}<br />50% {opacity:1;}<br />to {opacity:.5;}<br />}<br />@-ms-keyframes fade{<br />from {opacity:.5;}<br />50% {opacity:1;}<br />to {opacity:.5;}<br />}<br />#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;<br />-webkit-animation-iteration-timing-function:linear;position:relative;<br />-webkit-animation-iteration-count:infinite;-moz-animation-name:fade;<br />-moz-animation-duration:5s;-moz-animation-iteration-timing-function:linear;<br />-moz-animation-iteration-count:infinite;-o-animation-name:fade;<br />-o-animation-duration:5s;-o-animation-iteration-timing-function:linear;<br />-o-animation-iteration-count:infinite;-ms-animation-name:fade;<br />-ms-animation-duration:5s;-ms-animation-iteration-timing-function:linear;<br />-ms-animation-iteration-count:infinite;}<br /></style><br /><script language="JavaScript"><br />var i = 0;<br />var path = new Array();<br /> <br />// LIST OF IMAGES<br />path[0] = "image1.jpg";<br />path[1] = "image2.jpg";<br />path[2] = "image3.jpg";<br /><br />function swapImage1()<br />{<br />   document.slide.src = path[i];<br />   if(i < path.length - 1) i++; else i = 0;<br />   setTimeout("swapImage1()",5000);<br />}<br />window.onload=swapImage1;<br /></script><br /></head><br /><body><br /><div id="anim1"><img height="400" name="slide" src="image_1.gif" width="600" /><br /></div><br /></body><br /></html><br /></pre><br /><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div>In the above code prefixes -webkit-, -moz-, -o-, -ms- are used for browsers safari, firefox, opera and internet explorer respectively.<br /><br />Here is a preview of image slideshow for the code above.<br /><br /><style type="text/css">@-webkit-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } @-moz-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } @-o-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } @-ms-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } #anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;-webkit-animation-iteration-timing-function:linear; position:relative;-webkit-animation-iteration-count:infinite;-moz-animation-name:fade;-moz-animation-duration:5s;-moz-animation-iteration-timing-function:linear;-moz-animation-iteration-count:infinite;-o-animation-name:fade;-o-animation-duration:5s;-o-animation-iteration-timing-function:linear;-o-animation-iteration-count:infinite;-ms-animation-name:fade;-ms-animation-duration:5s;-ms-animation-iteration-timing-function:linear;-ms-animation-iteration-count:infinite;} </style><script language="JavaScript">var i = 0; var path = new Array();   // LIST OF IMAGES path[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNtYrVZqJmrKWltEw1Ya9xC35HEQt_BPJBVQ478cUYbFaC6nWSR59s1GrR6DpjIOFHpH91U1f2EmW1YZTmVGGqr_fcLwf2RIftFcG0-T4n7Ni6LnmHJZndttnHXMlNTTnRimBdFND0Sjb/s1600/image1.jpg"; path[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAH9O75gEgCIvjfvEeyHrnNOwcXBQTp1k-BVkcFaPFJh9kmXc__cMfmTrKx3p36xAwJ7fRG4IvLS-E06FNKyWq3_iJR4v87oswgukyK44xWiIRwdvmj-OTgaMew_6Ds5yjG8FRuD7joZZm/s1600/image2.jpg"; path[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJY-MF5V8LSqDdeS2lUcefKnaU1EQvraZ6WJdnuX2z6D1JsSa5JYimdns8EMEDSfKtbWuY25M2Pg_bgt-eST3ZsIcH31bVIEQOiy-v3iobwHZ6RHtI9d9T37iqOK6AOr-DDD7rv5Tg13Tq/s1600/image3.jpg";  function swapImage1() {    document.slide.src = path[i];    if(i < path.length - 1) i++; else i = 0;    setTimeout("swapImage1()",5000); } window.onload=swapImage1; </script><br /><div id="anim1"><img alt="slide" height="400" name="slide" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNtYrVZqJmrKWltEw1Ya9xC35HEQt_BPJBVQ478cUYbFaC6nWSR59s1GrR6DpjIOFHpH91U1f2EmW1YZTmVGGqr_fcLwf2RIftFcG0-T4n7Ni6LnmHJZndttnHXMlNTTnRimBdFND0Sjb/s1600/image1.jpg" width="600" /></div><br /><br /><h3>Fade effect image slideshow with caption</h3><br />You can add caption for this slideshow by adding following JavaScript codes within <script> tag.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=3332849087599085574" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a></div><pre class="prettyprint">// LIST OF CAPTİONS  <br /><br />caption[0] = "Caption for the first image"; <br /><br />caption[1] = "Caption for the second image"; <br /><br />caption[2] = "Caption for the third image";   <br /><br />function swapImage(){ <br /><br />var el = document.getElementById("mydiv"); <br /><br />el.innerHTML=caption[i]; <br /><br />var img= document.getElementById("anim1"); <br /><br />img.src= image[i];  <br /><br />if(i <k ) { i++;}  <br /><br />else  { i = 0; } <br /></pre><br /><br /><br />For details on adding caption on image slideshow visit the post: <a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html" target="_blank">How To Create Simple Image Slideshow Using JavaScript ?</a><br /><br /><br /><h3>Fade effect image slideshow with caption and link</h3><br />You can add caption for this slideshow by adding following JavaScript codes within <script> tag.<br /><br /><a name='more'></a><br /><br /><pre class="prettyprint">var link= new Array();   <br /><br />link[0] = "http://www.siteforinfotech.com/"; <br />link[1] = "http://www.siteforinfotech.com/p/tutorial.html"; <br />link[2] = "http://www.siteforinfotech.com/p/mcqs.html";   <br />      <br /><br />function swapImage(){ <br /><br />var el = document.getElementById("mydiv"); <br /><br />el.innerHTML=caption[i]; <br /><br />var img= document.getElementById("anim1"); <br /><br />img.src= image[i]; <br /><br />var a = document.getElementById("link"); <br />a.href= link[i];  <br /><br />if(i <k ) { i++;}  <br /><br />else  { i = 0; }  <br /></pre><br /><br /><br />For details on adding caption and link on image slideshow visit the post:<a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html"> How to Create JavaScript Image Slideshow with Links</a><br /><br /><br /><br /><h4>Related Posts:</h4><h4></h4><ul><li><a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a></li><li><a href="http://www.siteforinfotech.com/2013/08/create-simple-javascript-fade-effect-animation.html">How to Create Simple JavaScript Fade Effect Animation?</a></li><li><a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a></li><li><a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a></li><li><a href="http://www.siteforinfotech.com/2013/09/simple-javascript-fade-effect-animation-using-jquery.html">Simple JavaScript Fade Effect Animation Using Jquery</a>  </li></ul><h4> </h4></div></div>

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…

مزيد من المعلومات »

13 Nov 2014

How to make rounded corners border using CSS

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><br />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. <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-NLT0fPJMtJgIJ9SFRRWt-wzhvYuUGH68rod_q8MBbppmZL8SoxtERTN8wrs6aKI94_b7XFrl24PBIyN3TRV0U1F-_ditHnVDsGGLhllxgnaIVZiRiqJtEIvmlJVjsR5RcauYEHQlHx_/s1600/rounded-corners.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="rounded corners border using CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-NLT0fPJMtJgIJ9SFRRWt-wzhvYuUGH68rod_q8MBbppmZL8SoxtERTN8wrs6aKI94_b7XFrl24PBIyN3TRV0U1F-_ditHnVDsGGLhllxgnaIVZiRiqJtEIvmlJVjsR5RcauYEHQlHx_/s1600/rounded-corners.png" title="rounded corners border using CSS" /></a></div></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i>border-radius:10px;                  </i>  // makes radius of all the corners 10px;</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i>border-radius-top-right:10px;</i></div><div style="text-align: justify;"><i>border-radius-top-left:10px;</i></div><div style="text-align: justify;"><i>border-radius-bottom-right:5px;</i></div><div style="text-align: justify;"><i>border-radius-bottom-left:5px;</i></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The above code makes radius of left and right corners of top side 10px and radius of left and right corners of bottom side 5px.</div><br />To makes this CSS code browser specific or specific browser compatible, you have to use the prefix codes like -moz- for mozilla firefox and -webkit- for chrome or safari. <br /><a name='more'></a><br /><br /><pre class="prettyprint">.all{<br /><br />     border:2px solid red;<br /><br />     -moz-border-radius:10px;<br /><br />     -webkit-border-radius:10px;<br /><br />     border-radius:10px;<br /><br />     width:250px;<br /><br />     }<br /><br />.topleft{<br /><br />         border:2px solid red;<br /><br />         -moz-border-top-left-radius:10px;<br /><br />         -webkit-border-top-left-radius:10px;<br /><br />         border-top-left-radius:10px;<br /><br />         width:250px;<br /><br />         }<br /><br />.topright{<br /><br />         border:2px solid red;<br /><br />         -moz-border-top-right-radius:10px;<br /><br />         -webkit-border-top-right-radius:10px;<br /><br />         border-top-right-radius:10px;<br />     <br />         width:250px;<br /><br />         }<br /><br />.bottomleft{<br /><br />         border:2px solid red;<br /><br />         -moz-border-bottom-left-radius:10px;<br /><br />         -webkit-border-top-left-radius:10px;<br /><br />         border-bottom-left-radius:10px;<br /><br />         width:250px;<br /><br />         }<br /><br />.bottomright{<br /><br />         border:2px solid red;<br /><br />         -moz-border-bottom-right-radius:10px;<br /><br />         -webkit-border-bottom-right-radius:10px;<br /><br />         border-bottom-right-radius:10px;<br />  <br />         width:250px;<br /><br />         }<br /><br /><br /></pre>Use above CSS code with the following HTML code given.<br /><br /><pre class="prettyprint"><html><br /><head><br /><title>CSS code for rounded corners</title><br /><style type="text/css"><br /><br />//place the abobe CSS code<br /><br /></style><br /></head><br /><body><br /><div class="all">All rounded corners</div><br /></br><br /><div class="topleft">Topleft rounded corner</div><br /><br/><br /><div class="topright">Topright rounded corner</div><br /></br><br /><div class="bottomleft">Bottomleft rounded corner</div><br /><br/><br /><div class="bottomright">Bottomright rounded corner</div><br /></body><br /></html><br /></pre><br />You can view the following rounded corners for 2px solid red border and 250px width having 10px radius of corners. <br /><br /><style type="text/css"> .all{      border:2px solid red;      -moz-border-radius:10px;      -webkit-border-radius:10px;      border-radius:10px;      width:250px;      }  .topleft{          border:2px solid red;          -moz-border-top-left-radius:10px;          -webkit-border-top-left-radius:10px;          border-top-left-radius:10px;          width:250px;          }  .topright{          border:2px solid red;          -moz-border-top-right-radius:10px;          -webkit-border-top-right-radius:10px;          border-top-right-radius:10px;          width:250px;          }  .bottomleft{          border:2px solid red;          -moz-border-bottom-left-radius:10px;          -webkit-border-top-left-radius:10px;          border-bottom-left-radius:10px;          width:250px;          }  .bottomright{          border:2px solid red;          -moz-border-bottom-right-radius:10px;          -webkit-border-bottom-right-radius:10px;          border-bottom-right-radius:10px;          width:250px;          }  </style> <br /><div class="all">All rounded corners</div><br /><div class="topleft">Topleft rounded corner</div><br /><div class="topright">Topright rounded corner</div><br /><div class="bottomleft">Bottomleft rounded corner</div><br /><div class="bottomright">Bottomright rounded corner</div><br /><br />Here I have used <div> tag, so these shapes are appeared with line break. If you wanted to place these shapes on the same line you can use <span> tag. You can also use <p> tag with the place of <div> tag.<br /><br />You can apply these rounded corners shapes to make CSS buttons, menus etc. Here is a sample code to make CSS button along with background color.<br /><br /><pre class="prettyprint"><div style="border:2px solid light-blue; -moz-border-radius:10px;<br />background-color:blue; z-index:10;-webkit-border-radius:10px;<br />border-radius:10px;width:110px;text-align:center;<br />color:white;cursor:pointer;"><br />CSS button<br /></div><br /></pre><br /><div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: blue; border-radius: 10px; border: 2px solid light-blue; color: white; cursor: pointer; text-align: center; text-decoration: none; width: 110px; z-index: 10;"><a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html" style="color: white; text-decoration: none;">CSS button</a></div><br /><br /><br /><h4 style="text-align: left;">Related Posts:</h4><div style="text-align: left;"><br /></div><br /><ul><li><a href="http://www.siteforinfotech.com/2014/09/how-to-create-simple-blogger-template.html">How to Create Simple Blogger Template Easily?</a> </li><li><a href="http://www.siteforinfotech.com/2014/01/how-to-make-simple-css-stylesheet.html">How To Make Simple CSS Stylesheet for a Website ?</a></li><li><a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html">How To Create Simple Menu Using CSS ?</a></li><li><a href="http://www.siteforinfotech.com/2014/08/validate-required-field-in-form-using-javascript.html">How to validate required field in a form using javascript</a></li><li><a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/how-to-create-digital-clock-in-javascript.html">How to Create a Digital Clock in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a></li><li><a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using Javascript</a></li><li><a href="http://www.siteforinfotech.com/2013/08/create-simple-javascript-fade-effect-animation.html">How to Create Simple JavaScript Fade Effect Animation?</a></li><li><a href="http://www.siteforinfotech.com/2013/09/simple-javascript-fade-effect-animation-using-jquery.html">Simple JavaScript Fade Effect Animation Using Jquery</a></li></ul></div>

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…

مزيد من المعلومات »

04 Nov 2014

Load more posts

Education

How to Load External JavaScript Asynchronously or Dynamically

How to Add Multiple Slideshows on One Page Using Javascript

How to create fade effect image slideshow using CSS

How to make rounded corners border using CSS

568

2

20,021

الاكثر زيارة