Add new line/blank div/padding in VueJS h (hyperscript) functions - javascript

I'm working on a project using VueJS's h() functions and all the content I need to include needs to be inside one of these. I'm trying to add content to a div by appending additional h('divs') to it, but need a way to space them (and the text inside them) out.
I've tried using '\n' and '< / br>', both with and without quotes, to add new lines, but this doesn't work - with quotes it gets included as text, and without it says there's an unexpected '<'. I've also tried to add padding inside style tags, following the example in the documentation:
h('div', {style: { margin: 100, padding:100 } })
but this doesn't do anything. How can I space out the h() function divs and the text inside?

You can add CSS styles to the style property of the h() function to control the spacing of the divs and the text inside them. To add padding, you can use the padding property with a CSS length value in pixels, ems, or any other valid CSS unit.
Here's an example:
h('div', {
style: {
padding: '20px'
}
}, [
h('div', 'This is the first div'),
h('div', 'This is the second div'),
h('div', 'This is the third div')
])
This will add 20 pixels of padding to each of the divs inside the main div, spacing them out vertically. You can adjust the padding value as needed to control the amount of space between the divs.
Hope this is helpful.

Related

How do I set some attributes e,g white space = nowrap to the url extracted from content before asigning it to span textContent

Any logic of setting attributes to a substring in javascript.
if (spanArr.length != 0) {
var span = document.createElement('span');
var content = spanArr.join(" ");
var url = content.match(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+\$,\w]+#)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+\$,\w]+#)[A-Za-z0-9.-]+)((?:\/[+~%\/.\w-]*)?\??(?:[-+=&;%#.\w])#?(?:[\w]))?)/);
span.textContent = ?;
divContent.appendChild(span);
}
How do I set some attributes e,g white space = nowrap to the url extracted from content before asigning it to span textContent.
It seems you have a few concepts mixed up here.
white-space: nowrap is a CSS statement that, when applied to an HTML element, causes the text and any inline level elements inside that element to not wrap to the next line when the edge of the element is reached. This only applies to block level elements that have a width or otherwise do not have the option to expand to accomodate the content.
CSS attributes like white-space can only be applied to DOM Elements, not to strings (like your url). The url, in this case, would be the text content (in fact, the textContent) of the span element. The white-space would be a CSS attribute of the element.
CSS attributes can be applied to DOM elements in 3 ways: through CSS declarations in a <style> tag or external CSS file; though the HTML style attribute, or through direct manipulation in JavaScript of the related style property of a DOM HTMLElement.
Since you are working in JavaScript, you want to do the latter here. If I understand correctly what you are trying to do, the following code should get you what you want:
span.textContent = url;
span.style.whiteSpace = 'nowrap';
divContent.appendChild(span);
Note: in JavaScript the CSS properties of the style property are written in camelCase (with capitals in the middle of words) instead of kebab-case (with hyphens between words), because JavaScript would interpret the - character as an arithmetic operator if you were to use that.
Another note: the white-space applied to a span will probably not do a lot, since a span is not a block level element. If your goal is to make the spans not wrap within the divContent element, you should add the styling to that element instead:
divContent.style.whiteSpace = 'nowrap';

How to set default Style at current position in CKEditor..?

How to set the some default CKEditor styles(Presented in Styles combo box) at the current position through javascript.?
For example if the cursor in one position, i have to set the 'Marker: Yellow' style for that position after typing any character it should change to Yellow. Is it Possible?
I'm not sure if I understood you, but isn't you just want to exec command applying (or removing) e.g. bold style? If yes you can do this by:
editor.execCommand('bold');
If you've got empty selection (caret) placed somewhere in the text, before executing this command, editor will create empty <strong>^</strong> element, so when user starts to type, the text will be bolded.
Update
Styles are applied in a little bit different way.
var style = new CKEDITOR.style(
{ name: 'Blue Title', element: 'h3', styles: { 'color': 'Blue' } });
style.apply(editor.document);
That will apply Blue Title style to the current selection. You can find other styles definitions in _source/plugins/styles/styles/default.js (http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/styles/styles/default.js) or you can get them in the code:
editor.getStylesSet(function(stylesDefinitions) {
// stylesDefinitions is an array
});

Span element overflows when added dynamically

I am adding a span elements dynamically from input field into a div. When they reached the right end of the div. It overflows in the same line.
However, when the number of span elements are pre-defined into a div element then they are not overflowed and they comes down and starts from a new line. I want this way.
I analysed both the element structure in firebug and both look same.
Here the fiddle for demonstration - FIDDLE
Please let me know for any mistake I am doing and if there is any workaround.
Since span is an inline element, it's affected by whitespace in the HTML.
In your predefined example, you have a line break between each span.
To make your JavaScript version work, you need to add some whitespace.
Add either a line break:
$("#box1").append("<span>"+val+"</span>\r\n");
or just a space:
$("#box1").append("<span>"+val+"</span> ");
The choices are equivalent, but your intention may be clearer with a line break.
How about adding CSS
.span{
display: inline-block
}

Google Maps - how to make a div expand to contain its contents

I'm trying to create a custom overlay that basically just contains a
HTML element (a div in this case) with text in it. The overlay gets
rendered ok but the text is multiline, where I would like it to be one line. Looking into the DOM with Firebug I can see that the computed width for the div parent is 44px,
which is why it can't expand and render the text in one line. Is there any way I can correct this without knowing in advance what the required width for the div is?
you can set white-space property of your div to nowrap
div.x { white-space:nowrap; }

What characters will a TextArea wrap at, other than spaces?

I'm working on the latest version of my plugin, Textarea Line Counter (http://mostthingsweb.com/?p=84). To make it even more accurate, I want to identify regions of text that wrap because they are too large to fit on the line (like a sequence of repeated characters).
I'm assuming that browsers only wrap text at spaces. Are there any other characters that lines can be wrapped at? Thank you,
Looks like it depends on the browser, my Opera wraps also on e.g. + % ? $ / ( [ { } \ ° ! ¿
Safari/Chrome on ¿ ? too
(guess there are lots more)
Nice idea for a plugin. Fighting the accuracy issues is going to be a challenge.
There's not a universal catch all for the way textarea is going to handle a string (other than line breaks at spaces), or using word-wrap.
IE produced a break with . , () {} ?, but not with / * = +
In this example, textarea seems to have that "special" feeling like a td
Based on all your advice, I have created a solution. It is rather large, and in fact I think I will make it into a separate plugin, as well as including it in my Textarea Line Counter. It works like this:
Create a div to act as a container, and set the font to something monospaced (i.e. every character is the same width)
Create a span within the container, and place a single letter.
Take the width measurement of the span (which will be the width of the letter, once margins, padding, and some other CSS attributes are cloned)
Create another div within the container and clone its CSS attributes. Set it's width to be two times the width of the letter found in step 3, and record its height.
To test if a character will cause a wrap, set the text of the div to: A[some character]A. [some character] is a character you are trying to test.
Test the height of the div. If it is larger than the height found in step 4, the text has wrapped.
I'm looking forward to releasing this plugin. Thank you again for all your advice.
some browsers will break inside words if the word is longer than the col width,
otherwise they break on spaces.
I notice some browsers set this by default- you can, too in most bowsers with:
textarea{word-wrap: break-word}
you can be sure it is not set by using textarea{word-wrap: normal}

Categories

Resources