Posts

Showing posts from June, 2021

Google Prettify Code example

Image
      Code-highlighting with google prettify.  For introduction visit another blog: Code Highlighting using Google Prettify   Here is an example web page with codehilighter The below code shows how the HTML script looks,  and how to add it to code highlighter.  For various scripts, there are different syntax available. For embedding it in highlighter.  Download the file and open it in the browser and check each script like java, python,  JavaScript etc. are added.  You can find the code for how to add  line numbers. The theme used in this code is desert.   Code  download   index.php   Example: <!doctype html> <html lang= "en" > <head> <meta charset= "utf-8" > <meta http-equiv= "x-ua-compatible" content= "ie=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title> e-Trainings Demo on google prettify </title> <script src= "http
Post a Comment
Read more

Code Highlighting using Google Prettify

   Code beautifying with Google Prettify   In this blog I am going to give a detailed description of How to use Google prettify in a webpage or in a blog post. Setup Include the script tag below in your document in a head tag: <script src =   "https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js" >       </script> Look at the skin gallery and pick styles that suit you. You can choose your choice of skins some of them are as follows.. default sons-of-obsidian doxy sunbrust desert  Example <script src =   "https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js? lang=css&amp;skin=desert" ></script>     Usage Put code snippets in <pre class = "prettyprint" > ... </pre> or <code class = "prettyprint" > ... </code> and it will automatically be pretty-printed.     Example :   <pre class = "prettyprint"
Post a Comment
Read more

Simple scroll to top example

Image
Smooth scroll to top using jQuery In this example, I used jQuery to implement the smooth scrolling effect. For this, no plugin is used. Tooltip visible after scrolling 50 pixels. When user clicks on the below button, scroll to the top of a page (0 pixels). It shows your "scroll to top" element(tooltip) only after the user has scrolled down the page 50 percent 800 is delay. It is scroll duration. Can be set to any number as needed.       Download Demo Example:   <!DOCTYPE html> <html>         <title> e-Trainings demo : scroll to top of the page </title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" > <link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesom
Post a Comment
Read more

Adding multiple ReadMore ReadLess Links

Image
 Adding multiple ReadMore and  ReadLess Links   This post explains to you how to add multiple read more and readless links to a multiple blog posts  in a single page . So here is the example. It is a common practice in modern website designing. Including 'readmore' and readless button when text is too long to show it in webpage, for this we can use viewmore or 'read more' button. So that user will click on it if he is interested to read complete content. For this you can use either button or links as per your choice.  In this, we are using some CSS and JavaScript to implement the 'showmore' and showless links to display content. Example : <!DOCTYPE html> <html> <head> <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title> e-Trainings Demo -Adding several ReadMore ReadLess Links to each blog post </title> <meta charset= "utf-8" > <meta name= "
Post a Comment
Read more

Adding Readmore and Readless toggle button to website

Image
    readmore and readless toggle button In this blog we will learn how to add a readmore and readless toggle button for webpage using Javascript. The 'read more' button comes in handy when there is a more text and want to show some part of the text. This is common in several websites like blogging sites, or when showing in profile description or to show course topics etc. There will be a button, toggles between showing and hiding content as and when user clicks on. By default, it is collapsed and shows ellipsis (..). When button clicked, it expands the content. As shown in the below picture.     Example code: <!DOCTYPE html> <html> <head> <title> e-Trainings Demo </title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" &g
Post a Comment
Read more

Implementing a price range slider Using the JQuery Ajax and PHP

Image
    How to implement a price range slider with jQuery  Ajax and PHP         In last blog we worked on price slider with JavaScript and PHP. In this blog, we will do the same using jQuery Ajax request and PHP response. Here is the code example  to implement  price range slider using the jQuery  Ajax and PHP.  Follow the steps given below: Step-1: We used the same PHP file as we did for JavaScript. So create the following PHP file with the given name and place the below given code in it. current_prices.php <?php echo " Price Min: " . $_GET [ 'min' ]. " Price Max: " . $_GET [ 'max' ]; ?> Step-2 Now  frontend code using HTML and jQuery.  Create a php file with given name and copy the below code in it, and Save. Next open in Browser and run the file. price-range-slider2.php <!DOCTYPE html>   <html>   <head> <meta name= "viewport" content= "width=device-width, initial-scale=1" > &
Post a Comment
Read more