All You Need To Know About CSS Variables and Modifying in JavaScript

Hello, Friends, we are writing today's article on CSS variables. The best thing about it is we can shorten our code and follow the DRY (Don't Repeat Yourself), Model. We can separate our code in parts like we do in javascript. We will cover many things just see the list below:

1. The Syntax
2. How to use variables values in CSS 
3. How to access them using JavaScript
4. How to modify them using JavaScript
5. Why and When to use them?

The Syntax: 

 We cannot declare variables anywhere or directly. Variables should be declared within a CSS selector like in HTML, body, class, id etc but if you declare variables in any particular selector like in class or id then you can use it in its scope, not outside it.

Example: If a variable is declared inside a nav then it will be only available for the nav children not outside the nav. 

To get the global scope all you need to do is declare the variables in the root of the document. I mean you have to use the :root pseudo-class and inside it declare all your variables after doing this you can access it anywhere from the document.

To Declare globally this is the syntax:

Now we know the syntax its time how to use them in our stylesheet means how to implement the custom variables values in real CSS properties.

We just saw the example above which is not working now its time to see the working example.

How to use variables values in CSS:

We have to use the built-in CSS method var() and inside it, we have to add our custom variable. 

The var() method accepts two parameters. 

var(Name_of_the_variable, Value_of_the_variable);

Name_of_the_variable	The first parameter is Required it should include two dashes in the prefix
Value_of_the_variable	The Second parameter is Optional Here you can assign any value as the default. it will be used if the variable value is invalid or absent.

Now I will show you the working example. Here we will use all the things which we have learned above.

Firstly we will create a variable with global scope.

:root{
--theme-color: red;
--theme-margin: 5px;
--center-me: 0 auto;
}

Here I have declared a few variables on the root element. which means I can use it anywhere on the page.

The variables which we are using from the top is theme colour, margins, and centring the element with predefined margins.

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

How to access them using JavaScript?

Here are few ways to interact with CSS variables with JavaScript you can set, remove or modify them accordingly.

Here is an example showing how to change CSS variable.

See the Pen Changing CSS Variables Values Using Javascript by MD M Nauman (@mmnauman) on CodePen.

So in the above example, we have shown you how we use Javascript to change the color variable. we just need to pick the colour and the variable will get dynamically updated. We are giving you a few important ways from which you can get variables or set variables in CSS

Getting a variable from the stylesheet using Javascript.

window.getComputedStyle(container).getPropertyValue("--theme-color");

Here we have used window getComputedStyle method to get the CSS properties. Here we have used the container variable from the above example of codepen. 

You can open the example in the codepen add this above code in the console you will get the value of the variable on picking the colour.

Changing the variable value with Javascript

<strong>Choose Color: </strong>
<input type="color" value='red' id='colorPick'>
<div class='container1'></div>
<script>                let container = document.querySelector('.container1');
        let colorPick = document.querySelector('#colorPick');
        colorPick.addEventListener('change', changeColor);
        colorPick.addEventListener('mouseover', changeColor);
        function changeColor() {
            container.style.setProperty(`--theme-color`, this.value);
        }
    </script>

We are using the second codepen example to demonstrate how we can change the value of the variable using the setProperty method that is highlighted above in green color.

Now the million dollar question 

Why to use CSS variables?

1. Like I said in the first paragraph Stylesheet for the big sites are very headache to manage as it contains 100's of lines of code. 
2. The developers repeat their code so to avoid that we need to use CSS Variable. 
3. We can set a theme color or theme font variables with this just changing one variable value whole site color changes. Here also we are following DRY method (Don't Repeat Yourself).
4. We can set variables like standard, medium etc for the padding and margins. 
5. CSS variables can be easily changes using Javascript so you can add interactivity without compromising speed.
6. It also have scoping so you can create local and global scope variables.

When To Use CSS variables?

1. CSS variables can be used when you think the code is getting longer and you need something to store the values so that you can use it to refer them.
2. It can be also used to create your own standard way of coding like we use frameworks. This is built in CSS so this is very fast compare to frameworks.
3. If you want to change sites color, margins dynamically using Javascript then you can use css variables.

Compatibility issues with cross browsers?

Image/information Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility

According to developer.mozilla.org CSS variables are not at all compatible with Internet Explorer so if you think your apps or sites users use Inter explorer then you have to rethink before using this variables.

Conclusion:

Now we know the synatx, its importance, how to use them, why to use them and when to use them. 

Now after getting so much information now your work is to practice and make sure you use them in your daily coding projects to get used to of them.

That's It Thanks For Following our Tutorial ''All You Need To Know About CSS Variables and Modifying in JavaScript'' 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 »

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

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.

Demo

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 »