Onclick Highlight of DIV

[rem]

Hello all,

 

I'm trying for a few days to do something with javascript but this is not my strong point at all and I failed each time miserably so I thought to ask for help here.

 

Please point me to a good tutorial or help me to achieve a "radio button" like behavior for a bunch of block level elements.

 

ex: onclick a div is highlighted and then cleared when other one is clicked (this is to show users that certain part of an application has gain focus)

 

Thank you very much in advance and looking forward for your advice.

 

 

Regards

Rem.

[emehrkay]

ok this is fairly easy. I will give you the idea of how to do it.

 

You have a row of radio buttons, give it an id. you have divs, give them ids. each radio button has a value field, relate that to the respective div id in some way.

 

now time for the script. reference the radio buttons by id and add an onchange event fucntion to it:

 

document.getElementById('rb').onchange = function(){}

 

in that function add your highlighting styles to the div that is related to the value of the selected radio button. clear the styles from all of the other divs.

 

that should take care of what you want to do

[rem]

This sounds... like it

I will try to wizard it into a solved topic. Thanks a lot for your time, I really appreciate it.

Promise I'll get back with the result

[rem]

in that function add your highlighting styles to the div that is related to the value of the selected radio button. clear the styles from all of the other divs.

 

Hey, I manage to come up with this (there are no radio buttons involved just divs. i said "radio button" like functionality):

 

function focuss(id) {
     if (document.getElementById(id)) {
         highlight(id);
     }
}
function highlight(id){
    document.getElementById(id).style.borderColor = '#ff0000';
}

 

Now the clicked DIV is highlighted but the big questions is... how to clear the rest of the styles and highlight only the current one?

If I click a new DIV, that's also highlighted and the next one as well until I highlight all of the DIVS... The "active" DIV only should be highlighted, rest of them should be cleared once the focus is lost.

 

 

Thanks a lot for your help emehrkay, I really appreciate it.

 

Regards,

Rem.

[sayedsohail]

add some css i.e,

 

hover and active, something like this, just an example.  Please refer css div styling on google.

 

div.classname :hover {
             background-color:#ff0000;
text-decoration: underline;
font-size: 100%; 
border-bottom: 1px solid #036;
color: #000;
}

div.classname :active {
             background-color:#fff;
text-decoration: underline;
font-weight: bolder;
border-bottom: 1px solid #036;
color: blue;
  }

[rem]

As far as I know, in IE, hover is not functional for other elements than links but I really don't understand what are you suggesting... I don't need a CSS hover behavior and don't need a CSS general styling of the DIVs... What I need is when a DIV is clicked to be highlighted by JavaScript (already accomplished) and when other DIV is clicked, then the initial highlighted DIV looses focus (it's style is cleared) and the last clicked DIV is highlighted and so on...

 

Thank you..

[emehrkay]

oh sorry, i misread what you wanted to do.

 

try this:

 

gather up all of your divs that you want the effect to take place on, something like

 

var divs = document.getElementByTagName('div');

//lets say each one has a classname of focus div

var count = div.length; //do this here instead of inside of the loop

for(var i = 0; i < count; i++){

if(divs.className == 'focus_div'){

divs.onclick=function(){

//use this space to reference your funtion that will handle the highlighting

}

}

}

[sayedsohail]

user currentSelection method in javascript and you are done.

[rem]

oh sorry, i misread what you wanted to do.

 

try this:

 

gather up all of your divs that you want the effect to take place on, something like

 

var divs = document.getElementByTagName('div');

//lets say each one has a classname of focus div

var count = div.length; //do this here instead of inside of the loop

for(var i = 0; i < count; i++){

if(divs.className == 'focus_div'){

divs.onclick=function(){

//use this space to reference your funtion that will handle the highlighting

}

}

}

 

 

<script type="javascript">
startDivs = function () {
        var divs = document.getElementsByTagName('DIV');
        //lets say each one has a classname of focus div
        var count = divs.length; //do this here instead of inside of the loop
        for (var i = 0; i < count; i++) {
            if(divs.className == 'focus_div'){
                divs.onclick = function() {
                    //use this space to reference your function that will handle the highlighting
                    alert('asdasda');
                }
            }
        }
    }
window.onload=startDivs;
</script>

<div class="focus_div">click me 1</div>

<div class="focus_div">click me 2</div>

 

 

 

 

this is what i've done but unfortunately it is not working

what on earth am i doing wrong?

 

thanks for the help!

[nogray]

Yahoo UI has this made at

 

http://developer.yahoo.com/yui/button/

click on examples to see how they set radio buttons.

[rem]

Yahoo UI has this made at

 

http://developer.yahoo.com/yui/button/

click on examples to see how they set radio buttons.

 

Yes, that's about what I need!

Thanks for the tip... very interesting indeed!

[emehrkay]

that was my errors

 

divs is an array

 

if(divs.className == 'focus_div'){

                divs.onclick = function() {

 

change to

 

if(divs.className == 'focus_div'){

                divs.onclick = function() {

 

that should work

[emehrkay]

it didnt let me add the i index

 

if(divs[i].className == 'focus_div'){
                divs[i].onclick = function() {

[rem]

Thanks a lot for the latest post and I'm sorry for the late reply... I was away for one week. I'll see about that on Monday and post the result here asap. Thanks once again..

Best, Rem.

 

[rem]

this is what i did

 

function focuss (id) {
        var divs = document.getElementsByTagName('DIV');
        //lets say each one has a classname of focus div
        var count = divs.length; //do this here instead of inside of the loop
        for (var i = 0; i < count; i++) {
            if (divs[i].className == 'focus_div'){
                divs[i].onclick = highlight(id);
            }
        }
}
    
function highlight(id) {
    //use this space to reference your funtion that will handle the highlighting
    document.getElementById(id).style.borderColor = '#ff0000';
}

 

 

and the html

 

<div id="pb-header" class="focus_div" onclick="focuss('pb-header');">
        text here
    </div>

    <div id="pb-bg-heading" class="focus_div" onclick="focuss('pb-bg-heading');">
           some text here
        </div>

 

even though the IDs are pointless here sine we're triggering the focus state with the "focus_div" class but there's no other method I'm aware of to make it happen otherwise... I'm really sorry for bothering you like this but unfortunately my javascript knowledge are almost none please advice how to go further..

 

thanks!