Do you want all blogger tricks?

Do you want more Blogger, Web Development Tricks? Enter Your Email Below And Get Latest Stuff Deliverd To Your Inbox.

2 best ways to remove whitespace from the string in JavaScript



It is very good to know each and every method to solve the problem that we are facing when coding.

In today's article, I will show you all the best methods to remove whitespace from the String in JavaScript.


    In this article, I will show you the Two Methods to remove the whitespace, From anywhere inside the string.

    All three methods are different I will show you each of them with an example.  But before getting to the methods lets check what actually is whitespace in HTML and Javascript.

    What is whitespace?


    Whitespace usually can be a single space, a tab space, new line. We usually used this for formatting or indentation. But sometimes it can be frustrating when we don't want it.

    Imagine that you are extracting the text from a paragraph element using javascript but you see that there is so messed in the extracted text like un-necessary spaces or new lines etc So By default HTML Ignores this spaces but javascript will not do that you need some methods to remove it.

    We cannot remove it directly as it is used for visual presentation but it can be removed easily using Javascript methods.

    Best ways to remove whitespace are:

    1. Trim()
    2. Replace()


    Trim(): 


    This is a built-in method in JavaScript. The trim method will remove unnecessary whitespace from the string in beginning and at the end.

    The Trim Method will not change the original string. It will return the new string. The only limitation it has is it will remove the whitespaces from the beginning and the end not anywhere between the string.

    The Syntax:

    let TextContainer = 'Hello this is demo text'; 
    TextContainer.trim();
    Here The Trim() method doesn't accept any argument. it is just called on the string or variable that contains a string datatype.

    Here is an example:


    See the Pen PdRMMr by MD M Nauman (@mmnauman) on CodePen.

    In the Above Example, you can clearly see the trim() method removing the extra spaces from the start and the end.

     So Now what if we want to remove the whitespace from everywhere inside the string? Whether there is a way to remove?


    Yes, The best way is using the Replace method with regex pattern. Let see it in action.

    Replace() : 

    This is also a built-in method in javascript. This method will search your specified value in the string and will replace it with the new one.

    The name itself is describing its functionality what it does it accepts two parameters one is the keyword to search in the string and second is the word to replace if it matches.

    Note: It also accepts a regular expression pattern as the first parameter to search the string.

    The Syntax:

    let TextContainer = 'Hello this is demo text'; TextContainer.replace(ValueToSearch, ValueToReplace);

    You have seen above the syntax it accepts two arguments. this method can be applied to any variables that contain a string or directly on the string datatype.

    ValueToSearch: This field is mandatory so you have to enter the text/pattern you want to search in the TextContainer.

    ValueToReplace: This field is also mandatory as you have to enter the replacement value if the search is successful.

    Here is an Example:



    In the above example, we are using Regex Pattern Here. I will not go deep into the regex as the topic is different. The syntax to write regex is to enter the pattern between two slashes. The \s means Whitespace which includes all the tabs & spaces And the + sign is known as quantifier used to select more than one item. After the slash we used 'g' which means global to replace all the spaces and  'm' is for the multiline check.

    Conclusion:

    Today we learned Removing whitespace efficiently with Javascript trim and replace methods. We also learned the syntax to use them Just practice it with your own text or you can use the DOM elements and extract the text from it.

    That's It Thanks For Following our Tutorial '' jQuery Pretty Image Slider v1.0 with partially visible side slides '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
    Read more »

    jQuery Pretty Image Slider v1.0 with partially visible side slides

    image Slider shows next and previous image


      Hello Friends, I have got inspired by some premium sliders so I have coded a slider which looks very premium and can take any number of images.

      The highlight of this slider is it shows partially visible side slides means previous and Next Slide.

      This slider works using the Pure javascript only the transition and Showing previous and next slides part have been coded using frameworks like jQuery and Animate.css

      The Slider is Fast can take the full width of the screen or the width of the container. It depends on users.

      Transitions are added using Animate.css library with jQuery. More than 5 transition effects have been added and it will take random effect automatically on every change of slide.

      We will develop the version 2.0 where there will be the possibility of adding content also with images.

      The Slide has a lot of scope for customization from the looks to functionality.  Users can customize it according to their preference

      We have created this slider and uploaded it to GitHub so that it get support and updates too. Users can ask questions and also can contribute to making this slider more awesome.

      Features:

      1. jQuery Pretty Image Slider is Responsive.
      2. jQuery Pretty Image Slider  Shows half of the previous and next slides.
      3. jQuery Pretty Image Slider has Random Transition Effects.
      4. jQuery Pretty Image Slider looks very elegant and premium.

      Demo to the Slider.



      You can resize the browser and check its responsiveness.

      Now Let start the steps to add it and show you the code to show this slider on your blogs or websites.

      Here is the code below.:

      <link rel="stylesheet" href="https://cdn.rawgit.com/mmnauman/ABTSlider/467e7c54/css/style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
      <div class="sliderWrap">
          <div class="slider">
              <div id="prev" class='prev prevSection navigate'>

                  <span>&#8249;</span>
              </div>
              <div id='slidesContainer' class='slidesWrap'>
                  <div class="slide active">
                      <img src="Your-image-url-here" alt="First Image" title='1'>
                  </div>
                  <div class="slide">
                      <img src="Your-image-url-here" alt="Second Image" title='2'>
                  </div>
                  <div class="slide">
                      <img src="Your-image-url-here" alt="Third Image" title='3'>
                  </div>
                  <div class="slide">
                      <img src="Your-image-url-here" alt="Fourth Image" title='4'>
                  </div>
              </div>
              <div id="next" class='next nextSection navigate'>
                  <span>&#8250;</span>
              </div>
          </div>
      </div>
      <script src='https://cdn.rawgit.com/mmnauman/ABTSlider/467e7c54/helperFunctions.js'></script>
      <script src='https://cdn.rawgit.com/mmnauman/allbloggertricks.com-slider/336811e5/script.js'></script>

      Click Here To Open Raw Code:

      Customization:

      • The Red Highlighted Text is responsible for The Image link so change every instance and add image URL with the extension .jpeg/png/gif, etc
      • The Orange Highlighted Text is Responsible for The alt text for the image so change this text and add your preferred text.
      • The Light-blue Highlighted Text is Responsible Title o the image you added to the slider. Change this numbers with your image title. This will appear if the image is not loaded properly.

      Adding or Removing Slides:

      If you want to add more slides then all you need to do is add this div section after the slide ended.


       <div class="slide">
                      <img src="Your-image-url-here" alt="Image" title='ImageName'>
      </div>
      Add this above div section to add an extra slide. You can add how many slides you want there is no limit just one tip.

      Tip: UseSmall Size images or compressed images so that the slider load the images faster.

      To remove the slide from the slide all you need to do is find and remove the above div section.

      Conclusion:

      This image slider is unique and can make your site/blog look more premium and more engaging. So add it to your site and if you face any problem you can contact us here in the comments section or check out our project on Github and comment there. 

      https://github.com/mmnauman/ABTSlider


      That's It Thanks For Following our Tutorial '' jQuery Pretty Image Slider v1.0 with partially visible side slides '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
      Read more »

      Blogger Allows Custom domains to use SSL Certificate! HTTPS 2018

      Blogger now allows custom domains to use SSL Certificate! (HTTPS)

      Hello, Friends Today we are sharing one of the biggest NEWS of 2018 for blogger users. Last year blogger started to allow Blogspot blogs to use SSL certificate on their blogs. But that support was limited to Blogspot users and they promised to add the support for custom domains too. Now blogger has fulfilled their promised and has now supported SSL/HTTPS for custom domains too. 

      With just two ticks your blogger blog will migrate to HTTPS secure version and also Google said HTTPS is also a factor for SEO considering this it will little boost your site SEO and SERP.

      Let's discuss the advantages of using it on our blogs.

      Advantages of SSL Certificates Why to use it in Blogs?

      Blogs will become more secure against the vulnerabilities:
                                 Yes, Right Blog will become more secure as a secure connection between visitors and blog will establish when a user opens a post on your blog the connected will be encrypted.

      HTTPS is one of the factors of SEO:
                        Like we said above adding SSL certificate will boost your site SEO and improve your blog SERP ranking on Google, Bing and Other Search Engines compare to non-https blogs.

      Your Blog will now become a professional blog:
                 Yes you heard right your blog will become a professional blog as it will have a valid SSL certificate and all the security measures will be present in the professional and paid blogs.

      SSL Certificate is Free so why not to add?
                Blogger is giving us this SSL certificate Free without charging any penny so why not use it and get all the above benefits. From last year we were seeing other platform users like Wordpress etc they got so many benefits so now Google Started to give this similar benefits so why not use it.

      Now let start adding the HTTPS to our sites this process involves 2 ticks :P yes this is so simple, easier than chopping slices of apple.

      STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

      Layout Settings

      STEP 2: Go to the basic of Settings Then you will see a separate HTTPS Section as shown in the image below.


      Basic Settings

      STEP 3: Now change the HTTPS Settings to Yes as shown in the image above and follow it. Click on the image to enlarge it and see clearly.

      Enable HTTPS


      STEP 4: Now change the HTTPS Availability Settings to Yes. Now it will take few minutes for the process to complete.

      Enable Force HTTPS Redirect

      STEP 5: waiting few minutes after switching on the HTTPS Redirect switch the HTTPS redirect to yes this will force to redirect non-https pages to https. 
      Read more »