Adding new line in jQuery tooltip plugin - javascript

I am now using jQuery tooltip plugin to create some quick reminders for users during data input. Here is the jQuery tooltip I am using:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I have encountered a problem.
How can I add a new line in the body of the tooltip?
I have tried the following codes, but still cannot get it done.
?
?
So could anyone help me on this issue?
Thanks~

I think
<br/>
should do the trick.
For example:
?

Do you mean a line break? I'd recommend using a CSS rule to add a margin to the anchor tag. Else insert some <br />'s between the 2 a tags.

You could "encode" your line breaks and use the bodyHandler attribute, like:
The documentation shows examples of linking to a #id in the href, which will display the content of that #id. So place a element with your and #id somewhere on your page, and specifiy that as the tooltip, like:
<a id="yourLink" href="Hello#world">Some text</a>
$("#yourLink").tooltip({
bodyHandler: function() {
var href_value = $(this).attr("href");
return href_value.replace("#","<br/>");
}
});

I'm using it this way (jQuery 1.9 and standard tooltip function):
$(".myClass").tooltip({
content: function() {
return $(this).attr('title');
}
})
And then in the title you can use HTML
Example:
<span title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>

You can't just paste the HTML as string, as other people said you have to use content.

Related

Make TextArea Disabled in JS

I want to make Textarea Disable (Grayed out) in my JS Method
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
}
The above code is not working for this.
You should use prop instead of attr:
$('input[id$="txtareaID"]').prop('disabled', true);
jQuery docs
If your selector is correct, than you need only to change attr to prop:
function myfun(status){
if(status === 'Yes'){ // more suitable for comparing
$('input[id$="txtareaID"]').prop('disabled',true);
}
}
Related post:
Disable/enable an input with jQuery?
Considering textarea as
<textarea id='txt'>Something</textarea>
Using jQuery, you can achieve like this
$("#txt").attr('disabled', true);
Using plain javascript
document.getElementById("txt").disabled=true;
Your problem is with CSS not JS. As far I can tell your code is working, but there's no way of changing this specific style. You could try workarounds: Change Font Color For Disabled Input
<textarea> is what you should be looking for not the <input> tag with id = textareaid.
$('input[id$="txtareaID"]').attr('disabled','disabled');
change the above code to the below one and see the magic by clicking the link at the bottom.
$('textarea[id$="txtareaID"]').attr('disabled','disabled');
http://jsfiddle.net/5s9ge7d6/1/
none of the below answers worked.
Then I found something amazing trick which solved my problem ---
Here it is --- JUST REMOVE "input" word from that line in if block -
WORKED CODE :
function myfun(status){
if(status=='Yes'){
$('[id$="txtareaID"]').attr('disabled','disabled');
}
Previous CODE :
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
$('input[id$="txtareaID"]').prop('disabled',true); //Didn't worked either
}

setting color of a link in javascript

I want to set the color of "val" in the link in below code.
var link = $('' + val + '<br><br>');//this is the link
link.style.color="red";//this is how iam trying to set the color of "val"
SO HOW TO EXACTLY DO IT.
You can do this:
link.css({ color: 'red' });
But the correct and nice way would be:
$(".parent_element").prepend(''+val+'<br><br>');
$(".parent_element > a:first").css({ color: 'red' });
Try this:
$(link[0]).css({ color: 'red'});
The reason for this is that link is not an <a> element - it's a set of elements: <a>, <br> and another <br>.
Another approach would be:
link.css({ color: 'red' });
but this will set this CSS to not only <a>, but both <br>'s as well (not a big deal though).
If you are using jQuery(which it does seem like) go ahead with this,
jQuery
link.css("color","red");
Otherwise,
JavaScript
link[0].style.color = "red";
What you did doesn't work because link is an array. Before applying a style to it, you have to first select the first element by link[0] and then operate on it.
You could use link.style.color="red" if link was an HTMLElementNode, but it isn't. It might be a jQuery object, but if you are using an older version of the library then it will return undefined.
First you need to fix your jQuery call. You can't create multiple elements at the top level. (You can skip this bit if you are using a sufficiently new version of jQuery).
Since there is no good reason to use a double <br> (it shouts "Use CSS to add a margin instead"), I've taken them out:
var link = $('' + val + '');
Now you have a jQuery object so you can either use the jQuery method of setting CSS:
link.css("color", "red");
or get the HTMLElementNode from the jQuery object and use that:
link.get(0).style.color="red";
link.css("color", "red")
However, I think it would be better to create a css class for that and set up the color there. In Javascript/jQuery I would just add the class to the tag when needed. It is more elegant.

Get a value from an attribute and add it as another attribute?

How can I use jQuery to get a string of text from the onclick attribute and set it as the href attribute.
Here's the fiddle I'm working with: http://jsfiddle.net/MBmt5/
I want to take only TrackPackage.asp?track=95213&ship=OTHER&ShippingMethod=3 from the onclick attribute and prop it to an href attribute
So that it would end up looking like this: http://jsfiddle.net/52Nha/
Unfortunately, I have no idea how to accomplish this. Can anybody help me? Must be compatible with jQuery 1.4.2. Thanks.
Update
Of course I'd begin with:
$(document).ready(function(){
$('span.trackpackagebutton').closest('a').removeAttr('href');
});
​
Ugly but I hope this will help you.
$('a').attr('href',
$('a')[0].getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
Working demo - http://jsfiddle.net/MBmt5/5/
Note: Based on your markup structure you can use the right selector and reuse the above code.
E.g: The below code will execute this logic for all the anchors on the page which have onclick attribute which has window.open.
$('a[onclick^="window.open"]').each(function(){
$(this).attr('href',
this.getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
});
Here's one way:
http://jsfiddle.net/MBmt5/2/
http://jsfiddle.net/GaZGv/1
var $a = $('span.trackpackagebutton').closest('a');
var href = $a.attr('onclick').split('(')[1].split(',')[0].replace(/'/g, '');
$a.attr('href', href).removeAttr('onclick');
alert(href)​

How to make jquery click() work with css button?

I have a .button made in css and added to the html 4 times like this
<a class="button icon Call" id="nupp2" href="#"><span>CALL</span></a>
and a .js with the following inside
$(document).ready(function(){
$("nupp2").click(function(){
var name=prompt("Please enter your name","blabla");
});
});
The buttons appear if I open the html with firefox and they change if I hover over them
But if I press the button, it doesn't do anything. I didn't forget to point to the files in the html file.
Am I even doing this right? Or is jquery more complex than I think?
Selectors in jQuery work a lot like the ones in CSS. $("nupp2") becomes $("#nupp2"), see?
This is wrong:
$("nupp2").click(function(){
The correct is:
$("#nupp2").click(function(){
The string inside the parens is a jQuery selector. Since you want to select an element by id, the proper selector is a hash sign followed by the id.
you need to add a hash sign (#) before the ID of the element - $('#npp')
You missed the hash on your selector:
$("#nupp2").click(function(){ // <----- #nupp2
var name=prompt("Please enter your name","blabla");
});
To call an ID you need to add a # in front of the selector (Like CSS)
So your jQuery selector should be $("#nupp2")
Just try this
$(document).ready(function(){
$("#nupp2").click(function(){
var name=prompt("Please enter your name","blabla");
});
Try this:
$(document).ready(function(){
$(a#nupp).click(function(){
var name=prompt("Please enter your name","blabla");
});
});

Javascript or jQuery for Adding Style to Phrases on Page

I'm applying a style to a certain phrase on our website over and over again. Is there a way to search the page for instances of that phrase and apply that style automatically?
Example:
<div>
This is what you get from <span class="comp">Company Name</span>.
We do all kinds of things here at <span class="comp">Company Name</span>.
</div>
You could take a look at these questions:
Highlight a word with jQuery
How to highlight certain words with jQuery
Both of the top answers point to the highlight plugin for jQuery.
sure...
http://docs.jquery.com/Selectors/contains#text
$("div:contains('Conpany Name')").css("text-decoration", "underline");
var body = document.getElementByTagName("body")[0].innerHTML;
body.replace(/Company Name/g, '<span class="comp">Company Name</span>');
document.getElementByTagName("body")[0].innerHTML = body;
The above should get everything in the body and replace it with your span and that doesnt need jQuery.

Categories