h1. Bootstrap Heading

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

.container

.row

h1. Heading

h1. Bootstrap Heading

Lead

Paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

/* * dom_inspector * https://github.com/tpopela/dom_inspector * Tomas Popela */ /* highlighted item on page */ .highlightPageItem { border: 4px solid rgba(255, 170, 0, 0.6); } /* highlighted item in DOM tree list */ .highlightDomItem { background-color: rgba(255, 255, 153, 0.9); } /* DOM tree list item properities */ .DOMListItem { list-style: none outside none; margin-left: 0; padding-left: 1em; text-indent: -1em; } /* DOM tree list item href colors */ #domDiv a:link { color: #000000; } #domDiv a:visited { color: #000000; } #domDiv a:hover { color: #FF3366; } #domDiv a:active { color: #FF3366; } /* Look of whole DOM tree list */ #domDiv { background-color: rgba(125, 125, 125, 0.6); border: 2px solid rgba(125, 125, 125, 0.6); font-size: small; right: 20px; top: 20px; } /* Element's id and CSS classes inputs look */ #inputDiv { background-color: rgba(63,143,210,0.6) } /* * dom_inspector * https://github.com/tpopela/dom_inspector * Tomas Popela */ // start of script on onload event if (window.addEventListener) { window.addEventListener("load",function() { this.startDOMLogic(); },false); } else if (window.attachEvent) { window.attachEvent("onload",function() { this.startDOMLogic(); }); } else { window.onload=function() { this.startDOMLogic(); }; } var iterator = 0; var currentElement = null; var currentElementDOM = null; // returns actually selected DOM tree element function getSelectedElement() { return currentElement; } // "main" of this scipt function startDOMLogic() { this.loadCssStyles(); this.showFrame(); this.initializeDOMList(); this.parseDomTree(document, null); this.installBodyOnClick(); document.getElementById("idInput").style.display = "inline"; document.getElementById("idInputLabel").style.display = "block"; document.getElementById("idInputButton") .style.display = "inline"; document.getElementById("classInput") .style.display = "inline"; document.getElementById("classInputLabel").style.display = "block"; document.getElementById("classInputButton").style.display = "inline"; document.getElementById("inputDiv").style.display = "block"; } // sets onload event on BODY element function installBodyOnClick() { document.body.onclick = function() { var element = window.event ? event.srcElement : arguments[0].target; // if we're not clicking on element in DOM elements list if (element.className.indexOf("domFont") == -1) { element.className += ' DOMInspectorPageItemSelected '; iterator = 0; searchSelectedItem(document, null, null); } } } // loads CSS styles function loadCssStyles() { var cssFile = document.createElement('link'); cssFile.setAttribute("rel", "stylesheet"); cssFile.setAttribute("type", "text/css"); cssFile.setAttribute("href", "dom_inspector.css"); document.getElementsByTagName("head")[0].appendChild(cssFile); } // creates and sets GUI of dom_inspector function showFrame() { var body = document.getElementsByTagName("body")[0]; var elem = document.createElement("div"); var inputDiv = document.createElement("div"); var idDiv = document.createElement("div"); var classDiv = document.createElement("div"); var idInput = document.createElement("input"); var idInputLabel = document.createElement("label"); var idInputButton = document.createElement("button"); var classInput = document.createElement("input"); var classInputLabel = document.createElement("label"); var classInputButton = document.createElement("button"); elem.id = "domDiv"; elem.style.display = "inline-block"; elem.style.position = "absolute"; elem.style.minWidth = "160px"; elem.style.zIndex = "10000"; inputDiv.id = 'inputDiv'; inputDiv.style.width = "100%"; inputDiv.style.paddingBottom = "5px"; inputDiv.style.display = "none"; idDiv.id = 'classDiv'; idDiv.style.display = "inline"; idInput.type = "text"; idInput.id = "idInput"; idInput.style.width = "80%"; idInput.disabled = "disabled"; idInputLabel.id = 'idInputLabel'; idInputLabel.htmlFor = idInput.id; idInputLabel.style.textAlign = "center"; idInputLabel.innerHTML = "Element's ID"; idInputButton.id = 'idInputButton'; idInputButton.innerHTML = '✓'; idInputButton.onclick = this.changeIdOfElement; idInputButton.disabled = "disabled"; idInputButton.style.cssFloat = "right"; idInputButton.style.width = "14%"; classDiv.id = 'classDiv'; classDiv.style.display = "inline"; classInput.id = "classInput"; classInput.type = "text"; classInput.style.width = "80%"; classInput.disabled = "disabled"; classInput.style.cssFloat = "center"; classInputLabel.id = 'classInputLabel'; classInputLabel.htmlFor = idInput.id; classInputLabel.style.textAlign = "center"; classInputLabel.innerHTML = "Element's Classes"; classInputButton.id = 'classInputButton'; classInputButton.innerHTML = '✓'; classInputButton.onclick = this.changeClassOfElement; classInputButton.disabled = "disabled"; classInputButton.style.cssFloat = "right"; classInputButton.style.width = "14%"; idDiv.appendChild(idInput); idDiv.appendChild(idInputButton); classDiv.appendChild(classInput); classDiv.appendChild(classInputButton); inputDiv.appendChild(idInputLabel); inputDiv.appendChild(idInput); inputDiv.appendChild(idInputButton); inputDiv.appendChild(classInputLabel); inputDiv.appendChild(idDiv); inputDiv.appendChild(classDiv); body.appendChild(elem); elem.appendChild(inputDiv); } // inicialization of list, that represents DOM tree function initializeDOMList() { var domInspectorDiv = document.getElementById("domDiv"); var domTree = document.createElement("ul"); domTree.id = "domList"; domTree.className += ' DOMListItem'; domTree.style.marginLeft = "10px"; domInspectorDiv.appendChild(domTree); } // inserts new sublist to the top level of DOM tree list function addListSublist(sublistId) { var listRoot = document.getElementById("domList"); var newItem = document.createElement('ul'); newItem.id = sublistId + 'UL'; newItem.className += ' DOMListItem'; listRoot.insertBefore(newItem, listRoot.nextSibling); } // inserts new sublist into given list function addSpecifiedListSublist(listId, sublistId) { var listRoot = document.getElementById(listId); var newItem = document.createElement('ul'); newItem.id = sublistId + 'UL'; newItem.className += ' DOMListItem'; listRoot.insertBefore(newItem, listRoot.nextSibling); } // inserts new item into given list function addNewItemToSublist(sublistId, item) { var listRoot = document.getElementById(sublistId); var newItem = document.createElement('li'); var newHref = document.createElement('a'); var itemId; if (item.tagName) itemId = item.tagName + iterator; else itemId = 'TEXT' + iterator; newItem.id = itemId; newHref.id = itemId + 'LINK'; newHref.href = "javascript:void(0)"; newHref.onclick = function() { showSelectedItem(itemId); }; newHref.ondblclick = function() { collapseDOMTree(newHref.id); }; newHref.className += ' domFont'; newHref.style.textDecoration = "none"; if (item.tagName) newHref.innerHTML = item.tagName; else newHref.innerHTML = 'TEXT'; newItem.appendChild(newHref); listRoot.insertBefore(newItem, listRoot.nextSibling); } // expand/collapse the DOM tree list items function collapseDOMTree(elementId) { var ulId = elementId.replace('LINK','UL'); var domList = document.getElementById(ulId); var domLink = document.getElementById(elementId); if (domList) { if (domList.style.display == "block") { domList.style.display = "none"; domLink.style.fontStyle = "italic"; domLink.style.fontWeight = "bolder"; } else { domList.style.display = "block"; domLink.style.fontStyle = "normal"; domLink.style.fontWeight = "normal"; } } } // highlights selected inline item (eg.
) or DOM Text element on page // and in DOM tree list function highlightInlineItem(element, destNameIt) { if (element.parentNode.className.indexOf('highlightPageItem') == -1) { if (currentElement != null) { var currentDOMListItem = document.getElementById(currentElementDOM); var currentDOMListItemList = document.getElementById(currentElementDOM + 'UL'); var currentDOMListItemLink = document.getElementById(currentElementDOM + 'LINK'); if (currentElement.className) { currentElement.className = currentElement.className.replace(' highlightPageItem',''); } else { var span = document.getElementById("pageInlineItemHighlight"); span.parentNode.replaceChild(span.firstChild, span); } if (currentDOMListItem) currentDOMListItem.className = currentDOMListItem.className.replace(' highlightDomItem', ''); if (currentDOMListItemList) currentDOMListItemList.className = currentDOMListItemList.className.replace(' highlightDomItem', ''); if (currentDOMListItemLink) currentDOMListItemLink.className = currentDOMListItemLink.className.replace(' highlightDomItem', ''); } var textSpan = document.createElement("span"); textSpan.className += ' highlightPageItem'; textSpan.id = 'pageInlineItemHighlight'; var newNode = element.cloneNode(true); textSpan.appendChild(newNode); element.parentNode.replaceChild(textSpan, element); var domListItemLink = document.getElementById(destNameIt + 'LINK'); if (domListItemLink) domListItemLink.className += ' highlightDomItem'; this.clearElementProperities(element); this.fillElementProperities(element); currentElement = element; currentElementDOM = destNameIt; } else { var span = document.getElementById("pageInlineItemHighlight"); span.parentNode.replaceChild(span.firstChild, span); var domListItemLink = document.getElementById(destNameIt + 'LINK'); if (domListItemLink) domListItemLink.className = domListItemLink.className.replace(' highlightDomItem', '') currentElement = null; currentElementDOM = null; } } // highlights selected element on page and in DOM tree list function highlightItem(element, destNameIt) { var domListItem = document.getElementById(destNameIt); var domListItemList = document.getElementById(destNameIt + 'UL'); var domListItemLink = document.getElementById(destNameIt + 'LINK'); if (element.className.indexOf('DOMInspectorPageItemSelected') != -1) { element.className = element.className.replace(' DOMInspectorPageItemSelected', ''); if (domListItem) domListItem.className = domListItem.className.replace(' DOMInspectorPageItemSelected', ''); if (domListItemList) domListItemList.className = domListItemList.className.replace(' DOMInspectorPageItemSelected', ''); if (domListItemLink) domListItemLink.className = domListItemLink.className.replace(' DOMInspectorPageItemSelected', ''); this.clearElementProperities(element); } if (element.className.indexOf("highlightPageItem") != -1) { element.className = element.className.replace(' highlightPageItem', ''); if (domListItem) domListItem.className = domListItem.className.replace(' highlightDomItem', ''); if (domListItemList) domListItemList.className = domListItemList.className.replace(' highlightDomItem', ''); if (domListItemLink) domListItemLink.className = domListItemLink.className.replace(' highlightDomItem', ''); this.clearElementProperities(element); currentElement = null; currentElementDOM = null; } else { element.className += ' highlightPageItem'; if (domListItem) domListItem.className += ' highlightDomItem'; if (domListItemList) domListItemList.className += ' highlightDomItem'; if (domListItemLink) domListItemLink.className += ' highlightDomItem'; this.fillElementProperities(element); if (currentElement != null) { var currentDOMListItem = document.getElementById(currentElementDOM); var currentDOMListItemList = document.getElementById(currentElementDOM + 'UL'); var currentDOMListItemLink = document.getElementById(currentElementDOM + 'LINK'); if (currentElement.className) { currentElement.className = currentElement.className.replace(' highlightPageItem',''); } else { var span = document.getElementById("pageInlineItemHighlight"); span.parentNode.replaceChild(span.firstChild, span); } if (currentDOMListItem) currentDOMListItem.className = currentDOMListItem.className.replace(' highlightDomItem', ''); if (currentDOMListItemList) currentDOMListItemList.className = currentDOMListItemList.className.replace(' highlightDomItem', ''); if (currentDOMListItemLink) currentDOMListItemLink.className = currentDOMListItemLink.className.replace(' highlightDomItem', ''); } currentElement = element; currentElementDOM = destNameIt; } } // fills up inputs with selected element's id and its CSS classes function fillElementProperities(element) { var idInput = document.getElementById('idInput'); var classInput = document.getElementById('classInput'); var idInputButton = document.getElementById('idInputButton'); var classInputButton = document.getElementById('classInputButton'); if (element.nodeName != '#text') { idInput.disabled = ""; classInput.disabled = ""; idInputButton.disabled = ""; classInputButton.disabled = ""; idInput.value = element.id; var tempClassName = element.className.replace(' highlightPageItem', ''); classInput.value = tempClassName.replace(' DOMInspectorPageItemSelected', ''); } } // cleares inputs with element's id and CSS classes function clearElementProperities(element) { var idInput = document.getElementById('idInput'); var classInput = document.getElementById('classInput'); var idInputButton = document.getElementById('idInputButton'); var classInputButton = document.getElementById('classInputButton'); idInput.disabled = "disabled"; classInput.disabled = "disabled"; idInputButton.disabled = "disabled"; classInputButton.disabled = "disabled"; idInput.value = ''; classInput.value = ''; } // changes id of element to given one function changeIdOfElement() { if (currentElement != null) { var idInput = document.getElementById('idInput'); currentElement.id = idInput.value; } } // changes CSS classes of element function changeClassOfElement() { if (currentElement != null) { var classInput = document.getElementById('classInput'); currentElement.className = ''; currentElement.className += ' highlightPageItem'; currentElement.className += ' ' + classInput.value; } } // finds actually selected element in DOM tree list or on page // if it's find, it also highlights it function searchSelectedItem(element, sublistID, destNameIt) { if (element.id == "domDiv") return; if (element.id == 'domParserCssClass1' || element.id == "domParserCssClass2" || element.id == 'domFont') return; var i = 0; var sListID = null; var childCount = element.childNodes.length; var tagName = element.tagName; if (tagName) { if (childCount != 0) { if (sublistID != null) { if (childCount >= 1) { sListID = tagName + iterator + 'UL'; if (destNameIt == tagName + iterator) { this.highlightItem(element, destNameIt); iterator = 0; } if (element.className.indexOf('DOMInspectorPageItemSelected') != -1) { this.highlightItem(element, tagName + iterator); iterator = 0; } } if (tagName != 'SPAN' && (element.className.indexOf('highlightPageItem') == -1)) iterator++; if (tagName == 'SPAN' && (element.className.indexOf('highlightPageItem') == -1)) iterator++; if (tagName != 'SPAN' && (element.className.indexOf('highlightPageItem') != -1)) iterator++; } else { sListID = tagName + iterator + 'UL'; if (destNameIt == tagName + iterator) { this.highlightItem(element, destNameIt); iterator = 0; } if (element.className.indexOf('DOMInspectorPageItemSelected') != -1) { this.highlightItem(element, tagName + iterator); iterator = 0; } if (tagName != 'SPAN' && (element.className.indexOf('highlightPageItem') == -1)) iterator++; if (tagName == 'SPAN' && (element.className.indexOf('highlightPageItem') == -1)) iterator++; } } else { if (destNameIt == tagName + iterator) { if (tagName != 'BR') this.highlightItem(element, destNameIt); else this.highlightInlineItem(element, destNameIt); iterator = 0; } if (element.className.indexOf('DOMInspectorPageItemSelected') != -1) { this.highlightItem(element, tagName + iterator); iterator = 0; } iterator++; } } else { if (element.nodeName == '#text') { var text = element.nodeValue.replace(/^\s+|\s+$/g, ''); if (text.length > 0) { if (('TEXT' + iterator) == destNameIt) { this.highlightInlineItem(element, destNameIt); iterator = 0; } iterator++; } } } if (childCount != 0) { for (i = 0; i < childCount; i++) { searchSelectedItem(element.childNodes[i], sListID, destNameIt); } } } // searches element with its id from DOM tree function showSelectedItem(elementId) { iterator = 0; this.searchSelectedItem(document, null, elementId); } // creates list (GUI) of DOM elements function parseDomTree(element, sublistID) { if (element.id == "domDiv") return; if (element.id == 'domParserCssClass1' || element.id == "domParserCssClass2" || element.id == 'domFont') return; var i = 0; var sListID = null; var childCount = element.childNodes.length; var tagName = element.tagName; if (tagName) { if (childCount != 0) { if (sublistID != null) { this.addNewItemToSublist(sublistID, element); if (childCount >= 1) { this.addSpecifiedListSublist(sublistID, tagName + iterator); sListID = tagName + iterator + 'UL'; } iterator++; } else { this.addNewItemToSublist('domList', element); this.addListSublist(tagName + iterator); sListID = tagName + iterator + 'UL'; iterator++; } } else { if (sublistID != null) { this.addNewItemToSublist(sublistID, element) } else { this.addNewItemToSublist('domList', element); sListID = null; } iterator++; } } else { if (element.nodeName == '#text') { tagName = 'TEXT'; childCount = 0; var text = element.nodeValue.replace(/^\s+|\s+$/g, ''); if (text.length > 0) { if (sublistID != null) { this.addNewItemToSublist(sublistID, element) } else { this.addNewItemToSublist('domList', element); sListID = null; } iterator++; } } } if (childCount != 0) { for (i = 0; i < childCount; i++) { parseDomTree(element.childNodes[i], sListID); } } }

Admin — dom inspector

Bootstraptor

Get Social and Share

Tags

PREVIEW SNIPP

h1. Bootstrap Heading

h1. Bootstrap Heading