...

View Full Version : Meandering



flurl
06-27-2012, 07:23 PM
Hello All, I have coded a simple calculator to estimate quantities in C# ASP but I want to convert it to javascript. I have attempted to use SharpKit without success. The pages of the site I am building are HTML5 standard and I loathe the idea of converting all the pages to ASP for this simple bit of code. The ocean is wide open with possibilities and I am a tiny rubber ducky meandering aimlessly about the waves.

So, any constructive analysis/$.02 would be greatly appreciated.

Old Pedant
06-27-2012, 09:24 PM
Ummm...and are we supposed to guess what the calculator does? Or what it looks like?

Start with designing the appearance in HTML, without worrying about JavaScript.

Then start putting the JS code in the page (at the END of the page, just before the </body> tag, will be both best and easiest).

If you don't know JavaScript, then at least do what you can can and show us the formulae involved as well as the HTML page.

And not to ask a silly question, but... Why would you need to convert ALL pages to ASP.NET? Why couldn't you just convert the one page that has the calculator on it?

flurl
06-27-2012, 10:43 PM
Hello Old Pedant, thanks for your reply! I have attached a capture of the page. In terms of your silly question, I do not know how to merge a single ASP page with the existing project. When I try to import the HTML and CSS in VS, the layout is not accommodating (fubar). Briefly, dropbox values are selected and when the calculate button is clicked it references a multidimensional array to produce the value in label6.Text. Below is the C# code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace fluriousWeb
{
public partial class WebForm1 : System.Web.UI.Page
{

int[,] stChips = new int[,] {{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}};

int[,] stPavers = new int[,]{{2,3,5,7},
{3,7,10,13},
{5,10,15,20},
{7,13,20,27},
{12,23,35,47}};
protected void Page_Load(object sender, EventArgs e)
{}
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedIndex != -1)
{
Label1.Visible = true;
Label3.Visible = true;
Label2.Visible = false;
Label4.Visible = false;
DropDownList1.Visible = false;
DropDownList3.Visible = false;
DropDownList2.Visible = true;
DropDownList4.Visible = true;
Label6.Text = "";
}
if (RadioButtonList1.SelectedIndex == 1)
{
Label1.Visible = false;
Label3.Visible = false;
Label2.Visible = true;
Label4.Visible = true;
DropDownList2.Visible = false;
DropDownList4.Visible = false;
DropDownList1.Visible = true;
DropDownList3.Visible = true;
Label6.Text = "";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Label6.Text = "";
DropDownList1.Visible = false;
DropDownList3.Visible = false;
DropDownList2.Visible = false;
DropDownList4.Visible = false;
Label1.Visible = false;
Label3.Visible = false;
Label2.Visible = false;
Label4.Visible = false;
RadioButtonList1.SelectedIndex = -1;
}
protected void Button2_Click(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedIndex != -1)
{
int stoneInch = DropDownList2.SelectedIndex;
int stoneSq = DropDownList4.SelectedIndex;
if (stoneInch != -1 && stoneSq != -1)
Label6.Text = stChips[stoneInch, stoneSq].ToString();
}
if (RadioButtonList1.SelectedIndex == 1)
{
int paverInch = DropDownList1.SelectedIndex;
int paverSq = DropDownList3.SelectedIndex;
if (paverInch != -1 && paverSq != -1)
{
Label6.Text = stPavers[paverInch, paverSq].ToString();
}
}
}
}
}

Old Pedant
06-27-2012, 11:23 PM
Yes? And are we supposed to guess at the contents of the dropdown lists?

I say again, create an HTML page *FIRST* and show that to us.

As for not knowing how to import HTML and CSS into a VS project and use it to create an ASP.NET page: Sorry, but that's just your inexperience showing. It really isn't that hard, honest.

But that's probably irrelevant. This actually looks trivial to do all in JS once you have the HTML created.

You'll pardon me, I hope, if I say that just from inspection of your C# code I don't think your code is very user-friendly. You don't even tell people why you aren't giving them an answer when they ask for one (e.g., "You must select both the number of inches and number of squares", or something to that effect).

flurl
06-28-2012, 12:18 AM
Thanks Old Pedant for the quick reply again! I will draft up the HTML as that's a different animal than the aspx page that I currently have. In terms of the lack of aptitude I possess when it comes to importing the HTML and CSS into VS, the layout is altered when the files are imported. I haven't the ego to deny that I have much to learn and I appreciate your insights greatly. I also agree that this is a trivial piece of code.

I am a bit unsure as to your comment about user-friendliness. I only pasted a screenshot for summary purposes, in the final product, a client will visit the app with the intention of finding out how many bags of which product they require. It's a fairly simple, hopefully user-friendly process. When they select the product, the correct dropbox appears with the necessary values. It is a necessity to select the square footage and desired depth of product to determine the quantity of product needed.

I apologize if any of this reply hints at the slightest bit of snark, I am only attempting to be thorough in my communication. I truly appreciate your expertise and wisdom.

flurl
06-28-2012, 12:41 AM
Hello Old Pedant, I have attached a txt file, rename to html to get a visual in your browser. You will not see the dropboxes by default visible=false, they were designed in asp to appear when the radio is selected.

If radio1 is selected the following dropboxes set visible=true:
dropbox1 (area in sq ft) values are 10,20,30,40,50,60,70,80,90,100,200,300,400,500
dropbox2 (depth) values are 1,2,3,4,5,6

If radio2 is selected the following dropboxes set visible=true:
dropbox3 (area in sq ft) 10,20,30,40,50,60,70
dropbox4(depth) 1,2,3,4

The arrays are as follows:

for radio1
{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}};

for radio2
{2,3,5,7},
{3,7,10,13},
{5,10,15,20},
{7,13,20,27},

I'm delighted to hear your opinion, much thanks!

Old Pedant
06-28-2012, 12:41 AM
It's not trivial to import the HTML into a VS project. Wasn't trying to say that. But it can be done. Mainly, you have to stop VS from getting in the way. Anyway, I do agree that this project seems to call for a browser-based, js-based solution.

As for user-friendly: What I meant was, suppose somebody specified the number of square feet but then neglected to specify the depth? You C# code would simply give no answer at all. It would be better to have it say something like "You need to select the depth as well". That's all. No big deal, an 80% of people would have no problem without it. But trust me, that other 20% would drive you nuts with phone calls about how they can't make your web page work.

Old Pedant
06-28-2012, 12:46 AM
Ummm...okay...I see the HTML.

But you are missing the most important parts: The <select>s with whatever <option>s they have!

EDIT: OOPS! Sorry. I see you put them in your message, not in the code.

Still, how hard would it have been to put them in the code?

flurl
06-28-2012, 12:52 AM
Yes, agreed on fool-proofing the app. I find the c# component is more obliging to me for writing if statements to trigger error messages if necessary. This is all a delicious hot cup of brand new. I am in total agreement that a js solution would be great.

Old Pedant
06-28-2012, 01:27 AM
<!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
{
width: 100%;
text-align: center;
}
div#selects div
{
display: none;
}
#message {
font-weight: bold;
}
</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>
<br/><br/>
<div id="selects">
<div id="chips">
<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">
<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"></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;
document.getElementById("chips").style.display =
showDiv == "chips" ? "block" : "none";
document.getElementById("pavers").style.display =
showDiv == "pavers" ? "block" : "none";
document.getElementById("message").innerHTML = "";
}

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";
}
</script>
</body>
</html>

flurl
06-28-2012, 01:36 AM
Gigantic thanks for your expertise kind Sir! You are an animal!!!

Old Pedant
06-28-2012, 02:02 AM
Do study it, see if you can follow the code, and feel free to ask if puzzled.

flurl
06-28-2012, 02:08 AM
Studying right now, adding to "my bag of tricks". Have a great evening wherever about's you are.

flurl
06-29-2012, 03:31 AM
Master Coder Grand Pedant, have you a suggestion for text transitioning? Currently the footer shifts down block-ily. Curious about a smoother effect. I have looked at JS and CSS but what I have found is predominantly for menus and graphics, ie slideshows. Any quick ideas you can throw out would be awesome. Thanks!!!:thumbsup:

Old Pedant
06-29-2012, 07:50 PM
What footer???

No footer in what you showed or what I gave you.

Can you show it live? Give us a URL?

Or... If you mean that when the answer appears it occupies space and so shoves down whatever is below it, there's an easy fix: So long as the answer isn't longer than one line, just put an &nbsp; (Non-Breaking SPace) into the <div> that gets the answer. That character will be the same height as the answer and so when the answer appears, stuff below it shouldn't move. Or or or... Again, showing it to us live would be best way for us to see the problem.

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.:D

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:


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


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


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. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum