Adding Picture Enlargement to 3dcart responsive template

cowsgonemadd3 · June 16, 2016, 2:19pm

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.

SamA74 · June 16, 2016, 3:19pm

I couldn’t say without seeing the template.

cowsgonemadd3 · June 16, 2016, 3:26pm

How can I post the template files here?

TechnoBear · June 16, 2016, 3:29pm

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.)

cowsgonemadd3 · June 16, 2016, 3:41pm

<!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>

cowsgonemadd3 · June 16, 2016, 3:41pm

That was the product details, here is the header…

cowsgonemadd3 · June 16, 2016, 3:42pm

<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>

cowsgonemadd3 · June 17, 2016, 1:06pm

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

PaulOB · June 17, 2016, 1:35pm

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.

cowsgonemadd3 · June 17, 2016, 1:36pm

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

PaulOB · June 17, 2016, 1:38pm

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

cowsgonemadd3 · June 17, 2016, 1:45pm

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”.

PaulOB · June 17, 2016, 1:53pm

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

cowsgonemadd3 · June 17, 2016, 1:57pm

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

PaulOB · June 17, 2016, 2:19pm

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

cowsgonemadd3 · June 17, 2016, 2:20pm

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

PaulOB · June 17, 2016, 3:18pm

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.

cowsgonemadd3 · June 17, 2016, 3:20pm

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>

cowsgonemadd3 · June 17, 2016, 3:21pm

Maybe I need to try this?

PaulOB · June 17, 2016, 3:27pm

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" />

Topic		Replies	Views
My website is zooming in on tablets and phones HTML & CSS javascript	8	1729	August 19, 2016
Enable pinch zoom on mobile with meta tag HTML & CSS	5	12580	October 8, 2014
How do i click the picture JavaScript	3	536	October 8, 2014
Pinch/zoom in jquery mobile Mobile	4	9091	December 16, 2011
Image enlarging feature HTML & CSS html , jquery , css	11	2157	October 3, 2017

Adding Picture Enlargement to 3dcart responsive template

Related topics