Develop Reference

dynamic generation of CSS attributes in CSS files based on user input in ASP MVC

Most of the dynamic CSS Q & A show how to swap between CSS files or predefined CSS values.
My question is: during a live user session how to compute/compile CSS values for e.g. both element.width2 and width:230px into the CSS file (element.width3 and width:430px;) before loading it to the client-side browser. To be clear I am not looking to swap out CSS files via JavaScript, I'm seeking options for a server side answer where the CSS file is server generated/recompiled during a session is there manipulation class in .Net framework or the razor view engine? or how can I achieve this
// below are static elements, that I want change values and the CSS "keys"
.variable-sizes .element.wdth2 { width: 230px; }
.variable-sizes .element.hght2 { height: 230px; }
.variable-sizes .element.width2.height2 {
// on the server side, from a usr setting,
// can I compute and fill this to some... Width * UserVal ?
font-size: 2.0em;
}

I got some of it working via dotless just seems a bit old, wondering if its still maintained.

Creating a CSS class programmatically ASP.Net

I have a DIV that I would like to modify the CSS for programmatically in VB.Net/C#.
I know that, for example, I could add style attributes simply by
divMyDiv.Style.add("color","#ff0000")
but I want to add a new CSS class, together with its attributes to the DIV. So in an ideal world I would like to write something like
divMyDiv.Style.add(".smallRedText", "{font-size:10px; color:#ff0000}")
Is this even possible ? Am I missing the bigger picture ?
All help gratefully received :-)

What about:
divMyDiv.Attributes.Add("class", "new-class")

I suggest that you define the variations in css ahead of time that you know you'll need. Then, you can manipulate the class attribute of whatever control you need to change on the fly.
For example, you could define:
.smallRedText { font-size: 10px; color: #ff0000 }
.smallBlueText { font-size: 10px; color: #0000ff }
Then when comes time to select dynamically:
divMyDiv.Attributes.Add("class", whateverClassWeNeed);

How can I animate between display none and display table (or the visual equivalent thereof), in jQuery?

I have been trying to learn a little bit about jQuery's .animate() function, and I have gotten a few things to animate, but I haven't been able to set up animation for my table in the way that I would like.
Here's the table html:
<div class="topSectionContainer">
<div id="dropDownArrow">►</div><span class="editLabelTitle">Page Settings</span>
<table class="topSectionTable">
<tr>
<td class="pageSettingsContainer"></td>
<td class="fileBoxContainer">#Html.Raw(ContentGenerator.getFileBox("Tourism"))</td>
</tr>
</table>
</div>
I would like to get the following functionality:
The table.topSectionTable starts off as though it had display: none assigned.
When div#dropDownArrow is clicked it should (while animating) appear that the table is growing in height (whether the height property is actually adjusted or not) and revealing the contents of the table as it expands.
Once div#dropDownArrow is clicked again, it should animate in reverse, thus hiding the table and shrinking its height (or appearance thereof).
I have already used some simple code for this that does not have animation (jQuery):
$("#dropDownArrow").toggle(function () {
$(".topSectionTable").css("display", "table");
$("#dropDownArrow").html("▼");
},
function () {
$(".topSectionTable").css("display", "none");
$("#dropDownArrow").html("►");
});
Things I have tried:
Using jQuery's .animate() with the display property. I am not sure of the reason for failure here, as the actual change in the display property doesn't show, but I'm guessing that changes to the display property are not supported with jQuery's .animate().
I have also tried setting the CSS rules for table.topSectionTable to reflect both overflow: hidden; and height: 0px;, then animating only the height property. Here, the animation on height was successful, however, the contents of td.fileBoxContainer show up whether the height is 0 or not (even though the height expands and contracts on the clickings of the div#dropDownArrow element.
I've seen this done all the time on websites, so I know there is a way. Furthermore, I would like to do this in jQuery rather than just CSS3 because I would like to retain this functionality in IE8, as well, if possible, and I know CSS3 has no chance of doing this.
UPDATE -- TRYING WITH HEIGHT 0 AND OVERFLOW HIDDEN, PLUS JQUERY ANIMATE
jQuery Code:
$("#dropDownArrow").toggle(function () {
$(".topSectionTable").animate({
height: 100}, 1000);
$("#dropDownArrow").html("▼");
},
function () {
$(".topSectionTable").animate({
height: 0}, 1000);
$("#dropDownArrow").html("►");
});
CSS:
table.topSectionTable
{
height: 0;
overflow: hidden;
}
td.pageSettingsContainer
{
}
td.fileBoxContainer
{
}
And the HTML is the same as above
My C# getFileBox Method:
public static string getFileBox (string location)
{
string content = "";
string[] files = Directory.GetFiles(HttpContext.Current.Server.MapPath("~/CMS Files/" + location + "/"));
foreach (var file in files)
{
content += Path.GetFileName(file);
content += "<br/>";
}
return content;
}

Try slideUp() and slideDown(), examples here, and documentation here

yes as sayd up use:
$("#dropDownArrow").toggle(function () {
$(".topSectionTable").slideDown();
$("#dropDownArrow").html("▼");
},
function () {
$(".topSectionTable").slideUp();
$("#dropDownArrow").html("►");
});

Ended Up Figuring This One Out:
Okay, so while this page was the suggested duplicate:
Transitions on the display: property
The real duplicate (considering the problem at hand, but especially the answer) should be this:
overflow:hidden not working when using tables
The short answer to my problem was this:
"Overflow only works on block level elements. Table elements aren't block elements."
Thus my solution was to simply wrap my table in another div and apply overflow: hidden; and the height to it, and then target it with the jQuery's .animate() instead of the table.
As for why slideUp() and slideDown() didn't work, I can only speculate that when jQuery implements these functions, it uses some (if not all) of the same features that apparently breaks on non-block level elements.

HTML Print Page Fitting

I have some HTML files that need to be printed out, but they are 2 pages long. I need them to be 1 page long and I don't want to have to fiddle with the HTML code endlessly to shrink it just a tiny bit. I know each HTML file can be opened and zoom resized in any HTML reader and then printed out and the problem is solved, however there are... A LOT of files and having to manually open each file, resizing it and then printing out each one individually isn't really a good solution for me. More HTML files will be generated.
If I could create a quick little application that takes an HTML file and shrinks the file down from 2 pages to 1 page ( will always be 2 pages ) or if there is some way to programmatically do a 'print to fit page' function? I can't find anything in this regards to print functions in default C# libraries yet.

Here's a good tutorial that walks through what I was talking about in my comment: http://webdesign.about.com/cs/css/a/aa042103a.htm

Garrison Neely suggested the correct answer in my beliefs, just posting some links here:
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 13px }
}
#media screen, print {
body { line-height: 1.2 }
}
http://www.w3.org/TR/CSS2/media.html
http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

C# - How can I cut a string at its end to fit in a div?

I'm making a list of recent news. So, it will show something like this:
- Take a look at the new Volks...
- John Doe is looking for a jo...
- Microsoft is launching the n...
So, the list above only shows me the title of the news and the length of each news is limited in 25 characters. But, this is not working well... for example, if you type 25 M's, it will explode my div.
I've been told that there is a way to calculate the length of the string and make it fit in a div automatically.
Does anyone know how to do it?
thanks!!

"text-overflow: ellipsis" is what you want but not everybody supports it. More info here...

I think you talking about is using the System.Drawing.Gaphics class's MeasureString() method.
However, this requires making a Graphics object which matches the font characteristics of your web page. But, your server process shouldn't know anything about the style elements of the web page, which should be handled by the CSS sheet.

I think you want to use css for this.
word-wrap:break-word;
should do it

One very simple way to prevent "exploding the div" is to use a css style to set the overflow of the div to scroll or hide the extra text instead of stretching to accomodate it.

I don't think there is an easy way to do this that works with all browsers and fonts.
The best way is just making sure your layout don't break if someone enters 25*m.
An useful thing to do is to split words that are more than X letter.
I the word-wrap css don't work that well on all browers.

This is not really a server-side problem, as the server shouldn't know what fonts people are using. You can do it using Ajax - post the font to the server, calculate the width (as James Curran mentioned), and return the right strings. However, the server may ont have the same fonts installed, and you have to calculate padding and margins on the server side.
I can think of several options on the client side:
Wrap every line with a span. A span would expand automatically to the width of the line. Using jQuery or your favorite javascript you can remove characters until the width is ok. (you can do a sort of binary search, where at every stage you add the ellipsis and checks the width)
Easy - Wrap every line with a fixed-width div and set it overflow:hidden, and add the ellipsis after the div. This will cut through letters though, and when you get a short text it'll still show the ellipsis.
Too easy - Use a fixed width font (they're mostly ugly).

As others have mentioned you can measure strings in thick client applications using System.Drawing.Graphics.MeasureString, but since you mention you want to fit it in an HTML div tag it would be perferable to let the browser handle the user interface using CSS.
<html>
<head>
<title>C# - How can I cut a string at its end to fit in a div? </title>
<style type="text/css">
.ellipsis li
{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 166px;
}
</style>
</head>
<body>
<ul class="ellipsis">
<li>Take a look at the new Volksxxxxx</li>
<li>John Doe is looking for a joxxxxx</li>
<li>Microsoft is launching the nxxxxx</li>
</ul>
</body>
</html>
I used the unordered list tag (UL) instead of div since your sample list begins with a bullet character. Similar CSS would apply to DIV tags. And although all browser can be made to clip the content, not all browsers support the non-standard text-overflow: ellipsis style.