I have the following issue with Twitter Bootstrap and jQuery:
I have a title, in h1, and a subtitle, in small. I want to change the text of both, using jQuery. My code is the following:
HTML:
<h1 id='h1id'>
Hello World
<br>
<small id='smallid'>Here I am!</small>
</h1>
JavaScript:
$(document).ready( function() {
$('#h1id').text('I can change this');
$('#smallid').text('But not this');
});
The h1 is changed, but the small-element disappears. How can I fix this?
Live example here
Wrap hello world in a span
HTML
<h1 id='h1id'>
<span>Hello World</span>
<br>
<small>Here I am!</small>
</h1>
JavaScript
$(document).ready( function() {
$('#h1id span').text('I can change this');
$('#h1id small').text('But not this');
});
Add another div or span like this :
<h1 id='h1id'>
<div id="something">
Hello World
</div>
<br>
<small id='smallid'>Here I am!</small>
</h1>
$(document).ready( function() {
$('#h1id #something').text('I can change this');
$('#h1id #smallid').text('But not this');
});
The .text() function replaces all content in the H1 tag therefore removing the span tag from the DOM.
You can append the span with jquery like the following fiddle shows:
http://jsfiddle.net/nkzbzm7f/1/
html
<h1 id='h1id'>
Hello World
</h1>
javascript
$(document).ready( function() {
$('#h1id').text('I can change this')
.append("<br>")
.append("<small>Here I am!</small>");
});
If you change the H1 the small text disappears because it's part of the H1. Adding extra divs or spans isn't nice. keep your html slim!
change h1 text only:
$('#h1id').html('new text<br><small>' + $('#h1id small').html() + '</small>' );
change small text only:
$('#h1id small').text('new text');
change both:
$('#h1id').html('new test<br><small>new also</small>');
Instead you should cache it in a var before replacing the text:
$(document).ready( function() {
var smallid = $('#smallid'); // cache it here.
$('#h1id').text('I can change this. ');
smallid.text('changed').appendTo('#h1id'); // now change and append it again.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='h1id'>
Hello World
<br>
<small id='smallid'>Here I am!</small>
</h1>
Related
I want to hide first word(ILS) from the span by using css..I have a div which have no class and inside that div there is a span...I just want to hide this word(ILS) from the span...Please guide me where i am wrong
Text displayed like this on the site:
Here is my div:
<div class="purhstdtls-delvry-timesec">
<h5>Test Sample</h5>
<div class="purchase-price"></div>
<div>Some Text Here</div>
<div>
<span>ILS 0.10 / מכירה</span>
</div>
</div>
Css :
.purhstdtls-delvry-timesec>div:nth-child(4)>span:first-word{
display:none;
}
Preferably you add an id to the span or already send the right thing in the backend but:
You can just replace the content.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>$(document).ready(
function(){
$('span').text($('span').text().replace('ILS',''));
});
</script>
</head>
<div class="purhstdtls-delvry-timesec">
<h5>Test Sample</h5>
<div class="purchase-price"></div>
<div>Some Text Here</div>
<div>
<span>ILS 0.10 / מכירה</span>
</div>
</div>
It's a dirty solution but it'll work.
You can add wrapper around your required text to be hidden in your case ILS, Try following Code
$(document).ready(function(){
$("span:contains(ILS)").each(function(k,v){
var d = $(v).html();
d = d.replace("ILS", "<div style='display:none'>ILS</div>");
$(v).html(d);
});
});
I want to provide all my posts on my blog in 2 languages. I found a way to change the text into another language with buttons. But I can't put any images or other css styles in the text that changes. Then the buttons don't work anymore.
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. I can't put any css or html in here';">English</button> <button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another language';">Other language</button>
<div id="chgtext">This is the default text. I can't put any css or html in here</div>
Is there a way I can make something like this but with a code where I'm able to put images, font styles,... in the code?.
Or is there maybe a way to only change the text. And leave the images with multiple divs?
TEXT (changes)
IMAGE
TEXT (changes)
http://oihanevalbuenaredondo.be/2017/01/17/current-favorites-voorbeeld/ --> this is an example of a post i want in 2 languages. I need multiple images, al the text in the post needs to be changed from one language to another, with buttons
You need to iterate over all the children of your element. Using JQuery, and assuming just one level of descendants, you could use something like this...
$('#chgtxt').children().each( function() {
var oldtext = $(this).text();
if (oldtext) {
var newtext = oldtext+" CHANGED. ";
$(this).text(newtext);
}
});
You can create your own using this simple code, it simply gets an entry and replace it by it's value in the array. Ex :
var lang = {
"helloWorld": {
en: "Hello World",
fr: "Bonjour monde"
},
"mynameis": {
en: "My name is",
fr: "Mon nom est"
}
}
$(document).ready(function(){
$(body).find('.trn').each(function($elem){
var currentLang = 'en';
$($elem).html(lang[$($elem).data('trn')][currentLang]);
});
});
For each text your need to add a data with the key and a class trn, just like this.
<span class="trn" data-trn="mynameis"></span> Nicolas
Check this link for more informations
hopes it helps !
Nic
You have a single quote in the text of the first onclick "can't" which is causing the javascript to think that it is the end of the string.
You need to add a backslash "can\'t"
<button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>This is the default text. I can\'t put any css or html in here';">English</button> <button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>Text changed into Another language';">Other language</button>
<div id="chgtext"><p>Blue</p>This is the default text. I can't put any css or html in here</div>
<style>
p {color:blue;}
</style>
You need to escape all quotes inside of inserted content. Have a look at snippet and try to click on buttons
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. <img src=\'http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg\'> NOW I can put any css or <span style=\'color :red;\'>html</span> in here';">English</button>
<button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another <span style=\'color :red;\'>language</span>';">Other language</button>
<div id="chgtext">This is the default text. I can't put any css or html in here</div>
<p>
<style>
#eng_lang {
display: block;
}
#nl_lang {
display: none;
}
</style>
<button onclick=" document.getElementById('eng_lang').style.display='block'; document.getElementById('nl_lang').style.display='none'">English</button> <button onclick="document.getElementById('eng_lang').style.display='none';document.getElementById('nl_lang').style.display='block'">Nederlands</button></p>
<div id="eng_lang">
<h2>Here is some text
<span style="color: green;">english</span>
</h2>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo2yKPonCY-BZrk9s69oH_-gal_yxDRgHxdyXhqP79D0YESVuB" width="120px" height="120px">
Now you can place here any text, tags and images.
</div>
<div id="nl_lang">
<h2>Here is another text
<span style="color: blue;">Netherlands</span>
</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQcE1c0chXugmq_V5qwp51ffAuP7ecGMsWmshnntwAXVGUgVptH" width="100px" height="100px">
Put here whatever you want.
<p>This is paragraph</p>
</div>
I want to make a coding area for my website,and I need to make it having color coded(syntax highlighting),and I Google so hard,but I still can't find the right answer for me, and here is my code now.
And I'm using Jquery
HTML:
<textarea class="CodeArea codingground">
<div class="HelloMate">
</div>
</textarea>
JS:
$(function(){
$('.CodeArea.codingground').on('input',function(){
var code = $(this).val();
if (code.indexOf('class')>=0) {
$( "textarea:contains('class')" ).css( "color", "red" );
}
});
});
This is not possible with a textarea.
You can use the <code> tag in conjunction with the contenteditable attribute. Some Javascript and you'll get what you want, even though you should consider to use a library for stuff like that.
var text = jQuery('code').text();
text = text.replace('class', '<span style="color: red">class</span>');
jQuery('code').html(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code contenteditable="true">
class Blubb() {
}
</code>
I am trying to apply smiley(emoji) to users comments on a page.
Example all the :) will be applied css attributes replaced with.
Is there a way I can use javascript or jquery to achieve this?
$(":)").css("background-image", "url('smile.gif')");
My Problem is the selector part, Since I dont want to apply the css to the whole div.
you need to wrp you html text ':)' with some html and then you can add css/jq to it. See below javascript code and try to add you css to "smiley" class
document.body.innerHTML = document.body.innerHTML.replace(':)', '');
Below is a possibility. I'm assuming at least that you can discern the comments section from the rest of the webpage.
$("#commentsSection").find(":contains(':)')").each(function() {
$(this).html($(this).html().replace(
':)',
'<span style="background-image: url(\'smile.gif\')" />'
));
});
Since you mentioned that you can't process the comments before submitting to the database, you could hook this code to the $(document).ready() event.
$(document).ready(function() {
$("#btn").click(function() {
$("#commentsSection").find(":contains(':)')").each(function() {
$(this).html($(this).html().replace(
':)',
'<span style="background-image: url(\'smile.gif\')" />'
));
});
});
});
/* Just for visual feedback in the snippet */
#commentsSection span {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText">
Don't replace this! :)
</div>
<div id="commentsSection">
<h2>
Comments:
</h2>
<div>
Hello! :)
</div>
<div>
Hi!
</div>
<div>
Hello again! :)
</div>
</div>
<button id="btn">
Replace emojis
</button>
Simple example:
<input type="text" id="text"/>
<div id="smiley"></div>
<script>
$(function() {
var text=$('#text').val();
if(text ==":)") {
$("#smiley").append("<img src="smile.gif"/>);
}
})
</script>
How can i split some text in div using html comment.
Lats say i haw:
<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>
I wont a jquery or javascript to show or hide text after<!--more-->.
Thanks
You can try something like this:
Given markup:
<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>
Add the following javascript:
//1. On page load, wrap text to be hidden in <span>
$(function() {
$("div").each(function() {
var html = $(this).html();
$(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
});
// 2. Toggle visibility of span tags when clicking link
$('a').click(function() {
if ($(this).html() == 'Hide') {
$(this).prev('div').children('.hiddenText').hide();
$(this).html('Show');
} else {
$(this).prev('div').children('.hiddenText').show();
$(this).html('Hide');
}
});
});
Check my jsFiddle for a working example.
UPDATE: Updated solution to not rely on separate CSS class to hide/show text.