Posts

Showing posts with the label css

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 .is(cssSelector|":visible"|domElement)

  javascript domElement .is( cssSelector|":visible"|domElement ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : return  true  if target element or first element of list is matched with selector other wise  false  . selector :  any css selector string ":visible" :  string for check is visible. Same as isVisible() method DomElement :  matched with element if both are same then return true other wise false. Syntax: DOMElement.is( selector ) DOMNodeList.is( selector ) HTMLCollection.is( selector ) Usase: document.getElementById('firstDiv').is( "div" ) it return true if firstDiv element is div other wise false document.getElementsByTagName('div').is( ".FirstDiv" ) the getElementsByTagName selects all div but is() method check for only first div and if it has class Firstdiv then return true else false. document.getElements...

javascript : DomElement .text()

  javascript : DomElement .text() Target: Applicable with any DOM element having attribute innerText. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll In case of DOM NodeList first Node Element is processed for get innerText. Description : get innerText of DOM element. Syntax: DOMElement.text() DOMNodeList.text() HTMLCollection.text() Usase: document.getElementById('firstDiv').text() it returns the innerText of firstDiv, that is " welcome " document.querySelector('#firstDiv').text() it returns the innerText of firstDiv, that is " welcome " document.querySelectorAll('div').text() it returns the innerHTML of first div's, that is " welcome " document.getElementsByTagName('div').text() it returns the innerHTML of first div's, that is " welcome " Download MYJS.js MyJs is a collection of java script extension methods that enhances the JavaScript obj...