Develop Reference

Adding some html to body tag with append but html's id not execute

I have added some html to body tag with append. But When I put runOCR(url) ,All function stop working.How to come up from this problem.
Here Is My Code:
function body(){
if (window.location.hostname.match(/www.w3schools.com/)){
var large = '<div class="form-group"> \
<input type="text" id="url" placeholder="Image URL" />\
<div id="ocr_status"> </div>\
<div>\
<label>Filed1:</label>\
<textarea id="text1" ></textarea>\
</div>\
</div>' ;
$('body').append(large);
$(".form-group").css({
position: "fixed",
top: "20px",
right: "180px",
'border-radius': '25px',
'border': '2px solid #73AD21',
'padding': '20px',
'background': 'blue',
"font-size": "1.5em",
"z-index": "1000",
});
function runOCR(url) {
Tesseract.recognize(url)
.then(function(result) {
document.getElementById("text1")
.innerHTML = result.text;
document.getElementById('text1').focus();
}).progress(function(result) {
document.getElementById("ocr_status")
.innerText = result["status"] + " (" +
(result["progress"] * 100) + "%)";
});
}
document.getElementById("url")
.addEventListener("input", function(e) {
var url = document.getElementById("url").value;
runOCR(url);

bootstrap textarea focus cursor not display in iPhone [duplicate]

I am trying to focus a textarea after a click on a another element. desktop browsers seems to be working fine but not the Iphone.
$('.reveal_below').on('change', function(e) {
e.preventDefault();
var item_id = $(this).attr('data-item-id');
if (this.checked) {
$('.hidden_below__' + item_id).css({
'margin-left': '0px',
display: 'block',
opacity: '0'
}).animate({
'margin-left': '15px',
opacity: '1'
},
250, function() {
console.log("-----------");
$("#x").focus();
})
} else {
$('.hidden_below__' + item_id).slideUp();
}
});
here is a little demo
it will focus a textarea on change event of the checkbox. That is the issue and how to can i solve this with the animation as in the demo?

You have to use touchstart event to fix this issue.
$(document).ready(function() {
$('button').on('click', function() {
$('#x').css({
'margin-top': '0px',
display: 'block',
opacity: '0'
}).animate({
'margin-top': '15px',
opacity: '1'
},
100
)
$('#x').trigger('touchstart'); //trigger touchstart
});
$('textarea').on('touchstart', function() {
$(this).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea id="x" style="width: 100%;height:6em;display: none" placeholder="Return notes..." cols="30" rows="10"></textarea>
<button type="button">focus textarea</button>

jquery delegate, on, live functions are not working on dynamic loaded DOM elements

JQuery's delegate and related methods are not working. I only want to give suggestions for some user using javascript. In the dropdown element or suggestions i want to trigger click event so that i can find the selected value. I here added example jsfiddle demo to provide a better demo. And better if provide the solution on how to select suggestions on down or up arrow key.
Markup:
<span class="twitter-typeahead" style="position: relative; display:inline-block; direction: ltr;">
<input id="query" type="text" class="form-control tt-query" placeholder="Search " autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: rgb(255, 255, 255);">
<span class="tt-dropdown-menu" style="position: absolute;top: 100%;left: 0px;z-index: 100; display: none; right: auto; max-height: 250px;overflow-y: auto;"">
<div class="tt-dataset-0" style="display: block;">
<span class="tt-suggestions" style="display: block;">
</span>
</div>
</span>
</span>
Script:
var _se = [
'grocery store', 'dairy store', 'gym', 'newspapers', 'fruits store', 'vegetable store', 'medical store', 'beer shop'
];
var _tflag = true;
$('#query').on('input propertychange paste focus', function(e) {
$('.tt-dropdown-menu , .tt-suggestions').css('display', 'block');
$('.tt-suggestions').html('');
for (i = 0; i < _se.length; i++) {
if (_se[i].indexOf($(this).val()) >= 0) {
$('.tt-suggestions').append("<div class='tt-suggestion' style='white-space: nowrap; cursor: pointer;' onclick='alert(this);'> <p style='white-space: normal;'>" + _se[i] + "</p> </div>");
}
}
$('.tt-suggestions').delegate('click', '.suggestion', function() {
alert('suggestion clicked');
});
/*$('.tt-suggestions').on('click','.suggestion',function(){
alert('suggestion clicked');
});*/
});
$('#query').on('blur', function(e) {
//_tflag = false;
$('.tt-dropdown-menu').css('display', 'none');
//$('.tt-suggestions').html('');
});

delegate has been deprecated See: jquery delegate
you can use :
$('.tt-suggestions').on('click',function(){
alert('suggestion clicked');
});
$('#query').on('blur', function(e){
//_tflag = false;
setTimeout(function(){
$('.tt-dropdown-menu').css('display','none');
},200);
//$('.tt-suggestions').html('');
});

Remove the blur event , hide the suggestions if you click outside of the input or suggestions box, change the class of the dynamically added element to suggestion
var _se = [
'grocery store', 'dairy store', 'gym', 'newspapers', 'fruits store', 'vegetable store', 'medical store', 'beer shop'
];
var _tflag = true;
$('#query').on('input propertychange paste focus', function(e) {
$('.tt-dropdown-menu , .tt-suggestions').css('display', 'block');
$('.tt-suggestions').html('');
for (i = 0; i < _se.length; i++) {
if (_se[i].indexOf($(this).val()) >= 0) {
$('.tt-suggestions').append("<div class='suggestion' style='white-space: nowrap; cursor: pointer;' onclick='alert(this);'> <p style='white-space: normal;'>" + _se[i] + "</p> </div>");
}
}
});
$('.tt-suggestions').on('click', '.suggestion', function() {
alert('suggestion clicked');
});
$('html').on('click', function(e) {
if (!$(e.target).closest('.tt-suggestions,#query').length) {
$('.tt-dropdown-menu').hide();//hide if its not the input or the suggestion list
}
});
demo: https://jsfiddle.net/zvxbsruu/2/
or:https://jsfiddle.net/zvxbsruu/3/

You can try the below by changing the selector with right class name ".tt-suggestion" as below,
$('.tt-suggestions').on('click','.tt-suggestion',function(){
alert('suggestion clicked');
});

Generic Javascript Code

I wrote a code for a hover functionality. Now, I am asking myself how to make this code generic in order to show different divs when hovering over a different link. The JavaScript code is as follows:
<script>
$(function() {
var moveLeft = 20;
var moveDown = 10;
$('a#trigger').hover(function(e) {
$('div#purpose').show();
}, function() {
$('div#purpose').hide();
});
$('a#trigger').mousemove(function(e) {
$("div#purpose").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
});
</script>
The div I call is as follows:
<!-- Purpose: Hover Popup -->
<div class= id="purpose">
<h3>Purpose</h3>
<p>
Test
</p>
</div>
Furthermore, I added some CSS style
<!-- Style for Hovering -->
<style type="text/css">
div#purpose {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
</style>
Could anybody tell me how to make this code generic in order to add further divs which are called from another link?

Create a javascript function and pass in the variables (e.g. link and div)
function foo($link, $div){
var moveLeft = 20;
var moveDown = 10;
$link.hover(function(e) {
$div.show();
}, function() {
$div.hide();
});
$link.mousemove(function(e) {
$div.css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
}
For your existing behaviour call the following for example:
foo($('a#trigger'), $("div#purpose"));
This will actually be slightly better for performance as you'll be using the same jQuery reference each time. However depending on how you're actually planning on using this, having a seperate function call each time might not be the best way.
For example if you wish to use this on dynamic data it wouldn't be sensible to make static calls to a function each time.

Make use of custom data-* attributes in your HTML, and use classes to target a generalized group of elements, ex:
<a class="trigger" data-target="purpose" />
And the JS
$(".trigger").hover(function(e) {
var elemToShow = $(this).data("target");
$("#" + elemToShow).show();
}, function() {
var elemToShow = $(this).data("target");
$("#" + elemToShow).show();
}).mousemove(function(e) {
var elemToShow = $(this).data("target");
$("#" + elemToShow).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});

You could build your trigger elements in a way that they hold the information about what element to show:
<a class="trigger" data-show="purpose">...</a>
Then you initialize them all at once like this:
$(function() {
$('.trigger').hover(function() {
var elementId = $(this).data('show');
$('#'+elementId).show();
}, function() {
var elementId = $(this).data('show');
$('#'+elementId).hide();
);
});

You don't need any JavaScript or jQuery at all for this--you can simply use CSS with the :hover pseudo-class.
.menu {
background-color: #eee;
}
.menuItem {
display: inline-block;
}
.menu .trigger + .purpose {
display: none;
position: absolute;
background-color: #eee;
}
.menu .trigger:hover + .purpose, .menu .trigger + .purpose:hover {
display: block;
}
<div class="menu">
<div class="menuItem">
Trigger 1
<div class="purpose">
<h3>Purpose 1</h3>
<p>
Test 1
</p>
</div>
</div>
<div class="menuItem">
Trigger 2
<div class="purpose">
<h3>Purpose 2</h3>
<p>
Test 2
</p>
</div>
</div>
<div class="menuItem">
Trigger 3
<div class="purpose">
<h3>Purpose 3</h3>
<p>
Test 3
</p>
</div>
</div>
<div class="menuItem">
Trigger 4
<div class="purpose">
<h3>Purpose 4</h3>
<p>
Test 4
</p>
</div>
</div>
</div>

Click on edit jquery

I am a newbie so my question is pretty simple and straight forward.
I have a simple html text. When I click on that html text, the text should change to input field with the value retained and when the user clicks outside the text box, the input text field now should change to html text.
<div class="myText"> Hellow World </div>
Can somebody do this in jquery/Meteor. I am actually building a meteor project

You can do that with the contenteditable attribute
<div class="myText" contenteditable="true"> Hellow World </div>
<!-- Your div is now editable -->

Updated DEMO jsFiddle
$(document).ready(function() {
$('.editable').on('click', function() {
var that = $(this);
if (that.find('input').length > 0) {
return;
}
var currentText = that.text();
var $input = $('<input>').val(currentText)
.css({
'position': 'absolute',
top: '0px',
left: '0px',
width: that.width(),
height: that.height(),
opacity: 0.9,
padding: '10px'
});
$(this).append($input);
// Handle outside click
$(document).click(function(event) {
if(!$(event.target).closest('.editable').length) {
if ($input.val()) {
that.text($input.val());
}
that.find('input').remove();
}
});
});
});
In my solution you need to add class="editable" to all editable divs.
You also need to set position: relative to these divs. May be you can update my code and edit the css:
.editable {
position: relative;
}
To correctly align the input inside the div, you need to remove the border or set the .css({}) of the input to left: -1px and top: -1px. The border actually pushes the input 1px left and 1px form the top.

Try this:
$(function() {
$('div.myText').on('click', function() {
var div = $(this);
var tb = div.find('input:text');//get textbox, if exist
if (tb.length) {//text box already exist
div.text(tb.val());//remove text box & put its current value as text to the div
} else {
tb = $('<input>').prop({
'type': 'text',
'value': div.text()//set text box value from div current text
});
div.empty().append(tb);//add new text box
tb.focus();//put text box on focus
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="myText">Hello world</div>
<div class="myText">This is second</div>

Try this:
$(document).click(function() {
$('.myText').html("Hello World");
});
$(".myText").click(function(event) {
$('.myText').html("<input type='text' id='test' value='Hello World'/>");
$('#test').focus();
event.stopPropagation();
});
FIDDLE.

To do it very easily and understandable you can also make two elements instead of changing.
Working fiddle: http://jsfiddle.net/45utpzhx/
It does an onClick event and onBlur.
html
<div>
<span class="myText">Hello World</span>
<input class="myInput" />
</div>
jQuery
$(document).ready(function() {
$(".myText").click(function() {
$(this).hide();
var t = $('.myText').html();
$('.myInput').val(t);
$('.myInput').show();
});
$(".myInput").blur(function() {
$(this).hide();
var t = $('.myInput').val();
$('.myText').html(t);
$('.myText').show();
});
});

Replace the clicked element with an input with value equal to the clicked element's text
$(document).on('click', '.myText', function() {
var that = $(this);
var text = that.text();
that.wrap('<div id="wrp" />');
$('#wrp').html('<input type="text" value="' + text + '" />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myText"> Hellow World </div>

You can try this solution :
$('.myText').click(function(){
var m = $(this).text();
$(this).html('');
$('<input/>',{
value : m
}).appendTo(this).focus();
});
$(document).on('blur','input',function(){
var m = $(this).val();
$(this).parent().find('input').remove().end().html(m);
});
working DEMO

$('#text').on('click', function() {
$("#text").hide();
if ($("#text").text()=="Add New text"){
$('#in_text').val("");
}else{
$('#in_text').val($("#text").text());
}
$("#in_text").show();
});
// Handle outside click
$(document).click(function(event) {
if(!$(event.target).closest('.editable').length) {
if($("#text").css('display') == 'none'){
$("#in_text").hide();
if ($("#in_text").val()=="" ){
$('#text').text("Add New text");
$('#text').addClass("asd");
}else{
$('#text').removeClass("asd");
$('#text').text($("#in_text").val());
}
$("#text").show();
}
}
});
#in_text{
display:none;
}
.editable{
width:50%;
}
.asd{
border-bottom : 1px dashed #333;
}
#text{
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable">
<div id="text" >Text in div</div>
<input type="text" placeholder="Add New Text" id="in_text"/></div>