JQuery: add 5 ids on the fly (instead of classes)
I am dealing with this situation:
- I have a colored animation script that targets id (this is not JQuery, but pure javascript)
- then i have a dynamic list without ids: 'ul' somePHP throwing list items '/ ul'
- and finally I have JQuery myself (which I will use to add multiple items on the fly to list items, but I still don't know how)
I realized that I could not add with JQuery separate classes to the list items, since the plugin plugin only searches by id (it uses getElementById, which have no parallel with classes).
I have to exclude the addClass JQ function which will be simple enough to work with.
The script will only work if I can insert ids into a list, 5 well-defined ids, and give some instructions in an external color plugin to influence them:
<ul>
<li><a href="" id="ontheflyone">pulled from the DB</a></li>
<li><a href="" id="ontheflytwo">pulled from the DB</a></li>
<li><a href="" id="ontheflythree">pulled from the DB</a></li>
<li><a href="" id="ontheflyfour">pulled from the DB</a></li>
<li><a href="" id="ontheflyfive">pulled from the DB</a></li>
</ul>
Then the instructions:
document.getElementById(’id’).onmouseover = function() { 'ontheflyone','text','$color1' };
document.getElementById(’id’).onmouseout = function() { 'ontheflyone','text','$color2'};
document.getElementById(’id’).onmouseover = function() { 'ontheflytwo','text','$color1' };
document.getElementById(’id’).onmouseout = function() { 'ontheflytwo','text','$color2'};
etc.
I could change the plugin javascript itself, but I thought it would be easier to use JQuery to add, in some way, ids in my html.
The color plugin is a wonderful piece of code written by Michael Leigeber I reproduce the following:
// main function to process the fade request //
function colorFade(id,element,start,end,steps,speed) {
var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
var target = document.getElementById(id);
steps = steps || 20;
speed = speed || 20;
clearInterval(target.timer);
endrgb = colorConv(end);
er = endrgb[0];
eg = endrgb[1];
eb = endrgb[2];
if(!target.r) {
startrgb = colorConv(start);
r = startrgb[0];
g = startrgb[1];
b = startrgb[2];
target.r = r;
target.g = g;
target.b = b;
}
rint = Math.round(Math.abs(target.r-er)/steps);
gint = Math.round(Math.abs(target.g-eg)/steps);
bint = Math.round(Math.abs(target.b-eb)/steps);
if(rint == 0) { rint = 1 }
if(gint == 0) { gint = 1 }
if(bint == 0) { bint = 1 }
target.step = 1;
target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
}
// incrementally close the gap between the two colors //
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) {
var target = document.getElementById(id);
var color;
if(target.step <= steps) {
var r = target.r;
var g = target.g;
var b = target.b;
if(r >= er) {
r = r - rint;
} else {
r = parseInt(r) + parseInt(rint);
}
if(g >= eg) {
g = g - gint;
} else {
g = parseInt(g) + parseInt(gint);
}
if(b >= eb) {
b = b - bint;
} else {
b = parseInt(b) + parseInt(bint);
}
color = 'rgb(' + r + ',' + g + ',' + b + ')';
if(element == 'background') {
target.style.backgroundColor = color;
} else if(element == 'border') {
target.style.borderColor = color;
} else {
target.style.color = color;
}
target.r = r;
target.g = g;
target.b = b;
target.step = target.step + 1;
} else {
clearInterval(target.timer);
color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
if(element == 'background') {
target.style.backgroundColor = color;
} else if(element == 'border') {
target.style.borderColor = color;
} else {
target.style.color = color;
}
}
}
// convert the color to rgb from hex //
function colorConv(color) {
var rgb = [parseInt(color.substring(0,2),16),
parseInt(color.substring(2,4),16),
parseInt(color.substring(4,6),16)];
return rgb;
}
So, a million thanks, if someone can tell me how to add these ids on the fly, or maybe how to change the javascript for the target classes,
Many thanks,
Jan
source to share
So you have a regular one <ul></ul>
and want to give everyone <li>
a unique ID in it? Try jQuery "each" command :
$("li").each(function(index, element){$(element).attr("id", index);});
This will span all elements <li>
and assign each element its nummerical index (in an array of elements found by jQuery) as an id attribute.
source to share
If you are using jquery you can get element by class using syntax like this (assuming the css class is called "className":
$(".className").mouseover(function(){
alert("something");
});
to do the same with an id, you would do this in jquery:
$("#idVal").mouseover(function(){
alert("something");
});
source to share