MachForm Community Forums » MachForm 3

1. Fa
   Member

   Hi,
   When hovering on a radio multi-choice field, the guideline when set appears.
   And i would be interested in the following: hovering on each choice/radio, the guideline is changed with another text. And when selected/highlighted, the guideline that remains being the one associated with the selection/selected radio. And when the highlight goes to another field, the guideline is hidden.

   I have started looking at the code but any suggestion about the possibility, where to look would be welcome.
   Thanks.

   Note: i haven't found anything in the forums that would lean towards such feature.

   Posted 11 years ago #
2. 

   yuniar

   I'm afraid this one won't be quite simple to do. You will need to use some Javascript to attach different text for each hover event.
   I'm afraid I won't be able to help with the code for this one. Sorry :(

   ---

   MachForm Founder

   Posted 11 years ago #

3. Fa
   Member

   Thanks Yuniar for your reply.

   I think i managed to do it without affecting many files. I only modified view.js and the form.
   * In the form, the guideline associated with the multiple choice, i put according to the id of the radio
   
the text on the li</small></p>
<p style="display:none" id="guide_6_1"><small>my text for the 1st radio</small></p>
...
<p style="display:none" id="guide_6_5"><small>my text for the last radio

   the code starts with closing the li guidelines.
   the code ends without closing things because view-functions.php will do it for the guidelines.

   * The idea is to reuse the current hover effect but to replace the li guidelines value with the one from the radio and trigger a hover on the li
   
$('#main_body li.multiple_choice span').hover(
function(e) {
var radio = $(':first-child', this);
if (radio.length > 0){
var temp = radio.attr("id").split('_');
var li = $("#li_"+temp[1]);
if ( li.hasClass('highlighted') != true )
{ //replace the li guideline text with the current hovered radio guideline
var radio_guideline = $("#guide_" + temp[1] + "_" + temp[2]);
var li_guideline = $("#guide_" + temp[1]);
if ( radio_guideline.length > 0 && li_guideline.length > 0 )
{//we have guidelines
li_guideline.html(radio_guideline.html());
li.trigger(e.type);
}
}
else
{ //if highlighted, find the checked radio and use its text
var selected_radio = $('input.radio:checked', li);
if ( selected_radio.length > 0 )
{
var temp = selected_radio.attr("id").split('_');
var radio_guideline = $("#guide_" + temp[1] + "_" + temp[2]);
var li_guideline = $("#guide_" + temp[1]);
if ( radio_guideline.length > 0 && li_guideline.length > 0 )
{//we have guidelines
li_guideline.html(radio_guideline.html());
li.trigger(e.type);
}
}
}
}
});

   And to handle the case when the multi choice is highlighted and fix the guideline value (so that hovering doesn't affect the text),
   in: $("form.appnitro :input").bind('click focus',function(){ i have added
   else if ( current_li.hasClass('multiple_choice') == true ) { $(this).trigger('mouseenter'); } on the test on current_li (i.e if highlighted).
   It triggers a hover on the radio on which the click/focus was done.

   Posted 11 years ago #
4. 

   yuniar

   Oh.. thank you for sharing this!

   ---

   MachForm Founder

   Posted 11 years ago #

RSS feed for this topic

Reply

You must log in to post.