I'm using the latest version of CodeMirror (4.12). I set the style of .CodeMirror height:auto; and gave viewportMargin a value of Infinity (like Autoresize Demo).
Everything went fine until I decided to customize the line-height: if I set a few lines as the initial value or if I paste a large block of text, there's a margin at the bottom and the caret is not corresponding to the code. If I change the value by hitting a key or if I call cm.refresh();, it goes back to normal and will never create another bad rendering (until the page is reloaded).
The thing is, CodeMirror doesn't seem to provide an oncomplete or on-finish-rendering event. For now, the only way that I found is to add a few lines to the function setDocumentHeight(cm, measure) which seems to be the last function called when I paste something into an empty editor. Here's my code:
First, I created an object:
CodeMirror.prototype = {
editorPM :
{
firstSetValue : false,
firstPaste : false,
isPasting : false
},
...
Then I created a paste event
editor.getWrapperElement().addEventListener("paste", function(e)
{
editor.editorPM.isPasting = true;
});
Then I added a few lines to setDocumentHeight()
function setDocumentHeight(cm, measure) {
cm.display.sizer.style.minHeight = measure.docHeight + "px";
var total = measure.docHeight + cm.display.barHeight;
cm.display.heightForcer.style.top = total + "px";
cm.display.gutters.style.height =
Math.max(total + scrollGap(cm), measure.clientHeight) + "px";
var ePM = cm.editorPM;
if (!ePM.firstSetValue)
{
ePM.firstSetValue = true;
setTimeout(function(){
cm.refresh();
}, 300);
}
if (ePM.isPasting)
{
ePM.isPasting = false;
if (!ePM.firstPaste)
{
ePM.firstPaste = true;
setTimeout(function(){
cm.refresh();
}, 300);
}
}
}
So finally, I went back to a normal line-height because I hate having to put a timeout. Still, it would be very nice to have a solution to that problem. It seems like a bug to me! And I don't like the normal line-height to code, it's too tight.
Change the CSS of your line-height in the .CodeMirror class:
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: SourceCodePro, monospace, "Lucida Console";
font-weight: 200;
width: 100%;
height: auto;
line-height:3; // <---- Change Height Here
}
Related
I have some code to slide out a menu which works:
Vue.set(this.filterStyles, filterIndex, {
display: "block",
height: "auto",
});
let filterValuesElHeight;
Vue.nextTick().then(() => {
let filterValuesEl = document.getElementById('parent-filter-values-' + filterIndex);
filterValuesElHeight = filterValuesEl.clientHeight;
Vue.set(this.filterStyles, filterIndex, {
height: 0,
display: "block"
});
return Vue.nextTick();
}).then(() => {
setTimeout(() => {
Vue.set(this.filterStyles, filterIndex, {
height: filterValuesElHeight + "px",
display: "block"
});
}, 10);
});
Initially the menu is setup with the following rules:
display: none;
height: 0;
transition: all 500ms;
The first Vue.set sets the height to auto so a accurate height can be taken with filterValuesEl.clientHeight
On the next tick the height is returned back to 0 then finally on the last tick it's set to its natural height.
However, it seems Vue.nextTick() isn't enough although I noticed adding an extremely small timeout seems to do the job. This works but feels quite messy. I was hoping someone might have a better solution?
I'm guessing that you're using filterStyles in a template, something like: :style="filterStyles". If that's the case, then
Vue.set(this.filterStyles, filterIndex, {
display: "block",
height: "auto",
});
won't actually set the height to auto immediately. Rather, it updates the component's data, and that update will be reflected in the DOM after a nextTick(). So, in effect, your code is off by one tick.
Stacking a series of nextTick calls one after the other is probably a bad practice, however. If, for example, the component is removed during the series, you'll be left with a dangling reference.
You could avoid all those ticks by just setting the style directly in order to measure its natural height. If the element has ref="filter" attribute, for example, then something like:
this.$refs.filter.style.height = "auto";
filterValuesElHeight = this.$refs.filter.clientHeight;
this.$refs.filter.style.height = "0";
You may have to work out conflicts between the template and the inline JavaScript (I can't tell because you don't show your template.), but that should get you started.
(This is a follow-up on my previous question if anybody is interested in the background story for entertainment purposes. It will probably not help you understand this question.)
Here are two elements <aside> and <main> who have got their width and height via JavaScript so that their combined width is the width of your screen (note that their display is inline-block). If you run this code in your web browser (a maximized browser so that the width of your browser equals the width of your screen) you might note that the body surprisingly does not properly fit the elements:
<!DOCTYPE html>
<html>
<body>
<aside></aside><!-- comment to remove inline-block whitespace
--><main></main>
<script>
var h = screen.height/100;
var w = screen.width/100;
var e = document.getElementsByTagName("aside")[0].style;
e.display = "inline-block";
e.backgroundColor = "lightblue";
e.width = 14*w + "px";
e.height = 69*h + "px";
e.marginRight = 0.5*w + "px";
e = document.getElementsByTagName("main")[0].style;
e.display = "inline-block";
e.backgroundColor = "green";
e.width = 85.5*w + "px";
e.height = 69*h + "px";
e = document.getElementsByTagName("body")[0].style;
e.margin = e.padding = "0";
e.backgroundColor = "black";
</script>
</body>
</html>
If you however give the JavaScript a delay, the elements are rendered properly. This suggests that the body somehow "needs time" to figure out its correct width:
<script>
setTimeout(function() {
[...]
}, 200);
</script>
It is also possible to give the body the specified width of screen.width instead of introducing the delay, by adding the following line. This supports the previous guess that the body does not immediately know its correct width (unless specified):
<script>
[...]
e.width = 100*w + "px";
</script>
Even though I have taken the freedom to throw wild guesses to explain this, I do not actually have a clue to what is going on.
Why are the elements not placed properly in the first place, and why do these two solutions work?
(Note: It is also possible to fix this by setting the whitespace of the body to nowrap with e.whiteSpace = "nowrap";, but I suspect this does not do the same thing as the other two. Instead of creating space for the elements inside the body, this simply forces the elements to be next to each other even though there is not enough room in the body.)
You should wait for the DOM to be available before running your code, see here: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it. That is possibly why setTimeout works. Also you should assign seperate variable names for your different elements.
// self executing function before closing body tag
(function() {
// your code here
// the DOM will be available here
})();
Is there a reason you are using Javascript and not CSS to accomplish this task? I suggest giving your elements css ids ie id="aside", then set your css styles:
html,body {
width: 100%;
height: 100%;
}
#aside {
display:inline-block;
position: relative;
float: left;
width: 14%;
height: 69%;
background: blue;
}
#main {
display:inline-block;
position: relative;
float: left;
width: 86%;
height: 31%;
background: azure;
}
I want to change the order of elements in the DOM based on different browser sizes.
I've looked into using intention.js but feel that it might be overkill for what I need (it depends on underscore.js).
So, i'm considering using jQuery's .resize(), but want to know if you think something like the following would be acceptable, and in line with best practices...
var layout = 'desktop';
$( window ).resize(function() {
var ww = $( window ).width();
if(ww<=767 && layout !== 'mobile'){
layout = 'mobile';
// Do something here
}else if((ww>767 && ww<=1023) && layout !== 'tablet'){
layout = 'tablet';
// Do something here
}else if(ww>1023 && layout !== 'desktop'){
layout = 'desktop';
// Do something here
}
}).trigger('resize');
I'm storing the current layout in the layout variable so as to only trigger the functions when the window enters the next breakpoint.
Media queries are generally preferred. However, if I am in a situation where I am in a single page application that has a lot of manipulation during runtime, I will use onresize() instead. Javascript gives you a bit more freedom to work with dynamically setting breakpoints (especially if you are moving elements around inside the DOM tree with stuff like append()). The setup you have is pretty close to the one I use:
function setWidthBreakpoints(windowWidth) {
if (windowWidth >= 1200) {
newWinWidth = 'lg';
} else if (windowWidth >= 992) {
newWinWidth = 'md';
} else if (windowWidth >= 768) {
newWinWidth = 'sm';
} else {
newWinWidth = 'xs';
}
}
window.onresize = function () {
setWidthBreakpoints($(this).width());
if (newWinWidth !== winWidth) {
onSizeChange();
winWidth = newWinWidth;
}
};
function onSizeChange() {
// do some size changing events here.
}
The one thing that you have not included that is considered best practice is a debouncing function, such as the one below provided by Paul Irish, which prevents repeated firing of the resize event in a browser window:
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// usage:
$(window).smartresize(function(){
// code that takes it easy...
});
So incorporate a debouncer into your resize function and you should be golden.
In the practice is better to use Media Queries
Try this, I'm in a hurry atm and will refactor later.
SCSS:
body, html, .wrapper { width: 100%; height: 100% }
.sidebar { width: 20%; height: 500px; float: left;
&.mobile { display: none } }
.content { float: right; width: 80% }
.red { background-color: red }
.blue { background-color: blue }
.green { background-color: green }
#media all and (max-width: 700px) {
.content { width: 100%; float: left }
.sidebar { display: none
&.mobile { display: block; width: 100% }
}
}
HAML
.wrapper
.sidebar.blue
.content.red
.content.green
.sidebar.mobile.blue
On 700 px page breaks, sidebar disappears and mobile sidebar appears.
This can be much more elegant but you get the picture.
Only possible downside to this approach is duplication of sidebar.
That's it, no JS.
Ok, the reason for my original question was because I couldn't find a way to move a left sidebar (which appears first in the HTML) to appear after the content on mobiles.
Despite the comments, I still can't see how using media queries and position or display alone would reliably solve the problem (perhaps someone can give an example?).
But, it did lead me to investigate the flexbox model - display: flex, and so I have ended up using that, and specifically flex's order property to re-arrange the order of the sidebars and content area.
Good guide here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm working on an assignment for a class where I have to make an external JavaScript file that checks a page's current width and changes the linked CSS style based on it, and have that occur whenever the page loads or is resized. Normally, we are given an example to base our assignment off of, but that was not the case this time around.
Essentially we are to use an if...then statement to change the style. I have no clue what the appropriate statements would be for the function. I've looked around and the potential solutions are either too advanced for the class or don't go over what I need. As far as I know I cannot use jQuery or CSS queries.
If someone could give me an example of how I would write this out, I would be very appreciative.
Try this code
html is
<div id="resize" style="background:red; height: 100px; width: 100px;"></div>
javascript is
var resize = document.getElementById('resize');
window.onresize=function(){
if(window.innerWidth <= 500) {
resize.style = "background:blue; height: 100px; width: 100px;";
}
else {
resize.style = "background:red; height: 100px; width: 100px;";
}
};
i have create a sample for you look at here TESTRESIZE
try resizing your browser and let me know if it is what you are looking for.
//Use This//
function adjustStyle() {
var width = 0;
// get the width.. more cross-browser issues
if (window.innerHeight) {
width = window.innerWidth;
} else if (document.documentElement && document.documentElement.clientHeight) {
width = document.documentElement.clientWidth;
} else if (document.body) {
width = document.body.clientWidth;
}
// now we should have it
if (width < 799) {
document.getElementById("CSS").setAttribute("href", "http://carrasquilla.faculty.asu.edu/GIT237/smallStyle.css");
} else {
document.getElementById("CSS").setAttribute("href", "http://carrasquilla.faculty.asu.edu/GIT237/largeStyle.css");
}
}
// now call it when the window is resized.
window.onresize = function () {
adjustStyle();
};
window.onload = function () {
adjustStyle();
};
Use CSS and media queries. It's bad idea to change style by js.
I've create an affect that runs when a row of icons are visible on screen.
The animation is essentially changing the padding of a div, giving the effect of a pulse from the icons.
It works perfectly in every browser except Chrome (surprisingly!). Chrome for some reason wobbles the text under each icon while it animates. I used padding in the hopes that it would only affect the content within the div (using the box-sizing: border-box model).
I did write a fix for it which works in Chrome but then breaks the layout in Safari.
So I'm not sure if I can fix the wobble in Chrome or if I can alter my fix to help Safari out.
Here's the link to the page as it is at the moment, without the jQuery fix. It's in the JS file but commented out.
Here's the code that runs the animation, the fix is in here, just commented out:
$('.wrapper').scroll(function(e) {
var tTop = target.offset().top;
var tTopOffset = tTop+target.height();
if( tTop < height ) {
if (flag) {
targetDiv.animate({
opacity: 1
}, 500);
targetDiv.each(function(i){
// FIX breaks on safari, but fixes issue in Chrome...
// targetDiv.css('height', targetDivHeight);
$(this).delay((i++) * 900).animate({
padding: '0em'
}, 400);
$(this).animate({
padding: '0.5em'
}, 400);
});
flag = false
}
} else {
targetDiv.css('opacity', '0');
flag = true;
}
});
I think it is because you didn't specified the width and height of the element you are trying to animate. border-box doesn't just ignore padding value, it needs width and height value that includes padding and border. Using transform:scale could be nice either as commented above, but IMHO it is a bit tricky to achieve with .animate() and has less browser support.
Try this in console and try modify your code. I tried and it works well in the latest Safari and Chrome. (should use .outerHeight() to get correct value, since you use padding value to animate)
$ = jQuery;
var targetDiv = $('.icon-img-div');
var targetDivHeight = $('.icon-img-div').outerHeight();
var targetDivWidth = $('.icon-img-div').outerWidth();
targetDiv.each(function (i) {
// this breaks on safari, but fixes issue in Chrome...
targetDiv.css({
height: targetDivHeight,
width: targetDivWidth
});
$(this).delay((i++) * 900).animate({
padding: '0em'
}, 400);
$(this).animate({
padding: '0.5em'
}, 400);
});