Develop Reference

Appending text to div without overwriting existing childs in dojo

I have the following HTML template:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
<img src="images/someImage.png" class="someImage"
data-dojo-attach-event="onClick:_doSomething"/>
</div>
Now, in my accompanying js, I am evaluating some text which I want to place in this div before the image.
var stringToPlace = "This is the text for thisDiv";
this.thisDivAttachPoint.innerHTML = stringToPlace;
However, doing this results in:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
This is the text for thisDiv
</div>
That is, the image is getting lost.
What do I do so that the result is such that the text is "prepended" before the image. That is:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
This is the text for thisDiv
<img src="images/someImage.png" class="someImage"
data-dojo-attach-event="onClick:_doSomething"/>
</div>
I also tried:
domConstruct.place(stringToPlace, this.thisDivAttachPoint, "first");
But this gives error as:
parameter 1 is not of type 'Node'
I also tried:
this.thisDivAttachPoint.innerHTML = stringToPlace + this.thisDivAttachPoint.innerHTML;
After doing this, visually it is as expected i.e. text and then the image. However, the onClick:_doSomething on the image is not getting invoked. What am I missing? Inspecting the element shows that onClick:_doSomething is there. But click doesn't do anything. No errors.

This worked.
domConstruct.place(domConstruct.toDom(stringToPlace), this.thisDivAttachPoint, "first");
This results exactly in what I want. Issue was, we need to convert the String to node before using in place.
Dom-Construct Documentation

Is there a way to add alt text to an img tag using jquery?

There is an img tag being placed on a hidden portion of my wordpress site through some java script. Everytime I run a scan on my site looking for accessibility errors, this pulls up on every page of every site. I was wondering if there is a way to add an alt tag to it saying "this is empty" or anything really, since it's impossible to reach or see anyway.
I have tried looking at other alternatives, but I haven't had any luck so far, so any help would be greatly appreciated. The good thing is it seems to have a class name attached so hopefully that helps.
<div class="className">
<img>
<div>
</div>
</div

This is all you need:
$('img').attr('alt', 'Whatever you want');
or if you need it based on the class name in your example:
$('.className > img').attr('alt', 'Whatever you want');

Yes, you can always add attribute to an image using jquery, do it like this
$('img').attr('alt', 'This is very nice image');
If your image have a class than you can use
$('.class_name').attr('alt', 'This is very nice image');
If your image have a ID than you can use
$('#id_name').attr('alt', 'This is very nice image');

With this script you can set a default alt tag for all images that have a falsy alt tag (no alt tag, empty string, etc).
Important to note is that alt tags have a reason. People who use a text oriented browser (like blind people) use those alt tag so they at least know what kind of image there is. It is also used by some browsers when an image can't be loaded. So make sure all images without an alt tag (in your jQuery selection) are always hidden if you want a default alt tag otherwise it could be annoying.
$('img').filter(function() {
return !this.alt;
}).attr('alt', 'this is empty');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="className">
<img src="https://dummyimage.com/50x50/000/fff.png&text=test">
<img alt="" src="https://dummyimage.com/50x50/000/fff.png&text=test2">
<img alt="has alt" src="https://dummyimage.com/50x50/000/fff.png&text=test3">
</div>

Is there a way I could pick up the first image in a blogpost and put it as a header in a blog post?

So what I'm trying to do is to get the first image in a blogpost to look like a header for every blog post page....
This is what I have so far:
<b:if cond='data:post.firstImageUrl'>
<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
</b:if>
But then it's not really working. Can someone please help me out? Please see this for an example. I want the first image in my post to look like that header on the page....

I have had trouble with that too. I suppose you want to use the image as a background image.
I worked around that using some jquery.
Your aim is a little bit different than mine, so I would suggest you actually add a class to your first image (may want to do that manually, or use javascript), get the source, add it as a background image to your header and hide the image tag (don't do that if repetition is intended)
Markup would then be something like:
<header class="imgbg"></header>
<div class="post">
<h1>Title</h1>
<p>Text</p>
<img src="#" class="first-img">
</div>
and jquery:
function getimgsrc(){
$('.post').find('.first-img').each(function(n, image){
var image = $(image);
var thisurl = $(this).attr('src');
$('.imgbg').css('background-image', 'url(' + thisurl + ')');
$('.first-img').remove();
});
}
I built a codepen to illustrate this a bit better: http://codepen.io/bekreatief/pen/BaFnx

How to keep line breaks in CKEditor WYSIWYG editor

I have an HTML code as follows
<div class="editable" ...>
<div class="code">
This is an example.
This is a new line
</div>
</div>
In CSS, code has "word-wrap: pre" attribute, such that the text in the inner DIV will show two lines. I use CKEditor with DIV replacement method to edit it. However, it becomes
<div class="code">
This is an example.This is a new line
</div>
The text inside the HTML tag will become one line long, beginning and trailing spaces and new line are stripped. So in CKEditor, although I have specified the config.contentsCss, it still shows one line because CKEditor has merge those two lines into one (I checked this in Chrome "Inspect Element" in CKEditor's iframe editor). Therefore, I see the source code or saved HTML, two lines format is not preserved because they are only one line.
I've googled and tried the CKEditor HTML writer or addRules to restrict the indent format and new line in begin/close tags, however, those seems work on HTML tags, not the document text. Is there any other methods to preserve line breaks of text?

I found it.
// preserve newlines in source
config.protectedSource.push( /\n/g );
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource

$(document).on('paste', 'textarea', function (e) {
$(e.target).keyup(function (e) {
var inputText = $(e.target).val();
$(e.target).val(inputText.replace(/\n/g, '<br />'))
.unbind('keyup');
});
});

Use the <pre> HTML tag. Like this:
<div class="editable" ...>
<div class="code"><pre>
This is an example in a "pre".
This is a new line
</pre></div>
</div>
<div class="editable" ...>
<div class="code">
This is an example NOT in a "pre".
Therefore this is NOT a new line
</div>
</div>
Or you can put a <br/> tag in between your lines. Its the ssame as hitting enter.

In my particular case, it was an extra tag, univis, that I needed to give similar semantics (i.e., leave indentation and inebreaks alone), and what we ended up doing was:
CKEDITOR.dtd.$block.univis=1;
CKEDITOR.dtd.$cdata.univis=1;
CKEDITOR.dtd.univis=CKEDITOR.dtd.script;
But that looks like it might or might not be extensible to classes.

I got some Craft sites running and I don't want to paste the config file everywhere. For everyone else still having the problem: Just use redactor. Install and replace the field type. Correct everything once and you're done.

How to store a HTML snippet and insert it later in the document?

Is there a way to store a HTML snippet in a variable using Javascript or jQuery like this? (obviously it's a non-working an example)
var mysnippet = << EOF
<div class="myclass">
<div class="anotherclass">
Some dummy text
</div>
</div>
EOF
And then insert it in the document using jQuery:
mysnippet.append($('#someelement'));
EDIT:
Please, read this before answering of commenting: What I have is a raw HTML snippet inside my JS file, and I need to store it in a Javascript variable using something like that EOF construction. I need to avoid putting it between quotation marks.
If it's not possible using Javascript and/or jQuery, then the question has no solution.

Just get the HTML code of the div you want by var content = $('#somediv').html(); and then append it to some div later on ! $('#otherdiv').append(content);
$().html(); delivers the HTML Content of that div. documentation: http://api.jquery.com/html/
$().append(<content>); appends the Content to a special div. documentatoin: http://api.jquery.com/append/

You could use javascript templates like ejs and haml-coffee.

You could write:
var mysnippet = "<div class='myclass'>"+
"<div class='anotherclass'>"+
"Some dummy text"+
"</div>"+
"</div>";
and then insert is using the append function (which takes the snippet as argument).

Yes. Fiddle example
JavaScript
var html = '<b>Bold</b>'
$('.anotherclass').append(html);
HTML
<div class="myclass">
<div class="anotherclass">
Some dummy text
</div>
</div>

Unfortunately nothing like << EOF is available. Here's one solution:
$el = $('<div />')
.addClass('myClass')
.append(
$('<div />')
.addClass('anotherclass')
.text('Foo Bar')
);

Thinking on the same issue I have found this discussion. What I have in mind is to put a hidden textarea, containing the html, and then retrieving the html from there.
Thus there will be no conflicts with doubled DOM ids, since textarea content isn't rendered as html.

For those who come across this as I have...
You may wish to use the new
<template>
tag in HTML5.
It still doesn't store the HTML in the JavaScript unfortunately :(