how i can add a id in js on click event - javascript

Hey all i am new in java script so please help me out
i have a inputtag so what i want is when some body click on input tag so the #helptext will call automatically by js.
how i can achieve this below the demo code and desired result image....
DEMO
i want like this image :-
please check my updated DEMO bit of change in my markup i need like my current demo

try this :
$(document).ready(function() {
$("a").click(function(event) {
$(this).append(event.target.id);
});
});

$('input').focus(function() {
$('#helptext').show();
});

Here is the working JSFiddle
http://jsfiddle.net/tn98m/9/
$('#myInput').focus(function() {
$('#helptext').show();
});
$('#myInput').blur(function() {
$('#helptext').hide();
});

Related

check if the url is a hash link in Jquery

Hello i have following code, and i know this must be very simple but i cant figure out the issue.
jQuery(document).ready(function(){
jQuery("a").click(function() {
$('#loader').show();
}); });
The code above works perfect
what i want now is to show the #loader only if the link is not a hash link.
i tried this but dosent works
jQuery(document).ready(function(){
jQuery("a").click(function() {
if (window.location.hash ) {
$('#theloader_90').show();
}
}); });
any help is appreciated. Thankx

Run Javascript based on HTML class clicked

I have a tiny script I'm working on :)
The idea is if the span tag just contains autocompleteitem and not autocompleteitem autocompleteitemwithcontainer then it'll display the word hello. Right now it displays hello for both :(
Demo: https://jsfiddle.net/L33mqqtp/
$(document).ready(function() {
$(document).on('click','.autocompleteitem',function(){
$("div").show();
});
});
How do I update my code to do this?
Try this
'click','.autocompleteitem:not(.autocompleteitemwithcontainer)'
They both have .autocompleteitem class! To obtain what you want, use a different selector, which only applies to first one:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(".autocompleteitemwithcontainer")',function(){
$("div").show();
});
});
try this
$(document).ready(function() {
$("span").on('click', function(){
if(this.className == "autocompleteitem")
$("div").show();
});
});
Use the attribute selector syntax. That will allow you to directly match an entire attribute. This way you don't have to make a bunch of different combinations for each thing that you don't want to be selected.
Example selector: jQuery('[class="autocompleteitem"]')
Working Example:
$(document).ready(function() {
$(document).on('click','[class="autocompleteitem"]',function(){
$("div.containertoshow").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Should work<br>
Should not work
<div class="containertoshow" style="display:none;">That button does toggle me on/off!</div>

Add text to Froala text editor

I'm trying to programatically input html into Froala text editor. Based on their documentation this should work:
$(function(){
$('#editor').editable("setHTML", "<p>My custom paragraph.</p>", false);
});
But when I reload page I only get empty space, no errors. This is binded to textarea with id #editor. If I use this code:
$(function(){
$('#editor').editable({inlineMode : false});
});
... then everything is ok.
Does anyone knows how to programatically input html into this editor.
You should try this :
$('#editor').froalaEditor('html.set', 'My custom paragraph.');
See the detail about froala method at this reference:
https://www.froala.com/wysiwyg-editor/docs/methods#html.set
For the users you are looking for v3 answers, You can add text in v3 by:
var editor = new FroalaEditor('.selector', {}, function () {
// Call the method inside the initialized event.
editor.html.insert('<p>My custom paragraph.</p>');
})
Also for if you want to replace the whole content then you can use set method
var editor = new FroalaEditor('.selector', {}, function () {
// Call the method inside the initialized event.
editor.html.set('<p>My custom paragraph.</p>');
})
Use both. First you have to create the editor, then you can set the HTML
$(function(){
$('#editor').editable({inlineMode : false});
$('#editor').editable("setHTML", "<p>My custom paragraph.</p>", false);
});
With the latest version of Froala this works fine
$("#froalaEditor")[0]["data-froala.editor"].html.set('This should work fine');
To append a text use html.insert
$("#editor").froalaEditor('html.insert','<p>new text to append</p>');
After inserting the HTML use "Sync"
$("#editor").editable("insertHTML", "123456", true);
$("#editor").editable("sync");
Just for note.
in HTML
<div id="froala-editor">
<p>something</p>
</div>
and in javascript
$(function() {
$('div#froala-editor').froalaEditor({
pastePlain: true
})
});
Try this:
$('#editor').froalaEditor('html.set', 'My custom paragraph.');
$('#editor').froalaEditor('undo.saveStep', 'My custom paragraph.');
Reference: https://github.com/froala/wysiwyg-editor/issues/1578
If you are using it with React js, here is how i did it... FroalaEditorComponent has an event object in it which has initialized as an event. here is the code example:
initialized: function () {
this.html.set(formik?.values?.body); // not working for me
this.html.set(`<h1>Hello!</h1>`); // working fine
console.log(this);
},

Jquery show/hide hover or mouse enter issue

Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves
so far ive got this on my fiddle
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
Thanks any help would be great
You Should Read Basic of JavaScript
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
})//added
Updated Demo
You were missing a });
Also, you can simplify your code to:
$(document).ready(function () {
$(".image").mouseover(function () {
$(".hover").show();
}).mouseout(function () {
$(".hover").hide();
});
});
BTW, your HTML is broken. Fix that first.
Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
});
$(".image").mouseout(function(){
$(".hover").hide();
});
});
You can test it here: http://jsfiddle.net/5PR5E/3/

JQuery missing : after property ID

So I am working with some jquery code to do a simple hide of a p and a show of a p. I am simple adding a class called showp and showing it while making sure the others are not shown by hiding them first. But I keep getting an error missing : after property ID. Any help would be greatly appreciated.
$(document).ready({
$("#phone").click(function(){
$(".hide2").addClass(".hide2").hide("slow");
$(".hide3").addClass(".hide3").hide("slow");
$(".hide1").addClass("showp").show("slow");
});
});
Change this:
$(document).ready({
To this
$(document).ready(function(){
Try this:
$(document).ready(function() {
$("#phone").click(function() {
$(".hide2, .hide3").hide();
$(".hide1").show();
});
});
Your document ready is invalid.
$(document).ready(function() {
// stuff here.
});
Or better yet, a shorthand:
$(function() {
// stuff here.
});

Categories