Adding Picture Enlargement to 3dcart responsive template

HTML & CSS
1

3dcart tells me that my mobile template will not allow for pinch to zoom or click to enlarge my pictures. How can I add this feature to my template? On mobile phones my pictures are so small they can hardly be seen.

2

I couldn’t say without seeing the template.

4

How can I post the template files here?

5

You can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. (I find this approach easier, but unfortunately some European and other keyboards don’t have that character.)

6 
<!doctype html>
<html>
<head>
<title>[storeName]</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style type="text/css" media="screen">
@import "jqtouch/jqtouch.min.css";
</style>
<style type="text/css" media="screen">
@import "themes/jqt/theme.min.css";
</style>
<!--START: JS-->
<script src="jqtouch/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script src="jqtouch/functions.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'images/icon.png',
        addGlossToIcon: true,
        startupScreen: 'images/splash.png',
        statusBar: 'black',
        useFastTouch: false,
        slideSelector: 'body > * > ul li a',
        preloadImages: [
    'images/bg-mcommerce-footer.png',
    'images/bg-qty-box.png',
    'images/bg-rewards-points.png',
    'images/btn-add-to-cart.png',
    'images/btn-apply.png',
    'images/btn-back.png',
    'images/btn-calculate-shipping.png',
    'images/btn-checkout.png',
    'images/btn-get-directions.png',
    'images/btn-login-to-your-account.png',
    'images/btn-proceed-to-checkout.png',
    'images/btn-remove-promo.png',
    'images/btn-remove.png',
    'images/btn-reset-my-password.png',
    'images/btn-submit-request.png',
    'images/btn-update-cart.png',
    'images/cart.png',
    'images/icon-valid-promo.png',
    'images/icon-view-cart.png',
    'images/mobile-logo.png',
    'images/btn-more-details.png'
                ]
    });
</script>
</head>
<body>
<!--END: JS--> 
<script type="text/javascript" src="assets/templates/common/js/listing.js"></script> 
<script type="text/javascript">

function changeIMG(newIMG){
    document.getElementById("mainIMG[catalogid]").src = "thumbnail.asp?file=/" + newIMG + "&maxx=175&maxy=0";
}

</script>
<div class="current whiteBG">[HEADER]
  <div style="clear:both;"></div>
  <h6><a href="[PREVIOUS_LINK]" target="_webapp" style="text-decoration:none;"><span class="blktxt">[categoryname]</span></a> <span class="blktxt">>> [name]</span></h6>
  
  <!-- Product Info -->
  <ul>
    <li class="prodName"> [name] </li>
    <li> 
      <!--START: totalrating-->
      <div style="float: left;" class="id">[totalrating]([review_count])</div>
      <!--END: totalrating--> 
    </li>
  </ul>
  <form enctype="multipart/form-data" method="post" action="add_cart.asp" name="add" id="add">
    <input type="hidden" name="item_id" value="[catalogid]" id="item_id">
    <input type="hidden" name="itemid" value="[id]" id="itemid">
    <input type="hidden" name="category_id" value="[catid]" id="category_id">
    <ul>
      <li>
        <div style="float: left;width: 50%;padding: 3px;"><img src="thumbnail.asp?file=[image1]&maxx=175&maxy=0" id="mainIMG[catalogid]" class="mainIMG" /></div>
        <div style="float: right;width: 89px;text-align: center;"> 
          <!--START: image2-->
          <div class="imgDiv"><a href="javascript:voidclick();" onClick="changeIMG('[image1]')"><img src="thumbnail.asp?file=[image1]&maxx=75&maxy=0" border="0" /></a></div>
          <div class="imgDiv"><a href="javascript:voidclick();" onClick="changeIMG('[image2]')"><img src="thumbnail.asp?file=[image2]&maxx=75&maxy=0" border="0" /></a></div>
          <!--END: image2--> 
          <!--START: image3-->
          <div class="imgDiv"><a href="javascript:voidclick();" onClick="changeIMG('[image3]')"><img src="thumbnail.asp?file=[image3]&maxx=75&maxy=0" border="0" /></a></div>
          <!--END: image3--> 
          <!--START: image4-->
          <div class="imgDiv"><a href="javascript:voidclick();" onClick="changeIMG('[image4]')"><img src="thumbnail.asp?file=[image4]&maxx=75&maxy=0" border="0" /></a></div>
          <!--END: image4--> 
        </div>
        <div class="clear"></div>
      </li>
      <!--START: giftcertificate_block-->
      <li> Gift Certificate Information </li>
      <li>
        <table cellspacing="2" cellpadding="0" border="0" width="310">
          <tr>
            <td valign="top" class="price-info" align="right"><b>From</b></td>
            <td valign="top" class="price-info" align="left"><input type="text" style="width: 80%;" name="gc_fromname" id="gc_fromname">
              <br />
              (Sender's name)</td>
          </tr>
          <tr>
            <td valign="top" class="price-info" align="right"><b>To</b></td>
            <td valign="top" class="price-info" align="left"><input type="text" style="width: 80%;" name="gc_toname" id="gc_toname" />
              <br />
              (Recipient's name)</td>
          </tr>
          <tr>
            <td valign="top" class="price-info" align="right"><b>Email</b></td>
            <td valign="top" class="price-info" align="left"><input type="text" style="width: 80%;" name="gc_toemail" id="gc_toemail">
              <br />
              (Recipient's email address)</td>
          </tr>
          <tr>
            <td valign="top" class="price-info" align="right"><b>Message </b></td>
            <td valign="top" class="price-info" align="left"><textarea cols="45" rows="5" style="width: 80%;" name="gc_tomessage" class="txtareaStyle" id="gc_tomessage"></textarea>
              <br />
              (optional, max. length 500 characters) </td>
          </tr>
        </table>
      </li>
      <!--END: giftcertificate_block--> 
      <!--START: id-->
      <li>
        <div class="id"> SKU: [id] </div>
      </li>
      <!--END: id--> 
      <!--START: pricing-->
      <li> 
        <!--START: price2-->
        <div class="left price-info" style="width: 120px"><strong>[product_retailprice]</strong> &nbsp;</div>
        <div class="left price-info">[price2]</div>
        <div class="clear"></div>
        <!--START: SAVINGS-->
        <div class="left price-info" style="width: 120px"><strong>[product_savings]</strong>&nbsp;</div>
        <div class="left price-info">[savings]</div>
        <div class="clear"></div>
        <!--END: SAVINGS--> 
        <!--END: price2--> 
        <!--START: ITEMPRICE-->
        <div class="left price" style="width: 120px"><strong>[product_yourprice]</strong> &nbsp;</div>
        <!--START: priceblock-->
        <div id="price" class="left price">[price]</div>
        <!--END: priceblock-->
        <div class="clear"></div>
        <!--END: ITEMPRICE--> 
        <!--START: SALEPRICE-->
        <div class="left price" style="width: 120px">[product_onsale]:&nbsp;</div>
        <div id="price" class="left price">[saleprice] <img src="../assets/templates/common/images/on_sale.png" align="absmiddle" /></div>
        <div class="clear"></div>
        <!--END: SALEPRICE--> 
        <!--START: product_availability-->
        <div class="left price-info" style="width: 120px"><strong>[product_Header-availability]</strong>&nbsp;</div>
        <div id="price" class="left price-info">[availability]</div>
        <div class="clear"></div>
        <!--END: product_availability--> 
        <!--START: freeshippingblock--> 
        [freeshipping] 
        <!--END: freeshippingblock--> 
      </li>
      <!--END: pricing--> 
      <!--START: LOGIN_REQUIRED-->
      <li class="id"> You need to be a registered customer to order this product. <a href="myaccount.asp?catalogid=[catalogid]">Login to your account</a> </li>
      <!--END: LOGIN_REQUIRED-->
    </ul>
    <!--START: PRODUCT_OPTIONS_BLOCK-->
    <hr noshade="noshade" />
    <ul>
      <li>
        <h4>[product_optionheader]</h4>
      </li>
      <li style="padding:0px;margin:0px;">
        <table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="center"><!--START: optionstemplate--> 
              <!--START: textarea-format--> 
              [value]: [oprice]<br />
              <textarea cols="30" rows="5" name="textarea[oname]" class="txtareaStyle" id="Textarea2"></textarea>
              <br />
              <!--END: textarea-format--> 
              <!--START: text-format--> 
              [value]: [oprice]<br />
              <input type="text" size="30" name="text[oname]" id="Text4">
              <br />
              <!--END: text-format--> 
              <!--START: qty-format-->
              <table cellpadding="2" cellspacing="0" border="0" width="100%">
                <tr>
                  <td class="item"><strong>[value]</strong><br />
                    [oprice]</td>
                  <td align="center" width="120"><input type="text" size="3" name="text[oname]" value="0" id="Text5"/></td>
                </tr>
              </table>
              <!--END: qty-format--> 
              <!--START: file-format--> 
              [value]: [oprice]<br />
              <input type="file" name="file[oname]" size="20" id="File1">
              <br />
              <!--END: file-format--> 
              <!--START: title-format--> 
              [feature] 
              <!--END: title-format--> 
              <!--START: checkbox-format-->
              <table>
                <tr>
                  <td><input type="checkbox" name="cb[oname]" value="[value]" onClick="validateValues(document.add,1);" [selected]></td>
                  <td class="price-info">[feature] [oprice]</td>
                </tr>
              </table>
              <!--END: checkbox-format--> 
              <!--START: radio-format-->
              <table>
                <tr>
                  <td><input type="radio" name="[oname]" value="[value]" onClick="validateValues(document.add,1);" [selected] id="Radio1"></td>
                  <td class="price-info">[feature] [oprice]</td>
                </tr>
              </table>
              <!--END: radio-format--> 
              <!--START: dropdown-format-->
              <select name="[oname]" onChange="validateValues(document.add,1);">
                <!--START: option-->
                <option value="[value]" [selected]>[feature] [oprice]</option>
                <!--END: option-->
              </select>
              <!--END: dropdown-format--></td>
          </tr>
          <tr>
            <td align="center"><!--START: dropdownimage-format-->
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td valign="middle"><select name="[oname]" onChange="validateValues(document.add,1);">
                      <!--START: option-->
                      <option value="[value]" [selected]>[feature] [oprice]</option>
                      <!--END: option-->
                    </select></td>
                  <td>&nbsp;</td>
                  <td><img name="img_[oname]" src="assets/templates/common/images/spacer.gif"></td>
                </tr>
              </table>
              <!--END: dropdownimage-format--> 
              <!--END: optionstemplate--></td>
          </tr>
          <tr>
            <td><!--START: options--> 
              <!--START: opt-title-->
              <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="options-titles" align="left" valign="top">[OPTIONLABEL]&nbsp;&nbsp;[OPTIONFIELD]</td>
                </tr>
                <tr>
                  <td class="borders2"><img src="assets/templates/common/images/spacer.gif" height="1"></td>
                </tr>
              </table>
              <!--END: opt-title--></td>
          </tr>
          <tr>
            <td valign="middle" align="left"><!--START: opt-regular-->
              <table>
                <tr>
                  <td class="optionsTitle" colspan="2" valign="middle" align="left"><b>[OPTIONLABEL]</b></td>
                </tr>
                <tr>
                  <td class="price-info" valign="middle" align="left">[OPTIONFIELD]</td>
                  <!--START: help-->
                  <td valign="middle" class="price-info" align="left"><a href="#" onClick="popup('optionhelp.asp?optionid=[optid]',300,200)"><img src="assets/templates/common/images/help_icon.gif" border="0" alt="help"></a></td>
                  <!--END: help--> 
                </tr>
                <tr>
                  <td colspan="2">&nbsp;</td>
                </tr>
              </table>
              <!--END: opt-regular--> 
              <!--END: options--></td>
          </tr>
        </table>
      </li>
    </ul>
    <!--END: PRODUCT_OPTIONS_BLOCK--> 
    <!--START: RECURRINGORDER-->
    <ul>
      <li>
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" class="price-info" colspan="2"><div align="center"><strong>[recurringorders_addcart-question]</strong>
                <select name="recurring_frequency" id="recurring_frequency">
                  <option value="">[recurringorders_select-frequency]</option>
                  [recurring_frequency]
                  </select>
              </div></td>
          </tr>
          <tr>
            <td class="price-info" colspan="2">[recurringorders_addcart-bottom-message]</td>
          </tr>
        </table>
        <br />
        <img src="assets/templates/common/images/spacer.gif" border="0" alt="" height="1"> </li>
    </ul>
    <!--END: RECURRINGORDER--> 
    <!--START: addtocart--> 
    <!--START: quantity-->
    <ul>
      <li>
        <table cellpadding="0" cellspacing="0" border="0" class="alternative" width="150" id="Table24">
          <tr>
            <td><label>[product_quantitypricing-quantity]</label></td>
            <td><label>[product_quantitypricing-price]</label></td>
          </tr>
          <!--START: quantity_items-->
          <tr>
            <td><info>[lowbound][highbound]</info></td>
            <td><info>[PRICE]</info></td>
          </tr>
          <!--END: quantity_items-->
        </table>
      </li>
    </ul>
    <!--END: quantity--> 
    <!--START: rewardsPoints-->
    <hr noshade="noshade" />
    <ul>
      <li>
        <div class="bg-rewards left">[rewardsPoints]</div>
        <div class="left" style="padding-left: 5px;width: 211px;">
          <h4><em>[product_Header-rewards]</em></h4>
          <div class="prodRewards">[product_rewardsDescription]</div>
        </div>
        <div class="clear"></div>
      </li>
    </ul>
    <!--END: rewardsPoints-->
    <hr noshade="noshade" />
    <ul class="metal4">
      <li>
        <div class="bg-qty">
          <table width="100%">
            <tr>
              <td><h4>[product_quantity]</h4></td>
              <td><!--START: qtybox-->
                <input class="qty-box" type="text" name="qty-0" value="1" onChange="validateValues(document.add,1);" id="qty-0"  pattern="[0-9]*">
                <!--END: qtybox--></td>
              <td><a href="#" onClick="check_and_add(document.add);" class="slide"><img src="images/btn-add-to-cart.png" border="0" /></a></td>
              <td><div id="loader" style="visibility:hidden;"><img src="themes/jqt/img/loading.gif" border="0" /></div></td>
            </tr>
          </table>
        </div>
      </li>
    </ul>
    <!--END: addtocart--> 
    <!--START: extended_description-->
    <ul>
      <li>
        <h4>[product_Header-description]</h4>
        <div class="prodDesc">[extended_description]</div>
      </li>
    </ul>
    <hr noshade="noshade" />
    <!--END: extended_description--> 
    <!--START: reviews-->
    <ul>
      <li>
        <h4>[reviews_header]</h4>
        <!--START: user_reviews-->
        <div style="padding: 3px 0px;"><img src="assets/templates/common/images/star[rating].png"></div>
        <div class="prodDesc"><i>[long_review]</i></div>
        <div class="prodDesc" style="margin-top: 8px;"><strong>by:</strong> [user_name] from [user_city] on [review_date]</div>
        <!--END: user_reviews--> 
      </li>
    </ul>
    <!--END: reviews-->
    <!--START: extrafields-->
    <ul>
      <li> 
        <!--START: extra_field_1-->
        <div class="item">
          <label><strong>[product_extrafield1]</strong></label>
          <info>[extra_field_1]</info>
        </div>
        <br />
        <!--END: extra_field_1--> 
        <!--START: extra_field_2-->
        <div class="item">
          <label><strong>[product_extrafield2]</strong></label>
          <info>[extra_field_2]</info>
        </div>
        <br />
        <!--END: extra_field_2--> 
        <!--START: extra_field_3-->
        <div class="item">
          <label><strong>[product_extrafield3]</strong></label>
          <info>[extra_field_3]</info>
        </div>
        <br />
        <!--END: extra_field_3--> 
        <!--START: extra_field_4-->
        <div class="item">
          <label><strong>[product_extrafield4]</strong></label>
          <info>[extra_field_4]</info>
        </div>
        <br />
        <!--END: extra_field_4--> 
        <!--START: extra_field_5-->
        <div class="item">
          <label><strong>[product_extrafield5]</strong></label>
          <info>[extra_field_5]</info>
        </div>
        <br />
        <!--END: extra_field_5--> 
        <!--START: extra_field_6-->
        <div class="item">
          <label><strong>[product_extrafield6]</strong></label>
          <info>[extra_field_6]</info>
        </div>
        <br />
        <!--END: extra_field_6--> 
        <!--START: extra_field_7-->
        <div class="item">
          <label><strong>[product_extrafield7]</strong></label>
          <info>[extra_field_7]</info>
        </div>
        <br />
        <!--END: extra_field_7--> 
        <!--START: extra_field_8-->
        <div class="item">
          <label><strong>[product_extrafield8]</strong></label>
          <info>[extra_field_8]</info>
        </div>
        <br />
        <!--END: extra_field_8--> 
        <!--START: extra_field_9-->
        <div class="item">
          <label><strong>[product_extrafield9]</strong></label>
          <info>[extra_field_9]</info>
        </div>
        <br />
        <!--END: extra_field_9--> 
        <!--START: extra_field_10-->
        <div class="item">
          <label><strong>[product_extrafield10]</strong></label>
          <info>[extra_field_10]</info>
        </div>
        <br />
        <!--END: extra_field_10--> 
      </li>
    </ul>
    <!--END: extrafields--> 
    <!--START: PRODUCT_FEATURES_BLOCK-->
    <ul style="padding:0px;margin:0px;padding-left: 5px;" class="productFeatures">
      <!--START: PRODUCT_FEATURES-->
      <li>[product_feature_name]</li>
      <!--END: PRODUCT_FEATURES-->
    </ul>
    <!--END: PRODUCT_FEATURES_BLOCK-->
  </form>
  <!--START: accessories_0-->
  <h3>[product_Header-upsellitems]</h3>
  <ul style="padding: 0px; margin: 0px;">
    <!--START: accessories_items0-->
    <li style="border-bottom: 1px solid #bbbbbb;" class="arrow" onclick="window.location='product.asp?itemid=[catalogid]';"><a href="product.asp?itemid=[catalogid]" target="_webapp">
      <div style="float: left;">
        <div><img src="[THUMBNAIL]" width="90" alt="[name]" border="0"></div>
      </div>
      <div style="float: left;">
        <div class="prodName" style="width: 200px; white-space: normal;padding: 3px;padding-top: 0px;">[name]</div>
        <div class="id" style="padding: 3px;">SKU: [id]</div>
        <!--START: product_review--> 
        <!--START: product_review_average--> 
        <!--START: review_count-->
        <div class="id" style="padding: 3px;"><img src="../assets/templates/common/images/star[review_average].png" align="absmiddle" style="margin-right: 5px;" />([review_count])</div>
        <!--END: review_count--> 
        <!--END: product_review_average--> 
        
        <!--END: product_review-->
        <div style="padding: 3px;"> 
          <!--START: ITEMPRICE-->
          <div class="price">[ITEMPRICE]</div>
          <!--END: ITEMPRICtE--> 
          <!--START: SALEPRICE-->
          <div class="price">[ITEMPRICE]</div>
          <div class="price">[ITEMSALEPRICE] <img src="assets/templates/common/images/on_sale.png" align="absmiddle" /></div>
          <!--END: SALEPRICE--> 
        </div>
      </div>
      </a></li>
    <!--END: accessories_items0-->
  </ul>
  <!--END: accessories_0-->
  <!--START: related_0-->
  <h3>[product_Header-relateditems]</h3>
  <ul style="padding: 0px; margin: 0px;">
    <!--START: related_items0-->
    <li style="border-bottom: 1px solid #bbbbbb;" class="arrow" onclick="window.location='product.asp?itemid=[catalogid]';"><a href="product.asp?itemid=[catalogid]" target="_webapp">
      <div style="float: left;">
        <div><img src="[THUMBNAIL]" width="90" alt="[name]" border="0"></div>
      </div>
      <div style="float: left;">
        <div class="prodName" style="width: 200px; white-space: normal;padding: 3px;padding-top: 0px;">[name]</div>
        <div class="id" style="padding: 3px;">SKU: [id]</div>
        <!--START: product_review--> 
        <!--START: product_review_average--> 
        <!--START: review_count-->
        <div class="id" style="padding: 3px;"><img src="../assets/templates/common/images/star[review_average].png" align="absmiddle" style="margin-right: 5px;" />([review_count])</div>
        <!--END: review_count--> 
        <!--END: product_review_average--> 
        <!--END: product_review-->
        <div style="padding: 4px;">
          <!--START: ITEMPRICE-->
          <div class="price">[ITEMPRICE]</div>
          <!--END: ITEMPRICE--> 
          <!--START: SALEPRICE-->
          <div class="price">[ITEMPRICE]</div>
          <div class="price">[ITEMSALEPRICE] <img src="assets/templates/common/images/on_sale.png" align="absmiddle" /></div>
          <!--END: SALEPRICE-->
        </div>
      </div>
      </a></li>
    <!--END: related_items0-->
  </ul>
  <!--END: related_0--> 
  [FOOTER] </div>
<script language="javascript"><!--
//thumbnail script
var image1,image2,image3,image4,selectedimage;
var imagemaxwidth, imagemaxheight

imagemaxwidth=300;
imagemaxheight=0;

image1="[image1]";
image2="[image2]";
image3="[image3]";
image4="[image4]";
imagecaption1="[imagecaption1]";
imagecaption2="[imagecaption2]";
imagecaption3="[imagecaption3]";
imagecaption4="[imagecaption4]";
selectedimage='[image1]'; //pre load image1

// This defines what to do when an image is clicked on
function image_click(clicks)
{
selectedimage=eval('image'+clicks);
document.getElementById('large').src='thumbnail.asp?file=' + selectedimage + '&maxx='+imagemaxwidth+'&maxy='+imagemaxheight;
changecontent("imagecaptiont",eval('imagecaption'+clicks));
}


function check_stock(what,partnum)
{
var soption;
var i;
var product_availability='[availability]';
var backordermode='[allowbackorder]';
var avail_instock='[productAvailability-Instock]';
var avail_outofstock='[productAvailability-Outofstock]';
var avail_backorder='[productAvailability-Backorder]';
var optionfound=0;

if (inventoryarray[catalogid].length==0) //if there is no advanced options, don't look for stock
{
return true;
}
else
{

for(i=0;i<inventoryarray[catalogid].length;i++) {
 soption=inventoryarray[catalogid][i];
 
 field_array=soption.split("-");
 
 //Dynamic Part for advanced options
 if (typeof((idarray[catalogid])) != "undefined")
{
    soptionid=idarray[catalogid][i]; 
    if (field_array[0]==partnum){changeid(soptionid);}
}

 if ((field_array[0]==partnum))
 {    
    changecontent("product_inventory",field_array[1]);
    if (eval(GetValue(what,"qty-0"))>field_array[1]) {
        optionfound=optionfound+1;
        if (backordermode==1)
        {
        changecontent("availability",avail_backorder); 
        return true;
        optionfound=optionfound+1;
    }
    else 
    {
        changecontent("availability",avail_outofstock);
        alert("The options you selected are not currently available.");
        optionfound=optionfound+2;
        return false;
    }

    }

 }
 }

if (optionfound==0)
{ 
changecontent("availability",product_availability);
return true;
}

if (optionfound==1)
{

changecontent("availability",avail_instock);
return true;
}


}


}


function check_and_add(formx)
{
    document.getElementById("loader").style.visibility = "visible";
    if (document.getElementById('add').std_price==null)
    {
        document.getElementById('add').submit();
    }
    else
    {
        var readytoadd=validateValues(formx,1)
        if (readytoadd==true)
        {
            document.getElementById('add').submit();
        }
    }
}

// --></script> 
<script language="javascript">
var currency_symbol='[currency]';
validateValues(document.add,0);
</script>
</body>
</html>
7

That was the product details, here is the header…

8 
<script type="text/javascript">
function voidclick() {
}
function redirhome() {
    window.location = 'home.asp';
}
</script>
<div id="mypanel" class="ddpanel" style="padding:0px; margin:0px; display:none;">
  <div id="mypanelcontent" class="ddpanelcontent" style="height:0px;background:url(themes/jqt/img/toolbar.png) #000 repeat-x;padding:0px;margin:0px;">
    <div class="right">
      <form class='form' action='search.asp' method='post' id="Form1">
        <div class="left" style="padding-top: 4px;"><img src="themes/jqt/img/search-left.png" /></div>
        <div class="left" style="padding-top: 3px;">
          <input type="text"  name="keyword" size="30" class="plain" />
        </div>
        <div class="left" style="padding-top: 4px;;margin-right: 20px;">
          <input type=image class="submit" src="themes/jqt/img/btn-search.png" border="0" />
        </div>
        <div class="left" style="padding-top: 4px;margin-right: 11px;"><a href="javascript:voidclick();" onclick="toggle_search();"><img src="themes/jqt/img/btn-x.png" /></a></div>
        <div class="clear"></div>
      </form>
    </div>
  </div>
</div>
<div class="clear" style="background:url(themes/jqt/img/bg-header-footer.png);height:65px;"> 
  <!--START: LOGO-->
  <div class="left" style="line-height: 65px;">
    <div id="store_name">[mobile_logo]</div>
  </div>
  <!--END: LOGO-->
  <div class="right" style="text-align: right;">
    <div id="mypaneltab" class="ddpaneltab"><a href="javascript:voidclick();" onclick="toggle_search();"><img src="themes/jqt/img/btn-search-toggle.png" border="0" /></a></div>
    <div><a href="/mobile/view_cart.asp" class="minicart"><img src="images/cart.png" align="absmiddle" /></a><span class="minicarttxt">Cart:</span> <a href="/mobile/view_cart.asp" class="minicart">[MINICART]</a></div>
  </div>
</div>
<div class="clear"></div>
<ul id="menuLinks" style="padding:0px;margin:0px;">
  <li>
    <ul style="padding:0px;margin:0px;">
      <li class="left menuLinksDiv"><a href="javascript:redirhome();">Home</a></li>
      <li class="left menuLinksDiv"><a href="contact_us.asp" class="slideup">Contact</a></li>
      <li class="left menuLinksDiv">[loginLnk]</li>
    </ul>
  </li>
</ul>
9

Anyone have an idea? I tried many variants of the user-scalable and such to no avail.

10

You should only need this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

However your version should have been ok also so I guess its something else that is interfering with the pinch to zoom disabling.

It’s probably jqtouch as that disables viewport scaling to make it behave like an app so you may be able to turn off the feature. The options are here.

fixedViewport: true - Removes the user’s ability to scale the page. Ensures the site behaves more like an application.

1 Like
11

So if I change the jqtouch options it should allow it to zoom?

12

I have no idea as I am not familiar with jqtouch but its the first thing I would try :slight_smile:

1 Like
13

I am not familiar either. I know that no matter what I place in the viewport tag, nothing changes. I do not know where the jqtouch settings are but in my code I do not have a line that says “fixed viewport”.

14

That’s because its being over-ridden by jqtouch I believe.

You already posted them?

<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'images/icon.png',
        addGlossToIcon: true,
        startupScreen: 'images/splash.png',
        statusBar: 'black',
        useFastTouch: false,
        slideSelector: 'body > * > ul li a',
        preloadImages: [
    'images/bg-mcommerce-footer.png',
    'images/bg-qty-box.png',
    'images/bg-rewards-points.png',
    'images/btn-add-to-cart.png',
    'images/btn-apply.png',
    'images/btn-back.png',
    'images/btn-calculate-shipping.png',
    'images/btn-checkout.png',
    'images/btn-get-directions.png',
    'images/btn-login-to-your-account.png',
    'images/btn-proceed-to-checkout.png',
    'images/btn-remove-promo.png',
    'images/btn-remove.png',
    'images/btn-reset-my-password.png',
    'images/btn-submit-request.png',
    'images/btn-update-cart.png',
    'images/cart.png',
    'images/icon-valid-promo.png',
    'images/icon-view-cart.png',
    'images/mobile-logo.png',
    'images/btn-more-details.png'
                ]
    });
</script>

You’d need to add the option I gave you to that section.

e.g. Add fixedViewport: false as shown below.

 var jQT = new $.jQTouch({
        icon: 'images/icon.png',
        addGlossToIcon: true,
		fixedViewport: false,
        startupScreen: 'images/splash.png',
        statusBar: 'black',
        useFastTouch: false,
        slideSelector: 'body > * > ul li a',
        preloadImages: [
    'images/bg-mcommerce-footer.png',
    'images/bg-qty-box.png',
    'images/bg-rewards-points.png',
    'images/btn-add-to-cart.png',
    'images/btn-apply.png',
    'images/btn-back.png',
    'images/btn-calculate-shipping.png',
    'images/btn-checkout.png',
    'images/btn-get-directions.png',
    'images/btn-login-to-your-account.png',
    'images/btn-proceed-to-checkout.png',
    'images/btn-remove-promo.png',
    'images/btn-remove.png',
    'images/btn-reset-my-password.png',
    'images/btn-submit-request.png',
    'images/btn-update-cart.png',
    'images/cart.png',
    'images/icon-valid-promo.png',
    'images/icon-view-cart.png',
    'images/mobile-logo.png',
    'images/btn-more-details.png'
                ]
    });

Whether this helps or makes matters worse remains to be seen :slight_smile:

1 Like
15

Well, I added it where you said and my site did not re-act in any way. What else could be limiting it?

16

Do you have a link to the site in question so we can see the problem live.?

1 Like
17

I am also trying to make it so that my pictures enlarge when you click on them. 3dcart seems to think this is not needed. So I am having to make this work myself. Since I am not a coder, I am seeking help haha

18

You said you had the correct meta tag but I see this in the page you linked to.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

That means no pinch and zoom.

1 Like
19

I updated it to the proper one. Where did you find that? My current HTML file is this:

<!doctype html>
<html>
<head>
<title>[storeName]</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes" />
<style type="text/css" media="screen">
@import "jqtouch/jqtouch.min.css";
</style>
<style type="text/css" media="screen">
@import "themes/jqt/theme.min.css";
</style>
<!--START: JS-->
<script src="jqtouch/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script src="jqtouch/functions.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'images/icon.png',
        addGlossToIcon: true,
                fixedViewport: false,
        startupScreen: 'images/splash.png',
        statusBar: 'black',
        useFastTouch: false,
        slideSelector: 'body > * > ul li a',
        preloadImages: [
    'images/bg-mcommerce-footer.png',
    'images/bg-qty-box.png',
    'images/bg-rewards-points.png',
    'images/btn-add-to-cart.png',
    'images/btn-apply.png',
    'images/btn-back.png',
    'images/btn-calculate-shipping.png',
    'images/btn-checkout.png',
    'images/btn-get-directions.png',
    'images/btn-login-to-your-account.png',
    'images/btn-proceed-to-checkout.png',
    'images/btn-remove-promo.png',
    'images/btn-remove.png',
    'images/btn-reset-my-password.png',
    'images/btn-submit-request.png',
    'images/btn-update-cart.png',
    'images/cart.png',
    'images/icon-valid-promo.png',
    'images/icon-view-cart.png',
    'images/mobile-logo.png',
    'images/btn-more-details.png'
                ]
    });
</script>
</head>
<body>
<!--END: JS--> 
<script type="text/javascript" src="assets/templates/common/js/listing.js"></script> 
<script type="text/javascript">

function changeIMG(newIMG){
    document.getElementById("mainIMG[catalogid]").src = "thumbnail.asp?file=/" + newIMG + "&maxx=175&maxy=0";
}

</script>
<div class="current whiteBG">[HEADER]
  <div style="clear:both;"></div>
  <h6><a href="[PREVIOUS_LINK]" target="_webapp" style="text-decoration:none;"><span class="blktxt">[categoryname]</span></a> <span class="blktxt">>> [name]</span></h6>
  
  <!-- Product Info -->
  <ul>
    <li class="prodName"> [name] </li>
    <li> 
      <!--START: totalrating-->
      <div style="float: left;" class="id">[totalrating]([review_count])</div>
      <!--END: totalrating--> 
    </li>
  </ul>
  <form enctype="multipart/form-data" method="post" action="add_cart.asp" name="add" id="add">
    <input type="hidden" name="item_id" value="[catalogid]" id="item_id">
    <input type="hidden" name="itemid" value="[id]" id="itemid">
    <input type="hidden" name="category_id" value="[catid]" id="category_id">
    <ul>
      <li>
        <div style="float: left;width: 50%;padding: 3px;"><img src="thumbnail.asp?file=[image1]&maxx=175&maxy=0" id="mainIMG[catalogid]" class="mainIMG" /></div>
        <div style="float: right;width: 89px;text-align: center;"> 
          <!--START: image2-->
          <div class="imgDiv"><a href="javascript:voidclick();" onClick="changeIMG('[image1]')"><img src="thumbnail.asp?file=[image1]&maxx=75&maxy=0" border="0" /></a></div>
          <div class="imgDiv"><a href="javascript:voidclick();" onClick="changeIMG('[image2]')"><img src="thumbnail.asp?file=[image2]&maxx=75&maxy=0" border="0" /></a></div>
          <!--END: image2--> 
          <!--START: image3-->
          <div class="imgDiv"><a href="javascript:voidclick();" onClick="changeIMG('[image3]')"><img src="thumbnail.asp?file=[image3]&maxx=75&maxy=0" border="0" /></a></div>
          <!--END: image3--> 
          <!--START: image4-->
          <div class="imgDiv"><a href="javascript:voidclick();" onClick="changeIMG('[image4]')"><img src="thumbnail.asp?file=[image4]&maxx=75&maxy=0" border="0" /></a></div>
          <!--END: image4--> 
        </div>
        <div class="clear"></div>
      </li>
      <!--START: giftcertificate_block-->
      <li> Gift Certificate Information </li>
      <li>
        <table cellspacing="2" cellpadding="0" border="0" width="310">
          <tr>
            <td valign="top" class="price-info" align="right"><b>From</b></td>
            <td valign="top" class="price-info" align="left"><input type="text" style="width: 80%;" name="gc_fromname" id="gc_fromname">
              <br />
              (Sender's name)</td>
          </tr>
          <tr>
            <td valign="top" class="price-info" align="right"><b>To</b></td>
            <td valign="top" class="price-info" align="left"><input type="text" style="width: 80%;" name="gc_toname" id="gc_toname" />
              <br />
              (Recipient's name)</td>
          </tr>
          <tr>
            <td valign="top" class="price-info" align="right"><b>Email</b></td>
            <td valign="top" class="price-info" align="left"><input type="text" style="width: 80%;" name="gc_toemail" id="gc_toemail">
              <br />
              (Recipient's email address)</td>
          </tr>
          <tr>
            <td valign="top" class="price-info" align="right"><b>Message </b></td>
            <td valign="top" class="price-info" align="left"><textarea cols="45" rows="5" style="width: 80%;" name="gc_tomessage" class="txtareaStyle" id="gc_tomessage"></textarea>
              <br />
              (optional, max. length 500 characters) </td>
          </tr>
        </table>
      </li>
      <!--END: giftcertificate_block--> 
      <!--START: id-->
      <li>
        <div class="id"> SKU: [id] </div>
      </li>
      <!--END: id--> 
      <!--START: pricing-->
      <li> 
        <!--START: price2-->
        <div class="left price-info" style="width: 120px"><strong>[product_retailprice]</strong> &nbsp;</div>
        <div class="left price-info">[price2]</div>
        <div class="clear"></div>
        <!--START: SAVINGS-->
        <div class="left price-info" style="width: 120px"><strong>[product_savings]</strong>&nbsp;</div>
        <div class="left price-info">[savings]</div>
        <div class="clear"></div>
        <!--END: SAVINGS--> 
        <!--END: price2--> 
        <!--START: ITEMPRICE-->
        <div class="left price" style="width: 120px"><strong>[product_yourprice]</strong> &nbsp;</div>
        <!--START: priceblock-->
        <div id="price" class="left price">[price]</div>
        <!--END: priceblock-->
        <div class="clear"></div>
        <!--END: ITEMPRICE--> 
        <!--START: SALEPRICE-->
        <div class="left price" style="width: 120px">[product_onsale]:&nbsp;</div>
        <div id="price" class="left price">[saleprice] <img src="../assets/templates/common/images/on_sale.png" align="absmiddle" /></div>
        <div class="clear"></div>
        <!--END: SALEPRICE--> 
        <!--START: product_availability-->
        <div class="left price-info" style="width: 120px"><strong>[product_Header-availability]</strong>&nbsp;</div>
        <div id="price" class="left price-info">[availability]</div>
        <div class="clear"></div>
        <!--END: product_availability--> 
        <!--START: freeshippingblock--> 
        [freeshipping] 
        <!--END: freeshippingblock--> 
      </li>
      <!--END: pricing--> 
      <!--START: LOGIN_REQUIRED-->
      <li class="id"> You need to be a registered customer to order this product. <a href="myaccount.asp?catalogid=[catalogid]">Login to your account</a> </li>
      <!--END: LOGIN_REQUIRED-->
    </ul>
    <!--START: PRODUCT_OPTIONS_BLOCK-->
    <hr noshade="noshade" />
    <ul>
      <li>
        <h4>[product_optionheader]</h4>
      </li>
      <li style="padding:0px;margin:0px;">
        <table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="center"><!--START: optionstemplate--> 
              <!--START: textarea-format--> 
              [value]: [oprice]<br />
              <textarea cols="30" rows="5" name="textarea[oname]" class="txtareaStyle" id="Textarea2"></textarea>
              <br />
              <!--END: textarea-format--> 
              <!--START: text-format--> 
              [value]: [oprice]<br />
              <input type="text" size="30" name="text[oname]" id="Text4">
              <br />
              <!--END: text-format--> 
              <!--START: qty-format-->
              <table cellpadding="2" cellspacing="0" border="0" width="100%">
                <tr>
                  <td class="item"><strong>[value]</strong><br />
                    [oprice]</td>
                  <td align="center" width="120"><input type="text" size="3" name="text[oname]" value="0" id="Text5"/></td>
                </tr>
              </table>
              <!--END: qty-format--> 
              <!--START: file-format--> 
              [value]: [oprice]<br />
              <input type="file" name="file[oname]" size="20" id="File1">
              <br />
              <!--END: file-format--> 
              <!--START: title-format--> 
              [feature] 
              <!--END: title-format--> 
              <!--START: checkbox-format-->
              <table>
                <tr>
                  <td><input type="checkbox" name="cb[oname]" value="[value]" onClick="validateValues(document.add,1);" [selected]></td>
                  <td class="price-info">[feature] [oprice]</td>
                </tr>
              </table>
              <!--END: checkbox-format--> 
              <!--START: radio-format-->
              <table>
                <tr>
                  <td><input type="radio" name="[oname]" value="[value]" onClick="validateValues(document.add,1);" [selected] id="Radio1"></td>
                  <td class="price-info">[feature] [oprice]</td>
                </tr>
              </table>
              <!--END: radio-format--> 
              <!--START: dropdown-format-->
              <select name="[oname]" onChange="validateValues(document.add,1);">
                <!--START: option-->
                <option value="[value]" [selected]>[feature] [oprice]</option>
                <!--END: option-->
              </select>
              <!--END: dropdown-format--></td>
          </tr>
          <tr>
            <td align="center"><!--START: dropdownimage-format-->
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td valign="middle"><select name="[oname]" onChange="validateValues(document.add,1);">
                      <!--START: option-->
                      <option value="[value]" [selected]>[feature] [oprice]</option>
                      <!--END: option-->
                    </select></td>
                  <td>&nbsp;</td>
                  <td><img name="img_[oname]" src="assets/templates/common/images/spacer.gif"></td>
                </tr>
              </table>
              <!--END: dropdownimage-format--> 
              <!--END: optionstemplate--></td>
          </tr>
          <tr>
            <td><!--START: options--> 
              <!--START: opt-title-->
              <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="options-titles" align="left" valign="top">[OPTIONLABEL]&nbsp;&nbsp;[OPTIONFIELD]</td>
                </tr>
                <tr>
                  <td class="borders2"><img src="assets/templates/common/images/spacer.gif" height="1"></td>
                </tr>
              </table>
              <!--END: opt-title--></td>
          </tr>
          <tr>
            <td valign="middle" align="left"><!--START: opt-regular-->
              <table>
                <tr>
                  <td class="optionsTitle" colspan="2" valign="middle" align="left"><b>[OPTIONLABEL]</b></td>
                </tr>
                <tr>
                  <td class="price-info" valign="middle" align="left">[OPTIONFIELD]</td>
                  <!--START: help-->
                  <td valign="middle" class="price-info" align="left"><a href="#" onClick="popup('optionhelp.asp?optionid=[optid]',300,200)"><img src="assets/templates/common/images/help_icon.gif" border="0" alt="help"></a></td>
                  <!--END: help--> 
                </tr>
                <tr>
                  <td colspan="2">&nbsp;</td>
                </tr>
              </table>
              <!--END: opt-regular--> 
              <!--END: options--></td>
          </tr>
        </table>
      </li>
    </ul>
    <!--END: PRODUCT_OPTIONS_BLOCK--> 
    <!--START: RECURRINGORDER-->
    <ul>
      <li>
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" class="price-info" colspan="2"><div align="center"><strong>[recurringorders_addcart-question]</strong>
                <select name="recurring_frequency" id="recurring_frequency">
                  <option value="">[recurringorders_select-frequency]</option>
                  [recurring_frequency]
                  </select>
              </div></td>
          </tr>
          <tr>
            <td class="price-info" colspan="2">[recurringorders_addcart-bottom-message]</td>
          </tr>
        </table>
        <br />
        <img src="assets/templates/common/images/spacer.gif" border="0" alt="" height="1"> </li>
    </ul>
    <!--END: RECURRINGORDER--> 
    <!--START: addtocart--> 
    <!--START: quantity-->
    <ul>
      <li>
        <table cellpadding="0" cellspacing="0" border="0" class="alternative" width="150" id="Table24">
          <tr>
            <td><label>[product_quantitypricing-quantity]</label></td>
            <td><label>[product_quantitypricing-price]</label></td>
          </tr>
          <!--START: quantity_items-->
          <tr>
            <td><info>[lowbound][highbound]</info></td>
            <td><info>[PRICE]</info></td>
          </tr>
          <!--END: quantity_items-->
        </table>
      </li>
    </ul>
    <!--END: quantity--> 
    <!--START: rewardsPoints-->
    <hr noshade="noshade" />
    <ul>
      <li>
        <div class="bg-rewards left">[rewardsPoints]</div>
        <div class="left" style="padding-left: 5px;width: 211px;">
          <h4><em>[product_Header-rewards]</em></h4>
          <div class="prodRewards">[product_rewardsDescription]</div>
        </div>
        <div class="clear"></div>
      </li>
    </ul>
    <!--END: rewardsPoints-->
    <hr noshade="noshade" />
    <ul class="metal4">
      <li>
        <div class="bg-qty">
          <table width="100%">
            <tr>
              <td><h4>[product_quantity]</h4></td>
              <td><!--START: qtybox-->
                <input class="qty-box" type="text" name="qty-0" value="1" onChange="validateValues(document.add,1);" id="qty-0"  pattern="[0-9]*">
                <!--END: qtybox--></td>
              <td><a href="#" onClick="check_and_add(document.add);" class="slide"><img src="images/btn-add-to-cart.png" border="0" /></a></td>
              <td><div id="loader" style="visibility:hidden;"><img src="themes/jqt/img/loading.gif" border="0" /></div></td>
            </tr>
          </table>
        </div>
      </li>
    </ul>
    <!--END: addtocart--> 
    <!--START: extended_description-->
    <ul>
      <li>
        <h4>[product_Header-description]</h4>
        <div class="prodDesc">[extended_description]</div>
      </li>
    </ul>
    <hr noshade="noshade" />
    <!--END: extended_description--> 
    <!--START: reviews-->
    <ul>
      <li>
        <h4>[reviews_header]</h4>
        <!--START: user_reviews-->
        <div style="padding: 3px 0px;"><img src="assets/templates/common/images/star[rating].png"></div>
        <div class="prodDesc"><i>[long_review]</i></div>
        <div class="prodDesc" style="margin-top: 8px;"><strong>by:</strong> [user_name] from [user_city] on [review_date]</div>
        <!--END: user_reviews--> 
      </li>
    </ul>
    <!--END: reviews-->
    <!--START: extrafields-->
    <ul>
      <li> 
        <!--START: extra_field_1-->
        <div class="item">
          <label><strong>[product_extrafield1]</strong></label>
          <info>[extra_field_1]</info>
        </div>
        <br />
        <!--END: extra_field_1--> 
        <!--START: extra_field_2-->
        <div class="item">
          <label><strong>[product_extrafield2]</strong></label>
          <info>[extra_field_2]</info>
        </div>
        <br />
        <!--END: extra_field_2--> 
        <!--START: extra_field_3-->
        <div class="item">
          <label><strong>[product_extrafield3]</strong></label>
          <info>[extra_field_3]</info>
        </div>
        <br />
        <!--END: extra_field_3--> 
        <!--START: extra_field_4-->
        <div class="item">
          <label><strong>[product_extrafield4]</strong></label>
          <info>[extra_field_4]</info>
        </div>
        <br />
        <!--END: extra_field_4--> 
        <!--START: extra_field_5-->
        <div class="item">
          <label><strong>[product_extrafield5]</strong></label>
          <info>[extra_field_5]</info>
        </div>
        <br />
        <!--END: extra_field_5--> 
        <!--START: extra_field_6-->
        <div class="item">
          <label><strong>[product_extrafield6]</strong></label>
          <info>[extra_field_6]</info>
        </div>
        <br />
        <!--END: extra_field_6--> 
        <!--START: extra_field_7-->
        <div class="item">
          <label><strong>[product_extrafield7]</strong></label>
          <info>[extra_field_7]</info>
        </div>
        <br />
        <!--END: extra_field_7--> 
        <!--START: extra_field_8-->
        <div class="item">
          <label><strong>[product_extrafield8]</strong></label>
          <info>[extra_field_8]</info>
        </div>
        <br />
        <!--END: extra_field_8--> 
        <!--START: extra_field_9-->
        <div class="item">
          <label><strong>[product_extrafield9]</strong></label>
          <info>[extra_field_9]</info>
        </div>
        <br />
        <!--END: extra_field_9--> 
        <!--START: extra_field_10-->
        <div class="item">
          <label><strong>[product_extrafield10]</strong></label>
          <info>[extra_field_10]</info>
        </div>
        <br />
        <!--END: extra_field_10--> 
      </li>
    </ul>
    <!--END: extrafields--> 
    <!--START: PRODUCT_FEATURES_BLOCK-->
    <ul style="padding:0px;margin:0px;padding-left: 5px;" class="productFeatures">
      <!--START: PRODUCT_FEATURES-->
      <li>[product_feature_name]</li>
      <!--END: PRODUCT_FEATURES-->
    </ul>
    <!--END: PRODUCT_FEATURES_BLOCK-->
  </form>
  <!--START: accessories_0-->
  <h3>[product_Header-upsellitems]</h3>
  <ul style="padding: 0px; margin: 0px;">
    <!--START: accessories_items0-->
    <li style="border-bottom: 1px solid #bbbbbb;" class="arrow" onclick="window.location='product.asp?itemid=[catalogid]';"><a href="product.asp?itemid=[catalogid]" target="_webapp">
      <div style="float: left;">
        <div><img src="[THUMBNAIL]" width="90" alt="[name]" border="0"></div>
      </div>
      <div style="float: left;">
        <div class="prodName" style="width: 200px; white-space: normal;padding: 3px;padding-top: 0px;">[name]</div>
        <div class="id" style="padding: 3px;">SKU: [id]</div>
        <!--START: product_review--> 
        <!--START: product_review_average--> 
        <!--START: review_count-->
        <div class="id" style="padding: 3px;"><img src="../assets/templates/common/images/star[review_average].png" align="absmiddle" style="margin-right: 5px;" />([review_count])</div>
        <!--END: review_count--> 
        <!--END: product_review_average--> 
        
        <!--END: product_review-->
        <div style="padding: 3px;"> 
          <!--START: ITEMPRICE-->
          <div class="price">[ITEMPRICE]</div>
          <!--END: ITEMPRICtE--> 
          <!--START: SALEPRICE-->
          <div class="price">[ITEMPRICE]</div>
          <div class="price">[ITEMSALEPRICE] <img src="assets/templates/common/images/on_sale.png" align="absmiddle" /></div>
          <!--END: SALEPRICE--> 
        </div>
      </div>
      </a></li>
    <!--END: accessories_items0-->
  </ul>
  <!--END: accessories_0-->
  <!--START: related_0-->
  <h3>[product_Header-relateditems]</h3>
  <ul style="padding: 0px; margin: 0px;">
    <!--START: related_items0-->
    <li style="border-bottom: 1px solid #bbbbbb;" class="arrow" onclick="window.location='product.asp?itemid=[catalogid]';"><a href="product.asp?itemid=[catalogid]" target="_webapp">
      <div style="float: left;">
        <div><img src="[THUMBNAIL]" width="90" alt="[name]" border="0"></div>
      </div>
      <div style="float: left;">
        <div class="prodName" style="width: 200px; white-space: normal;padding: 3px;padding-top: 0px;">[name]</div>
        <div class="id" style="padding: 3px;">SKU: [id]</div>
        <!--START: product_review--> 
        <!--START: product_review_average--> 
        <!--START: review_count-->
        <div class="id" style="padding: 3px;"><img src="../assets/templates/common/images/star[review_average].png" align="absmiddle" style="margin-right: 5px;" />([review_count])</div>
        <!--END: review_count--> 
        <!--END: product_review_average--> 
        <!--END: product_review-->
        <div style="padding: 4px;">
          <!--START: ITEMPRICE-->
          <div class="price">[ITEMPRICE]</div>
          <!--END: ITEMPRICE--> 
          <!--START: SALEPRICE-->
          <div class="price">[ITEMPRICE]</div>
          <div class="price">[ITEMSALEPRICE] <img src="assets/templates/common/images/on_sale.png" align="absmiddle" /></div>
          <!--END: SALEPRICE-->
        </div>
      </div>
      </a></li>
    <!--END: related_items0-->
  </ul>
  <!--END: related_0--> 
  [FOOTER] </div>
<script language="javascript"><!--
//thumbnail script
var image1,image2,image3,image4,selectedimage;
var imagemaxwidth, imagemaxheight

imagemaxwidth=300;
imagemaxheight=0;

image1="[image1]";
image2="[image2]";
image3="[image3]";
image4="[image4]";
imagecaption1="[imagecaption1]";
imagecaption2="[imagecaption2]";
imagecaption3="[imagecaption3]";
imagecaption4="[imagecaption4]";
selectedimage='[image1]'; //pre load image1

// This defines what to do when an image is clicked on
function image_click(clicks)
{
selectedimage=eval('image'+clicks);
document.getElementById('large').src='thumbnail.asp?file=' + selectedimage + '&maxx='+imagemaxwidth+'&maxy='+imagemaxheight;
changecontent("imagecaptiont",eval('imagecaption'+clicks));
}


function check_stock(what,partnum)
{
var soption;
var i;
var product_availability='[availability]';
var backordermode='[allowbackorder]';
var avail_instock='[productAvailability-Instock]';
var avail_outofstock='[productAvailability-Outofstock]';
var avail_backorder='[productAvailability-Backorder]';
var optionfound=0;

if (inventoryarray[catalogid].length==0) //if there is no advanced options, don't look for stock
{
return true;
}
else
{

for(i=0;i<inventoryarray[catalogid].length;i++) {
 soption=inventoryarray[catalogid][i];
 
 field_array=soption.split("-");
 
 //Dynamic Part for advanced options
 if (typeof((idarray[catalogid])) != "undefined")
{
    soptionid=idarray[catalogid][i]; 
    if (field_array[0]==partnum){changeid(soptionid);}
}

 if ((field_array[0]==partnum))
 {    
    changecontent("product_inventory",field_array[1]);
    if (eval(GetValue(what,"qty-0"))>field_array[1]) {
        optionfound=optionfound+1;
        if (backordermode==1)
        {
        changecontent("availability",avail_backorder); 
        return true;
        optionfound=optionfound+1;
    }
    else 
    {
        changecontent("availability",avail_outofstock);
        alert("The options you selected are not currently available.");
        optionfound=optionfound+2;
        return false;
    }

    }

 }
 }

if (optionfound==0)
{ 
changecontent("availability",product_availability);
return true;
}

if (optionfound==1)
{

changecontent("availability",avail_instock);
return true;
}


}


}


function check_and_add(formx)
{
    document.getElementById("loader").style.visibility = "visible";
    if (document.getElementById('add').std_price==null)
    {
        document.getElementById('add').submit();
    }
    else
    {
        var readytoadd=validateValues(formx,1)
        if (readytoadd==true)
        {
            document.getElementById('add').submit();
        }
    }
}

// --></script> 
<script language="javascript">
var currency_symbol='[currency]';
validateValues(document.add,0);
</script>
</body>
</html>
20

Maybe I need to try this?

21

In the page you said was your site?

Have you given me the wrong link?

This is the start of the head with the wrong meta tag:

<!DOCTYPE HTML>
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Welcome to Vita Vibe, Inc.  - USA Made Ballet Barres, Fitness & Gymnastics Equipment</title>
<link rel="canonical" href="http://www.vitavibe.com" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
1 Like