Sunday, May 24, 2020

jQuery Producttour.js Plugin



Hello guys! Welcome to a new section of my tutorials on jQuery. In this tutorial post, i will be discussing about jQuery Producttour.js plugin.

Producttour.js is a jQuery plugin that is used for easy implementation of help or direction guide into a webpage.

Example

Below is a simple Producttour.js example -

<!doctype  html> 
<html   lang = "en"   class =  "no-js"> 
     <head> 
          <meta   charset = "UTF-8"> 
          <meta   name =  "viewport"   content =  "width = device-width,  initial-scale = 1"> 
          <link   rel = "stylesheet"   href = "css/reset.css"> 
          <link   rel = "stylesheet"   href = "css/style.css"> 
          <script   src = "js/modernizr.js"></script> 
     </head> 

     <body  background = "tp.png"> 
          <div  class = "cd-nugget-info"> 
               <button  id = "cd-tour-trigger"  class = "cd-btn">Start tour</button> 
          </div> 

          <ul   class = "cd-tour-wrapper"> 
               <li  class = "cd-single-step"> 
                    <span>Step 1</span> 

                    <div  class =  "cd-more-info bottom"> 
                         <h2>Step Number 1</h2> 
                         <p>This section of my website contains HTML tutorials, 
                              the tutorials are explained with detailed examples</p> 
                         <img   src = "img/step-1.png"   alt = "step 1"> 
                    </div> 
               </li> 

               <li   class = "cd-single-step"> 
                    <span>Step 2</span> 

                    <div   class = "cd-more-info top"> 
                         <h2>Step Number 2</h2> 
                         <p>This section contains PHP tutorials, 
                              which are available to the public</p> 
                         <img   src = "img/step-2.png"   alt = "step 2"> 
                    </div> 
               </li> 

               <li   class = "cd-single-step"> 
                    <span>Step 3</span> 

                    <div   class = "cd-more-info right"> 
                         <h2>Step Number 3</h2> 
                         <p>This section contains alot of JavaScript tutorials, 
                              coupled with examples </p> 
                         <img   src = "img/step-3.png"   alt = "step 3"> 
                    </div> 
               </li> 
          </ul> 

          <script   src = "js/jquery-2.1.4.js"></script> 
          <script   src = "js/jquery.mobile.min.js"></script> 
          <script   src = "js/main.js"></script> 

     </body> 
</html>

RECOMMENDED: jQuery Blockrain Plugin 

Alright guys! This is where we are wrapping it up with this tutorial. In my next tutorial post, i will be discussing about Megadropdown.js plugins. Feel free to ask your questions where necessary and i will attend to them as soon as possible.

If you found this tutorial helpful and interesting, kindly use the share button to share this tutorial. Follow us on our various social media platforms available to stay updated with our latest posts. Also subscribe to our newsletter to get all our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.