I would like to style letters based on what letter it is. So K:s sholud have one color, I:s one etc. What's the cleanest way to to this? Are there any selectors for it? (initially I'm going to do it with a greasemonkeyscript)
Javascript, untested fixed:
yourstring.replace(/([kK])/g, "<span class='styled'>$1</span>");
Working example:
<html><head></head><body>
<div id='target'>
some text with little ks and big Ks and a few more for good measure kK7k9Kii
</div>
</body></html>
<script type='text/javascript'>
target = document.getElementById('target');
target.innerHTML = target.innerHTML.replace(/([kK])/g, "<span style='color:red'>$1</span>");
</script>
MDN's .replace() documentation here.
You could also use the plugin lettering.js.
You can do this using jquery very easily as below :
Html :
<p class="menu">Home k edit k etc</p>
Css :
span.sp {
font-weight: bold;
color: red;
}
Javascript/Jquery:
$('p.menu').html(function(i,el) {
return el.replace(/\k/g, '<span class="sp">k</span>');
});
Here is the jsFiddle Link
Related
When hovering over generic elements of the same type, I want to execute a function on this elements that will perform an animation. However as these elements do not have unique ids I'm not sure how to uniquely identify them in JavaScript. Is there a way to use the this key word for this? I do not want to give them all unique ids because a huge amount of the same element and it seems redundant. Any help would be greatly appreciated thanks.
Heres some code I was playing with to try and get this to work. Preferably the simpler the code or using basic javascript better.
$(document).ready(function(){
$("span").hover(function(){
this.color = red;
});
});
red is not a variable, it is a string. So that you have to use 'red':
To set the color using JavaScript you have to use style property :
$(document).ready(function(){
$("span").hover(function(){
this.style.color = 'red';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
OR: Using jQuery use .css()
$(document).ready(function(){
$("span").hover(function(){
$(this).css({color: 'red'});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>
You can user class as a selector
give the same class to all <span> element
Try Following
$('.hoverTest').hover(function(){
$(this).css("color", "red");
}, function(){
$(this).css("color", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='hoverTest'>Your Span Element</span><br/>
<span class='hoverTest'>Span 1</span><br/>
<span class='hoverTest'>Span 2</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span n</span>
Refer Jquery Hover() for more details
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>
I am very new to JS. My requirement is very simple, to change the color of Text on Mouse Over.
I have created 2 JS functions : 1st for MouseOver and 2nd for MouseOut.
Can I do it in one single JS function.
I have other Text also.
JavaScript
function highlightBG(element) {
document.getElementById('element').className='AttachOnMouseOverText';
}
function highlightOutBG(element){
document.getElementById('element').className='AttachOnMouseOutText';
}
HTML code :
<td align="center" id="element">
<img name="folder" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">
<br>Add Folder
</td>
You can find here the answer using pure-js as you asked :
HTML :
<div id="element" class="AttachOnMouseOutText" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">Hidden text</div>
CSS :
.AttachOnMouseOverText {
color: white;
}
.AttachOnMouseOutText {
color: black;
}
Javascript :
function highlightBG() {
document.getElementById('element').className='AttachOnMouseOverText';
}
function highlightOutBG(){
document.getElementById('element').className='AttachOnMouseOutText';
}
You can see here an example using CSS :hover state.
EDIT
If you want a single function to handle this, try someting like :
function highlightBG(elementName, isIn) {
if (isIn)
document.getElementById(elementName).className = 'AttachOnMouseOverText';
else
document.getElementById(elementName).className = 'AttachOnMouseOutText';
}
this is simple by using css:
selector:hover
{
color:red;
}
And you can also use jquery for this
$("selector").on( "mouseover", function() {
$( this ).css( "color", "red" );
});
If you need the hover change on a link then definitely use a :hover in CSS, it will be the most efficient way.
However if you are looking to add it to a non-link element it can cause issues in IE7 and 8. Have a look at Google Best Practices, in particular the section about :hover.
If that is the case then JS is a way to do it.
It might be easier to use jquery to do what you want, if you are using javascript you might just as well make use of jquery. Create a css class to represent the color you want to change the text to, for example
.green{
color: green;
}
Change your HTML to
<td align="center" id="element">
<img name="folder" />
<br>Add Folder
</td>
And add some jquery to add your css class when you move your mouse over 'element', for example
$("#element").mouseover(function(){
$(this).addClass("green");
});
If you want to change the color back when the mouse leaves the area, you can just remove the class again. For example
$( "#element" ).mouseleave(function() {
$(this).removeClass("green");
});
Here is the HTML (with an inline ID of "practice"):
<h1 id="practice">Hello!</h1>
Here is the vanilla JavaScript (using a generic function and a callback):
document.getElementById("practice").addEventListener("mouseover", function() {
document.getElementById("practice").style.color = "pink";
});
document.getElementById("practice").addEventListener("mouseout", function() {
document.getElementById("practice").style.color = "yellow";
});
Mousing over changes the HTML text to yellow; removing the mouse from the area returns the HTML text to black.
I have a a link that looks similar to this
Blog
As you can the link has an ID of 'blog' what I want to do is to create an div on the fly with the ID from the link that was clicked so if the 'blog' is clicked, then the markup would be
<div id="blog">
<!--some content here-->
</div>
Like wise if for instance the news link is clicked then I would like,
<div id="news">
<!--some content here-->
</div>
to be created in the markup if this possible? and how Im pretty new to jQuery.
Try this:
$("a").click(function(){
$("#wrapper").append("<div id=" + this.id + "></div>");
});
Not tested, should work ;)
where: #wrapper is parent element, work on all a as you see.
You will need to give the div a different ID. Perhaps you could give it a class instead:
$("#blog").click(function() {
$(this).after("<div class='blog'>...</div>");
return false;
});
That's just one of many ways to create a div. You probably also want to avoid duplicates however in which case, use something like this:
$("#blog").click(function() {
var content = $("#blog_content");
if (content.length == 0) {
content = $("<div></div>").attr("id", "blog_content");
$(this).after(content);
}
content.html("...");
return false;
});
As for how to handle multiple such links I would do something like this:
Blog
News
Weather
<div id="content"></div>
with:
$("a.content").click(function() {
$("#content").load('/content/' + this.id, function() {
$(this).fadeIn();
});
return false;
});
The point is this one event handler handles all the links. It's done cleanly with classes for the selector and IDs to identify them and it avoids too much DOOM manipulation. If you want each of these things in a separate <div> I would statically create each of them rather than creating them dynamically. Hide them if you don't need to see them.
Try This :
<a id="blog">Blog</a>
<a id="news">news</a>
<a id="test1">test1</a>
<a id="test2">test2</a>
$('a').click(function()
{
$('<div/>',{
id : this.id,
text : "you have clicked on : " + this.id
}).appendTo("#" + this.id);
});
First of all you should not make 2 elements with same ID. At your example a and div will both have id="blog". Not XHTML compliant, plus might mess up you JS code if u refernce them.
Here comes non-jquery solution (add this within script tags):
function addDiv (linkElement) {
var div = document.createElement('div');
div.id = linkElement.id;
div.innerHTML = '<!--some content here-->';
document.body.appendChild(div); // adds element to body
}
Then add to HTML element an "event handler":
Blog
This question describes how to create a div. However, you shouldn't have two elements with same IDs. Is there any reason why you can't give it an id like content_blog, or content_news?
Unfortunately if you click on a link the page you go to has no idea what the idea of the link you clicked was. The only information it knows is what's contained in the URL. A better way to do this would be to use the querystring:
Blog
Then using the jQuery querystring plugin you could create the div like:
$("wrapper").add("div").attr("id", $.query.get("id"));
You shouldn't have elements in your page with the same ID. Use a prefix if you like, or perhaps a class.
However, the answer is as follows. I am imagining that your clickable links are within a div with the ID "menu", and your on-the-fly divs are to be created within a div with the ID "content".
$('div#menu a').click(function(){
$('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});
Any problems, ask in the comments!
Also the following statement is available to create a div dynamically.
$("<div>Hello</div>").appendTo('.appendTo');
Working fiddle: https://jsfiddle.net/andreitodorut/xbym0bsu/
you can try this code
$('body').on('click', '#btn', function() {
$($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
width: 100px;
background: gray;
color: white;
height: 20px;
font: 12px;
padding-left: 4px;
line-height: 20px;
margin: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<!-- Button trigger modal -->
<button type="button" id="btn">Create Div</button>
<div id="old">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>