Posts

Showing posts with the label html

MultiRangeSlider.js: JavaScript HTML CSS

Image
MultiRangeSlider.js download MultiRangeSlider.js MultiRangeSlider.min.js MultiRangeSlider.css source code and demo download source code view demo view demo style 1 view demo style 2 Description We face a problem that input type range allow only one value to select. If we want to select two values from a range we have no option. we need to add two input type range slider to take input min value and max value. Handling two input range control is not easy and manages events is also very difficult. For the solution of selecting multiple value and handling events it provide a solution. It allows user to select min value and max value from a range slider. It's design layout is fully controlled by CSS and provide a lot of events to handle via JavaScript. How to Use download MultiRangeSlider.js/MultiRangeSlider.min.js and include in your project. There are two way to add this control on form Method 1 let options ={container: document.querySelector('.container')}; let multiRangeSlid...

javascript domElement .append(domElement / htmlString)

  javascript domElement .append( domElement ) Target: add/create child element(s) in given element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll In case of DOM NodeList first Node Element is processed for append to child elements. Description : insert passed dom elements in selected dom element at the end of other child elements. Note: in case of string html is passed then new element is created and inserted. it return selected element for further processing. Syntax: DOMElement.append( domElement/htmlString ) DOMNodeList.append( domElement /htmlString ) HTMLCollection.append( domElement /htmlString ) Usase: document.querySelector('container').append("<span>Welcome</span>") it creates span element and insert it in container element document.querySelector('container').append(document.querySelectorAll("ul")) it insert all UL elements in container element. document.querySelector(...

javascript : DomElement .html(html)

  javascript : DomElement .html( html ) Target: Applicable with any DOM element having attribute innerHTML. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll In case of DOM NodeList first Node Element is processed for get/set. Description : get/set innerHTML of DOM element. if html is passed then it set the innerHTML and return element itself, otherwise return innerHTML of element. Note: after setting the innerHTML of element it return the element itself. Syntax: DOMElement.html( 'html' ) DOMNodeList.html( 'html' ) HTMLCollection.html( 'html' ) Usase: document.getElementById('firstDiv').html("welcome") it sets the innerHTML of div having id firstDiv with html " welcome " and return firstDiv element document.querySelector('#firstDiv').html("welcome") it sets the innerHTML of div having id firstDiv with innerHTML " welcome " and return firstDiv element...