i have a simple javascript that add style to a slider when is turn to show, but i want to remove the style when the next slider e and also on mouse over remove the both style.

This is my javascript function that add style="width: 200px" to new slider and add style="width: 200px" to old.

function test(){
    var read = document.getElementById("slide-0") // how can i add here to read the incremented slide-0, slide-1, slide-2
        .removeAttribute("style",0);
}

    function noEffect(pOld,pNew){

        if (pOld){
            pOld.style.width='10px';
        }

        if (pNew){
            pNew.style.width='200px'; //this style bee on active slider.
        }
    }

Slider html

<div class="slider" onMouseOver="test()">
<ul>
<li id="slide-0" class="slide" style="width: 10px"><img src="image.jpg"></li>
<li id="slide-1" class="slide" style="width: 200px"><img src="image.jpg"></li> <!-- this is active now -->
</ul>
</div>

Exactly what i want is to remove the style on both on mouseover.

Any help is appreciated.

i have a simple javascript that add style to a slider when is turn to show, but i want to remove the style when the next slider e and also on mouse over remove the both style.

This is my javascript function that add style="width: 200px" to new slider and add style="width: 200px" to old.

function test(){
    var read = document.getElementById("slide-0") // how can i add here to read the incremented slide-0, slide-1, slide-2
        .removeAttribute("style",0);
}

    function noEffect(pOld,pNew){

        if (pOld){
            pOld.style.width='10px';
        }

        if (pNew){
            pNew.style.width='200px'; //this style bee on active slider.
        }
    }

Slider html

<div class="slider" onMouseOver="test()">
<ul>
<li id="slide-0" class="slide" style="width: 10px"><img src="image.jpg"></li>
<li id="slide-1" class="slide" style="width: 200px"><img src="image.jpg"></li> <!-- this is active now -->
</ul>
</div>

Exactly what i want is to remove the style on both on mouseover.

Any help is appreciated.

• javascript

• the id "slide-0" is repeated, ID can not be repeated. <li id="slide-0" class="slide" style="width: 10px"><img src="image.jpg"></li> <li id="slide-0" class="slide" style="width: 200px"><img src="image.jpg"></li> – Korvo Commented Jun 29, 2013 at 12:35
• yes, sorry i copy paste, i modified now. – Dario Commented Jun 29, 2013 at 12:49
• Nice. Glad you managed to solve your problem. – Korvo Commented Jun 29, 2013 at 16:35

2 Answers 2

specify 0px

pOld.style.width='0px';

A very nice solution would be to uses classes. Instead of adding a style, add and remove classes. The following code adds a class to the ponent that will be styled.

var d = document.getElementById("div1");
d.className = d.className + " widthAlteration";

And in your CSS have:

.widthAlteration
{
    //width alteration
}

And if you would want to revert the effect, just do the same:

var d = document.getElementById("div1");
d.className = "";

Or for convenience there is integrated mand for that:

var ele = document.getElementById("div1");
addClass(ele, "widthAlteration");
// or
removeClass(ele, "widthALteration");

Seeing as the previous part was not working, I will suggest jQuery

Implement the .js file in your project and use jQuery. It is one of the most monly used libraries. It is rare to see JS done in raw (maybe if you only need to perform a simple operation), but in general cases, jQuery is the way to go.

After implementing, add this to your project:

<script>
$( document ).ready(function() {
//$("here goes the ID, class, ponent w.e. you desire")
    $(".widthAlteration").click(function(){
        $(this).removeClass(".widthAlteration");
    });
});
</script>