View Single Post
  #1  
Old 04-06-2005, 06:08 AM
 
sstillwell@aerostich.com sstillwell@aerostich.com is offline
 

eXpert
  
Join Date: Jun 2004
Location: Duluth, MN
Posts: 242
 

Default Use Javascript and CSS to hid / flip visibilty of elements

I use this trick on a few different places on my site. It came about after using some less computer savvy people here at work to try to use the site. Mostly to hide parts of a form that a user doesn't need to see unless some criteria is met. Helps so they don't get confused as we know most users don't read.

Examples.
Gift Certificate page
http://www.aerostich.com/giftcert.php

The registration / checkout pages (shipping address is hidden)
https://www.aerostich.com/register.php

All we are doing is making a block of html code visible or hiding it.

I'll go through the process for the gift certificate page.

Step 1
This javascript function should be either in your javascript page or in the head or somewhere on the page.
Code:
// Function to flip visibility of certain div objects function flipdiv(el,state) { if(state=="show"){ status="block"; }else{ status="none"; } document.getElementById(el).style.display = status; }

Step 2
skin1/modules/Gift_Certificates/giftcert.tpl
Starting at about line 188
Code:
<TR><TD colspan="3"></TD></TR> <TR><TD colspan="3" class="table_heading"><FONT class="ProductDetailsTitle">4. {$lng.lbl_gc_choose_delivery_method}</FONT></TD> </TR> <TR><TD colspan="3"> <table cellpadding="0" cellspacing="0" border="0" width="50%"><TR> {if $config.Modules.enablePostMailGC eq "Y"} <TD align="right"><INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" /></TD> {else} <INPUT type="hidden" name="send_via" value="E"> {/if} <td nowrap>{$lng.lbl_gc_send_via_email}</TD> <td width="60%" align="center">OR</td> <td><INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" /></td> <td nowrap>{$lng.lbl_gc_send_via_postal_mail}</td> </TR> </TABLE> </TD> </TR> <TR> <TD colspan="3"> <table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}> <tr> <TD colspan="3">{$lng.lbl_gc_enter_email} </TD></TR> <TR> <TD nowrap align="right">{$lng.lbl_email}</TD> <TD><FONT class="Star">*</FONT></TD> <TD align="left"><INPUT type="text" name="recipient_email" size="30" value="{$giftcert.recipient_email}" class="required"></TD> </tr> </table> </TR> {if $config.Modules.enablePostMailGC eq "Y"} <tr> <td colspan="3"> <table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if} <TR><TD colspan="3">{$lng.txt_gc_enter_postal_mail} </TD></TR> <TR> <TD nowrap align="right">{$lng.lbl_first_name}</TD> <TD><FONT class="Star">*</FONT></TD> <TD align="left"><INPUT type="text" name="recipient_firstname" size="30" value="{$giftcert.recipient_firstname}" class="required"></TD> </TR> <TR> <TD nowrap align="right">{$lng.lbl_last_name}</TD> <TD><FONT class="Star">*</FONT></TD> <TD align="left"><INPUT type="text" name="recipient_lastname" size="30" value="{$giftcert.recipient_lastname}" class="required"></TD> </TR> <TR> <TD nowrap align="right">{$lng.lbl_address}</TD> <TD><FONT class="Star">*</FONT></TD> <TD align="left"><INPUT type="text" name="recipient_address" size="40" value="{$giftcert.recipient_address}" class="required"></TD> </TR> <TR> <TD nowrap align="right">{$lng.lbl_city}</TD> <TD><FONT class="Star">*</FONT></TD> <TD align="left"><INPUT type="text" name="recipient_city" size="30" value="{$giftcert.recipient_city}" class="required"></TD> </TR> {if $js_enabled eq 'Y' && $config.General.use_js_states eq 'Y'} {include file="change_states_js.tpl"} {include file="main/register_states.tpl" state_name="recipient_state" country_name="recipient_country" country=$giftcert.recipient_country|default:$userinfo.b_country|default:$config.General.default_country state=$giftcert.recipient_state|default:$userinfo.b_state full_state=$giftcert.recipient_statename|default:$userinfo.b_statename county_name="" default_county="" default_countyid="" form_name="gccreate" zipcode_name="recipient_zipcode"} {else} <TR> <TD nowrap align="right">{$lng.lbl_state}</TD> <TD><FONT class="Star">*</FONT></TD> <TD align="left"> {include file="main/states.tpl" states=$states name="recipient_state" default=$giftcert.recipient_state default_country=$giftcert.recipient_country} </TD></TR> <TR> <TD nowrap align="right">{$lng.lbl_country}</TD> <TD><FONT class="Star">*</FONT></TD> <TD align="left"> <SELECT name="recipient_country" size="1" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);"> {section name=country_idx loop=$countries} <OPTION value="{$countries[country_idx].country_code}" {if $giftcert.recipient_country eq $countries[country_idx].country_code}selected{elseif $countries[country_idx].country_code eq $config.General.default_country and $userinfo.b_country eq ""}selected{elseif $countries[country_idx].country_code eq $userinfo.b_country}selected{/if}>{$countries[country_idx].country}</OPTION> {/section} </SELECT> </TD> </TR> {/if} <TR> <TD nowrap align="right">{$lng.lbl_zip_code}</TD> <TD><FONT class="Star">*</FONT></TD> <TD align="left"><INPUT type="text" name="recipient_zipcode" size="30" value="{$giftcert.recipient_zipcode}" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);" class="required"></TD> </TR> <TR> <TD nowrap align="right">{$lng.lbl_phone}</TD> <TD></TD> <TD align="left"><INPUT type="text" name="recipient_phone" size="30" value="{$giftcert.recipient_phone}" class="text"></TD> </TR> {/if} </table> </td> </tr> </div> </FORM> </TABLE> <CENTER> {if $usertype eq "C" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")} {if $smarty.get.gcindex ne "" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")} {if $active_modules.Wishlist ne "" and $action eq "wl"} { include file="buttons/gc_update.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y"} {else} { include file="buttons/gc_update.tpl" href="javascript: formSubmit();" js_to_href="Y"} {/if} {else} { include file="buttons/button.tpl" button_title=$lng.lbl_gc_add_to_cart href="javascript: formSubmit();" js_to_href="Y" style="button"} {if $active_modules.Wishlist and $login ne ""} { include file="buttons/add_to_wishlist.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y" style="button"} {/if} {/if} {else} { include file="buttons/button.tpl" button_title=$lng.lbl_gc_create href="javascript: formSubmit();" js_to_href="Y"} {/if} </CENTER> {/capture} {include file="dialog.tpl" title=$lng.lbl_gift_certificate_details content=$smarty.capture.dialog extra="width=100%"}

In the above code you will notice a few things that are essential to making it work.
1. The table tag containing the differnt deliver fields are as follows:
The email table tag
Code:
<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>
The postal table tag
Code:
<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}>
2. The radio buttons to specify which way to send it are as follows
Send Via Email radio button
Code:
<INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" />
Send Via Postal radio button
Code:
<INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" />

That's it, you can use it to hid several things on a page and make them appear. Have fun!
__________________
No longer using Xcart, was good while it lasted.
Reply With Quote