blink all div with blink id

#1
lol33d

Posted 12 September 2011 - 08:41 AM

Programmer

Members
149 posts

hi guys

i need blink all div with blink id

how to this?

this is my code

<html>

<body>

<div id="blink" style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

<div id="blink" style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

<div id="blink" style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>


<script type="text/javascript">

var i = 1,timer;

window.onload=function() {

timer = setInterval('blink()', 500);

}

function blink() {

 if (i == 1) {

    document.getElementById('blink').style.backgroundColor = '#ff0000';


 } else {

      document.getElementById('blink').style.backgroundColor = '#ffff00';

  }

 if(i == 1) i = 0; else i = 1;

}

//alert(document.getElementsByTagName('div').length);

</script>

</body>

</html>

in this code 3 div, but i have more 20 div in a page,

help me please

thank you

#2
Vaielab

Posted 12 September 2011 - 08:51 AM

Programming God

Members
547 posts

An Id is supposed to be unique for the whole page.

This should do the tricks

<html>

<body>

<div id="blink1" style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

<div id="blink2" style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

<div id="blink3" style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>


<script type="text/javascript">

var i = 1,timer;

var arBlink = new Array('blink1', 'blink2', 'blink3');

window.onload=function() {

timer = setInterval('blink()', 500);


}

function blink() {

 if (i == 1) {

	 for(b in arBlink)

    	document.getElementById(arBlink[b]).style.backgroundColor = '#ff0000';


 } else {

	 for(b in arBlink)

      document.getElementById(arBlink[b]).style.backgroundColor = '#ffff00';

  }

 if(i == 1) i = 0; else i = 1;

}

</script>

</body>

</html>

But if you have 20div in the page this may lag a bit... you should get them all inside an bigger div and change his class like this document.getElementById("idElement").setAttribute("class", "className");

#3
lol33d

Posted 12 September 2011 - 08:54 AM

Programmer

Members
149 posts

thank you, i have more 29div

can you give me a code for all 20div with a name?

thankyou

#4
Vaielab

Posted 12 September 2011 - 09:02 AM

Programming God

Members
547 posts

css:


#blinker div {

background-color:#ff0000;

}


#blinker div.on {

background-color:#ffff00;

}

html:


<div id="blinker">

  <div style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

  <div style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

  <div style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

  <div style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

  <div style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

  <div style="background-color: #ffff00;display: inline;padding: 5px;">WARNING</div>

</div>

Javascript


var i = 1,timer;

window.onload=function() {

timer = setInterval('blink()', 500);

}

function blink() {

 if (i == 1) {

     document.getElementById("blinker").setAttribute( "class", "on");

 } else {

     document.getElementById("blinker").setAttribute( "class", "");

  }

 if(i == 1) i = 0; else i = 1;

}

It should look something like this

#5
lol33d

Posted 12 September 2011 - 09:17 AM

Programmer

Members
149 posts

not work, please add file

---------- Post added at 05:17 PM ---------- Previous post was at 05:14 PM ----------

i need warning alert no background div

#6
WingedPanther

Posted 12 September 2011 - 10:15 AM

A spammer's worst nightmare

Moderators
16,831 posts

Location:Upstate, South Carolina
Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Is there a reason why you're using an ID instead of a class?

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#7
lol33d

Posted 12 September 2011 - 10:53 AM

Programmer

Members
149 posts

yes

#8
oldhendra

Posted 14 September 2011 - 12:52 PM

Learning Programmer

Members
30 posts

Continuing Vaielab's code:

<html>
<head>
<style type="text/css">
.blinkOff {
    background-color:#ff0000;
}
.blinkOn {
    background-color:#ffff00;
}
</style>

<script type="text/javascript">
window.onload=function() {
    timer = setInterval(blinkFunc, 500);
}
function blinkFunc(){
    var nodes = document.getElementsByTagName("*");
    for (var i in nodes){
        if (nodes[i].nodeType == 1){
            var clStr = nodes[i].className;
            if (clStr.search("blinkOff") != -1){
                nodes[i].className = clStr.replace(/blinkOff/, "blinkOn");
            }
            else{
                if (clStr.search("blinkOn") != -1){
                    nodes[i].className = clStr.replace(/blinkOn/, "blinkOff");
                }
            }
        }
    }
}
</script>
</head>

<body>
    <div class="blinkOff classA" style="display: inline;padding: 5px;">WARNING</div>
    <div class="blinkOn classB" style="display: inline;padding: 5px;">WARNING</div>
    <div class="classC" style="display: inline;padding: 5px;">WARNING</div>
    <div style="display: inline;padding: 5px;">WARNING</div>
</body>
</html>