Remember that question you never asked? Well once again I’ve answered it.
To take the normal sliding menu farther I thought I should have something happen when hovering over the menu items. Novel! Well as you can see if you clicked on the link above (Sorry, can’t repost the link. Links are expensive.) the menu items have large counter parts that show up when hovered over and don’t go away until the counter part or the main item is left. What does this all mean? I DON’T KNOW but I’ll find out eventually. It’s in the cards man, it’s in the cards…
Ok so additions… For the style sheet, I added a class:
<divclass="menuItem floatLeft blue">
1
<divclass="menuItemBig red">THIS IS THE BIG ITEM 1</div>
</div>
I added two methods:
//
// mouseenter: Find any menuItemBig within the given element and show// Reset the position of the menuItemBig element to appear// to be in the middle of the parent element// mouseleave: Hide the child menuItemBig//function setOnHoverForMenuItems(items)
{
jQuery(items)
.each
(
function ()
{
jQuery(this).mouseenter
(
function()
{
//Why the positioning? I wanted the child div to show up in the// middle of the parent div which is done by putting the child's left side// to half of the width of the parent over from the parent's left sidevar parentPosition = jQuery(this).position();
var bigItems = jQuery(this).children(".menuItemBig");
bigItems.css({ left: parentPosition.left - (jQuery(this).width() /2), top: parentPosition.top + 10 });
bigItems.show();
}
);
jQuery(this).mouseleave
(
function()
{
jQuery(this).children(".menuItemBig").hide();
}
);
}
);
}
Why not hover? *EDIT* It should be hover. Turns out an issue I was having with hover was not actually an issue with it… *END EDIT*
The other method I added was a simple one:
//// Used to find any element of menuItemBig//function hideAllBigItems(bigItemParentItems)
{
jQuery(bigItemParentItems).children(".menuItemBig").hide();
}
And where did I use these? I appended them to the setChildrenDivs method:
Straight from the “I made this and maybe you can find a use for it” bin, here is one of two ways I create image buttons. Why would you care? I have no idea, but two of the catches that comes with buttons is they have to be wrapped in a form and the fact you have to, far as I know, add hidden value inputs to the form to carry over the values from a url (Action of the form). This take care of both, can ya’ belee it?
This guy takes in a url (ie you already know what it should be, say from pre determined redirect value), breaks down the url to get the request parameters to make hidden inputs, and adds the button. Now I went with the image being a style for the button instead of passing in a location for the image itself, mostly because I find that to be easier to handle from a design perspective since it’s possible that particular image might be used a lot on a site. Seems easier, if you need to change the image, to change one css class then to have to search and replace a million image urls. But what do I know? No seriously, what do I know?
publicstaticString OptionalImageButton(thisHtmlHelper helper, String returnUrl, Boolean viewAsImage, FormMethod formMethod, String buttonText, String formClass, String imageClass, String buttonClass)
{
StringBuilder html = newStringBuilder();
//Create the form along with the formMethod passed in
html.Append("<form action=\"" + returnUrl + "\" class=\"" + formClass + "\" method=\"" + formMethod + "\"> ");
//This is the methodfrom this post, it just give me all the hidden inputs from a url html.Append(MvcMethods.CreateHiddenValuesFromUrl(returnUrl));
//This is where you might hate me. Instead of having an image for the button
//I am using a css class to hold the image. Just a choice, makes it easier
//in my opinionif (viewAsImage)
{
html.Append("<input type=\"submit\" value=\"\" class=\"" + imageClass + "\" />");
}
else
{
//If no image, then just put a text button.
html.Append("<input type=\"submit\" value=\"" + buttonText + "\" class=\"" + buttonClass + " \" ></input>");
}
//End the form
html.Append("</form>");
return html.ToString();
}
You might notice the FormClass parameter, or maybe you didn’t because you can’t read. If that’s the case, then we’re both wasting time. However, if you did notice then you might find it odd. As it is, a form has to be inline in order to show buttons next to each other. After all, by default a form is a block element like a div. Therefore, the form itself will need a class or the style set. Now I could default this to inline, but for the sake of giving power to the programmer, it’s left as a parameter. After all, maybe not all buttons should be inline.
So this is kind of repost as I had already posted this at StackOverflow but I thought it might have some merit here. Whatever. Charts are hot right now so I’m going to push the damned bandwagon. You don’t like it? Well then go do something to yourself that you would consider rude for me to suggest it. Anyways, this might have been overkill but hey, that’s me.
Ok so this first part is simple. Create a panel to hold the charts you are adding, get the lists you want represented by the charts and call the method to create the charts.
As you can see, I just created a new chart, added a series to it, and added a ChartArea to it. Next part is pretty much just looping through the collection and adding each item in it to the list itself. It uses the passed in delegate methods (Func) to get the X and Y values.
Last part holds the four methods responsible for getting the X and Y values from the two lists. Basically I did this to allow the chart creating method to be a generic as possible. Might be overkill.
And so when you run this, you will get two graphs side by side. Mind you, they will be very plain as there are million different properties that can be set to improve the look. I guess the main point of this was to show that it’s pretty easy to create graphs dynamically using any kind of object list. You know what? Screw you. This is my blog and I’ll post whatever I want to. If you don’t like that then you can just come back at a later time and read something else I post. Yeah so there.
using System;
using System.Web.UI.DataVisualization.Charting;
using System.Web.UI.WebControls;
So just recently it was announced that there was a new charting control out for .Net/Visual Studios so I thought I would give it shot. How hard could it be? Well considering it took me 2? years to figure out my Playstation 3 had a wireless card, an uphill battle wasn’t out of the question.
So what the hell has to be done first? Well you need the 3.5 Framework (Sucks if you don’t have that) and service pack 1 (Which doesn’t suck as much but still annoying. I WANT EASY THINGS).
Have those? Great, way to be in the know. Now for the next step, more downloads. Here is the charting install and you need this too to see the actual tool in your toolbox. AMAZING. Now you just have to run the installs, which oddly enough are easy to do. First time for everything.
So now you have them installed right? Ok well do the normal project create/startup, add a new page, and view Design. Go to the old toolbox and look under the Data tab. (Don’t ask me why it’s there because I don’t know and will be compelled to cut you.) Now under the chance you don’t see it there you either didn’t install the second download or you have to add the namespace the control falls under. No problem. Just right click the Data tab and select “Choose Items”. Now in the.Net Framework Components tab look for the Namespace “System.Web.UI.DataVisiualization.Charting” and you should see the name Chart to the right of it. Select that item.
Ok, so now there should be a Chart control in your ToolBox in the Data Tab. You can now drag that thing over. Now in the markup you should see:
If that doesn’t excite you, then I don’t know what will. Anyhow, it’s actually very simple. Series is the line or whatever you are representing the data as and the chart area is what holds the series(s). Seems easy enough, but don’t worry, it gets easier. Now for this example I’m going to actually have two series and they are going to represent amount of weight Bench Pressed and the caloric intake for a given day. Best thing I could come up with right now since today was bench day.
Yeah that’s pretty good. So now what I need is to throw some fake data at it, and to do that I created a Bench table and a FoodIntake table followed by using Linq To Sql to create the needed classes. When all was said and done I could easily do this:
Now believe it or not, that’s all you have to do to get a graph. Pretty easy to say the least. Now the graph that you get will be default everything (And in this case it gives you a bar graph) but still at least that’s something to work with. (Note that I cheated with the food intake by dividing by 10. Unfortunately the graph would look odd with a day of 3500 calories and a 325 bench.)
Now maybe you want this to be a line graph… Whatever can we do?
Ok these three things are used to control how the points on the lines (Markers) actually look. Pretty self explanatory once the word “marker” is translated.
currentSeries.BorderWidth = 3;
This is the thickness of the line itself.
currentArea.Area3DStyle.Enable3D = false;
If you guessed this was a way to make the grid 3d, you were right on and probably able remind yourself to breathe at a maximum 3 times a day.
So now you are thinking you have this down to an expert level and I say,”sure why not?” ‘cept with a little work on the mark up I could make it look like this:
And just like Beloch said in Raiders of the Lost Arc before his face exploded, “It’s Bewtifewl!”
Now for the Usings!!11
using System;
using System.Drawing;
using System.Web.UI.DataVisualization.Charting;
As I have been working with Script Controls lately, I’ve been forces to learn more about javascript…. yeah I know, bleh. However, in my learnin’ I’ve actually been forced to like Javascript…. yeah I know, bleh.
Well one this I was doing was tranfering a front end control to a Script Control. Basically I am building an Auto Complete control that is using the Ajax.dll AjaxMethod stuff. Thus skipping the need for web services that the Ajax Control AutoComplete needs. Anyhow, the reason I am saying this is that it gets a list of Users and dynamically creates a list of divs that change color when hovered over and fill in a textbox when selected. Originally I was doing this by creating the html needed, then appending the innerHTML property on the container div.
function buildSelectableDiv(currentCount, innerText, textboxName, parentDiv)
{
var defaultClass;
var divChild;
var divToAdd;
var picker;
//create the parent div
divToAdd = document.createElement('div');
//set the id of the div
divToAdd.setAttribute('name', 'divNames' + currentCount);
//Create child div
divChild = document.createElement('div');
//getting the child ready
divChild.setAttribute('name', 'divNamesChild' + currentCount);
//Add child to new parent
divToAdd.appendChild(divChild);
return divToAdd;
}
And there you go. Creating a div and adding div to it.