Adding a Plant Calculator

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Post Reply
User avatar
CnDee
Registered User
Posts: 14
Joined: Fri Jul 29, 2022 4:13 pm
Location: Mississippi
Name: Cindy Gale
Contact:

Adding a Plant Calculator

Post by CnDee »

Hi, my forum is for gardeners. I am trying to add a "Plant Calculator" to my forum. Whenever I add the html, it looks like code instead of like the generator. Here are the images and my site address too. I am not savvy on much ... I am 70 so it's kinda hard to figure out technical on my own.
  • this is what I GET WHEN I enter my code between the frame: Image
  • this is the code:

    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;">&nbsp;&raquo; <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>&nbsp;</p>
    </div>
    
    <div>Note: given proper nurturing, the center of the spacing range that we suggest on the <a data-html="&lt;img class=&quot;img-rounded&quot; style=&quot;float:center; margin: 5px;;&quot;  data-cke-saved-src=&quot;/images/specsTab.jpg&quot; src=&quot;/images/specsTab.jpg&quot; /&gt;" data-toggle="htmltooltip" title="">&quot;Specs&quot; 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>&nbsp;</div>
    
    <div>&nbsp;</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 &quot;Calculate&quot;)</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;">&nbsp;</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;">&nbsp;</div>
    			<br />
    			<br />
    			Start the first row inches from the edge.</td>
    		</tr>
    	</tbody>
    </table>
    </form>
    </div>
    </div>
    </div>
    </div>
    
    <p>&nbsp;</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>
    
    I have tried to figure it out, but I need help please.
Last edited by CnDee on Wed Sep 21, 2022 8:50 pm, edited 1 time in total.
  • When life gives you lemons set up a roadside stand and give it to those that are thirsty!
Image
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26505
Joined: Fri Aug 29, 2008 9:49 am

Re: Adding a Plant Calculator

Post by Mick »

Can I ask where you got the code from? I think there’s more to just the code.

PS/ I’m 71 and I manage :D
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Adding a Plant Calculator

Post by Lumpy Burgertushie »

I am 71 as well so don't sell yourself short . you can learn this stuff.

anyway, where are you trying to use this code?
you can't use any of it just in a post. you posted it here in the bbcode section but I see nothing in that code that relates to a bbcode
at all.

I would suggest you just create a normal web page with your code for the calculator and then simply link to it in your menu or wherever you like.

I have not tested the code you posted but if it works at all it should work in a html web page.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26505
Joined: Fri Aug 29, 2008 9:49 am

Re: Adding a Plant Calculator

Post by Mick »

Lumpy Burgertushie wrote: Wed Sep 21, 2022 6:53 pmyou posted it here in the bbcode section
I’ll move it to custom coding.
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel
User avatar
CnDee
Registered User
Posts: 14
Joined: Fri Jul 29, 2022 4:13 pm
Location: Mississippi
Name: Cindy Gale
Contact:

Re: Adding a Plant Calculator

Post by CnDee »

Thank you both. I got the code from my son that made it but he left without telling me how. He put it on my test website on the contacts page so I can try to figure it out but I'm stuck. It does work on my website: https://1.roxiecommunitygarden.com/contact--map.html which isn't pphBB. on my website all I did was enter it in a code box and it worked. I use Weebly on that site. My Garden uses pphBB for our forum and I'd like to put it on the forum in a page.
  • When life gives you lemons set up a roadside stand and give it to those that are thirsty!
Image
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Adding a Plant Calculator

Post by Lumpy Burgertushie »

the simple way to do this would be just put a link from your board to the webpage that the plant calculator is working on.
;and then put a link back to the board on that page as well.

you could install the pages extension on your board and then create a custom html page with it that will look just like the rest
of your board and all the relevant links would be created for you .

robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
Post Reply

Return to “phpBB Custom Coding”