Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 24 of 24

Thread: Meandering

  1. #16
    New Coder
    Join Date
    Jun 2012
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    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!

  2. #17
    New Coder
    Join Date
    Jun 2012
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  3. #18
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  4. #19
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  5. #20
    New Coder
    Join Date
    Jun 2012
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  6. #21
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  7. #22
    New Coder
    Join Date
    Jun 2012
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!
    Last edited by flurl; 07-03-2012 at 01:47 AM.

  8. #23
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  9. Users who have thanked Old Pedant for this post:

    flurl (07-03-2012)

  10. #24
    New Coder
    Join Date
    Jun 2012
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    RESOLVED: C# Asp becomes Javascript!

    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.
    Last edited by flurl; 07-03-2012 at 02:24 AM. Reason: mark resolved


 
Page 2 of 2 FirstFirst 12

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •