Meandering - Page 2

flurl · 07-01-2012, 04:21 PM

Hello Old Pedant, a wonderful Sunday to you! Unfortunately, likely not to your surprise, I haven't gotten any examples online yet. The gist is: When I select the controls, my lower page content drops when I would hope to see it slide. I am looking into .slideDown. Pretty excited about this possibility...the dreams are alive!!!

Thank you kind Sir for your expert opinion and assistance as always!

flurl · 07-01-2012, 06:57 PM

An update Sir, after scouring the web I think this looks like a slick option

http://jsfiddle.net/XUjAH/6/

But it appears your code defaults to MooTools and the example here is jquery 1.5. Probably irrelevant, anyhow but the code looks like a different animal for sure but perhaps a couple minor tweaks would yield the same results?

Awaiting your push or kick in the right direction with gratitude.

Old Pedant · 07-02-2012, 06:58 PM

I don't use jQuery, MooTools, or any other JS framework. My code is plain vanilla out of the box JavaScript.

That jQuery example you show is just plain silly.

So incredibly easy to do it like this:

Code:

<p 
   onclick="var d=document.getElementById('show');d.style.display=d.style.display=='block'?'none':'block';"
>click me</p>
<div id="show" style="display:none;">
    here<br />
    is<br />
    a<br />
    bunch<br />
    of<br />
    content<br />
    sdf
</div>
<div>always shows</div>

I say, again, if you simply RESERVE the space on your page for the answer, then putting the answer in place won't change the height of the content and the placement of the footer will remain unchanged. That's much better than a moving footer, in any case.

Old Pedant · 07-02-2012, 07:16 PM

Okay, I grant you it took a little more trickery than that to make it come out how I wanted it.

But here it is:

Code:

<!DOCTYPE html><!-- use HTML5 -->
<html>
<head>
<title>
    Landscaping Calculator
</title>
<style type="text/css">
  * { 
            font-family: "Century Gothic";
            font-size: medium;
    }
    div#choices, div#selects, div#message, div#footer
    {
        width: 100%;
        text-align: center;
    }
    #message {
        font-weight: bold;
        visibility: hidden;
    }
    </style>
</head>
<body>
<form id="form1">
<div id="choices">
    <label><input type="radio" name="choice" value="chips"/>Landscape Stone Chips</label>
    <br/>
    <label><input type="radio" name="choice" value="pavers"/>Patio Base - Paver Filler</label>
</div>
<div id="selects">
  <div id="chips" style="visibility: hidden;">
    <b>Landscape Stone Chips</b>
    <br/><br/>
    <label>Area in square feet: 
    <select name="chipsSqFt">
        <option>--choose--</option>
        <option>10</option><option>20</option><option>30</option>
        <option>40</option><option>50</option><option>60</option>
        <option>70</option><option>80</option><option>90</option>
        <option>100</option><option>200</option><option>300</option>
        <option>400</option><option>500</option>
    </select>
    </label>
    <br/><br/>
    <label>Depth in inches:
    <select name="chipsInches">
        <option>--choose--</option>
        <option>1</option><option>2</option><option>3</option>
        <option>4</option><option>5</option><option>6</option>
    </select>
    </label>
  </div>
  <div id="pavers" style="display: none;">
    <b>Patio Base - Paver Filler</b>
    <br/><br/>
    <label>Area in square feet: 
    <select name="paversSqFt">
        <option>--choose--</option>
        <option>10</option><option>20</option><option>30</option>
        <option>40</option><option>50</option><option>60</option>
        <option>70</option>
    </select>
    </label>
    <br/><br/>
    <label>Depth in inches:
    <select name="paversInches">
        <option>--choose--</option>
        <option>1</option><option>2</option><option>3</option>
        <option>4</option>
    </select>
    </label>
  </div>
</div>
<hr/>
<div id="message">
    You will need xxx bags at 50 lbs. per bag
</div>
<hr/>
<div id="footer">
    <i>This is the footer of the page</i>
</div>
</form>
<script type="text/javascript">
var theForm = document.getElementById("form1");
theForm.choice[0].onclick = choose;
theForm.choice[1].onclick = choose;
theForm.chipsSqFt.onchange = calculate;
theForm.chipsInches.onchange = calculate;
theForm.paversSqFt.onchange = calculate;
theForm.paversInches.onchange = calculate;

var chipsNeeded = [
    [2,3,5,6,8,10],
    [3,6,10,13,16,19],
    [5,10,15,19,24,29],
    [6,13,19,26,32,39],
    [8,16,24,32,40,49],
    [10,19,29,39,49,58],
    [11,23,34,45,57,68],
    [13,26,39,52,65,78],
    [15,29,44,58,73,87],
    [16,32,49,65,81,97],
    [32,65,97,129,162,194],
    [49,97,146,194,243,291],
    [65,129,194,259,323,388],
    [81,162,243,323,404,485]
];
var paversNeeded = [
    [2,3,5,7],
    [3,7,10,13],
    [5,10,15,20],
    [7,13,20,27]
];

function choose()
{
    var showDiv = this.value;
    var dChips  = document.getElementById("chips");
    var dPavers = document.getElementById("pavers");
    if ( showDiv == "chips" )
    {
        dChips.style.visibility = "visible";
        dChips.style.display = "block";
        dPavers.style.display = "none";
    } else {
        dPavers.style.visibility = "visible";
        dPavers.style.display = "block";
        dChips.style.display = "none";
    }
    theForm.chipsSqFt.selectedIndex = 0;
    theForm.chipsInches.selectedIndex = 0;
    theForm.paversSqFt.selectedIndex = 0;
    theForm.paversInches.selectedIndex = 0;
    document.getElementById("message").style.visibility = "hidden";
}

function calculate()
{ 
    var form = this.form;
    var data, sel1, sel2;
    var msg = document.getElementById("message");

    if ( form.choice[0].checked )
    {
        data = chipsNeeded;
        sel1 = form.chipsSqFt;
        sel2 = form.chipsInches;
    } else {
        data = paversNeeded;
        sel1 = form.paversSqFt;
        sel2 = form.paversInches;
    }
    if ( sel1.selectedIndex == 0 )
    {
        msg.innerHTML = "Please select a number of square feet";                 
        msg.style.color = "red"; 
        return;
    }
    if ( sel2.selectedIndex == 0 )
    {
        msg.innerHTML = "Please select a number of inches of depth";                 
        msg.style.color = "red"; 
        return;
    }
    msg.style.color = "black";
    var bags = data[sel1.selectedIndex-1][sel2.selectedIndex-1];
    msg.innerHTML = "You will need " + bags + " bags at 50 lbs. per bag";
    msg.style.visibility = "visible";
}
</script>
</body>
</html>

flurl · 07-02-2012, 10:31 PM

Hi Old Pedant, awesome work! You can see my vision, I fiddled a minute and found that when radio1 is selected and dropboxes the msg is delivered perfectly but then if you radio2 is selected and dropboxes, that it fails to work. In C# a clear would take place when a radio is selected. Any ideas? Thanks!

Old Pedant · 07-03-2012, 12:15 AM

HUH?

Sorry, I don't understand you. In this latest code, if you select the other radio button, I clear everything back to original state: The <select>s go back to nothing selected and the message area is cleared. What more do you want then that???

flurl · 07-03-2012, 12:44 AM

Greetings and kind thanks Old Pedant!

What I am referring to, if landscape stone chips is selected and the dropboxes are selected - it's working so far.

In the same window, click the paver and select sq ft area "50" then select a depth. It appears there is a bug perhaps? I cannot explain this.

EDIT

Working with the page, it seems isolated to the value 50, I am checking it out to see what I can come up with. Once again, major thanks for your expertise!

Old Pedant · 07-03-2012, 01:02 AM

LOL! YOUR FAULT! (Well, mine also for not noticing, but...)

Your data array for pavers only goes up to 40 square feet! So 50, 60, and 70 square feet don't work.

Code:

var paversNeeded = [
    [2,3,5,7],
    [3,7,10,13],
    [5,10,15,20],
    [7,13,20,27]
];

See? only 4 sub-arrays, so it only handles the first 4 <option>s of the area in square feet.

You need 3 more elements to the paversNeed array.

flurl · 07-03-2012, 01:10 AM

I had a hunch it was something like that, but a surety that you'd know what's up! ENORMOUS thank you! You're the best.