We Keep Coding

Limit lines of contenteditable div with taggle.js

I'm trying to create div, that looks like multiline input and is able to insert tags using taggle.js library. Now I'm struggle with limiting max lines of tags (not characters).
<div id="divinput" tabIndex="1" class="custom mcustom textarea" contentEditable>
</div>
Very simple demo looks like this:
https://jsfiddle.net/t9sabcy3/1/
Forgive me for putting taggle.css into css section below my scripts (I separated them with long /* ------------------- */ comment), can't append to head this file.
I prepared demo to stop after fullfiling first line.
Problem shows in 3 cases.
First one is simply writing all the time and accepting tags -> although it should stop at first line, the next line shows up.
2nd and 3rd case are connected, if the last tag is very long (in 2nd case less than width of #divinput, in 3rd larger), tag appears in the 2nd line (and in the 3rd case even the 3rd line shows up).
I'm unable to use input (because tags are not working there) and I've tried some options, like preventDefault (as in the demo), setting to nowrap(doesn't work), triggering backspace keydown event (keydown doesn't catch that at all) and now I'm running out of ideas.
Any help is appreciated

CKEditor: How to insert anchor tag into document?

On the surface this should be easy:
CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].insertHtml( html );
...where html is a string of an actual HTML tag. Sadly, however, this doesn't work. When I click the button on my page that calls this code, nothing happens. It doesn't appear anywhere in the document at all, not even in Source mode.
I tried using insertElement:
var element = CKEDITOR.dom.element.createFromHtml( html );
CKEDITOR.instances.editor1.insertElement( element );
...and all it did was stick a little red flag in the document that was nothing; if I saved the document and reloaded it, it was gone.
The goal is to insert:
<a name="something"></a>
But the only thing that works is insertText() and that turns it into "safe" text, i.e. the < and > turn into lt; and gt;.
Help please? :)

I guess you used the code from the CKEDITOR Documentation (https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertElement)
You probably ran into an issue, which says, that empty anchors show
a little red flag in the editor
(https://dev.ckeditor.com/ticket/14689). Unfortunately there seems to
be no way of CKEDITOR from doing this.
Empty Links are removed from
CKEDITOR automatically. You can add data-cke-survive="true" so these
links aren't removed,
Regards

Consecutive mouseenter functions do not work

My code is the following
$("#hammock").mouseenter(function(){
$("#changingtext").replaceWith("<p>My text goes here</p>")
$("#changingtitle").replaceWith("<h2>Making The Site Easy to Use</h2>")
});
$("#pointer").mouseenter(function(){
$("#changingtext").replaceWith("<p>my text goes here</p>")
$("#changingtitle").replaceWith("<h2>Do Not Click The Wrong Button</h2>")
});
If I hover over #hammock it will work but if I then go to #pointer nothing changes. Though if reloading the page, #pointer will work if I mouseover it first.
How do I get it so that after hovering over #hammock I can hover over #pointer and it will change the text?

This:
$('#changingtext').replaceWith("<p>my text goes here</p>");
completely obliterates the element formerly known as "changingtext". Subsequently, your attempts to locate it and update the text will fail.
However, you can replace it with content that shares its "id":
$('#changingtext').replaceWith("<p id=changingtext>my text goes here</p>");
It's always a good idea to do some experimentation with your code, either by taking advantage of the browser debugger or by simply adding console.log() calls to your code. In this case that would have shown you that your "mouseenter" handlers are indeed both working.

When hiding text and then re showing it, it doesn't come back properly, it doesn't allocate room for the text appearing

So on load of document I hide all my description divs, then when hovering over I want the divs to display the text below, however its not allocating space for the text to be there. It gets stuck underneath my footer. However if I tried the invert aka, show it on start and hide it on hover it works perfectly as intended, making space when it reshows itself.
The main part of my code is here
http://www.hastebin.com/yilinademe.xml
http://gurucraft.co.uk/media.php If you look at the thumbnail lower on the page, when you hover over it, you see the title appear but the paragraph does not appear? Makes no sense. I'm assuming the paragraph is getting stuck under footer or something?

Use this :
$(document).ready(function() {
$(".view").hover(function() {
$(this).parent().children(".test").show();
});
$(".test").hide();
});
Update :
After looking at the code at your link I found that the the problem is due to one of the jQuery plugin used (isotope), To fix it use this :
$(document).ready(function() {
$(".view").hover(function() {
$(this).parent().children(".test").show();
$('.isotopeWrapper').isotope('reLayout');
});
$(".test").hide();
});

Javascript: Page reloads with eventListener click

In trying to understand javascript best practices, I'm attempting to recreate a piece of inline javascript by adding an event listener from an external javascript file.
The inline code works fine and looks like this:
<p id="inline" align="left">
This is a body paragraph which changes alignment
when a user clicks on a link below
</p>
<p>
Align Right
</p>
Concerning my problem, the important thing to note here is that return false; prevents the page from reloading (I'm not actually sure why, and wouldn't mind finding out, especially if it relates to the solution to my problem...). This is what I want. I don't need the page to reload to move the text to the right.
However, I have no idea what the best way to keep the page from reloading is when my javascript is in an external file. Here's what my first attempt looks like. I started with html that looks like this:
<p id="external" align="left">
This is a body paragraph which changes alignment
when a user clicks on a link below. It uses an
external .js file.
</p>
<p>
Align Right
</p>
And javascript that looks like this:
function alignListener () {
document.getElementById('external').setAttribute('align', 'right');
}
function installListeners () {
var aRight = document.getElementById('aRight');
aright.addEventListener('click', alignListener, false);
}
This almost works, but not at all how I would expect. When I click on the 'Align Right' link, the text briefly aligns right, but then, I follow the link to the current page, which resets the alignment back to the left.
I found a way to sort of fix that problem, by using <a href="#" ... instead of <a href="" .... While this doesn't reload the page (so the text stays aligned), it does take me to the top, which isn't really what I want. I'd like a solution similar to the return false; that works with the inline javascript. Is there a simple way to do this? Or am I doing it wrong completely?

I highly recommend the mozilla developer network for most of these types of answers. It's easy to read and will help you understand JavaScript and the DOM. (JavaScript is good!, DOM is awkward...)
Specifically, for events: https://developer.mozilla.org/en/DOM/event
In general, https://developer.mozilla.org/
There are a few ways to stop events, preventDefault(), stopPropagation(), return false;, or use a JavaScript framework as suggested above. jQuery is good, there are many many others out there (YUI, Dojo, MooTools, etc.), and they all endeavor to make your JavaScript more compatible with different browsers.

Use <button> instead of <a> tag.
That helped me.

You can use:
function event(e){
var e=window.event||e;
//do stuff
if(e.preventDefault){e.preventDefault()}else{e.returnValue=false}
}
Note that this doesn't need to go on a new function: .addEventListener("click",function(e){/*the above function*/})
Cross-compatible event listener:
if(element.addEventListener){
element.addEventListener(eventName, function, false);
}else{
element.attachEvent("on"+eventName, function);
}