var myModal = document.getElementById('myModal'); // we need a blank modal to fill up and target our object function myModal.addEventListener('show.bs.modal', function(e) { console.log('show.bs.modal triggered for #'+e.target.id); console.log('event.relatedTarget is '+e.relatedTarget.tagName+'.'+e.relatedTarget.className.replace(/\s/g,'.')); }, false); // Modal initialized with JavaScript var myModalJS = document.getElementById('myModalJS'); // we need a blank modal to fill up and target our object function var btnModal = document.getElementById('openModalViaJS'); var firstModalContent = '' +'' +''; // init the modal var modalInitJS = new Modal(myModalJS, { content: firstModalContent, backdrop: 'static' }); btnModal.addEventListener('click',function(e){ modalInitJS.show(); },false); // another button var btnModal2 = document.getElementById('openModalViaJS2'); var externalModalContent = { title: 'Some title coming from space, a custom variable', content: 'This example also uses the specific modal events like show.bs.modal, so please open your console and check the logs. This is also a variable here, efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.', }; // set new content for the modal and show it btnModal2.addEventListener('click', function() { //template content for modal example 2 modalInitJS.setContent('' +'' +''); modalInitJS.show(); }, false); // another button to be used to reset modal content var btnModalNotTrigger = document.getElementById('modalNotTriggerJS'); btnModalNotTrigger.addEventListener('click', function(e) { e.preventDefault(); modalInitJS.setContent(firstModalContent); modalInitJS.show(); }, false); // NEW added events to Modal myModalJS.addEventListener('show.bs.modal', function(e) { var related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log( 'The "show.bs.modal" event fired for #' + e.target.id + related ); }, false); myModalJS.addEventListener('shown.bs.modal', function(e) { var related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log( 'The "shown.bs.modal" event fired for #' + e.target.id + related ); }, false); myModalJS.addEventListener('hide.bs.modal', function(e) { console.log( 'The "hide.bs.modal" event fired for #' + e.target.id ); }, false); myModalJS.addEventListener('hidden.bs.modal', function(e) { console.log( 'The "hidden.bs.modal" event fired for #' + e.target.id ); }, false); // updating modal while visible var modalUpdate = document.getElementById('modalUpdate'), // the trigger anotherStaticModal = document.getElementById('anotherStaticModal'), // the modal currentStaticModalBody = anotherStaticModal.querySelector('.modal-body'), // the body of the current modal currentStaticModalBodyContent = currentStaticModalBody.innerHTML, // we cache the content of the body modalUpdateInit = modalUpdate.Modal, // the initialization changeModal1 = document.getElementById('changeModal1'), // the change buttons changeModal2 = document.getElementById('changeModal2'); changeModal1.addEventListener('click', function(){ if (!/scroll/i.test(currentStaticModalBody.innerHTML)){ changeModal1.className += ' hidden'; changeModal2.className = changeModal2.className.replace(new RegExp('(\\s|^)hidden(\\s|$)','g'),''); currentStaticModalBody.innerHTML = currentStaticModalBodyContent; // set modalUpdateInit.update(); // trigger the update } }, false); changeModal2.addEventListener('click', function(){ if (/scroll/i.test(currentStaticModalBody.innerHTML)){ changeModal2.className += ' hidden'; changeModal1.className = changeModal1.className.replace(new RegExp('(\\s|^)hidden(\\s|$)','g'),' '); currentStaticModalBody.innerHTML = '

This modal changed via JavaScript

OK now this is a different content.

'; modalUpdateInit.update(); } }, false); // Dropdown init via JS var makeMeDropdown = document.getElementById('makeMeDropdown'); var myDropdownTemplate = ''; makeMeDropdown.addEventListener('click', function(e){ e.preventDefault(); if ( !/\bdisabled/.test(makeMeDropdown.className) ){ // invalidate the makeMeDropdown this.setAttribute('disabled',true); this.className = 'btn btn-default disabled'; this.innerHTML = 'All done'; this.parentNode.innerHTML += myDropdownTemplate; //get the new dropdown var formDropdown = document.getElementById('formDropdown'); // initiate with option var DropdownInit = new Dropdown(formDropdown, true); // NEW: attach Dropdown original events formDropdown.parentNode.addEventListener('show.bs.dropdown', function(e){ var related = null; related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log('The show.bs.dropdown event fired for parent of #' + formDropdown.id + related ); }, false); formDropdown.parentNode.addEventListener('shown.bs.dropdown', function(e){ var related = null; related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log('The shown.bs.dropdown event fired for parent of #' + formDropdown.id + related ); }, false); formDropdown.parentNode.addEventListener('hide.bs.dropdown', function(e){ var related = null; related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log('The hide.bs.dropdown event fired for parent of #' + formDropdown.id + related ); }, false); formDropdown.parentNode.addEventListener('hidden.bs.dropdown', function(e){ var related = null; related = ', relatedTarget: '+ (e.relatedTarget ? e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null'); console.log('The hidden.bs.dropdown event fired for parent of #' + formDropdown.id + related ); }, false); } }, false); //switch views for tabs var exampleTab = document.getElementById('exampleTab'); var tabsToggleView = document.getElementById('tabSwitcher'); var tabsDemo = document.getElementById('myTab'); tabsToggleView.addEventListener('click', function(e){ e.preventDefault(); if ( e.target.tagName === 'A' && e.target.getAttribute('data-nclass') !== undefined ) { tabsDemo.className = e.target.getAttribute('data-nclass'); tabsToggleView.querySelector('button').innerHTML = 'Viewing ' + e.target.innerHTML } else { return false; } }); //demo alert fun var dangerAlert = document.querySelector('.alert-danger'), siblings = dangerAlert.parentNode.childNodes; dangerAlert.addEventListener('closed.bs.alert', function(e) { var successAlert = document.createElement('div'); successAlert.setAttribute('class','alert alert-success fade'); successAlert.setAttribute('role','alert'); successAlert.innerHTML = '

Wow you REALLY got no error!

Javascript isn\'t fun? Well, think again.

'; successAlert.innerHTML += '

I just didn\'t want this section to be empty, looks awful..

'; dangerAlert.parentNode.insertBefore(successAlert,siblings[siblings.length-2]); if (successAlert.classList) { successAlert.classList.add('in'); } else { successAlert.className += ' in'; } }); // NEW Alert events document.getElementById('alertDemo').addEventListener('close.bs.alert', function(e) { console.log( 'The "close.bs.alert" event fired for #' + e.target.id ); }); document.getElementById('alertDemo').addEventListener('closed.bs.alert', function(e) { console.log( 'The "closed.bs.alert" event fired for #' + e.target.id ); }); //demo popover. trigger via click var popover1 = new Popover('#popover-via-click', { trigger: 'click'} ); // demo popover, using template var someTitleFromOtherCode = 'Popover via JavaScript FOCUS'; var someContentFromOuterSpace = '

Some sample message from outer space wrapped in <p> tags. You can add your own functions to combine with Popover template as you wish.

'; var popover2 = new Popover('.popover-via-template', { trigger: 'focus', template: '' }); // new Popover events var popoverEvents = document.getElementById('popoverWithEvents'); popoverEvents.addEventListener('show.bs.popover', function(){ console.log('The show.bs.popover event fired for #' + popoverEvents.id); }, false); popoverEvents.addEventListener('shown.bs.popover', function(){ console.log('The shown.bs.popover event fired for #' + popoverEvents.id); }, false); popoverEvents.addEventListener('hide.bs.popover', function(){ console.log('The hide.bs.popover event fired for #' + popoverEvents.id); }, false); popoverEvents.addEventListener('hidden.bs.popover', function(){ console.log('The hidden.bs.popover event fired for #' + popoverEvents.id); }, false); //demo button var btn = document.getElementById('myButton'); var success = document.getElementById('successButton'), successOuter = success.outerHTML; btn.addEventListener('click', function() { Button(btn,'loading'); setTimeout(function() { if ( !document.getElementById('successButton') ) { var newSuccess = document.createElement('div'); btn.parentNode.parentNode.insertBefore(newSuccess, btn.parentNode.nextSibling); newSuccess.outerHTML = successOuter; // reidentify the new alert and reinit alert success = document.getElementById('successButton'); new Alert(success.querySelector('[data-dismiss="alert"]')); // initialize if not already } success.style.display = 'block'; setTimeout(function(){ success.className += ' in'; }, 10) Button(btn,'reset'); }, 2000) }); //demo carousel-example-generic demonstrating the slid and slide events var genericCarousel = document.getElementById('carousel-example-generic'); genericCarousel.addEventListener('slide.bs.carousel', function(e) { console.log( 'The #' + e.target.id + ' is about to slide, and this was the "slide" event, direction: ' + genericCarousel.Carousel.direction + ', relatedTarget: ' + e.relatedTarget.tagName + '.' + e.relatedTarget.className ); }); genericCarousel.addEventListener('slid.bs.carousel', function(e) { console.log( 'The #' + e.target.id + ' has finished the slide transition, and this was the "slid" event, direction: ' + genericCarousel.Carousel.direction + ', relatedTarget: ' + e.relatedTarget.tagName + '.' + e.relatedTarget.className ); }); //demo myCarousel demonstrating the slid and slide events var mainSlider = document.getElementById('myCarousel'); var mainSliderItems = mainSlider.querySelectorAll('.item'); mainSlider.addEventListener('slide.bs.carousel', function(e) { var currentActive = mainSlider.Carousel.getActiveIndex(); var activeCaption = mainSliderItems[currentActive].querySelector('.carousel-caption'); activeCaption.classList.remove('slide'); }); mainSlider.addEventListener('slid.bs.carousel', function(e) { var activeCaption = e.relatedTarget.querySelector('.carousel-caption'); activeCaption.classList.add('slide'); }); // JS init for carousel example // var exampleCarousel = document.getElementById('carousel-example-generic'); // var exampleCarouselInit = new Carousel(exampleCarousel); /* side-nav autoresize on window scroll and resize */ var sideNav = document.getElementById('side-nav'); if ( document.documentElement && !/ie/.test(document.documentElement.className) ) { function resetNav() { document.getElementById('nav-scrollspy').style.width = ''; } function adjustNav() { var ww = window.innerWidth || document.documentElement.clientWidth; if ( ww >= 768 ) { document.getElementById('nav-scrollspy').style.width = (sideNav.offsetWidth - 15) + 'px'; } else { resetNav() } } adjustNav(); window.addEventListener('resize', adjustNav, false)// adjust on resize } // KUTE.js scrollTo var sideLinks = sideNav.getElementsByTagName("A"), scrollTo = function(e){ var target = document.getElementById(e.target.getAttribute('href').replace('#','')); e.preventDefault(); document.documentElement.scrollTop = target.getBoundingClientRect().top + (window.pageYOffset||document.documentElement.scrollTop) - (i===0?0:60); }; for (var i=0, sll=sideLinks.length; i 120 ){ navbar.style.opacity = 1 } } },0) } function setNavbarOpacityOnLeave(){ clearTimeout(scrollTimer); scrollTimer = setTimeout(function(){ if (navbar.classList.contains('HOVER')) { navbar.classList.remove('HOVER'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if ( scrollTop > 120 ){ navbar.style.opacity = 0.7 } } },0) } document.addEventListener('DOMContentLoaded', setNavbarOpacity, false); window.addEventListener('scroll', setNavbarOpacity, false); navbar.addEventListener(mouseHover[0],setNavbarOpacityOnEnter,false); navbar.addEventListener(mouseHover[1],setNavbarOpacityOnLeave,false);