Count Number of Lines Inside Any HTML DOM Element

Posted On // Leave a Comment
Hello, Friends back with another Javascript Tricks post. This trick is already there on the internet but we are adding this trick to make you understand how actually its works and created.

Cover Image showing Lines number inside an Element

Introduction:

To Count Number of Lines Inside Any DOM Element, we first need to calculate these styles from the Element.
  • The First Thing is to get the Height of the Element. 
  • Then We need to get the Line Height of the text inside that Element.
  • Then We will be using the formula to get the Estimated Number of lines of that element.

Formula To Count Number Of Lines in Any HTML Element:

Total Height of the Element / Line Height of the Content Inside that Element.

The Formula is very simple we need the total height of the element and divide it with the line-height of the content inside that element.

Common Problems / Mistakes:

The main problem that can a developer's face is not getting the line-height of the element if it is not explicitly set.

Means we need to explicitly set the Line-height of the element so that we can get the value otherwise we will get a normal implicit value instead of a number.

Even if we convert that normal value to a number that means the default line-height is slightly changed in few browsers that can cause some serious issues. 

Instead of setting the line-height every time through CSS, we can set it through Javascript DOM methods.

Let see the Code to explicitly add line-height through Javascript.

The Code:

<script>

function ABT_CountLines(Element){
//Settings to Set The Line-height change the line-height and play
let ABT_LineHeight = "1.3em";
let ABT_Element = document.querySelector(`${Element}`);
// We are using this getCompuedStyle Method because it auto-update when
// changed.
let CodeBlockStyles = window.getComputedStyle(ABT_Element, null);
ABT_Element.style.lineHeight = ABT_LineHeight;
let CodeBlockHeight = ABT_Element.clientHeight;
let boxSizing = CodeBlockStyles.getPropertyValue("box-sizing");

/*This Below Conditional Statement is Inspired by an answer from StackOverflow 
link to the answer: https://stackoverflow.com/a/37623987/5321854
*/
if(boxSizing === 'border-box'){
var padding_top = parseInt(CodeBlockStyles.getPropertyValue("padding-top"));
var padding_bottom = parseInt(CodeBlockStyles.getPropertyValue("padding-bottom"));
CodeBlockHeight = CodeBlockHeight - padding_top - padding_bottom;
}

let lineHeight = CodeBlockStyles.getPropertyValue('line-height');
let TotalLines = Math.floor(CodeBlockHeight/parseInt(lineHeight));
console.log(TotalLines)
return TotalLines;
}
</script>

ABT_CountLines(".post-body");

The Red highlighted text is where you need to add your element id or class name to calculate the number of lines in that given element.

To invoke the above function you need to call it wherever you want the number to appear.

The purple highlighted text in the code editor is inspired by an answer from StackOverflow you can see a link to that answer in the code section above.

Explanation:

We are using getCompuedStyle Method because it dynamically gets updated and gives us the updated values.

After that, we are fetching all the important properties of the element like line-height, height, padding-top and bottom.

When we get these values we need to apply a condition whether the box-sizing is border-box if it's true then we need to subtract padding top and bottom from the height.

We are using the clientHeight Property instead of offsetHeight because client height includes height with padding but no border and margin where offsetHeight includes padding, borders no margin

In this case, we don't need borders so we used clientHeight to avoid extra work.

After this apply the formula and get the number of lines.

This is so far the best solution to get the number of lines but if you have a much better solution then you are most welcome.

Read More >>

Count Words Length Of Any HTML DOM Element - JavaScript

Posted On // Leave a Comment
Hello, Friends back with another easy trick that can help you to count how many words in any HTML Element with Native a JavaScript Method.

A Cover pic of a web page showing text

Introduction:

In this Trick, we are going to use javascript Native innerText property to access the text content of from HTML DOM Element.

We have a few more options like textContent or nodeValue but these properties when used they gonna fetch all the text even inside the script and style tags and also the unnecessary whitespace so we don't want this words to get counted as this content gonna hide from users so no use of counting these.

How To Count Words?:

The easiest way to count words is when the characters are separated by spaces means when a sequence of characters are separated by space then we assume that it becomes one word and after space next sequence characters until next space. 

We identify words in an element from the spaces that separated them from each other so we break each word after space and add it to an array that array will be used to count the words. 

We used the length property of that array to get the length and this length will be the total words in that element and webmasters and blogger can use this in their plugins or widgets. 

The Code:

function ABT_CountWords(Element){
    let arrayOfWords = document.querySelector(`${Element}`).innerText.split(" ");
    return arrayOfWords.length;
}

ABT_CountWords(".post-body");

The red highlighted text is where you need to add your element id or class name to get the length of the word from it.
 
To invoke the above function you need to call it wherever you want the words to count to get displayed.

Hope this easy tricky post may have helped you in learning something new. If you liked it don't forget to share.

Read More >>

How to Add Stylish Table Of Contents Widget in Blogger Posts?

Posted On // Leave a Comment
Hello, Friends today I came up with a new widget that will fetch your blog posts and extract all the headings and make it a Table of Contents automatically with anchor links to the sections.

You don't need to add all the contents manually every time you just need to invoke the given function in a post or page where you want that widget to appear.

Stylish Table of Contents Widget Cover

The live demo of this widget can be seen in this post above.

Table Of Contents Features:

  • Fully Dynamic and Responsive.
  • Stylish and Elegant build.
  • Collapsible Header.
  • Build with HTML5, CSS and Pure Javascript (No Libraries).
  • Smooth Animations and transitions effects.

 Adding The Widget:

Step 1: Adding the code

Firstly go to Blogger → Template → Edit HTML and search for the code </body> and paste the given code just before it.

 <style>
.ABT_Active{display:block !important}#TOC{display:grid;background-color:#f4fa9c;padding:20px;color:#f469a9;width:80%;justify-content:baseline;align-items:baseline;margin:0 auto;border:4px solid #88bef5;box-shadow:0px 0px 3px 1px #88bef5}#TOC span{font-size:1.4em;font-weight:bold;display:block;cursor:pointer}#TOC ol{padding:0px 0px 0px 15px;justify-content:baseline}.ABT_Animate{transition:all .1s;animation-name:ABT_Aanimation;animation-duration: .4s;animation-iteration-count:infinite}#TOC li{font-size:1.2em;padding:8px 0px}#TOC a{color:#ba53de;text-decoration:none}#TOC a:hover{color:#f469a9;text-decoration:none}@keyframes ABT_Aanimation{10%{transform:translate(1px, 1px) rotateY(0deg)}20%{transform:translate(-1px, -2px) rotateY(-1deg)}30%{transform:translate(-3px, 1px) rotateY(1deg)}40%{transform:translate(4px, 2px) rotateY(0deg)}50%{transform:translate(2px, -1px) rotateY(1deg)}70%{transform:translate(-2px, 2px) rotateY(-1deg)}80%{transform:translate(-3px, 1px) rotateY(0deg)}90%{transform:translate(1px, 2px) rotateY(0deg)}100%{transform:translate(0px, -2px) rotateY(-1deg)}}
 </style>

<script async src='https://rawcdn.githack.com/mmnauman/allbloggertricks-files/8ef30d65aa506e2a0e5a188545a368f6adb75547/TOC_Builder.js' type='text/javascript'></script>

After completing the first step now its time for the final step which is very easy let's do it.

Step 2: Placing the widget inside posts/static pages.

Copy the below code in any post or page where you want this widget to appear:

 document.addEventListener("DOMContentLoaded", () => {
        ABT_TOC(".post-body", "h2");
    });

Settings: Adjusting widget 

  • The Red highlighted text is for the container tag inside the post or pages if you don't know comment your blog URL will tell you. If you are a blogger user then this will work for you.
  • The Orange highlighted text is for the heading tags you want the widget to catch from your post and make it the table of contents. Means the heading tags you used for headings. by default, it is h2 change it according to your needs.
Now, whenever you are writing your post just add that above three lines of code then the widget will appear and this will help in structuring your posts and make it more user and SEO friendly.

We are here to resolve all your problems I know we are learners so if you are not knowing or getting confused don't mess up ask me in comments or through contact page will resolve your problems. Have a great day. Cheers.😊

Read More >>

12+ Top Royalty-Free Stock Photos Sharing Sites For Post Cover

Posted On // Leave a Comment
12+ Finest Free Stock Photos Sites for Blogs or Websites in 2019

Having an attractive image in your website or blog post can grab the attention of the audience.

This can make a great change to how your viewers respond to your WordPress website. Well, it is certain that the content is king but displaying eye-catching photographs surely add value to increase the number of frequent visitors you receive, and eventually lead your website to attain its goals in a better way.

But the problem starts while finding the good photos that can give your website the X-factor can be hard. In this article, we have tried to make your journey easier by making the list of the some best free and top stock photography websites.

There are many free stock photo websites that will quickly and easily allow downloading a high-quality image and help blogger or small business that needs occasional photographs for WordPress website content. So, let’s have a look over our list of some finest resources.

1. Unsplash:

 It is a website dedicated to sharing stock photography which allows upload photos to its website. It is then curated by a team of professional and experienced photo editors.

It has over 110,000 contributing photographers and generates more than billions of photo impressions per month and having their growing library of photos.

2. Pixabay:

Pixabay is an international website for sharing beautiful photos, illustrations all around the world. Founded in 2011 now emerged out having a personal image collection into an interactive online community, with this it supports 20 languages.

It is having stunning free images having 1.6 million royalty-free stock photos and videos.

3. PicJumbo

With this, you can download beautiful stock photos and images in high resolutions for personal and commercial use.

Picjumbo has a lot of categories from technology to animals, fashion, foods etc.

4. RawPixel

With RawPixel you can get creative, with safe to use royalty-free stock images, vectors and public domain illustrations. It gives options to download for commercial use for free and premium.

5. PikWizard

PikWizard is stock photo game, and some bloggers cite it as a well-kept secret and new player in this game.

These websites have more than 30,000+ completely free images, many of which are exclusive. The images of PikWizard are licensed under Creative Commons zero consist of nature shots, photographs of people as well as of desktop wallpapers.

By mouseover on images, you can see options to download, edit etc.

6. Shutterstock

It provides ample option of stock photography, stock footage, stock music, editing tools and also maintains a library of around 200 million royalty-free stock photos, vector graphics, and illustrations.

Shutterstock has over 100,000+ contributors with an "active customer base of more than 1.5 million people in 150 countries.

7. Pexels

Pexels includes hundreds of thousands of photos, but it really takes the favourite spot on many bloggers. Because the images they have are just beautiful and decent.

The photos they use are especially useful for the business and technical side of people.

8. Stocksnap

Stocksnap includes hundreds of latest images weekly and regular intervals and they have a great search tool to help you quickly find specific photos based on the keywords.

9. Wikimedia Commons

From the name you might have guessed; it is Wikipedia’s online repository for all the photos they use. That means there is a photo for almost anything you might be looking for.

10. Burst (by Shopify)

Burst is a free stock photo platform that is managed by Shopify. The photographers of this website are frequently shooting and uploading high-resolution images to help others the world around to look for latest and trending images.

11. FoodiesFeed

It is the best resource present on the internet which is highly visually appealing especially for free food photos in high resolution.

12. Kaboompics

Kaboompics is one of its type and most widespread source of free images for lifestyle, interior designs and used by specialized bloggers.

Every month, almost over 70,000 people from 209 countries visit Kaboompics. Their image appears on sites like BBC, CNN, Forbes, Cosmopolitan, Yahoo, iSpot, BuzzFeed, Hubspot and many more.

Besides these, there is many other free images stock WordPress website presents, which can help us to look for the latest and trending images some of them are:

FreeImages, FreePhotos, FreeStocks, Gratisography, IM Free, Jay Mantri, Life of Pix, Moose, ShotStash, ScatterJar and many more.

Read More >>