Need help approaching / tackling this functionality

Discussion in 'Javascript' started by james.calhoun@gmail.com, Aug 17, 2006.

  1. Guest

    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!
    , Aug 17, 2006
    #1
    1. Advertising

  2. Jeff Paffett Guest

    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.
    Jeff Paffett, Aug 17, 2006
    #2
    1. Advertising

  3. plato Guest

    >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 );
    }
    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.
    plato, Aug 18, 2006
    #3
  4. Guest

    Great Replies... but I need just a little bit more help

    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??
    , Aug 18, 2006
    #4
  5. web.dev Guest

    Re: Great Replies... but I need just a little bit more help

    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.
    web.dev, Aug 18, 2006
    #5
  6. Guest

    Re: Great Replies... but I need just a little bit more help

    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?
    , Aug 21, 2006
    #6
  7. Randy Webb Guest

    Re: Great Replies... but I need just a little bit more help

    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/
    Randy Webb, Aug 21, 2006
    #7
  8. Guest

    Re: Great Replies... but I need just a little bit more help


    > 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.
    , Aug 21, 2006
    #8
  9. Guest

    Re: Great Replies... but I need just a little bit more help

    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";
    }

    }
    , Aug 21, 2006
    #9
  10. web.dev Guest

    Re: Great Replies... but I need just a little bit more help

    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;
    }
    web.dev, Aug 21, 2006
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Richard
    Replies:
    1
    Views:
    390
    Richard
    Dec 24, 2004
  2. MarionEll

    XML 2004 Deadlines Approaching

    MarionEll, Sep 27, 2004, in forum: XML
    Replies:
    0
    Views:
    383
    MarionEll
    Sep 27, 2004
  3. Martijn Faassen
    Replies:
    1
    Views:
    271
    Martijn Faassen
    Apr 14, 2004
  4. rh0dium

    Tackling setup.py - A bug??

    rh0dium, Feb 27, 2007, in forum: Python
    Replies:
    0
    Views:
    302
    rh0dium
    Feb 27, 2007
  5. Alexander Petrov

    Tackling setup.py - A bug??

    Alexander Petrov, Jun 9, 2007, in forum: Python
    Replies:
    0
    Views:
    293
    Alexander Petrov
    Jun 9, 2007
Loading...

Share This Page