Adding icons to input fields


To futher style your page you might wan to add input fields to your page. This code shows how you can do this using only CSS

This example uses icons and changes their color. Look at the previous articles about working with icons for more information. 

            <style> 
                  .nf-input-holder{position: relative;}
                    .nf-input-icon-holder{position: absolute; vertical-align: middle; top: 50%;left: 25px;transform: translate(-50%, -50%); }
                .nf-input-icon{width: 20px; height: 20px; filter: invert(27%) sepia(18%) saturate(1850%) hue-rotate(139deg) brightness(105%) contrast(87%);}
                .nf-input{width: 100%; margin-left: auto; margin-right: auto; display: block; padding: 15px; font-size: 18px; margin-top: 15px; background-color: white; border: none; 
                            text-align: left; color: #15616D; border-radius: 30px; padding-left: 50px;}
            </style>
                    <div class="nf-input-holder">
                        <i class="nf-input-icon-holder"><img class="nf-input-icon" src="icn/envelope.svg"></i>
                        <input class="nf-input" type="text" name="user_email" placeholder="Email">
                    </div>
                    <div class="nf-input-holder">
                        <i class="nf-input-icon-holder"><img class="nf-input-icon" src="icn/lock.svg"></i>
                        <input class="nf-input" type="password" name="user_password" placeholder="Password">
                    </div>

Example

Tags:
#CSS
#HTMl

Show errors in PHP


In PHP the ini file determines the settings of your page. Generally speaking the ini file will be configured to ensure information about your site like errors are not shared with the user.

When developing in PHP these errors can provide you information about errors in your code. By setting the display errors property to 1 on your page you will be able to see all errors to troubleshoot possible issues. Always remove this before publishing your website. 

            <?php 
                ini_set('display_errors', 1); ///---- remove before publishing
            ?>
Tags:
#PHP

Getting element's parent


Sometimes it is needed to get the parent element of an HTML element in JavaScript. this can be done by using the parentElement function in javascript. This function requires an HTML element to determine the parent. The element that triggered the event can be obtained by using the event.target method. 
            <script>
                let parentEl= event.target.parentElement;
            </script>
Tags:
#JavaScript

Dynamic input field


This dynamic input field enables you to improve the user journey on your site.

Implement this button by copying this code. You can add as many additional sub lines as you require. The code is dynamic and will adapt to the number of fields provided automaticly. Amend the method and action fields to ensure the form posts the data to the target of your choise. 

                <style>
                    .NF-dynamic-input-area{display: inline-block; margin-top: 20px;}
                    .NF-dynamic-input{width: 150px;  display: inline-block; color: #fff; font-size: 20px; text-align: center; background-color: #457B9D; padding: 10px 12px; border: none; cursor: pointer; outline: none; border-radius: 4px;
                        -moz-border-radius: 4px;  -webkit-transition: all 0.1s linear;  -moz-transition: all 0.1s linear; transition: all 0.1s linear;}
                    .NF-dynamic-input-sub{width: 0px; border: none; transition: all 0.1s linear; border-radius: 4px; padding: 10px 12px;}
                    .NF-dynamic-input-active{ width: 200px;  font-size: 20px; background-color: rgba(77, 79, 83, 0.6); color: #fff; text-align: left; cursor: inherit; margin-bottom: 10px;}
                    .NF-dynamic-input-active::-webkit-input-placeholder { color: #fff; font-size: 20px; opacity: 0.8;}
                    .NF-dynamic-submit{width: auto; min-height: 40px; border: none; background-color: #0BBA96; border-radius: 4px;   
                        -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; display: none; padding: 10px 12px; font-size: 20px; color: white;}
                    .NF-dynamic-close{display: none; margin-left: 10px; cursor: pointer; font-size: 28px; font-weight: 300;}
                </style>
                <form class="NF-dynamic-input-area" method="POST" action="">
                    <input type="text" value="Add domain" placeholder="Website name" class="NF-dynamic-input" name="websiteName" required>
                    <input type="url" placeholder="Website url" class="NF-dynamic-input-sub" name="websiteUrl" required>
                    <input type="submit" value="Add domain" class="NF-dynamic-submit" name="newWebsiteSubmit">
                    <p>x</p>
                </form>
                <script>
                    let NFdynamicInput= document.querySelectorAll('.NF-dynamic-input');
                        for ( let j = 0; j < NFdynamicInput.length; j++ ) {
                            NFdynamicInput[j].addEventListener('click', async () => {
                                let source= NFdynamicInput[j];
                                let parent= source.parentElement;
                                let subInputs= parent.querySelectorAll('.NF-dynamic-input-sub');
                                let submit= parent.querySelector('.NF-dynamic-submit');
                                submit.style.display= 'inline-block';
                                source.classList.add("NF-dynamic-input-active");
                                source.value = "";
                                for ( let i = 0; i < subInputs.length; i++ ) {
                                    subInputs[i].classList.add("NF-dynamic-input-active");
                                }
                                let closeButton= parent.querySelector('.NF-dynamic-close');
                                closeButton.style.display= 'inline-block';
                                closeButton.addEventListener('click', async () => {
                                    source.classList.remove("NF-dynamic-input-active");
                                    source.value = "Add domain";
                                    submit.style.display= 'none';
                                    closeButton.style.display= 'none';
                                    for ( let i = 0; i < subInputs.length; i++ ) {subInputs[i].classList.remove("NF-dynamic-input-active");}
                                });

                            });
                        }
                </script>

Example

x

Tags:
#JavaScript
#CSS
#HTML

Pausing JavaScript code


Sometimes it is needed to pause JavaScript code. Examples can be when you want to wait for the user to populate a field or run a timer.

Adding an event listener can be done by using the setTimeout function. This function is a default JavaScript function. It will pause the number of milliseconds provided and then run the code inside it. This is an asynchronous code. That means any code outside of the function will keep running so ensure any code that needs to wait for execution is included in the function. 

                <script>
                    setTimeout(function() { 
                        console.log('Code entered here will run after 5 seconds'); 
                    }, 5000);
                </script>
Tags:
#JavaScript

How to set a cookie in javascript


Websites often need cookies to ensure the website works correctly. For example you don't want the user to have to accept the cookie bar each time the page refreshes.

Setting a cookie

Setting a cookie can be done using Javascript function document.cookie. When calling this function some parameters are needed, these are the cookie name, the value and the expiry date. On the expiry date the cookie will be removed. To make setting cookies easy the code snip uses a function to set the date. Include the script and call the function from anywhere in your code. 

            <script>
                function setCookie(cookieName, cookieValue, daysToExpiry){
                    var exdate = new Date(); 
                    exdate.setDate(exdate.getDate() + (daysToExpiry)); 
                    document.cookie = cookie_name + "=" + escape(value) + "; expires="+exdate.toUTCString() + "; path=/";
                }
                setCookie('cookiesAccepted', 'true', 30);
            </script>
Tags:
#JavaScript

Zoom issue on iPhone


In the iPhone Safari browser it might happen that the page zooms in when you select an input or select element.

Issue

This issue is caused by the configuration of Safari. When an input's font size is smaller than 16 pixels the browser will zoom in to the element to provide the user with a good view of the element.

Solution

To resolve this issue, set the size of the font to 16 pixels or larger. The browser won't zoom in to the element anymore. 

            <style>
                .input-no-zoom{font-size: 16px;}
            </style>
            <input class='input-no-zoom' placeholder='No zoom when selected'>

Example

Tags:
#JavaScript

Javascript event listeners


If you are looking to make an interactive site, event listener are essential. Event listener add an event handler to an element on your website. When the set action occurs the code in the event listener will trigger.

What types of event listener are there?

  • click triggers when an item is clicked
  • change triggers when the value of an item is changed
  • keyup triggers when an input receives a new entry
  • keydown triggers when an item a key is pressed in an input
  • mouseover triggers when mouse goes over an item
  • mouseout triggers when mouse leaves an item
  • onload triggers when the page has loaded
  • focus triggers when an item is focused

How to add an event listener?

Add an event listener in your code by adding an JavaScript as shown in the example. Make sure to always add the code after all the HTML is created. The event listeners will search the specified element(s). If the HTML is nog loaded the elements are not available for the JavaScript code yet. This will result in an error in your code and the event listener not working. 

            <script>
                /*-- event listner based on the ID of an input field -- */
                document.getElementById('search').addEventListener('keyup', function (event){
                    console.log('key pressed');
                });

                /*-- event listner based on the ID of an button-- */
                document.getElementById('button').addEventListener('click', function (event){
                    console.log('button pressed');
                });

                /*-- event listner loop to add listner to all elements with a certain class -- */
                let NFbuttons= document.querySelectorAll('.NF-buttons');
                for ( let j = 0; j < NFbuttons.length; j++ ) {
                    NFbutton[j].addEventListener('click', async () => {
                        console.log('NF pressed');
                    });
                }

            </script>
Tags:
#CSS

Working with SVG icons


By adding icons to your site you can increase the user experience. Icons add a visual context that make it easy for the user to navigate the site.

Where to get free SVG icons?

There are various sources where you can get free SVG icons. Bootstrap icons or Google icons offers a wide range of icons that you can download and use for your website. You can eigher use them by intergrating the Bootstrap stylesheet or by uploading them to your own server. In this example the file is uploaded to the server.

How to increase the size of an SVG icon?

SVG icons work like images, set the width and height to change the size. Depending on where and how you want to show the icon set the display to block or inline-block.

How to change the color of an SVG icon?

Changing the color of an SVG icon can be done by adding the filter property in the CSS of the icon. There are various tools that can help you determine the filter based on the hex code of the color you want to change the icon to. An example is this tool that can be found on codepen. 

            <style>
                .NF-icon{
                    width: 50px;
                    height: 50px; 
                    filter: invert(34%) sepia(79%) saturate(518%) hue-rotate(41deg) brightness(95%) contrast(94%);
                }
            </style>
            <img class="NF-icon" src="icn/check-circle.svg">

Example

Tags:
#CSS
#HTML

Essential CSS parameters


Working with CSS can be quite painful. It's a constant battle between the default styling of the HTML elements and the provided styling. To overcome this it is good to add a CSS line with a star symbol. This symbol applies the CSS code in it to all elements on the web-page. Adding the following elements will save you lots of struggles.

Font-family

By applying the font-family at the start of your code you won't have to struggle with different fonts at a lower level. If you want a different font for a certain section just add the family to that specific element.

Margin and padding

Some elements have default settings for margin and padding. Removing these will save you lots of hassle trying to format your page.

Box-sizing

The box-sizing element determines how the total width and height are calculated for the elements on your page. If you for example create a box with a width of 200 pixels and add a margin of 25 pixels it might happen that your box ends up being 250 pixels wide. This can create issues with your styling and push other elements to a different position. By setting the box-sizing property to border box the item will never be larger than the total width you provided for it. This will reduce the issues you face when styling your website. 

            <style>
                *{
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
                    padding: 0px; 
                    margin: 0px; 
                    box-sizing: border-box;  
                }
            </style>
Tags:
#CSS