views:

1773

answers:

3

Hello guys,

I'm dealing with this situation :

  • I have a color animation script which targets by id (it's not JQuery but pure javascript)
  • then I have a dynamic list without ids : 'ul' somePHP throwing list items '/ul'
  • and finally I have JQuery itself (which I'll use to add several ids on the fly to the list items: but I still don't know how)

I've realised that I couldn't add, with JQuery, single classes to the list items, as the color plugin only searches by id (it uses getElementById, which have no parallel with classes).

I must exclude so the addClass JQ function, which would be easy enough to put at work.

The script only would work if I could insert ids in the list, 5 well-defined ids, and give later some instructions in the externalised color plugin to affect 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's javascript itself, but I thought it would be easier using JQuery to add, in some way, ids in my html.

The color plugin is an awesome piece of code written by Michael Leigeber I reproduce as follows :

// 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 those ids on the fly, or, maybe, how to change the javascript to target classes,

Many thanks,

Jan

+2  A: 

If you're using jquery you can get an element by class using syntax like this (assuming the css class is called 'className':

$(".className").mouseover(function(){
  alert("something");
});

to do the same thing with an id you would do this in jquery:

$("#idVal").mouseover(function(){
  alert("something");
});
Steve Willcock
We use jQuery at work, so I never realized that there wasn't a DOM function to get elements by classname. Weird that there isn't, though, as there is for tag name, name, and id...
R. Bemrose
The problem is that he's using that script and it is selecting elements by ID. So, he needs to create a bunch of elements on the page with unique IDs. Of course, he could, presumably, just modify that person's code to use jQuery.
KyleFarris
Hi guys, yeah I did know you can use both, classes and ids with jquery, to apply whatever effect you wish, but what it needs a workaround is the addition of ids, because there's certainly an addClass function, but no an addId function, which is what the plugin needs.
Peanuts
Actually, it IS a DOM function, querySelectorAll, but it's only supported in the very newest browsers: Firefox 3.5, IE 8, etc. Most newer browsers also have a getElementsByClassName, but I'm not sure if that's a W3C standard or not.
Joel Mueller
+3  A: 

So you have an ordinary <ul></ul> and want to give every <li> in it a unique id? Try the jQuery command "each":

$("li").each(function(index, element){$(element).attr("id", index);});

This will loop over all <li> elements and assign every element its nummerical index (in the array of elements jQuery has found) as "id" attribute.

gunnarsson
I think you answered his question correctly. :-)
KyleFarris
Thanks for the answer ! I assume I'll print the ids that way, or are they 'stored' somewhere ? I couldn't print them in the final source code. And then, if the id is a number, will some browsers have problems with it ?
Peanuts
The IDs will be in the DOM but will not be visible when you "View Source". If you're not comfortable using a number-only ID, you can always do something like .attr("id", "BLAH"+index) to get BLAH1, BLAH2, BLAH3, etc...
Zack Mulgrew
According to the HTML 4 standard you can't have a numeric-only ID. Only strings matching the following pattern are valid ID's: [A-Za-z][A-Za-z0-9:_.-]*See http://www.w3.org/TR/html4/types.html#h-6.2
Joel Mueller
A: 

i want to get ids of the element some thing like that any body have idea then please help me

jabeen