We Keep Coding

Add class Remove class via jQuery...what am I missing?

I have an application that allows users to pick specific fonts for a textarea. Some fonts need to have different line-height attributes. I'm trying to make the line-height dependent on what font they clicked on. I can add the class 'larger-line' when they click on the id="larger-line", but I can't get it to remove the class when they click on 'standard-line'. I feel like I'm overlooking something very simple. Any thoughts? Also...I'm pretty new to coding.
HTML:
<textarea>
<div class="editable" id="standard-line">"Font A"</div>
<div class="editable" id="larger-line">"Font B"</div>
</textarea>
CSS:
textarea.editable {
line-height: 0.8em;
}
textarea.editable.larger-line {
line-height: 1em;
}
JS:
$("#larger-line").on("click", function (e) {
$("textarea.editable").addClass('larger-line');
});
$("#standard-line").on("click", function (e) {
$("textarea.editable").removeClass('larger-line');
});

$("#larger-line").on("click", function (e) {
$("textarea.editable").addClass('larger-line');
});
$("#standard-line").on("click", function (e) {
$("textarea.editable").removeClass('larger-line');
});
That code would match the following elements.
<textarea class="editable></textarea>
First off your code wont work because your putting html inside of a textarea. That converts the html into plaintext.
Look in this jsfiddle:
Jsfiddle
The following JS Code:
$("#larger-line").on("click", function (e) {
$("textarea.editable").addClass('larger-line');
});
$("#standard-line").on("click", function (e) {
$("textarea.editable").removeClass('larger-line');
});
The following markup:
<div id="standard-line">"Font A"</div>
<div id="larger-line">"Font B"</div>
<textarea class="editable"></textarea>
When you click on "Font A" or "Font B" it will add or remove the class "larger-line" from the textarea with class "editable"
I hope this helps you solve your problem.

You used "textarea.editable" which selects all textarea elements with the class editable. What I think you wanted to do was "textarea .editable" which selects all elements with the class editable inside of a textarea. However, textareas are meant to only contain text, so you'll get the html as text as output and it won't be selectable.

How to display: none between parent and sibling tags when using show more show less Jquery

My markup is set up like so:
<div class="media-body" >
<h5 class="media-heading">
<strong id="head">{{$blog->Title}}</strong>
<strong id="head2">{{$blog->Title}}</strong>
</h5>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
I have 2 buttons using jquery to show and hide (which act as a show more show less) the two tags within my h5 tag. However I can't seem to use this code to ensure that the strong tag with id="head2" is not displaying. I've tried
<style>
.head2
display:none;
</style>
I've also tried
<style>
strong.head2
display:none;
</style>
Im unsure if this has anything to do with Jquery so ive pasted that in below just in case.
jQuery Code:
$(document).ready(function(){
$("#head").html(function(i, h) {
var words = h.split(/\s/);
return words[0] + ' <span>' + words[1] + ' </span>' +' <span>' + words[2] + ' </span>';
});
});
$(document).ready(function(){
$("#hide").click(function(){
$("#head2").hide();
});
$("#show").click(function(){
$("#head2").show();
});
$("#hide").click(function(){
$("#head").show();
});
$("#show").click(function(){
$("#head").hide();
});
});

You're targeting a class of .head2 in your CSS, but have an id. Use an id # selector instead. For example...
<strong id="head2">{{$blog->Title}}</strong>
#head2 {
display:none;
}
See CSS Selector Reference for more information

change the color of text on mouseover in JS

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.

Style specific letter?

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

Javascript creating <div> on the fly

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>