Need help approaching / tackling this functionality

[james.calhoun]

OK... i think this is an easy question.

I Have a number of Divs, and when you rollover the divs their border
color changes.

When You click on a div, I want the rollover state to stick.

I still want you to be able to rollover the OTHER divs

If you click on ANOTHER div, I want the first div to go back to its
normal state, and the newly clicked div to get the rollover effect.

There are going to be many, many divs... so I really dont know what is
the smoothest way to go about this!

Any help would be appreciated!

[Jeff Paffett]

ja***********@gmail.com wrote:

OK... i think this is an easy question.

I Have a number of Divs, and when you rollover the divs their border
color changes.

When You click on a div, I want the rollover state to stick.

I still want you to be able to rollover the OTHER divs

If you click on ANOTHER div, I want the first div to go back to its
normal state, and the newly clicked div to get the rollover effect.

There are going to be many, many divs... so I really dont know what is
the smoothest way to go about this!

Any help would be appreciated!

You should store the clicked div in a variable, using the onClick event
and insert code in your rollover function so that it doesn't change the
border color back if that's a selected div.

[plato]

>From a pseudocode standpoint you would have something like the
following:

var divs = new Array();
divs.push( document.getElementById( 'div1' ) ); // because I can't
remember array literals
divs.push( document.getElementById( 'div2' ) );
divs.push( document.getElementById( 'div3' ) );

var clicked;

function clearAll() {
clicked = false;
for( i in divs ) clear( divs[i] );
}
function clear( theDiv ) {
if( clicked != theDiv ) theDiv.style.className = 'divCleared';
}
function select( theDiv ) { theDiv.style.className = 'divSelected'; }
function choose( theDiv ) {
if( clicked == theDiv ) clearAll();
else {
clearAll();
clicked = theDiv;
select( theDiv );
}
}
....
<div id="div1" onmouseover="select( this );" onmouseout="clear( this
);" onclick="choose( this );"></div>... for each div just change the id

Now for the learning part:
You have several functions here for convenience's sake. Two
concentrate on getting in and out of the rollover state (select &
clear), and two that handle the sticky rollover (choose & clearAll).
The sticky functions keep track of which div is selected, and execute
the non-sticky functions accordingly.

[james.calhoun]

So I liked both answers, but the second one, although probably more
"right", doesnt seem to be working for me isnce im such an amateur...

But the idea of simply adding making a variable that says "dont
rollover if this one has been clicked" sounds great! Its easy for me to
understand, and smells like it will work... but hasnt yet.

here is what im doing:

// Making these global variables
var model;
var theDiv;

// Storing the selected phone into a hidden field for a form
function selectPhone(model) {
document.getElementById('myPhone').value=model;
}

// Making the div that is provided in this paramater have a border
function rollBorder(theDiv) {
document.getElementById(theDiv).style.border='2px solid #ff9900';
document.getElementById(theDiv).style.padding='0px ';
}
// Heres the problem, i want the rolloff only to work if theDiv has not
been clicked

function rollNoBorder(theDiv) {
if (theDiv != model)
{
document.getElementById(theDiv).style.border='0px solid #ff9900';
document.getElementById(theDiv).style.padding='2px ';
}
}


and then here is the div itself:

<div id="box1" onClick="selectPhone('A1000');"
onMouseOver="rollBorder('box1');"
onmouseout="rollNoBorder('box1');">PHONE</div>
Any ideas??

[web.dev]

ja***********@gmail.com wrote:

So I liked both answers, but the second one, although probably more
"right", doesnt seem to be working for me isnce im such an amateur...

But the idea of simply adding making a variable that says "dont
rollover if this one has been clicked" sounds great! Its easy for me to
understand, and smells like it will work... but hasnt yet.

here is what im doing:

// Making these global variables
var model;
var theDiv;

// Storing the selected phone into a hidden field for a form
function selectPhone(model) {
document.getElementById('myPhone').value=model;
}

// Making the div that is provided in this paramater have a border
function rollBorder(theDiv) {
document.getElementById(theDiv).style.border='2px solid #ff9900';
document.getElementById(theDiv).style.padding='0px ';
}
// Heres the problem, i want the rolloff only to work if theDiv has not
been clicked

function rollNoBorder(theDiv) {
if (theDiv != model)
{
document.getElementById(theDiv).style.border='0px solid #ff9900';
document.getElementById(theDiv).style.padding='2px ';
}
}


and then here is the div itself:

<div id="box1" onClick="selectPhone('A1000');"
onMouseOver="rollBorder('box1');"
onmouseout="rollNoBorder('box1');">PHONE</div>
Any ideas??

Here's another approach, a slight variant to what you already have. I
think it's somewhat cleaner.

Your CSS:

..borderon
{
border: 2px solid #F90;
padding: 0px;
}

..borderoff
{
border: 0px solid #F90;
padding: 2px;
}

Your JS:

//global variable to keep track of the clicked div
var clicked_div = null;

function myClick(div_elem, model)
{
if(clicked_div)
{
//turn 'off' old div
clicked_div.className = "borderoff";

//replace old div with new clicked div
clicked_div = div_elem;

//turn the new div 'on'
clicked_div.className = "borderon";
}
}

function myMOver(div_elem)
{
div_elem.className = "borderon";
}

function myMOut(div_elem)
{
div_elem.className = "borderoff";

//whatever div element you mouse out of, turn the clicked element on
anyway
if(clicked_div)
{
clicked_div.className = "borderon";
}
}

Your HTML:

<div onclick = "myClick(this, 'A1000');"
onmouseover = "myMOver(this);"
onmouseout = "myMOut(this);">text</div>

One of the benefits of this way is that you can dynamically assign all
your necessary divs the onmouseover and onmouseout event handlers
through javascript instead of handcoding them.

[james.calhoun]

Sounds right, but it seems not to be working for me... the click action
doesnt seem to have any effect. Perhaps its just the Monday morning
idiocy thats keeping me from figuring it out, but is there anything
that is missing in that code?

[Randy Webb]

ja***********@gmail.com said the following on 8/21/2006 11:08 AM:

Sounds right,

What sounds right?

but it seems not to be working for me... the click action
doesnt seem to have any effect.

Then you did something wrong.

Perhaps its just the Monday morning idiocy thats keeping me
from figuring it out, but is there anything that is missing
in that code?

Is it also the Monday morning idiocy that kept you from quoting what
you were replying to?

P.S. The issue with the code, as posted, is double periods in the CSS
definitions. Instead of:

...borderon

It should be:

..borderon

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[james.calhoun]

What sounds right?

The solution just posted... what, you thought i meant the new outkast
album?

Then you did something wrong.

Perhaps, but thats why I was asking for clarifications, because I
pretty much just copied and pasted. Im going to try again now.

Is it also the Monday morning idiocy that kept you from quoting what
you were replying to?

No actually it was the assumption that if your smart enough to answer
my question, then you would be smart enough to follow the conversation.

P.S. The issue with the code, as posted, is double periods in the CSS
definitions. Instead of:

..borderon

It should be:

.borderon

I dont see any double periods in the first place. Thanks though.

[james.calhoun]

As far as I can tell from the code below, clicked_div is defined as
Null in the beginning, but I dont see where that variable is re-defined
with the actual name of the Div that is being clicked.

It seems that the TWO uses of the if statement:
if(clicked_div)

would both return null, and therefore the function will not work
correctly.

Am I missing something?

Any help would be appreciated!


//global variable to keep track of the clicked div
var clicked_div = null;

function myClick(div_elem, model)
{
if(clicked_div)
{
//turn 'off' old div
clicked_div.className = "borderoff";

//replace old div with new clicked div
clicked_div = div_elem;

//turn the new div 'on'
clicked_div.className = "borderon";
}

}

function myMOver(div_elem)
{
div_elem.className = "borderon";

}

function myMOut(div_elem)
{
div_elem.className = "borderoff";

//whatever div element you mouse out of, turn the clicked element on
anyway
if(clicked_div)
{
clicked_div.className = "borderon";
}

}

[web.dev]

ja***********@gmail.com wrote:

As far as I can tell from the code below, clicked_div is defined as
Null in the beginning, but I dont see where that variable is re-defined
with the actual name of the Div that is being clicked.

It is generic enough such that you don't need to keep track of the
name. Instead we'll be keeping track of the "object" that represents
the div element.

//global variable to keep track of the clicked div
var clicked_div = null;

function myClick(div_elem, model)
{
if(clicked_div)
{
//turn 'off' old div
clicked_div.className = "borderoff";

//replace old div with new clicked div
clicked_div = div_elem;

//turn the new div 'on'
clicked_div.className = "borderon";
}

}

My apologies. I had it in mind, but forgot to put it in. Place an
else statement, and then assign the div element to the variable. This
should only occur once.

else
{
clicked_div = div_elem;
}