Databases
StackOverflow2013
Postsdbo
POJQuery : adding 5 id's on the fly (instead of classes)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery : adding 5 id's on the fly (instead of classes)
    text
    copied!<p>I'm dealing with this situation :</p> <ul> <li>I have a color animation script which targets by id (it's not JQuery but pure javascript)</li> <li>then I have a dynamic list without ids : 'ul' somePHP throwing list items '/ul'</li> <li>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)</li> </ul> <p>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).</p> <p>I must exclude so the addClass JQ function, which would be easy enough to put at work.</p> <p>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 :</p> <pre><code>&lt;ul&gt; &lt;li&gt;&lt;a href="" id="ontheflyone"&gt;pulled from the DB&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" id="ontheflytwo"&gt;pulled from the DB&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" id="ontheflythree"&gt;pulled from the DB&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" id="ontheflyfour"&gt;pulled from the DB&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" id="ontheflyfive"&gt;pulled from the DB&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Then, the instructions :</p> <pre><code>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. </code></pre> <p>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.</p> <p>The color plugin is an awesome piece of code written by <a href="http://www.leigeber.com/2008/05/javascript-color-fading-script/" rel="nofollow noreferrer">Michael Leigeber</a> I reproduce as follows :</p> <pre><code>// 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 &lt;= steps) { var r = target.r; var g = target.g; var b = target.b; if(r &gt;= er) { r = r - rint; } else { r = parseInt(r) + parseInt(rint); } if(g &gt;= eg) { g = g - gint; } else { g = parseInt(g) + parseInt(gint); } if(b &gt;= 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; } </code></pre> <p>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,</p> <p>Many thanks,</p> <p>Jan</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload