remove or hide text using jquery? - javascript

I need to hide some text (Add £0.20) which is within a td. I have a parent DIV class at the top. Here is the cut down HTML:
<div id="KitFormOptions">
<td valign="top" align="left">Text Personalisation, Add £0.20<br><br><textarea value="" name="KitGroupID_98_TextOption_796" rows="5" style="width:100%"></textarea></td>
</div>
the css path looks like this:
html body div#container div#body-container div#content-area div#content-text div#kitProduct div#KitFormOptions form table tbody tr.LightCell td

You can dynamically wrap price with span using replace with regular expression:
$("#KitFormOptions td").each(function(){
$(this).html(
$(this).html().replace(/(Add £\d*\.\d{2})/,"<span class='price'>$1</span>")
)
})
And hide them
$('span.price').hide()
This replace any decimal format consisting zero of more decimal numbers before dot and exactly two numbers after dot.
Therefore it will be replaced any price which will be on site.

You can do the following but its not a good idea. Better is to create a span around £0.20 and hide this. But you say you cant do this.
$("#KitFormOptions").html($("#KitFormOptions").html().replace("£0.20",""))

Why hide it? Can't you just delete it? Otherwise you'll need to add a <span> around it or something similar so you can reference it.
Where is the HTML coming from and why is the price even there then?

The best solution can looks like: push your ", add 20" to span and set class="hide" for the span tag.

A div element should not contain a lonely td but try this snippet, it replaces the text in all tdelements within your div #KitFormOptions:
$('#KitFormOptions td').text('Text Personalisation');

Wrap it in some element like <span> give it a class, and hide that element.
Example:
<div id="KitFormOptions">
<td valign="top" align="left">Text Personalisation, <span class="price">Add £0.20</span><br><br><textarea value="" name="KitGroupID_98_TextOption_796" rows="5" style="width:100%"></textarea></td>
</div>
jQuery:
$('span.price').hide()

Related

HTML & Javascript change content inside angle brackets ( < > )

Just wanted to know if it is possible to change with pure Javascript the content between the angle brackets in a HTML tag.
By this I mean all the content, not only the tag name, not only the id, not only the class and all the different attributes but everything inside, even non standart HTML code.
One small example:
Before
<div id="myID" class="myCLASS" whaterver-content ></div>
After Javascript DOM function
<div id="myID" class="myCLASS" other-content ></div>
I know tag name, id and class can be modified with DOM Element Object functions in JS. Is there any nice function that does the same for data not inside quotes and not before an attribute?
Thanks for your answers.
EDIT: I just saw this Set attribute without value by asking the question on another way. But is the result the same? Or will there be ="" after the attribute?
I do not like the accepted answer. You should not be manipulating HTML as string. It is not safe and performance is usually really bad.
Imagine that whaterver-content is actual text somewhere inside that div, for example as user input. It will get replaced when it should not be.
Please use DOM manipulation directly:
var element = document.getElementById('myID');
element.removeAttribute("whaterver-content");
element.setAttribute("other-content", "");
How about using replace on the element's outerHTML attribute?
function change() {
document.getElementById('myID').outerHTML =
document.getElementById('myID').outerHTML.replace('whaterver-content','other-content');
console.info(document.getElementById('myID').outerHTML);
}
<div id="myID" class="myCLASS" whaterver-content ></div>
<input type='button' onclick='change();' value='change' />

How can I select the first specific class after element in jQuery

I need to count the characters of the content in textarea and show it at the below in a specific class.
I'm using the code below which doesn't work for me:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".messageText").each(function(){
$(this).next(".messageCharacters").text($(this).val().length);
$(this).next(".messagePages").text(($(this).val().length / 70).toFixed());
});
$(".messageText").keyup(function(){
$(this).next(".messageCharacters").text($(this).val().length);
$(this).next(".messagePages").text(($(this).val().length / 70).toFixed());
});
});
</script>
<p>
<textarea name="title1" class="messageText">phrase1</textarea>
<br /><span class="messageCharacters">0</span> characters - <span class="messagePages">0</span> pages
</p>
<p>
<textarea name="title2" class="messageText">phrase2</textarea>
<br /><span class="messageCharacters">0</span> characters - <span class="messagePages">0</span> pages
</p>
How should I fix it?
First of all your $(".messageText").keyup(function(){ is outside the document.ready function, therefore your .messageText element are not collected by the DOM parser.
Also .next() element is <br> so either you need to target a parent container or do a .nextAll() like:
$(function(){ // DOM ready shorthand
function count() {
$(this).nextAll(".messageCharacters").text(this.value.length);
$(this).nextAll(".messagePages").text((this.value.length/70).toFixed());
}
$(".messageText").each(count).on("input", count);
});
to prevent one copy-pasteing text inside your textarea (using mouse right click - paste) and your script doing nothing use .on("input") to register any change inside the textarea value listener.
Also think about ($(this).val().length/70).toFixed() if initially 34 characters makes it pages=2 only at 105 you'll get pages=3. So review that math again.
jsBin demo
The element next to your .messageText is the br, so $(this).next(".messageCharacters") will never return your element.
Use .nextAll() instead :
$(this).nextAll(".messageCharacters")
Change $(this).next to $(this).siblings

Concatenating strings in JavaScript / jQuery?

I need to remove nested <b></b> tags. See the generated css and you'll understand the problem:
<div class="highlight" contenteditable="true">
ahuasdhuasdhuasdhu
<b>
<b>#</b>
huadshuashud
</b>
</div>
I want remove the tags that have a '# inside, but I don't want remove the '#'. (Note the hashtag can be any another value). For this, I wrote the following code:
// Highlight already been declared and just is a simple $('.highlight').
highlight.children('b').children('b').contents().unwrap();
Now I have the following code:
<div class="highlight" contenteditable="true">
ahuasdhuasdhuasdhu
<b>
"#"
"huadshuashud"
</b>
</div>
I want join this two strings, because when I double click it, it just select "#" or "huadshuashud", but I want that all content inside the tag is selected.
Have some way to improve my method or concatenate these two strings?
Try:
$('.highlight > b').html(function(){
return $(this).text();
});
Which will give you this:
<b>
#
huadshuashud
</b>
Selecting text in an element (akin to highlighting with your mouse)
Here you have a ready function. Edit the beginning to be able to pass an object instead of id and add a handler:
$(".highlight").ondblclick(function(){
SelectText(this)
})
function SelectText(elementObject) {
// here choose function you like and replace text variable
text = elementObject;
...

Jquery replacing image issue

I'm using the following script to change an image based on the value entered.
var siteLogo = $('input#site-logo').val();
$('#site-logo, img').attr("src", siteLogo);
html
<div id=site-logo>
<img src="default.png" width="285px" height="100px">
</div>
<input id="site-logo" class="input-xlarge" placeholder="http://" type="text">
<button id="add-site-logo" class="btn" href=""> Add</button>
My issue is that it's changing ALL the images on the page to the value in site-logo. How do I make it so that ONLY the value in site-logo gets changed and not other random stuff on the page?
Try
var siteLogo = $('input#site-logo').val();
$('#site-logo img').attr("src", siteLogo);
There are two problems here:
You have an id field set for two elements. It should be unique.
The selector you're using selects multiple things: the #site-logo selector selects an item with the site-logo ID, the img selects all images on your page. The comma in the selectors defines basically an "or" across all your selectors; it will select an element if it matches #site-logo or it matches img.
Change your selector to this:
$("#site-logo img").attr("src", siteLogo);
You'll want a different id for your <input> tag in this case.
Remove ',' from jQuery selector
$('#site-logo img').attr("src", siteLogo);
$('#site-logo img') means all images inside #site-logo
$('#site-logo, img') means #site-logo plus all images.
Try this instead:
$('img','#site-logo')
Or better:
$('#site-logo').find('img')

Dynamically add <div> inside <input>

I want to add <div> inside <input>
<input type="submit"
name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton"
value="I understand and agree to all of the above "
onclick="return apt();"
id="DisclaimerAcceptButton"
class="DisclaimerAcceptButton">
The button is too long so I want to split its caption into two lines.
I don't have access to pure html since everything is dynamic.
input elements cannot have descendants:
<!ELEMENT INPUT - O EMPTY -- form control -->
^^^^^
However, if you can change the code that generates the button, you can use button instead:
<button name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton" onclick="return apt();" id="DisclaimerAcceptButton" class="DisclaimerAcceptButton">
I understand and agree to <br />
all of the above
</button>
This lets you style the content of the button however you want to.
A div is a block level HTML element and it shouldn't be added inside the button in such a way. You can however use CSS to specify a width to the button, and thus acquire the multi-lineness that you're looking for.
You can't add div inside of input element (unless you want it in input's value).
No can't do. And if it works on some browser, it's not guaranteed to work anywhere else, because it doesn't follow the standards.
Only you need:
<input type="checkbox" id="a"/>
<label for="a"><div>... div content ...</div></label>
Like somebody write in input you cannot put any element but in label for it can.

Categories

Resources