next »

[hvshah69]

Please take a look at the following example


h++p://www dot quizrocket dot com/how-sexy-are-you
(mod by perk, dint need to push any gjuice at that link)

If you notice, the radio button gets activated if one clicks anywhere on hover bar. I have been trying to reproduce the effect without any success.

I can create the hover bar but the radio button is activated only when you click on the text label or the button itself. Clicking on the bar does not do anything.
I have looked at the original source file and they seem to be doing it using some jquery functions but their code is extremely convoluted and I cannot figure it out. Is there a more simpler way of achieving the same effect?

Thanks

[perkiset]

Sorry mate, too whipped to look tonight, perhaps tomorrow

[hvshah69]

Thanks. Looking forward to your response

[nop_90]

Just took a quick glance at it. I do not have firebug installed in this browser.
The highlighting with the red appears to be done by CSS

Code:

ol.questions li.hover {
  background: #ce0000;
  border-color: #ce0000;
  color: #fff;
}

But not all browsers support hover. So it appears in the JS it can emulate that behaviour.

Code:

<li class="answer answer-radio">
           <label class="wrapper">
              <input class="radio" type="radio" name="q_0_a" id="q_0_a_0" value="0">
              <span class="label">Some naughty and some nice stuff.
              </span>

            </label>
            <div class="clear"></div>
</li>

What he is doing is something along the lines of this.Using JQuery, find all of the <li> with answer. Add a mouse over if browser does not support hover. Add an event function to all of the <li> elements so when u click on it, it sets the appropriate radio button.

[perkiset]

jQuery is the best way to do it, although it might look a little sketchy. Here's an old-school example of how I might have done this pre-jQuery, just so you can see the logic.

HTML:

Code:

<div id="questionList">
<div id="question1">
<div class="questionTitle">What's in your underwear drawer?</div>
<div>
<div onClick="handleClick(this)"><input type="radio">&nbsp;Underwear</div>
<div onClick="handleClick(this)"><input type="radio">&nbsp;Panties</div>
<divonClick="handleClick(this)"><input type="radio">&nbsp;Other</div>
</div>
</div>

<!-- other questions -->

</div>

Note that all questions in that list would have the same handleClick(this) function reference. This is not optimal though, because IE6 will not do it - so you'd really need to complicate matters with an <a> tag to collect the onClick event. That's why Nop recommends the jQuery library, as do I. But I digress. Here's the JS now:

Code:

function handleClick(sender)
{
// First step: I need to get the parent div of all the questions so that
// I can make adjustments to my peers.
var parent = sender.parentNode;

// Now, un-color all the divs that are children of the parent (my siblings).
var divs = parent.getElementsByTagName('DIV');
for (var i=0; i<divs.length; i++)
divs[i].style.backgroundColor = 'transparent';

// Now color the one that was clicked with red:
sender.style.backgroundColor = 'red';

// You might not need to do this, but it is a good idea.
// Uncheck all the radios in the current list:
radios = parent.getElementsByTagName('INPUT');
for (var i=0; i<radios.length; i++)
radios[i].checked = false;

// finally, check the radio that was selected:
var radios = sender.getElementsByTagName('INPUT');
radios[0].checked = true;
}

I just typed this quickly and did not check it, so there could be problems, but this is the logic as I see it. It also is not cross-browser ready, as I've noted.

The real deal here is to get up to speed on jQuery you could to this as completely unobtrusive code in the header, without anything in the body HTML AT ALL. It'd be way more elegant, but I've not got the time to do another example just now. Hope that helps!

[hvshah69]

Thanks guys.