We Keep Coding

Removing and adding Bootstrap 4 alert classes breaks alert type

I am making an alert system for a web application with Bootstrap 4. Here is my code:
function bsalert(str1, str2) {
$(".alert").addClass('show');
$(".alert").addClass('alert-'+str1);
$('.alert').html(str2);
setTimeout( function() {
$(".alert").removeClass('show');
$(".alert").removeClass('alert-'+str1);
}, 2000 );
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
The issue I am having is if you do it too quickly, before the timer removes the class, it breaks the ability to change alert types. How can I fix this? Does Bootstrap have a better function built in?
Edit: In this example I simplified the number of types of alerts, in actually there's more than just danger and success.

i hope it help you
var timer;
function bsalert(str1, str2) {
clearTimeout(timer)
$(".alert").removeClass('show');
$(".alert").removeClass('alert-danger');
$(".alert").removeClass('alert-success');
$(".alert").addClass('show');
$(".alert").addClass('alert-'+str1);
$('.alert').html(str2);
timer=setTimeout( function() {
$(".alert").removeClass('show');
$(".alert").removeClass('alert-'+str1);
}, 2000 );
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Now if you use the set time out function the alert will hide in 2 seconds interval so in the meantime if the notification is clicked many times continuously it will still hide the element in 2 seconds which can create an effect where you see it going off very quickly, there are few solutions to which: either you post an element with different id for every notification, or you restrict the function call or delay it after two seconds, or disable the notification button for 2 seconds so the notification is called only after every 2 seconds,also you can use the clear timeout function of javascript.
var timeoutElem;
function bsalert(str1, str2) {
var alertClassString = 'alert-' + str1;
var existingClass = '';
clearTimeout(timeoutElem);
existingClass = (str1 === "danger") ? 'alert-success' : 'alert-danger';
$(".alert").removeClass(existingClass);
$(".alert").addClass(alertClassString);
$(".alert").removeClass('show');
$(".alert").addClass('show');
$('.alert').html(str2);
timeoutElem = setTimeout(function() {
$(".alert").removeClass('show');
}, 2000);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

how to add two transitions on vue js at the same time?

I'm new on the Vue js framework. And I'm trying to use 2 transition in one element which is working but the second transition doesn't work very well.
I mean the first works with the animation properties but the seconds works but the animation doesn't it.
Here's my code:
<div id="app-17" class="col-sm-4">
<h1>Lista con VueJS - AJAX</h1>
<button class="btn btn-sm btn-primary mb-4" v-on:click="show = !show">Mostar/Ocultar Lista</button>
<button class="btn btn-sm btn-primary mb-4" v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-if="show" v-for="item in list" v-bind:key="item.name">
{{item.name}}
</li>
</transition-group>
</div>
Here's the JavaScript:
<script type="text/javascript">
var urlUsers = 'https://jsonplaceholder.typicode.com/users'
app17 = new Vue({
el: '#app-17',
created: function(){
this.getUsers();
},
data: {
list: [],
show: false
},
methods: {
getUsers: function () {
this.$http.get(urlUsers).then(function (response) {
this.list = response.data;
});
},
shuffle: function () {
this.list = _.shuffle(this.list)
}
}
})
</script>
And the CSS style :
<style>
/*ANIMATION APP-8*/
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.flip-list-move {
transition: transform 1s;
}
</style>
I'm also using those links:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
Here's live example:
https://codepen.io/blackandnoob/pen/qyeJVW

JQuery Filtering with Radio Buttons in FullCalendar

I am trying to filter events with a set of buttons in the JQUERY FullCalendar.
I got it working with a dropdown, where you select the dropdown and it filters events based on if the category is dog or cat. But I cant get it to do it with normal buttons.
Dropdown working:
$(document).ready(function() {
// page is now ready, initialize the calendar..
$('#calendar').fullCalendar({
displayEventTime: false,
themeSystem: 'bootstrap4',
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: false, // Don't allow editing of events
handleWindowResize: true,
//console.log((events))
events : [{start: '7/17/2018',title:"Single Type", category:"Dog"},
{start: '7/19/2018',title:"Single Type", category:"Cat"},
{start: '7/23/2018',title:"Multiple Types", category:"Cat, Dog"},
{start: '7/26/2018',title:"Multiple Type", category:"Dog, Cat"},], /**/
eventRender: function(event, element,view) {
element.qtip({
content: event.description + '<br />',
style: {
classes: 'qtip-green',
},
position: {
corner: {
target: 'center',
tooltip: 'bottomMiddle'
}
}
})
return $('#type_selector').val() === 'all' || event.category.indexOf($('#type_selector').val()) >= 0;
},
});
$('#type_selector').on('change',function(){
$('#calendar').fullCalendar('rerenderEvents');});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<select id="type_selector">
<option value="all">all</option>
<option value="Dog">Dog </option>
<option value="Cat">Cat </option>
<select>
<div id="calendar"></div>
One thing that worked for me was adding radio buttons, which would successfully render the calendar. But the buttons do not work, they are not filtering the events.
Replace the return to:
return $('input[type=radio][name=type_selector]').val() === 'all' || event.category.indexOf($("input[type=radio][name=type_selector]:checked").val()) >= 0;
and replace JQuery with
$('#type_selector input[type=radio]').on('change',function(){
$('#calendar').fullCalendar('rerenderEvents');});
buttons html:
<input type="radio" name="type_selector" class="btn btn-outline-primary" value="all" id="all" checked>
<input type="radio" name="type_selector" value="Dog"id="Dog">
<input type="radio" name="type_selector" value="Cat"id="Cat">

I have edited you snippet. Your onchange should look like this because you don't have the id #type_selector anymore in your radio.
$('input[type=radio][name=type_selector]').on('change',function(){
console.log("Event");
$('#calendar').fullCalendar('rerenderEvents');});
In your return statement you should use the :checked Option to get the current selected radio value.
$('input[type=radio][name=type_selector]:checked').val() === 'all' || event.category.indexOf($("input[type=radio][name=type_selector]:checked").val()) >= 0;
$(document).ready(function() {
// page is now ready, initialize the calendar..
$('#calendar').fullCalendar({
displayEventTime: false,
themeSystem: 'bootstrap4',
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: false, // Don't allow editing of events
handleWindowResize: true,
//console.log((events))
events : [{start: '7/17/2018',title:"Single Type", category:"Dog"},
{start: '7/19/2018',title:"Single Type", category:"Cat"},
{start: '7/23/2018',title:"Multiple Types", category:"Cat, Dog"},
{start: '7/26/2018',title:"Multiple Type", category:"Dog, Cat"},], /**/
eventRender: function(event, element,view) {
element.qtip({
content: event.description + '<br />',
style: {
classes: 'qtip-green',
},
position: {
corner: {
target: 'center',
tooltip: 'bottomMiddle'
}
}
})
var ret = $('input[type=radio][name=type_selector]:checked').val() === 'all' || event.category.indexOf($("input[type=radio][name=type_selector]:checked").val()) >= 0;
console.log($('input[type=radio][name=type_selector]:checked').val());
return ret;
},
});
$('input[type=radio][name=type_selector]').on('change',function(){
console.log("Event");
$('#calendar').fullCalendar('rerenderEvents');});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<input type="radio" name="type_selector" class="btn btn-outline-primary" value="all" id="all" checked> all
<input type="radio" name="type_selector" value="Dog" id="Dog">Dog
<input type="radio" name="type_selector" value="Cat"id="Cat">Cat
<div id="calendar"></div>
I hope this helps.

Is it possible to show Bootstrap popover of a button on the click on of other button?

I am trying to find out a way to show popovers manually instead on the click of the element.
Given below is a code snippet that is showing two buttons.
Click me: showing popover on its click. (this should not happen)
show click me popover: which is suppose to show the click me's popover.
Brief: Shown popover on button1 on the click of button2 but do not show the popover when button1 is clicked
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
placement: 'top',
html: true,
title: function() {
return 'User Info: ' + $(this).data('title') + ' ×'
},
content: function() {
return '<div class="media"><img src=".." class="media-object" alt="Sample Image"><div class="media-body"><h4 class="media-heading">' + $(this).data('name') + '</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
}
});
});
$(document).ready(function() {
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
});
.bs-example {
margin: 160px 10px 0;
}
.popover-title .close {
position: relative;
bottom: 3px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="bs-example">
<button type="button" data-title="Student" data-name="vikas bansal" class="btn btn-primary" data-toggle="popover" onclick="">Click Me</button>
<button>show click me popover</button>
</div>
</body>

As per mmgross answer, but make the trigger manual should work.
$(document).ready(function() {
$('#popoverbtn').popover({
trigger: 'manual',
placement: 'top',
html: true,
title: function() {
return 'User Info: ' + $(this).data('title') + ' ×'
},
content: function() {
return '<div class="media"><img src=".." class="media-object" alt="Sample Image"><div class="media-body"><h4 class="media-heading">' + $(this).data('name') + '</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
}
});
});
$(document).ready(function() {
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
});
.bs-example {
margin: 160px 10px 0;
}
.popover-title .close {
position: relative;
bottom: 3px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="bs-example">
<button type="button" id="popoverbtn" data-title="Student" data-name="vikas bansal" class="btn btn-primary">Click Me</button>
<button type="button"class="btn btn-primary"onclick="$('#popoverbtn').popover('toggle');">show click me popover</button>
</div>
</body>

You can trigger popover using $(elementSelector).popover('show').
You can use trigger:'manual' and this solves issue of popover opening on click me. Credits #Paul French
Also, I have reformatted your code. Its not good to have more than one $(document).ready()
$(document).ready(function() {
registerPopover();
registerEvents();
});
function registerEvents() {
$(document).on("click", ".popover .close", function() {
$("#btn1").popover('hide');
});
$("#btn2").on("click", function() {
$("#btn1").popover('show');
})
}
function registerPopover() {
var contentHTML = '<div class="media">' +
'<a href="#" class="pull-left">' +
'<img src=".." class="media-object" alt="Sample Image">' +
'</a>' +
'<div class="media-body">' +
'<h4 class="media-heading">' + $("#btn1").data('name') + '</h4>' +
'<p>Excellent Bootstrap popover! I really love it.</p>' +
'</div></div>';
var titleHTML = 'User Info: ' +
$(this).data('title') +
' ×'
$("#btn1").popover({
placement: 'top',
html: true,
trigger: 'manual',
title: titleHTML,
content: contentHTML
})
}
.bs-example {
margin: 160px 10px 0;
}
.popover-title .close {
position: relative;
bottom: 3px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="bs-example">
<button id="btn1" type="button" data-title="Student" data-name="vikas bansal" class="btn btn-primary" onclick="">Click Me</button>
<button id="btn2">show click me popover</button>
</div>
</body>

HTMLHint Validator for Codemirror

I was looking for html lint for Codemirror
I found HTMLHint for the ACE Editor, but later after searching Codemirror's Git Repository I found their lint's. I've played with CSSLint and JSHint before, but haven't found anything for Codemirror.
Does anyone know how to get an HTML Validator like HTMLHint to work with Codemirror?
var delay;
// Initialize CodeMirror editor
var editor = CodeMirror(document.getElementById('code'), {
mode: 'text/html',
tabMode: 'indent',
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
dragDrop : true,
lint: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
value: '<div class="container-fluid">\n <div class="row">\n <div class="col-lg-12">\n <div class="input-group">\n <input type="txt" class="form-control" data-action="genoutput" />\n <span class="input-group-btn" class="input-group-btn">\n <button class="btn btn-default btn-primary" type="button" data-action"gen">\n Generate!\n </button>\n </span>\n </div>\n </div>\n </div>\n</div>'
});
// Live preview
editor.on('change', function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
#import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
#import url("http://codemirror.net/lib/codemirror.css");
#import url("http://codemirror.net/addon/lint/lint.css");
#import url("http://codemirror.net/addon/fold/foldgutter.css");
.CodeMirror {
float: left;
width: 50%;
border: 1px solid black;
}
iframe {
width: 49%;
float: left;
height: 300px;
border: 1px solid black;
border-left: 0;
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/javascripts/code-completion.js"></script>
<script src="http://codemirror.net/javascripts/css-completion.js"></script>
<script src="http://codemirror.net/javascripts/html-completion.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="http://codemirror.net/addon/lint/lint.js"></script>
<script src="http://codemirror.net/addon/hint/xml-hint.js"></script>
<script src="http://codemirror.net/addon/hint/html-hint.js"></script>
<script src="http://codemirror.net/addon/lint/javascript-lint.js"></script>
<script src="http://codemirror.net/addon/lint/css-lint.js"></script>
<div id="code" name="code"></div>
<iframe id="preview"></iframe>

You'll have to write the glue code that connects HTMLHint's output to CodeMirror's lint addon. See the docs here, and use the other lint module wrappers as examples. (If you get something working, a pull request to put it into the distribution would be wondeful.)