Home > UI/UX Development (Page 3)

Posted In: UI/UX Development

How to create/build web application in Angular?

Anil Kolase Angular JS 0

1. Download and install Node Package Manager(npm) Link to download npm (https://nodejs.org/en/download/) 2. Then install ANGULAR CLI globally Open cmd and Run command [crayon-68e5db2e95495235648344/] It can install angular globally 3. To Check version on command [crayon-68e5db2e9549a330439624/] [crayon-68e5db2e9549c206529535/] [crayon-68e5db2e9549e849975249/] 4. Create new project Open terminal and run command [crayon-68e5db2e954a0847519029/] Here we create project name my-app Angular cli installs npm packages and creates project files 5. Run

This Article is TAGGED in , . Read more

Show specific number of words in string using JavaScript

Anil Kolase JavaScript 0

<p id="shortWord"></p> <script> var word = "Lorem Ipsum is simply dummy text of the printing and typesetting industry." var wordArr = word.split(" "); var wordShort = wordArr.splice(0, 5).join(" "); document.getElementById('shortWord').innerHTML= wordShort; </script> Output: "Lorem Ipsum is simply dummy"  

This Article is TAGGED in , . Read more

jQuery: Difference between event.preventDefault() method and event.stopPropagation() method

Prashant Vengurlekar jQuery 2

event.preventDetault() method: event.preventDetault() method  stops default action of the element, e.g. In preventDefault() method when click on element like <a> its stops the link to executed or on Form submit button click stop form to be submitted. HTML: <div id="div-element">         <a id="anchor-element" href="http://www.xyz.com" target="_blank">                xyz.com         </a> </div> CODE: $(“document”).ready(function(){ $(“#anchor-element”).click(function(event){   event.preventDefault(); }); }); event.stopPropagation() method: event.stopPropagation() method stops event handlers

This Article is TAGGED in , , . Read more

CSS3: How to use flex properties? – Part 3

Prashant Vengurlekar CSS, HTML, UI/UX Development 0

Flex container's children (flex items) properties order flex-grow flex-shrink flex-basis flex align-self 1. order By using "order" property we can change the order of each flex item available in the flex container. { order: <integer>; } We must set order value in number, by default order value is 0. We can also use negative numbers in this property. - See usage

This Article is TAGGED in , , , , , , , . Read more

CSS3: How to use flex properties? – Part 1

Prashant Vengurlekar CSS, HTML, UI/UX Development 0

Parent flex container properties display flex-direction flex-wrap flex-flow 1. display { display: flex | inline-flex } "display" defines a flex container; when you specify "display" value to "flex" it consider as block container and if you specify "display" value to "inline-flex" it consider as inline-block container. - See usage and the differences shown in the below examples. display: flex CSS [crayon-68e5db2e95f18503738850/] HTML [crayon-68e5db2e95f1c406873300/] In

This Article is TAGGED in , , , , . Read more

How to use flex properties? – Part 2

Prashant Vengurlekar CSS, HTML, UI/UX Development 0

Click here more details about "How to use flex properties? - Part 1" article Parent flex container properties justify-content align-items align-content 5. justify-content This property used to align the flex items. { justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly } This property horizontally aligns all flex items when items do not use all

This Article is TAGGED in . Read more

Common jQuery Ajax methods and options

Chintan Upadhayay jQuery 0

In the previous article, we learned about event.preventDefault() vs event.stopPropagation() vs return false. In this article, we will cover the most basic methods/function used in jQuery when dealing with Ajax. Ajax ( Asynchronous JavaScript and XML ) it allows web pages to change/update data asynchronously with a web server without reloading the

This Article is TAGGED in , , , . Read more

17 Useful jQuery Tricks and Best Practices

Chintan Upadhayay JavaScript, jQuery 0

In the previous article, we learned about Common jQuery Ajax methods and options. In this article, we will cover the some general Do's and Dont's or Best Practices in jQuery, which is helpful to increase your page speed and will optimize code. jQuery is the most popular client-side library. It has

This Article is TAGGED in , , , , , , . Read more

Protractor: Add data in excel sheet using exceljs in node

Neeraj Vishwakarma Automation Testing, JavaScript, Protractor, Selenium 0

Prerequisite:To perform write operation on excel sheet we need node application and exceljs library installed. Below is the code for different write action on excel file. Add sheet to new excel file [crayon-68e5db2e96aa7326445872/] Add row in new sheet [crayon-68e5db2e96ab0715206881/] Edit Existing Excel File [crayon-68e5db2e96ab2019938987/]

This Article is TAGGED in , , , , . Read more

Make Document Library Webpart Responsive in SharePoint 2013

Ranjit Pokale CSS, Sharepoint 1

Hello everyone, in this post we discuss on how to make document library web part responsive in SharePoint. Steps to make Responsive document library web part First, we need to create a document library and add some sample documents including folder. To display document library, here we create web part page and add document library list. Now edit

This Article is TAGGED in , , , , . Read more