We Keep Coding

How to change InnerHtml to an attribute

Can some one show how I can change the InnerHTML of the titles class to be the same as the alt attribute. For the actual website jarretonions.co.za
Thanks
$(document).ready(function() {
$(".pic").on("click", function() {
$(".modal").show();
var srclong = $(this).attr("src");
var srcshort = srclong.split("_");
var srcextension= srclong.split(".");
$(".modal img").attr("src", srcshort[0]+'.'+srcextension[1]);
************is it something like this********
var title = $(this).attr("alt");
$(".modal span").InnerHTML= title;
OR
document.getElementByClassName('titles').innerHTML = title;
})
+
echo
"<div class='art'>
<img class='pic' src='img/".$row["name"]."_tnail.jpg'
alt='".$row["name"]." • ".$row["year"]." • ".$row["type"]."'
height='auto' width='100%'/>
<div class='modal'>
<img class='big'/>
<span class='titles'></span>
</div>
</div>"
;

Since you're using JQuery, you can select those elements using $(".title") and change them directly. Something like so:
$(document).ready(function() {
$(".pic").on("click", function() {
$(".title").text( $(this).attr("alt") );
})});
Here's a fiddle: https://jsfiddle.net/wmjtfLja/1/
Note that if you have more than one element of class .title, they will all change. So you may want to select the title element by id or by relative path from the clicked image.

Realizing in advance, the danger of providing an answer that is not (superficially) fully aligned with the question, I was struck by the comment from melpomene, whom I initially thought was refering to things not existing in jquery.
melpomene is 100% correct, since getElementByClassName does not exist.
The correct syntax is getElementsByClassName.
Having said that, helloworld is also correct (syntax errors aside), since loading jquery for every little task is really redundent, and one can manipulate by class with little more half a dozen lines of pure javascript.
But, getting elements by class has dangers, since the return is a 'live' array.
For example, with dylan's original question, getting by class is only useful to return the first instance (the array length is just a guide of how many elemnts it applies to). Therefore, for dylan to make changes as he proposed, each requires its own button. (which also means, michael that I believe you are incorrect when you say it will affect all elements with same class name - oth, you are fully correct in noting that one should inpsect for other values (or change the class name) when running loops on the attribute).
Consider the following (on the fly class change);
function otf_cls_change(cls_original,cls_replace){
var a=document.getElementsByClassName(cls_original);
l=a.length;
if (l==0){return 0;}
do {
a[0].setAttribute('class',cls_replace);
a=document.getElementsByClassName(cls_original);
l=a.length;
} while (l>0);
}
This is effective for changing class names on the fly.
But, if we modify the code and
//change this a[0].setAttribute('class',cls_replace); // to
a[0].innerHTML='this_html';
It will cause the browser to hit an endless loop.
Why? because the live array returned by ElementByClass will only process the first item (even if you try to loop the array).
Therefore, while changing the class on the fly is fun and very do-able, I'd strongly suggest that using it to change any attrib that is not specific to the class id is a bad idea.
Changing the class attrib in conjunction with another attrib is fine.
For example,
a[0].innerHTML='this_html'; //do this first
a[0].setAttribute('class',cls_replace); //then this
The above will work to loop class defined elements.
On a point of massive personal hypocrisy, I do get annoyed when people ask for pure javascript solutions, and then some wing nut chimes in with jquery. I guess I'm doing the opposite here, since evidently, the question was jquery related, and here I am throwing out pure javascript. Sorry bout that.
btw, dylan, good luck with it. glad you bit back on the negative comment. Too many people here are terrified of offending, and wind up get bullied.
hth,
Gary

Get an specific value of css class, using d3js

I have an HTML table and I want to set the color of an specific part of the table (border-top-color of a cell classed "first").
To get the color I need to access to an specific value within a css class.
Example:
Table
<table class="tabla">
<caption>Title</caption>
<tr>
<td class="first">A</td>
<td class="first">157</td>
</tr>
</table>
CSS
This is the class where I need to be able to get the color
.color { fill: #95ccee;
background-color: #95ccee;
}
To achieve, I'm using d3.js in the follow way
var selectTablas = d3.selectAll (".tabla");
selectTablas.selectAll(".first")
.style("border-top-color", "Here the function that will get the color");
The function should loop a dataset and, depending of the "d", get different values of different classes.
Here, the extended code
http://jsfiddle.net/ploscri/dHYcd/
Thanks in advance.

Ok here's my first stab at it. The question isn't super clear, but this function provides you with a way to pass a class name into it and retrieve the color on that class. I updated your example with the color you have in the question. I assume you have a function somewhere else that maps the difference value into a classname.
http://jsfiddle.net/dHYcd/1/
First thing I did here was make a container of hidden classes that carry the colors for testing. In order to grab the value from the css, it needs to be present in the html, which I assume it is already somewhere. If it's not I have no idea why you'd be doing it this way rather than just defining the color in the javascript.
<div id='colors'>
<span class='color1'></span>
</div>
Next, added the css declaration that you have in your question but was not in the jsfiddle, but changed out fill and background-color for just color. I also made sure the div containing the colors was hidden so it wouldn't interfere with the example.
#colors { display: none }
#colors .color1 { color: #95ccee }
Finally, the function to actually get the color from the class is fairly simple. The code is reproduced below:
function get_color(classname){
var el = document.querySelector('#colors .' + classname);
return getComputedStyle(el).getPropertyValue('color');
}
This function just grabs an element based on a class name that you provide as an argument, then grabs the css value of color. You can see that it would be easy to swap out color if you wanted to get another property value, or even to add the property value as a second argument to the function, but I didn't see a need for this in this example.
Hope this helps, and if this isn't quite what you were after, I apologize, the question was a little difficult to interpret. Feel free to add a comment or edit to clarify the question and I'll update the answer to get closer to what you are after (if I didn't nail it this time).
EDIT
OP clarified that they are looking for the best way to store color values and figured it would be in the css. I would say this is not the best way to store color values, and recommend storing them in an object in the javascript, since they are only needed in the javascript. Here is an updated fiddle that stores the colors in a better way:
http://jsfiddle.net/dHYcd/2/
If you change colors.blue to colors.red you'll see that you can easily swap between the different colors, and the syntax is native to javascript anyway.

Add css class to a td tag using javascript

i'm trying to make a timetable for a Moodle in form of a Greasemonkey script.
The idea is to highlight the subject for the current hour, but i can't find a working way of doing it.
I'm injecting css into the page, and using jQuery to add the injected css class to the target td.
This is the css code injected into the page header:
.current_class {background-color:green};
And this is the javascript code used to add the class to the td:
var cell = $("#timetable_table").find("tr").eq(current+1).find("td").eq(date.getDay());
I know cell is the correct td because i can cell.text("foo") and the correct cell is modified, but when i do:
cell.addClass("current_class");
the table stays the same.
I don't have to do it that way, i only want to dynamically change the background on a td tag, so i don't mind using other methods.
Thanks.

First I would suggest you change to this:
var cell = document.getElementById('timetable_table').rows(current+1).cells(date.getDay());
And:
cell.className += (cell.className ? " " : "")+"current_class";
But that's just for performance reasons
The probable cause of the issue is that you have background-color being defined elsewhere with greater specificity. Try using this CSS selector:
#timetable_table tr>td.current_class{background-color:green};
That should be specific enough to win.

use className property for change or add class like example:
tbody.firstChild.lastChild.className='tr-parent1';

JQuery or Javascript code to change the font of the last character in html text

I know it sounds odd, but I'd like to create an html class that will change the font of the last character in the tagged text.
while css lets you change the fontsize, color of the first character of some strings, there is sadly nothing to change the font of the last character.
Is it best to use the charAt(length-1) in JS or is there some way in JQuery to alter the last character of the selected class?

You'll have to fetch, change, and then reput the html content of your texts.
I made a fiddle to illustrate it :
http://jsfiddle.net/dystroy/3maG5/
Be aware that there are risks : without greater analysis you may have problems if your paragraphs (or other texts) end with an element.
EDIT : I just see that eyurdakul made a few seconds before me a very similar answer. I think he's correct too. I let this answer as a complementary one to give a testable example. Of course, if one answer should be accepted, it's probably eyurdakul's one, he was faster :)

give them some class for the selector, .last for example;
$(".last").each(function(){
var inner = $(this).html();
var firstPart = inner.substring(0, (inner.length-1));
var secondPart = inner.substring((inner.length-1), inner.length);
$(this).html(firstPart);
$("<span/>").css("font", "Arial").html(secondPart).appendTo($(this));
});

create css class on the fly in codebehind

I have a search page that is used in multiple places with multiple 'themes' throughout my site. I have a few divs that can have their background color changed based on a radio button selection (whether they are enabled or not). I can do this just fine by changing the css class of the div on the fly with javascript.
However, these themes could potentially change, and the background color is grabbed from a database when the page is created. Right now I do this in the C# codebehind:
string bgStyle = "background-color:" +theme.searchTextHeaderColor +";";
OwnerSearchHeader.Attributes.Add("style", bgStyle);
In the Javascript I need to change this color to make it look disabled, and when the user clicks back to this div I need to re-enable it by changing it back to its original color. But since I only knew this color in the code-behind, I don't know what it was in the Javascript.
So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Alternatively I could create a hidden element, assign it the 'enabled' style, and use that as a reference in the JavaScript when enabling my div. This seems like a hack but maybe its the easiest way. I'm still new to a lot of this, so I'd appreciate any suggestions. Thanks for the input!

So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Yes, this is the anser; do this. In the <head> of your document add a <style> and put your CSS in there like so: (my Asp.NET is a little rusty so forgive me if it has some hicups ;) )
<style>
<!--
.divEnabled {
background-color:<%=theme.searchTextHeaderColor%>;
}
.divDisabled {
background-color:gray; /* or wtv */
}
-->
</style>
You could also put it in an external CSS file, which may be a good idea.
Then write some JavaScript to add/remove the class attribute (I'm going to ask that you don't call is the "CSS Class" ;) )
var ownersearchheader = document.getElementById("<%=OwnerSearchHeader.ClientId%>");
// changing the class attribute to `divDisabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivEnabled\b/, "divDisabled")
ownersearchheader.setAttribute("class", newClassAttribute);
// ... or,
// changing the class attribute to `divEnabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivDisabled\b/, "divEnabled")
ownersearchheader.setAttribute("class", newClassAttribute);
This is indeed a mouthfull, so, like #Haydar says, you might want to use jQuery, which offers easy-as-pie addClass(), removeClass() and toggleClass() methods.

You can use the jquery .toggleClass method.
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
Here is the link to the api doc.
Jquery API