Rank: Member
Joined: 3/8/2007(UTC)
Posts: 139
|
Hi Everybody, Recently a user inquired about a "non-table" based image radio button list so that they could easily position their product choices. Attached to this thread is an archive with some updated files that will help you do this. Extract the files and folder to your "SiteRoot\BVModules\ProductChoices\" folder. Do not overwrite your existing image radio button list, just add this as an alternative. There are some extra styles that you will want to add to your style sheet. I have added some examples in a text file in the archive. I hope this helps! Thanks,  HorizontalChoices.jpg (20kb) downloaded 174 time(s).You cannot view/download attachments. Try to login or register. |
Everett Comstock
BV Software |
|
|
|
|
|
Rank: Member
Joined: 2/18/2006(UTC)
Posts: 172
|
Everett,
What files/folder should we overwrite. Currently we have 3 folders:
1. Drop Down List
2. Image Radio Button List
3. Radio Button List
Thank you.
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
You wouldn't necessarily overwrite, you would just add it as a new option in a new folder. Unless you want to automatically apply it to all of the products already set to use the standard image radio button list, and in that case you should be able to overwrite them (haven't tested it).
Everett, are the images properly treated as labels so the options are selected when the images are clicked? I noticed that the table-based display module doesn't. |
|
|
|
|
|
|
Rank: Member
Joined: 2/18/2006(UTC)
Posts: 172
|
Should I just create a new folder with the xxx name and have all new files in?
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
Yep, the name of the zip file (CSS Image Radio Button List) would be ideal. |
|
|
|
|
|
|
Rank: Member
Joined: 3/3/2006(UTC)
Posts: 1,737
|
How would this affect anyone using radioButton.Text = choiceOption.DisplayText.ToString in View.aspx.vb? How would you place the text below the buttons? If you have many choices or large images (say,8) will the list wrap (5 top line, 3 bottom line all centered - default?), or stack (4 top line, 4 bottom line)? Some pages are quite narrow. http://forums.bvcommerce...spx?f=79&m=46054 |
Optimists invent airplanes,
Pessimists buy parachutes. |
|
|
|
|
|
Rank: Member
Joined: 3/8/2007(UTC)
Posts: 139
|
Hey Cliff,
In regard to "are the images properly treated as labels so the options are selected when the images are clicked?". No they are not. But I will modify it so that the images will output as labels.
And Mitch.... I'll see about getting the label names in there too!
Thanks, |
Everett Comstock
BV Software |
|
|
|
|
|
Rank: Member
Joined: 3/8/2007(UTC)
Posts: 139
|
Hey Cliff,
This may be a little more difficult than expected. Adding the image to a label and getting the radio button to respond to its respective image was easy. However, it looks like Anthem may be responding to the "on-click" event opposed to the "on-focus" event, so it may be difficult to get all the parts in working order without having to seriously modify the code. I'll keep investigating though.
And Mitch, if you want labels then add this line of code after
"AddHandler radioButton.CheckedChanged, AddressOf RadioButton_CheckedChanged" :
radioButton.Text = choiceOption.DisplayText.ToString
Thanks, |
Everett Comstock
BV Software |
|
|
|
|
|
Rank: Member
Joined: 3/8/2007(UTC)
Posts: 139
|
Hi Mitch,
I didn't read your post as closely as I should have. The extra code will not affect the functionality of the page. It will only affect the display and layout of the radio buttons.
Thanks, |
Everett Comstock
BV Software |
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
Thanks, Everett. An overall audit of labels that should be label tags throughout the app would be a great addition to SP3. |
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
Originally Posted by: "Everett"  This may be a little more difficult than expected. Adding the image to a label and getting the radio button to respond to its respective image was easy. However, it looks like Anthem may be responding to the "on-click" event opposed to the "on-focus" event, so it may be difficult to get all the parts in working order without having to seriously modify the code. I'll keep investigating though. Everett, do you have this working with Anthem? Even without adding the labels, I can't get it to change the main image or title when an option is selected. |
|
|
|
|
|
|
Rank: Member
Joined: 11/5/2003(UTC)
Posts: 2,136
Was thanked: 1 time(s) in 1 post(s)
|
Cliff, are you using the control Everett posted? Unmodified? |
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
Yeah. Actually, something else must be going on here with my setup. Suddenly, none of my local sites are doing the anthem dance. No clue what's going on, I don't think anything has changed... |
|
|
|
|
|
|
Rank: Member
Joined: 11/5/2003(UTC)
Posts: 2,136
Was thanked: 1 time(s) in 1 post(s)
|
Try adding this small script to a page. It will display an alert if there is a server error, Code:
<script[b][/b] type="text/javascript[b][/b][b][/b]">
function Anthem_Error(result) {
alert[b][/b](result.error);
}
</script[b][/b]>
|
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
Yeah, the alert comes up with "BADRESPONSE" when one of the radio button items is clicked. |
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
OK, turns out that some beta Visual Studio stuff I installed the other day was the culprit. I did a system restore in Vista and Anthem is working again (though the state of some apps after the restore is kind of scary).
Andy, I have the label tags in place, but Anthem isn't responding (other than flashing the main product image). Any ideas why? |
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
I think I've figured it out. I used an Anthem.label instead of manually creating a 'label' tag with a 'for' attribute. The 'AssociatedControlID' attribute automatically creates the 'label' tag. For this example, I have the options in an unordered list. View.aspx snippet: Code: <ul id="radioButtonList" runat="server"></ul> View.aspx.vb snippet: Code:
For Each choiceOption As Catalog.ProductChoiceOption In choice.ChoiceOptions
Dim optionSettingsManager As New Datalayer.ComponentSettingsManager(choiceOption.Bvin)
Dim li As New UI.HtmlControls.HtmlGenericControl("li")
Dim radioButton As New Anthem.RadioButton()
radioButton.AutoCallBack = True
radioButton.GroupName = Me.BlockId
radioButton.ID = choiceOption.Bvin
If choiceOption.IsDefault Then
radioButton.Checked = True
Else
radioButton.Checked = False
End If
If choiceOption.IsNull Then
Me.NullValue = choiceOption.Bvin
End If
AddHandler radioButton.CheckedChanged, AddressOf RadioButton_CheckedChanged
li.Controls.Add(radioButton)
Dim lbl As New Anthem.Label()
lbl.AssociatedControlID = radioButton.ClientID
lbl.ToolTip = choiceOption.DisplayText
Dim img As New Anthem.Image()
img.AlternateText = choiceOption.DisplayText
img.ImageUrl = Page.ResolveUrl("~/" & optionSettingsManager.GetSetting("ImageUrl"))
lbl.Controls.Add(img)
li.Controls.Add(lbl)
radioButtonList.Controls.Add(li)
Next
Everything seems to be working, but please let me know if you see a better way of doing this. |
|
|
|
|
|
|
Rank: Member
Joined: 11/5/2003(UTC)
Posts: 2,136
Was thanked: 1 time(s) in 1 post(s)
|
Cliff, .NET 3.5 does break Anthem 1.5. If you are building your own Anthem.dll, there is a fix here, http://anthem-dot-net.cvs.sourceforge.net/anthem-dot-net/anthem/Anthem/Manager.cs?view=log It turns out that IE has a problem handling images inside of labels. No surprise. The behavior in the article does work, or you can just add the onclick handler to each <img> in the list. Either way, the handler bubbles the event up to the parent (<label> in this case). I did not really like all the <div>'s in Everett's version of the choice list, so I made a different version of View.ascx(attached). It uses an Anthem.RadioButtonList (just like the normal Radio Button List that comes with BVC5), but instead of DataBind-ing the choices, I create the Text HTML to display the image (and add the onclick handler). To get rid of all the <table> formatting that RadioButtonList normally outputs, I set RepeatLayout="Flow". To get rid of the <br /> elements that the Flow layout uses to create columns, I set RepeatColumns="0". Now all the choices just flow one after the other. To center the image under the radio button, I use the following 2 styles: Code:
[color=#a31515>
span.rbitem</FONT>displayblockfloatlefttext-aligncenter[color=#a31515>
img.rbimgdisplayblock<FONT]}[/color]
File Attachment(s): View.ascx (2kb) downloaded 198 time(s).You cannot view/download attachments. Try to login or register. |
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
Thanks, Andy. Yeah, 3.5 must have been it.
I like your setup better, since it does away with most of those extra spans. I haven't been able to get the behavior to work, and not sure what to do with the onclick handler, though. But I think I've found a way around it in IE, using background images for my swatches. Now I just have to tackle Safari 2's lack of label support.
Appreciate the help! |
|
|
|
|
|
|
Rank: Member
Joined: 11/5/2003(UTC)
Posts: 2,136
Was thanked: 1 time(s) in 1 post(s)
|
Background images are probably better ("less is more"). If you are still curious, my View.ascx.vb adds an onclick handler to each foreground image so it looks like this when rendered: Code:
<label for="zzz"><img onlick="return bubbleClick(this)" alt="xxx" src="yyy"/></label>
Then I added this javascript to the Product.ascx in my ProductTemplate folder, Code:
function getParentElementByTagName(oElement, tagName)
{
var returnValue = null;
while((oElement = oElement.parentNode) && oElement != document)
{
if(oElement.tagName && oElement.tagName.toUpperCase() == tagName.toUpperCase())
{
returnValue = oElement;
break;
}
}
return returnValue;
}
function bubbleClick(el)
{
oParent = getParentElementByTagName(el, 'LABEL');
if(oParent) {
oParent.click();
return false;
}
return true;
}
bubbleClick will find the parent <label> of the image and invoke its click event, then return false to stop the <img>'s click event (so that the event does not bubble up twice in browsers that work). |
|
|
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.