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
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
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>
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);
},
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/
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.
});