- this is what I GET WHEN I enter my code between the frame:
- this is the code: I have tried to figure it out, but I need help please.
Code: Select all
[/list]<!doctype html> <html> <head> <title></title> </head> <body class="cgSpecial" style="background: #ffffff;"> <style type="text/css">form input.form-error { border-color: #B94A48; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; color: #B94A48; } </style> <script> var EmailSignup = { form: function(link) { //link.style.display = 'none'; $(link).parent().css('display', 'none'); $('#tdShippingImage').css('display', 'none'); //var $div = $(link).parent().find('div').first(); var $div = $('#divEmailSignup'); $div.css('display', 'block'); return false; }, submit: function(form) { var $divAnim = $(form).parent().parent().find('div.emailSignupAnimation'); function startAnimation() { $(form).find('button').prop('disabled', true); $(form).find('input').prop('disabled', true); $divAnim. css({top: '0', left: '0', position: 'absolute', width: '100%', height: '100%', 'z-order': 1001, display: 'block'}); } function hideAnimation() { $divAnim.css('display', 'none'); $(form).find('button').prop('disabled', false); $(form).find('input').prop('disabled', false); } var data = $(form).serialize(); startAnimation(); $.ajax({ url: '/site/maillistAPI?t=' + (+new Date()), data: data, type: 'POST', dataType: 'json', timeout: 30000 }). done(function(data) { hideAnimation(); if (data.res) { // close w/o a message $('#divGreetingModal').modal('hide'); return; } if (! data.input ) { // If there is a server error - just close it $('#divGreetingModal').modal('hide'); return; } // Input error $(form).find('input').removeClass('form-error'); for (var n in data.errors) { $(form['Maillist[' + n + ']']).addClass('form-error'); } }). fail(function(jqXHR, textStatus, error) { hideAnimation(); // close w/o a message $('#divGreetingModal').modal('hide'); }); return false; } }; </script> <div class="modal-footer" style="text-align: center;"> » <span>Plant Calculator</span></div> <!-- /2nd top navbar --> <div class="container"><noscript> <div style="text-align: center; padding: 24px;"><div class="flash-error" style="margin: auto;"> Javascript must be enabled for best use of this site. [<a href="/site/page?view=javascript">how</a>] <br /><br /> If Javascript is disabled, many important features of this site will not work. </div></div> </noscript><script src="/js/productsBottom.js?time=1663111014"></script><script src="/js/printThis.js?v=1.0.0"></script><script src="/js/dropInBread.js"></script><script type="text/javascript"> if (!(document.cookie && document.cookie.length)) { document.getElementById('divCookies').style.display = 'block'; } </script><script> $(document).ready(function() { $("#search-q").hover(function() { $("#search-q").remove('title'); var strings = [ "You can search with natural language, such as <span style='color:rgb(230, 13, 143);'>I want flowers for a shady hill that is mostly clay</span>.", "Describe what you seek, such as <span style='color:rgb(230, 13, 143);'>green all year to cover my sunny fence</span>.", "Explain what you are looking for, such as <span style='color:rgb(230, 13, 143);'>something for between patio blocks with some sun</span>.", "Describe what you want, such as <span style='color:rgb(230, 13, 143);'>a flowering grass for a border that is not too tall</span>.", "You can simply list off what your ideal plant would be, such as <span style='color:rgb(230, 13, 143);'>red or golden, attract hummers under a tree</span>.", "You can describe the features you want, such as <span style='color:rgb(230, 13, 143);'>a fast growing evergreen to reduce erosion on a hill</span>.", "Save time and just describe your perfect plant, such as <span style='color:rgb(230, 13, 143)'>a border plant with scented blooms that deer avoid</span>." ]; var randomIndex = Math.floor(Math.random() * strings.length); var randomString = strings[randomIndex]; var tooltipHeader = "<div class='cg-rounded-outline' style='text-align:center; margin-bottom:12px;'>Natural Language Search</div>"; var tooltip = tooltipHeader.concat(randomString); $("#search-q").attr('title', tooltip); simple_tooltip('[data-toggle="tooltip"]',"tooltip"); }); }); $('.searchBtn').click(function (e) { $(this).submit(); }); $("#search-q").click(function() { if($(window).width()>700) { var oldWidth = $(this).width(); $(this).css("width", "300px"); if (oldWidth < 300 ) { $('.ui-tooltip').animate({ 'marginLeft': '-162px' }, 500); } } else if($(window).width() < 500){ var width = $(window).width(); $('.logo-place').css('opacity', 0.1); $('.cgResponsiveGTSMargin').css('opacity', 0.1); $(this).css('width', (width - 50- $('.searchBtn').width())+'px'); $('.navbar-search').css({ marginTop: '-12%', paddingRight:'8px' }); } }); $(window).resize(function(){ if($(window).width()>700){ $(this).css("width", "138px"); } else if($(window).width() < 500){ var width = $(window).width(); $('.logo-place').css('opacity', 1); $('.cgResponsiveGTSMargin').css('opacity', 1); $(this).css('width', width <= 320?'40px': '43px'); $('.navbar-search').css({ marginTop: '4px', paddingRight:'0px' }); } }); $("#search-q").focusout(function(e) { if($(this).val().length !== 0 ){ console.log('here'); return true; } if($(window).width()>700){ $(this).css("width", "138px"); } else if($(window).width() < 500){ var width = $(window).width(); $(this).css('width', width <= 320?'40px': '43px'); $('.navbar-search').css({ marginTop: '4px', paddingRight:'0px' }); $('.logo-place').css('opacity', 1); $('.cgResponsiveGTSMargin').css('opacity', 1); } }); </script> <div> <div id="content"><!-- ****** MAKE CHANGES IN BOTH plantCalculator.php and calculatePlants.php ****** There are text differences for SEO below, DO NOT copy everything below from one to the other ****** (Two versions are needed for organic search results for "calculate plants" and plant calculator") --> <h3>Plant Calculator</h3> <div> <div> <div style="font-size:110%;">This plant and landscaping calculator makes it easy to figure out how many plants you need, spacing, and coverage.<br /> <br /> <span style="font-weight:bold;">Fill in any two fields and this tool will calculate the third field.</span></div> <br /> Use this tool to determine: <ul> <li><span style="font-weight:bold;">How many plants do you need to cover a specific area?</span> (Enter Area and Spacing)</li> <li><span style="font-weight:bold;">What spacing best fills an area with a specific number of plants?</span> (Enter Area and Number of Plants)</li> <li><span style="font-weight:bold;">What area would be filled by a specific number of plants at a specific spacing?</span> (Enter Spacing and Number of Plants)</li> </ul> <p> </p> </div> <div>Note: given proper nurturing, the center of the spacing range that we suggest on the <a data-html="<img class="img-rounded" style="float:center; margin: 5px;;" data-cke-saved-src="/images/specsTab.jpg" src="/images/specsTab.jpg" />" data-toggle="htmltooltip" title="">"Specs" tab</a> of each plant will generally result in good fill within two years. Use a closer spacing if you wish them to fill in more quickly. Farther spacing is a more economic choice, provided you are willing to wait longer for them to fill in. Plantings in northern zones will of course take longer, as the growing season is shorter.</div> <div> </div> <div> </div> </div> <script> function recalculate() { var area = $("#area").val(); var space = $("#space").val(); var plants = $("#plants").val(); if(area!="" && space!="") { window.location.href = "/site/page?view=plantCalculator&area="+area+"&space="+space+"&clicked=yes"; } else if(area!="" && plants!="") { window.location.href = "/site/page?view=plantCalculator&area="+area+"&plants="+plants+"&clicked=yes"; } else if(space!="" && plants!="") { window.location.href = "/site/page?view=plantCalculator&space="+space+"&plants="+plants+"&clicked=yes"; } } </script> <div class="calc-block"> <form class="calc-form" id="fPlants" onsubmit="CGCalc.calc_plants(this); return false;"> <table class="calc-table"> <tbody> <tr> <td colspan="2" style="text-align: center; padding:10px;"><span style="font-weight:bold;">Calculate Area, Spacing or Number of Plants</span><br /> (enter two fields and click "Calculate")</td> </tr> <tr> <td>Area covered (square feet):</td> <td><input id="area" length="6" name="area" onkeydown="onlynum(event)" style="width: 50px;" type="number" /></td> </tr> <tr> <td>Spacing between plants (inches):</td> <td><input id="space" length="6" name="space" onkeydown="onlynum(event)" style="width: 50px;" type="number" /></td> </tr> <tr> <td>Number of plants:</td> <td><input id="plants" length="6" name="plants" onkeydown="onlynum(event)" style="width: 50px;" type="number" /></td> </tr> <tr> <td colspan="2" style="text-align: center; padding-bottom:10px;"><input type="submit" value="Calculate any third field" /></td> </tr> <tr id="tdPResult" style="display: none;"> <td colspan="2" style="text-align: center; padding: 5px;">If you want square spacing that looks like<br /> <img alt="" src="./images/1/plantingSquare.png" style="width:117px; height:82px; border: 0;" /> <div id="cgCalcResultSquare" style="border: 1px solid rgb(0, 0, 128); padding: 3px; background-color: #f6fa87; margin-bottom: 16px;"> </div> If you want triangular spacing that looks like<br /> <img alt="" src="./images/1/plantingTriangular.png" style="width:117px; height:82px; border: 0;" /> <div id="cgCalcResultTriangle" style="border: 1px solid rgb(0, 0, 128); padding: 3px; background-color: #f6fa87;"> </div> <br /> <br /> Start the first row inches from the edge.</td> </tr> </tbody> </table> </form> </div> </div> </div> </div> <p> </p> <style type="text/css">.error{ color:red; } </style> <style type="text/css">#ouibounce-modal { font-family: 'Open Sans', sans-serif; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } #ouibounce-modal .underlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5); cursor: pointer; -webkit-animation: fadein 0.5s; animation: fadein 0.5s; } #ouibounce-modal .ouimodal { width: 600px; height: 400px; background-color: #f0f1f2; z-index: 1; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; border-radius: 4px; -webkit-animation: popin 0.3s; animation: popin 0.3s; } #ouibounce-modal .ouimodal-title { font-size: 18px; background-color: #4EB1CB; color: #fff; padding: 10px; margin: 0; border-radius: 4px 4px 0 0; text-align: center; } #ouibounce-modal h3 { color: #fff; font-size: 1em; margin: 0.2em; text-transform: uppercase; font-weight: 500; } #ouibounce-modal .ouimodal-body { padding: 20px 35px; font-size: 0.9em; } #ouibounce-modal p { color: #344a5f; line-height: 1.3em; } #ouibounce-modal form { text-align: center; margin-top: 35px; } #ouibounce-modal form input[type=email] { padding: 12px; font-size: 1em; width: 260px; border-radius: 4px; border: 1px solid #ccc; -webkit-font-smoothing: antialiased; } #ouibounce-modal form input[type=submit] { text-transform: uppercase; font-weight: bold; padding: 12px; font-size: 1em; border-radius: 4px; color: #fff; background-color: #4ab471; border: none; cursor: pointer; -webkit-font-smoothing: antialiased; } #ouibounce-modal form p { text-align: left; margin-left: 35px; opacity: 0.8; margin-top: 1px; padding-top: 1px; font-size: 0.9em; } #ouibounce-modal .ouimodal-footer { position: absolute; bottom: 20px; text-align: center; width: 100%; } #ouibounce-modal .ouimodal-footer p { text-transform: capitalize; cursor: pointer; display: inline; border-bottom: 1px solid #344a5f; } @-webkit-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes popin { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 85% { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-ms-keyframes popin { 0% { -ms-transform: scale(0); transform: scale(0); opacity: 0; } 85% { -ms-transform: scale(1.05); transform: scale(1.05); opacity: 1; } 100% { -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes popin { 0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } 85% { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } </style> </body> </html>