Home > Prashant Vengurlekar

JavaScript: What is the difference between shift() and unshift() array methods?

Definition: shift(): this method is use to remove first element of an array and returns new array. unshift(): this array method is used to add one or more arrays in existing array list and returns new array. usages of shift(): [crayon-6766f97843e70166987430/] usages of unshift(): [crayon-6766f97843e74018444653/]  

This Article is TAGGED in , , , . Read more

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

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

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

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-6766f978442c8948937360/] HTML [crayon-6766f978442cb588391053/] In

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

How to use flex properties? – Part 2

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

What is the difference between jQuery HTML/CSS methods width(), innerWidth(), outerWidth() and outerWidth(ture)?

Definition: width(): This method gives width of the selected element (excluding padding, border and margin). innerWidth(): This method gives width of the selected element (including padding, excluding border and margin). outerWidth(): This method gives width of the selected element (including padding and border, excluding margin). outerWidth(true): This method gives width of the selected element

This Article is TAGGED in , , , . Read more

jQuery: Difference between selectors :first, :first-child and :first-of-type

Definition: :first – use this selector to select first element. This selector select only one single element from all related elements available on the page. :first-child – use this selector to select all first child elements from each parent. :first-of-type – use this selector to select all first child elements, of a specific

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

How to set background image position for all browsers in CSS? Specially for Safari browser.

CSS: div{                    width:600px;                    height:400px;                    border:5px solid black;                    background-image: url('image.jpg');                        /*Add your image path here*/                    background-repeat: no-repeat;                    background-position: right 75% center;                   /*For all browser except Safari*/                    background-position-x: 25%;                                      /*For support all browsers with Safari browser*/                   background-position-y: 50%;                                      /*For support all browsers with Safari browser*/                   margin:0 auto; } DEMO

This Article is TAGGED in . Read more