Thursday, November 1, 2012

How to change elements style runtime using jquery

I am writing this for my personal preference.
if somebody is getting benefited with it no need to thank me but dont scold me if you dont understand :)

function moveDiv() {
        var top, left;
        var ch = document.getElementById('testing').style.left;
        ch = document.getElementById('testing').style.top;
        document.getElementById('testing').style.left =left  + 'px';
        document.getElementById('testing').style.top = top +  'px';
        top += 10; left += 10;
        if (top>700){top = 50; left = 50;}
}
before adding this script we need to add  the below statements to the index


<div  id="testing" style="position: fixed; z-index: 100000; -o-transition:width 2s;" >
    <div class="channel_image">
        <img class="channel_logo" id="logo_{intBitMap}"
             src="images/channel/logo/3.png"
             onerror="this.src='images/channel/logo/1.png';"
                />
    </div>
    <div class="channel_info">
        <span class="channel_number">3</span>
        <span class="channel_name">Name</span>
    </div>
</div>


create a button call the above function moveDiv whenever button or key is pressed on the key board



No comments: