Highlight the text using jquery - javascript

I have one textbox, button and and list box with some text.
When I click on button what ever the text I enter in text if it matches the text in the list box I am trying to highlight that text using jquery I used this code.
Jquery Code
$("#btnhighlight").click(function () {
alert("yes");
var htext = $("#txthighlighttext").val();
alert(htext);
$("#lstCodelist").highlight('MD');
});
Style sheet I used to hightlight and i downloaded the highlight plug in added to the project
<style type="text/css">
.highlight { background-color: yellow }
</style>
Please can any one help me out how to do this. or if I am doing wrong?
Can an

Maybe your problem is that your script is executed before DOM ready.
try with this:
$(function (){
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").text();
$('#lstCodelist').highlight(htext);
});
});
or put your script at the body end.
ps. I supposed you used this plugin (jquery.highlight)
edit:
http://jsfiddle.net/yJmBu/ here a full example

This plugin is generating spans around the text it finds. Option tags can not contain any html tags so the following (Generated by your plugin)
<select>
<option><span class="highlight">Te</span>st</option>
</select>
is illegal syntax and will be ignored by the browser.
However if I understand your intent, there are some plugins out there that will accomplish something similar for you out of the box.
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
Some proof that a nested span inside an option is not allowed.
html tags in the option tags
It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

Related

Changing text in div with Javascript

I have this code:
<div>Text: Fly London</div>
I want to change the text "Text:" with JS, so I used this:
<script>
$(document).ready(function(){
$('.p-detail-info > div:contains("Text:")').text('Another text:');
});
</script>
But if I do it, the URL will disappear. How to change it if I want to keep URL?
Thank you!
You can also do this by simply add span tag and change the span tag text
$(document).ready(function(){
$('.p-detail-info > div > span:contains("Text:")').text('Another text:');});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="p-detail-info">
<div><span>Text:</span> Fly London</div>
</div>
You'll have to select the text node, which is not possible with selectors alone, unfortunately. Select the parent div, get its first childNode (which is the text node we want), and then assign to the text node's textContent, no jQuery required:
document.querySelector('div').childNodes[0].textContent = 'Another Text';
<div>Text: Fly London</div>
Following should work fine for changing the text:
<script>$(document).ready(function(){$('.p-detail-info > div').text('Another text:');});<script>
Cheers,
Happy coding.

jQuery .insertAfter not working, trying to move element in DOM

I have tried the following jQuery code to move a <select> element (that I can only see within the DOM) after a <form> element but it does not work:
<script type="text/javascript">
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change]');
</script>
I have also tried:
<script type="text/javascript">
jQuery('select[id^=lc_currency]').insertAfter('form[id^=lc_change]');
</script>
Any coding suggestions? I am using a wildcard selector because on every page the ID changes, 1c_currency1, 1c_currency2, etc.
Live site is at http://thehungrygeek.com/2015/11/17/australia-dairy-company/
I want to move specifically a select dropdown box, from one place to another on a webpage. Unfortunately the element code is only located in the DOM.
This select dropdown box is located at the bottom of the page at http://thehungrygeek.com/2015/11/17/australia-dairy-company/
The code, only located in the DOM, is as follows:
<select style="width:200px" name="lc_currency1" id="lc_currency1" onchange="localCurrencyChange('SGD',lcValues1,1)">...</select>
The select dropdown box is supposed to be moved here:
The relevant code at the area is as follows:
<form name="lc_change1" id="lc_change1" action="http://thehungrygeek.com/2015/11/17/australia-dairy-company/" method="post">
Show currencies in
<noscript>[Please enable JavaScript to change the currency used on this page]</noscript>
<br>
<small>Powered by LocalCurrency. Rates from Yahoo! Finance</small>
</form>
Thanks for any help!
1st: Be sure you include jquery
2nd: Wrap your code in
$(document).ready(function(){
// your code here
});
3rd: Try to use .each()
$(document).ready(function(){
jQuery('select[id^=lc_currency]').each(function(){
var getformId = $(this).attr('id').replace('currency','change');
//alert(getformId);
$(this).insertAfter('form#'+ getformId);
});
});
Working Demo
I guess your id strings should be inside quote , Try this
$(function(){
jQuery("select[id^='lc_currency']").insertAfter("form[id^='lc_change']");
});
Edit:
Try to move the select element after 1 sec after window load. this might works for you as your select element coming from javascript code.
$(window).load(function(){
setTimeout(function(){
jQuery("form[id^='lc_change']").prepend( "select[id^='lc_currency']");
},1000);
});
From the screenshots you added, it seems like you want to insert the select inside the form, not after, this is what I used:
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change] noscript');

Change text of child

I'm trying to make a add to favorite system. I have a function which alerts the proper id I want to add.
I use:
<script type="text/javascript">
function addfavo(state_name)
{
alert(state_name);
}
</script>
And in my html I have a loop (with php) which shows all the images with the add to favorite links which looks like.
<div style="margin-top:40px;">
<a onclick="addfavo('<?php echo $imgid ?>')"><b>Add to favourits</b></a>
</div>
So what happens is I have a lot of links to the same function with different parameters, but I only want the link that I click to change the text (to something like added to favorites)
Can some one help me in the right direction?
I have tried adding:
$(this).innerHTML("test");
but it didn't work.
You might want to use the html method:
$(this).html('test');
While html is a jQuery method, innerHTML is a property of a DOM element. If you were using pure JavaScript, you'd probably use:
this.innerHTML = 'test';
However, as you are using the onclick attribute on your HTML tag, this will not point to your current DOM element inside your function scope. In your case, I'd add a class to your elements, like add_favorite and add your text to another attribute:
<div style="margin-top:40px;">
<b>Add to favourits</b>
</div>
And then apply a jQuery event to it:
<script type="text/javascript">
$(function() {
$('.add-favorite').click(function(e) {
var text = $(this).data('text'); // store the text in a variable
$(this).html(text); // replace your element's html with your text
e.preventDefault();
});
});
</script>
Fiddle: http://jsfiddle.net/MH6vY/

Javascript/jquery replace text removes formatting of div

http://jsfiddle.net/2EvGF/
JS
$('.msgln').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});
HTML
<div class='msgln'><b>Admin</b>:<i> Chat cleared</i><br></div>
Replacing the class '.msgln' removes the formatting (bold, italics, etc.) How can I resolve this?
It might be happening because the css rules for bold, italcs etc might be defined for the class msgln, so once the class is removed the associated css rules also will be removed.
A solution is to add another class where the same css rules are defined
As it said here, http://api.jquery.com/text/#text2, it replace whole inner html with the given text.
You need to get down to the element that has the text you want to replace. In your case, it would be .msgln b
$('.msgln b').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});
I agree with sincebasic's solution. Here's my version with little update as you can have tag presented in other parts of the the HTML with the class "msgln". How about the following?
HTML
<div class='msgln'><b><span class="username">Admin</span></b>:<i> Chat cleared</i><br></div>
JS
$('.msgln span.username').each(function() {
var text = $(this).text();
$(this).text(text.replace('Admin', 'sys-admin'));
});

Filter out HTML Tag onpaste for div and oncopy too

I have an editable DIV in my site to send a forum message. People can edit their messages (Bold, Italic, underline, add links and more)
But I want when some one paste or drop (- drop is not necessary, but paste it is) their text I want it to go in the DIV without HTML tags - clean, just text. (like if some one is going to word and make the text 200 points size, then copy & paste it in my DIV, they will have a very different message... and I don't want it to happen).
How can I scan the text coming from the clipboard to remove any HTML tags and then paste it in the DIV?
<html>
<head>
<script type="text/javascript" language="javascript">
function PasteFilter()
{
//windows.clipboardData filter on paste to go here
}
function CopyFilter()
{
//windows.clipboardData filter on copy to go here
}
</script>
</head>
<body>
<Div class="body" onpaste="PasteFilter()" oncopy="CopyFilter">
<!-- div content goes here.-->
</Div>
</body>
</html>
I would like to also apply the same filter with COPY too.
Thanks
I believe there are 2 ways to do this:
1) The easy way - insert the following code in PasteFilter():
var foo = window.clipboardData.getData('Text');
window.clipboardData.setData('Text', foo);
the first line gets the Text value of clipboardData (already stripped of HTML tags)
and the second line sets the clipboardData to the plain text...
(Tested on IE8)
2) The other way - if for some reason that isn't suitable for you..
In PasteFilter(), you trigger another function with a small delay timeout.
In that function, you get the innerHTML contents of the DIV and run a regular expression to remove all tags.
Example:
function PasteFilter()
{
setTimeout('foo()', 200);
}
function foo()
{
var contents = document.getElementById("test").innerHTML;
var new_contents = contents.replace(/(<([^>]+)>)/g, ""); // taken from http://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
document.getElementById("test").innerHTML = new_contents;
}
The problem with this method is that you lose the caret position...
Hope this helps...

Categories