Creative Technocrayts

Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu...

Hide show input fields based on select value Many times, while learning a new technology or a framework, it is not sufficient to read just the documentation and syntax, we need to practice. Many of us may try on our own sometimes things will work out for us sometimes we don't know how to evaluate ourselves. All our recent practice articles were published in that thought of giving readers a practice in jQuery  concepts.  Follow our FB page @CreativeTechnocrayts Other jQuery practice articles 1. jQuery DOM functions and array 2. DOM manipulation in jQuery 3. Daily ui practice - Input range sliders Subscribe to Creative Technocrayts and get updates in front end development and UI / UX. Some of us might run into a problem of  showing input value based on user selecting an option from the dropdown. We can achieve that in many ways.If the user is not selecting a value, the form is incomplete so the user cannot submit the form To check whether the select value is s...

How to check whether atleast one input is selected using jQuery Sometimes, while working with forms, a user is expected to select atleast one input, or a feedback should be thrown asking them to "Select atleast one input". How to check that using jQuery When a select option is checked checked attribute is added. To check whether the any of it is checked :checked is used in jQuery. If any of the checkbox is having checked attribute, then the user is allowed to submit. How to check whether an element is present To check whether an element is present, 1) size() function is used 2) .length property is used .length is faster than .size() because, former is a property whereas latter is a function. HTML snippet $('#submitBtn').click(function(){ if($('input[type="checkbox"]:checked').length >= 1){ alert("Is checked"); } else{ alert("Select atleast one"); } }); Other jQuery practice art...

Creating boxes with repeating background color - jQuery practice This article gives an idea of jQuery and DOM methods and javascript arrays Many of you have tried our previous practice exercise it seems. Jquery array i) When you get an input, you check whether it is validated as a number, ii) Based on the input value, number of boxes is created. iii) Set all the boxes with background colors from an array How to get an input value from textbox var inputValue = $(this).val(); console.log(inputValue); Testing whether the input value is a number For testing whether it is a number, regex pattern is used. if (/^[0-9]$/.test(inputValue)){ console.log("It is a number"); } /^[0-9]$/ :here,[0-9] checks whether it is a number. Note: /^[0-9]{1,2}$/ refers two digits number Creating number of boxes based on input value var section = document.createElement('section'); for (i=0;i<=inputValue-1;i++){ //crea...

Wow!! 2018 has been a fantastic year for us, Creative Technocrayts. There has been a satisfying learning curve for us in front end development be it using CSS Flexbox or adapting Google’s AMP in optimisation or designing our websites using Font Awesome 5. We have discussed a lot, thanks to the constant support from the community. We have received both positive feedback and negative criticism as well. Keeping that in mind we strive to improve and learn more and give back to the community. 2018 showed tremendous increasing readership from googleplus community and facebook page apart from Twitter and Linkedin and we are so happy about that. Thank you guys :) Its time for us to look back at this awesome year, 2018!!! Daily UI practice - Range slider and getting the value in jQuery This article, demonstrates how we can style input range, a form elements.It gives you an idea that 1. Input range can be custom styled. 2. Shadow DOM gives selectors to styles input ranges 3. It has trac...

Daily UI practice Recently I had some time so checked for latest updates in design from awwwards.com I wanted to practice UI for the day. So I picked up a site from there. The reason I picked up that is i) I wanted to learn something new ii) I wanted to do something which I haven’t done before So the exercise was about, Creating a range slider and getting the value Added box-shadow to jumbotron component. Now placing input range elements inside the component, Following bootstrap 4 documentation I got the above screen as it looked like in bootstrap website. I can’t proceed further as I didn’t have any other elements to style. Then I read few tutorials from css-tricks.com What is Shadow DOM? Well, we all know that, when a HTML page is loaded in a browser DOM (Document Object Model) is created. Likewise browsers have capability to create sub tree to the already created DOM elements.   Now we have got two components and customize the styles. They are 1. Trac...

jQuery is a Javascript framework. When do we use Javascript, jQuery, jQuery UI . DOM Manipulation in jQuery What jQuery does? jQuery is a javascript library, a) access parts of a page b) Modify the apperance of the page c) Alter the content of the page d) Respond to users's iteraction with page e) Add animation to a page Manipulating DOM with jQuery methods 1. To insert new elements inside every method elements, use a) .append() b) .appendTo() c) .prependTo() d) .prepend() Example for .prepend() in jQuery HTML <div class="productsContent one-box"> <div class="box"> <h4> Loreum ipsum1</h4> <p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </p> </div> </div> Prepending an element using jQuery $('.productsContent').prepend('November,2018'); New DOM <div class="productsContent one-box"><span>November,2018...

Websites we develop should always ensure better user experience keep in my mind the tough competition in the market by contemporary players How to solve browser issues in website How our website or web applications looks in different browsers and in different platforms matters the most. We are seeing increase in range of browsers and we may not know from which browser users visit our site. Every browsers have their own way of being an ideal browsers and they have their own features. Making our functions and UI across all the browsers should follow certain guidelines. By ensuring browser compatibility in our SDLC, it would be a safe game to play instead of going about things in the final end. To solve common browser compatible inconsistencies, we are discussing few effective points  here. Browser compatibility for modern browsers Keeping in mind, the cost and time constraints, making sure our websites work for Chrome, Mozilla Firefox, Safari is ideal. Handling common iss...

Flexbox CSS justify-content:space-* Flexbox layout and its properties are a set of properties which helps to align flex-items in a container. As we have discussed in detail in  our previous articles i) flexbox is a set of properties ii) it helps to align grid elements in a container in may ways iii) it also helps to realign the way it is arranged in a mobile or responsive screen  without writing too much of code. Justify-content Justify-content is the property provided by flexbox concept which works like text-align property. Justify -around takes up the following values justify-content: center | flex-start | flex-end | space-around | space-between | space-evenly justify-content: space-* justify-content: space-* helps us to align flex-items horizontally between the flex-container. In other words, it deals with the horizontal alignment within the container justify-content: space-around space-around helps us to align items in such a way that items have equal spa...

What is the difference between Javascript, JQuery, JQuery UI, JQuery mobile? Javascript Javascript is a programming language with its own syntax, functions, data structures and loops. Javascript is the most popular language used in web development. According to Stack overflow 2018 survey results Javascript is the most popular programming language. It has become an ubiquitous in web development. What is the difference between JQuery and Javascript JQuery is a Javascript library. It is built on top of Javascript and makes use of its functions. Jquery carries the motto “write less; do more”. JQuery is an extensive library making use of Javascript features and function within its library. JQuery framework is useful for 1) Manipulating DOM elements 2) CSS Selectors manipulation 3) Handling AJAX data for communicating with servers perform actions on specific events. 4) AJAX communication with servers 5) Animation effects 6) HTTP requests JQuery is said to have poor backwar...

This article deals with an example to demonstrate how to background-color, background-image and background shorthand property in CSS. You may read this article How to add box-shadow in CSS? How to add Background image to the div     .div1{ background-image: url(../images/bg.jpg); } How to add Background color to the div .div2{ background-color: #0085c2; }     How to add background image and background gradient to the same div? .div2{ background: linear-gradient( rgba(253,29,29,0.6), rgba(252,176,69,0.6) ),url(../images/slide2.jpg); } Instead of background-image or background-color property we have to use background property which is the shorthand rule. Background-gradient and image are separated by comma. The resultant output Also read next article - Is your site mobile friendly?

Boostrap 4 menu align right side in navbar In Boostrap 3 menubar, .navbar-right class is used to bring the menu to the right side.Now .navbar-right class is deprecated. How to align menu to right side using Bootstrap 4 As we already discussed that Bootstrap 4 is built on Flexbox layout , there is change in implementation accordingly. Following code-snippet will highlight the changes in HTML code <nav class="navbar navbar-expand-lg navbar-light fixed-top justify-content-between"> <a class="navbar-brand" href="#">Cafe Express</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class=...

Last time we had a very detailed discussion on Font Awesome 5 and how it stands different from Font Awesome 4.There were three methods to add Font Awesome 5 into our project. Font Awesome 5 can also be downloaded as Web Fonts and used in our local.      style="display:block"      data-ad-format="fluid"      data-ad-layout-key="-bw+m-2t-1d4+2yh"      data-ad-client="ca-pub-9980434921650127"      data-ad-slot="6489306790"> Now Font awesome, has got its new release FontAwesome 5.1.0 with three more categories, 1. Travel 2. Design 3. Emoji We felt awesome after seeing release of Font awesome 5.1 Emoji icons and can’t wait to use in our next project. Font awesome continues to stand apart with large icon base with much better compatibility. All Javascript component packages are now stable. Font awesome 5.1 can be used for React, Angular, Vue and Ember projects. Know the implementation of Font Aweso...

CSS flexbox order Read CSS Display We have discussed CSS Flexbox layout and its related properties with examples in our previous post. Right from the initial stages, ordering the elements has been quite tricky. CSS Flex box ordering emphasizes how useful is flexbox for responsive designing.When attempting to visually order the elements different to that of source code order flexbox order of the elements is very useful. Order of the flex Like direction and alignment CSS flex also provides techniques to define in which order flex elements should display. Order property will work only on the direct flex elements . By default, Order value of all items is zero . Order property can take values of negative, zero and positive. Consider the below example Changing the order of the flexboxes .box-one{ order:4; } .box-two{ order:3; } .box-three{ order:1; } .box-four{ order:5; } .box-five{ order:6; } Changed order of the flexbox items

CSS Flexbox Layout – Complete Guide with Examples Before diving in, make sure to read our guide on CSS Display Property . Traditionally, web layouts like the above were created using CSS floats . However, with CSS Flexbox , you can achieve the same results more efficiently and responsively. Why Use CSS Flexbox? ✅ Flexbox is a modern alternative to CSS floats and table layouts. ✅ It gives control over alignment, direction, order, and size of elements within a container. Let’s explore each concept of Flexbox step by step. Basic Components of CSS Flexbox a) Flex Container b) Flex Items Browser Compatibility CSS Flexbox is supported by all modern browsers including Chrome, Firefox, Safari, iOS Safari, and Opera. Internet Explorer 11 supports an older version of the specification with some limitations. ...