Develop Reference

typed.js how to make text editable?

I want to make the text as on the home page https://laracasts.com/
use for this library
https://mattboldt.com/demos/typed-js/
Question
How do I make when I click on text the animation stops and I can write my text
here is my code
<h1>
<span class="header-title-accent" id="typed" contenteditable="true" spellcheck="false" > Front-end Developer</span>
</h1>
<script>
$('document').ready(function(){
var typed = new Typed('#typed', {
strings: ['First ^1000 sentence.', 'Second sentence.'],
backSpeed:50,
typeSpeed:60,
cursorChar: '|||',
});
});
</script>

You could create 2 listeners on the input field to start() & stop() the Typed instance on blur & focus respectively. See the docs for more info: https://mattboldt.github.io/typed.js/docs/#typed
Example:
$('#typed').on('focus', function(e) {
typed.stop();
});
// You may not need/want this one...
$('#typed').on('blur', function(e) {
typed.start();
});
Codepen

jQuery display property not changing but other properties are

I'm trying to make a text editable on clicking it. Below is the code I'm trying. When the title is clicked it shows an input box and button to save it.
<div class="block">
<div class="title">Title</div>
<div class="title-edit">
<input type="text" name="title" value="Title">
<button>Save</button>
</div>
</div>
I have changed other properties like color or changing the text of the elements and its working, but it is not applying the display property or .show()/.hide() function on the title or edit elements.
Below is my jQuery
$(function(){
$('.block').on('click', editTitle);
$('.title-edit button').on('click', saveTitle);
});
function saveTitle(){
var parent = $(this).closest('.block');
var title = $('.title', parent);
var edit = $('.title-edit', parent);
$(title).show();
$(edit).hide();
}
function editTitle(){
$('.title-edit', this).show();
$('.title', this).hide();
}
Here's the jsfiddle
https://jsfiddle.net/ywezpag7/
I've added
$(title).html('abcd');
to the end to show that other properties/functions are working, but just not the display.
For checking the html change on title element you will have to check the source through developer tools cause the title element is hidden.
Where am I going wrong?

Your problem is in the function saveTitle. The first line must stop the event propagation otherwise after this function the editTitle function is called.
The snippet:
$(function(){
$('.block').on('click', editTitle);
$('.title-edit button').on('click', saveTitle);
});
function saveTitle(e){
// this line
e.stopPropagation();
var parent = $(this).closest('.block');
var title = $('.title', parent);
var edit = $('.title-edit', parent);
title.show();
edit.hide();
title.text($('.title-edit input').val());
}
function editTitle(e){
$('.title-edit', this).show();
$('.title', this).hide();
}
.title-edit{
display:none
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="block">
<div class="title">Title</div>
<div class="title-edit">
<input type="text" name="title" value="Title">
<button>Save</button>
</div>
</div>

The issue as mentioned already is that your click events are fighting. In your code, the title-edit class is within the block, so when you click on the save button it triggers events for both clicks.
The easiest and, imho, cleanest way to resolve this is to switch your click event to be called on .title, and .title-edit button. You can also simplify the code beyond what you've got there.
$(function(){
$('.title').click(editTitle);
$('.title-edit button').click(saveTitle);
});
function saveTitle(){
$('.title').show();
$('.title-edit').hide();
$(title).html('abcd');
}
function editTitle(){
$('.title-edit').show();
$('.title').hide();
}
https://jsfiddle.net/ywezpag7/7/

I tried debug your code, and I had seen, that then you click to "Save" button, handled both functions, saveTitle() and editTitle(), and in that order. Therefore, the elements initially hidden, and then shown.

Keeping buttons in place when using .hide()

Not sure if this is because I'm new to meteor or if I am making an error in my syntax with my HTML or jQuery. Ideally I would like the whole grid to stay in place when a button is clicked. For example if you clicked the button in the middle of the grid there would be a empty spot where that button was before. My question is, why is it that when I click a button the button disappears but moves the whole grid and what do I do to fix this?
HTML:
<head>
<title>bubblepopper</title>
</head>
<body>
<center>{{> grid}}</center>
</body>
<template name ="grid">
<div id="container">
{{#each buttons}}
<button class="button" type="button"></button>
{{/each}}
</div>
</template>
JS:
Buttons = new Meteor.Collection("buttons");
if (Meteor.isClient) {
player = prompt("What is your name?")
Template.grid.buttons = function () {
}
Template.grid.buttons = function () {
var list = [];
for(var i=1; i<=64; i++){
list.push({value: i});
}
return list;
};
Template.grid.events({
'click .button': function(ev) {
$(ev.target).hide()
}
});
}
if (Meteor.isServer) {
}

.hide() works by adding the style display: none to the element. This removes the space used by the element in the rendered page.
If you want to make something invisible but keep its space on the page, use the visibility style:
$(ev.target).css('visibility', 'hidden');
To restore it, set the visibility to visible.

Kendo Editor + show("slide") is not editable in Firefox

Please refer to JSFiddle for a working demonstration of this problem.
In Firefox (latest version, 24), if I use jQuery UI's .show("slide", { direction: "right" }) to display a kendoEditor, the editor does not contain the value I set it with, and it is not editable. If I use the plain old .show() from jQuery, then everything works fine. It also works fine in Chrome 30 and IE 10. Why does .show("slide") break the editor in Firefox, and are there any workarounds for this problem?
Html for this example:
<button id="btn1" type="button">Button 1</button>
<button id="btn2" type="button">Button 2</button>
<div id="div">
<textarea data-role="editor" data-bind="value: TheValue"></textarea>
<button id="hide" type="button">Hide</button>
</div>
This is the JS code that does not work:
$(document).ready(function () {
var model;
function bindDiv(value) {
model = kendo.observable({ TheValue: value });
kendo.bind($('#div'), model);
$('#div').show("slide", { direction: "right" });
//$('#div').show();
}
$('#div').hide();
$('#btn1').click(function () { bindDiv('hello'); });
$('#btn2').click(function () { bindDiv('goodbye'); });
$('#hide').click(function () {
console.log(model.get('TheValue'));
$('#div').hide("slide", { direction: "right" });
//$('#div').hide();
});
});
Clicking btn1 should result in the editor being display with the text "hello", and then clicking "Hide" should display the edited text in the console.
If you replace those two "slide" lines with the plain commented-out versions, then it works fine (but doesn't look as cool).
Does anyone know why this doesn't work, or what I can do about it?
Update:
Before the animation plays, everything is OK - the body of the editor's iframe has the correct content and is marked with the contenteditable attribute. After the animation completes, the body of the iframe is wiped clean - no content, no attributes. I'm still trying to figure out why and what to do about it.

If you upgrade your KenoUI version to the latest Q2 2013 (version 2013.2.716) then the Kendo Editor has a new method called: refresh which
refresh
Reinitializes the editing area iframe. Should be used after
moving the editor in the DOM.
So it does exactly what you need, because the animation moves the editor iframe you need to call refresh when it finishes:
$('#div').show("slide", { direction: "right" }, function () {
var editor = $("#editor").data("kendoEditor");
editor.refresh();
});
To make this work you also need to change your view and give an id to you textarea:
<div id="div">
<textarea id="editor" data-role="editor" data-bind="value: TheValue">
</textarea>
</div>
Demo JSFiddle.

Ok, so, when slideeffect is occured, the iframe don't appear correctly...
The solution I find is to rebind the editor, in the end of slideeffect.
But need to destroy it in hiding, else, some conflicts come.
jsfiddle : http://jsfiddle.net/xzftW/18/
code :
$(document).ready(function () {
function bindDiv(value) {
kendo.bind($('#div'), '');
$('#div').show("slide", { direction: "right" }, function(){
resetme();
kendo.bind($('#div'), kendo.observable({ TheValue: value }));
$('#hide').click(function() {hideme() } );
});
}
$('#div').hide();
$('#btn1').click(function () { bindDiv('hello'); });
$('#btn2').click(function () { bindDiv('goodbye'); });
});
function hideme()
{
$('#div').hide("slide", { direction: "right" }, function(){
resetme();
});
}
function resetme()
{
$('#div').html('<textarea data-role="editor" data-bind="value: TheValue"></textarea><button id="hide" type="button">Hide</button>');
}

"slide" is a jquery-ui effect - as opposed to jQuery "basic" effects.
All jquery-ui effects work as follows : they wrap the selected nodes inside a node, animate the wrapper, then unwrap the content.
I don't know how Kendo reacts to this.
jQuery "basic" effects, on the other hand, leave the DOM be and modify the element's css porperties.
You can try to replace your effect with a call to .animate(), or, as others have suggested, try to rebind or refresh your Kendo observers.

CSS/Javascript Mouseover Popup box

I have table cell with a javascript/css content box that pops up upon mouseover.
There are 20 cells on the page. Everything is working correctly, in that when you mouseover the product link, you see the content box. However, I want to put a LINK inside the content box that the user can click on if they choose. So, the popup box has to stay up long enough for the user to mouseover to click the link.
Really, I want the OnMouseOver to stay open until either a second or two has gone by and/or the user OnMouseOver's another cell.
The problem I'm having is that the pop up box doesn't stay open (due to OnMouseOut) to click the link. If I turn OnMouseOut off (which I tried), then all the pop up boxes just stay open, so this doesn't do the job either.
My CSS looks like this:
<style type="text/css" title="">
.NameHighlights {position:relative; }
.NameHighlights div {display: none;}
.NameHighlightsHover {position:relative;}
.NameHighlightsHover div {display:block;position:absolute;width: 15em;top:1.3em;*top:20px;left:70px;z-index:1000;}
</style>
And the html:
<td>
<span class="NameHighlights" onMouseOver="javascript:this.className='NameHighlightsHover'" onMouseOut="javascript:this.className='NameHighlights'">
Product 1
<div>
# of Votes: 123<br>
% Liked<br>
<a href="product review link>See User reviews</a>
</div>
</span>
</td>
So, how can I make the pop up box stay open long enough to click on the link, but also make it disappear if another content box is activated?
Thanks in advance.

You have to improve your HTML markup for this task, need to get rid of inline event handlers:
<span class="NameHighlights">
Product 1
<div>
# of Votes: 123<br>
% Liked<br>
See User reviews
</div>
</span>
Then you have to bind your events to all .NameHighlights spans:
var span = document.querySelectorAll('.NameHighlights');
for (var i = span.length; i--;) {
(function () {
var t;
span[i].onmouseover = function () {
hideAll();
clearTimeout(t);
this.className = 'NameHighlightsHover';
};
span[i].onmouseout = function () {
var self = this;
t = setTimeout(function () {
self.className = 'NameHighlights';
}, 300);
};
})();
}
http://jsfiddle.net/3wyHJ/
So the idea is to use setTimeout method.
Notes: I used querySelectorAll which is not supported by IE7, if you need to support it then you can use any of implementations of the getElementsByClassName method.

In case anyone is looking for a jQuery version of the accepted answer:
var t;
$(function(){
$('span.NameHighlights').mouseover(
function(e){
hideAll();
clearTimeout(t);
$(this).attr('class', 'NameHighlightsHover');
}
).mouseout(
function(e){
t = setTimeout(function() {
//$(this).attr('class', 'NameHighlights');
hideAll();
}, 300);
}
);
});
function hideAll() {
$('span.NameHighlightsHover').each(function(index) {
console.log('insde hideAll');
$(this).attr('class', 'NameHighlights');
})
};
jsFiddle