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.)
Related
I'm building a males fashion site with a slider that have both images and a video in it. I'm using owl.carousel as a slider. The video is an plane HTML5 video tag.
I'm trying to start the video whith jquery like this: $('#video')[0].play();
It works perfectly when the video is outside the slider/carousel, but how do I start it inside?
Codepen link
I just look your codepen. After few tests, I saw two containers with class video-slider with a video tag with the same id "video" inside. (Check with debug console on the render view and the jquery code $(".video-slide").children()).
You can start the videoS with the jquery code $(".video-slide").children().each(function() { this.play(); }); but before you need to find where and why your blocks are duplicated.
I hope it helps
Created a snippet
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
I have created a sample HTML code.
Please check it.
set your CSS accordingly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<style class="cp-pen-styles">
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
</style>
<title></title>
<script type='text/javascript'>
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I wrote the javascript, which is working absolutely fine on my computer. It shows popup window with some text and image when you press on iv element. But with wordpress it does not work. On wordpress it adds the image, which should be in popup window, bellow the content of the website.
In developer tool it shows the error:
TypeError: undefined is not an object (evaluating '$j('[data-q_id="'+a+'"]').offset().top')
Here is the code
<body>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#clickMe1').click(function(event) {
var mytext = $('#literOne').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
</script>
<script type="text/javascript">
$(function() {
$('#clickMe2').click(function(event) {
var mytext = $('#literTwo').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
</script>
<style>
.pi_liter{
cursor: pointer;
}
</style>
<!-- begin planirovki -->
<div class="planirovki">
<div class="plan_img_main">
<div class="plan_img" id="plans">
<div class="wmain" id="ankor1">
<div class="pi_liter pl1" section="1" id="clickMe1">
Литер 1
<textarea cols="0" rows="0" id="literOne" style="display:none">Some hidden text display none <img src="http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg" />
</textarea>
</div>
<div class="pi_liter pl2" section="2" id="clickMe2">
Литер 2
<textarea cols="0" rows="0" id="literTwo" style="display:none">Some hidden text display none two <img src="http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg" />
</textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end planirovki -->
</div>
<!-- end container_main -->
<link rel="stylesheet" type="text/css" href="css/style_adapt.css">
</body>
CSS
.wmain{max-width:1180px;margin:0 auto;}
.planirovki{}
.planirovki .tm{padding-top:88px;}
.planirovki .tm span{padding-bottom:0;padding-top:15px;}
.plan_head{padding-bottom:67px;}
.plan_img{background:url(http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg) no-repeat center top;}
.plan_img .wmain{height:1144px;position:relative;}
.pi_liter{text-align:center;font-size:24px;color:#003d7f;text-transform:uppercase;font-family:'Kudrashov Plain:001.001', arial;width:171px;height:125px;background:url(http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/07/plan_plashka.png) no-repeat;line-height:42px;position:absolute;cursor:default;padding-top:44px;}
.pi_liter span{font-size:17px;}
.pl1{left:73px;top:11px;}
.pl2{left:821px;top:11px;}
.pi_liter{-webkit-transition:0.3s;-moz-transition:0.3s;-ms-transition:0.3s;-o-transition:0.3s;transition:0.3s;}
.pi_liter:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
related url is http://cu33132.tmweb.ru/domnasobornoy/#plan
Thank you in advance!
Hope you can help me
The following is a code taken form Owl Carousel's own site. I don't know why the callback functions(here afterMove) are not called! Could anybody get the afterMove function called? For me it's not just afterMove, but none of the callbacks works!
<html>
<head>
<!-- Owl Carousel -->
<link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.carousel.min.css">
<!-- Owl Default Theme -->
<link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.theme.default.min.css">
<style type="text/css">
#owl-demo .item {
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
border-radius: 3px;
text-align: center;
}
</style>
</head>
<body>
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>0</h1></div>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
</div>
<!-- jQuery -->
<script src="js/jquery/1.9.1/jquery.min.js"></script>
<!-- Owl Carousel -->
<script src="js/vendors/owl-carousel-2/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : true,
afterMove : afterMove
});
function afterMove(){
alert("Hey!");
}
});
</script>
</body>
</html>
you need to use new events with .on(), as per mentioned in its docs, as:
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : true
});
//register `change` event
owl.on('changed.owl.carousel', function(e) {
alert("changed");
});
Demo :: jsFiddle
I am not sure what to do after this:
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
var editor = CodeMirror.fromTextArea(myTextarea, {
mode: "text/html"
});
</script>
can someone help me?
does this points you to the right direction?
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="mode/javascript/javascript.js"></script>
<script src="addon/fold/foldcode.js"></script>
</head>
<body>
<form style="width:500px;">
<textarea id="code" name="code">
alert("HI");
//says HII
</textarea>
</form>
<script>
window.onload = function() {
window.editor = CodeMirror.fromTextArea(code, {
mode: "javascript",
lineNumbers: true,
lineWrapping: true,
foldGutter: {
rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.brace, CodeMirror.fold.comment)
},
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
};
</script>
</body>
</html>
First: you have to select the first element that matches the selector.
$("#editor") won't do it, it has to be $("#editor")[0]
Second: The following code is all you need to get it to work:
window.onload = function () {
var editor = CodeMirror.fromTextArea($("#editor")[0], {
lineNumbers: true,
lineWrapping: true,
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/javascript/javascript.js"></script>
</head>
<body>
<p>Type some javascript below</p>
<textarea id="editor"></textarea>
</body>
</html>
This is part of a mvc 3 razor view. I have a few editorfor boxes on the form and wanted to add a bit of jquery to enhance the robustness of the form. However I am getting an odd error and it does not make sense to me.
First lets have a look at the view.
<link type="text/css" rel="stylesheet" href="/content/jquery-ui-1.8.16.custom.css"/>
<link type="text/css" rel="stylesheet" href="/content/site9.css"/>
<link rel="stylesheet" href="#Url.Content("~/jqwidgets/styles/jqx.base.css")" type="text/css" />
<link rel="stylesheet" href="#Url.Content("~/jqwidgets/styles/jqx.darkblue.css")" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.10.1.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/jqxcore.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/jqxvalidator.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/globalization/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/jqxmaskedinput.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/jqxinput.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/gettheme.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#date_paid').datepicker();
$("#first_name").jqxInput({ placeHolder: "First Name", width: 200, height: 25, theme: 'darkblue' });
$("#last_name").jqxInput({ placeHolder: "Last Name", width: 200, height: 25, theme: 'darkblue' });
$("#middle_initial").jqxInput({ placeHolder: "Middle Initial", width: 150, height: 25, theme: 'darkblue' });
$("#zip_code").jqxmaskedinput({ mask: '#####-####', width: 150, height: 25, theme: 'darkblue' });
});
<div class="editor-label">
<label>First Name</label>
#Html.EditorFor(Function(model) model.first_name)
#Html.ValidationMessage("first_name", "*")
<label class="small_spacing">Middle Initial</label>
#Html.EditorFor(Function(model) model.middle_initial)
#Html.ValidationMessage("middle_initial", "*")
<label class="small_spacing">Last Name</label>
#Html.EditorFor(Function(model) model.last_name)
#Html.ValidationMessage("last_name", "*")
</div>
<div class="editor-label">
<label>City</label>
#Html.EditorFor(Function(model) model.city)
#Html.ValidationMessage("city", "*")
<label class="spacing">State</label>
#Html.DropDownListFor(Function(model) model.State, New SelectList(ViewBag.states), New With {.class = "StateDrop"})
#Html.ValidationMessageFor(Function(model)model.State)
<label class="small_spacing">Zip Code</label>
#Html.EditorFor(Function(model) model.zip_code)
#Html.ValidationMessage("zip_code", "*")
</div>
All this looks great however that jqxmaskedinput is throwing the below error.
Uncaught TypeError: Object [object Object] has no method 'jqxmaskedinput'
And the jqxInput boxes are working fine. If I remove the jqxInput boxes the jqxmaskedInput works fine. I thought this was possibly a compatibility issue between the 2 but on jqWidgets I found an example that uses both jqxInput and jqxmaskedInput so there is little probability that this is a compatibility issue. Being a total nooblet in this area I am lost as to what may be the cause for this.. Any suggestions are welcomed..
Javascript is case sensitive. The call to .jqxmaskedinput should have been .jqxMaskedInput.