Develop Reference

Dynamic JQUERY data table width issue in IE7

We have created a dynamic JQUERY table with dynamic columns (Depending upon count value) and assigned it to DIV tag. However the thead and tbody is going outside DIV tag in IE7.
Looks like the width is automatically set dynamically by CSS, we are not able to override it.
Did anyone faced similar issues. Please help.

use important keyword like this.
width: 100px !important;

Added the following lines in DataTable.css file and it worked perfectly!!
table.display thead th div.DataTables_sort_wrapper
{
/*Fix for width issue*/
position: relative;
clear: both;
width:50px;
overflow:hidden;
word-wrap:break-word;
}

Problems changing css properties of hyperlink in gridview

I have an asp.net gridview and have just added sorting to the columns. This has now obviously changed the column headers to links and they have changed to a blue colour but for some reason my modifications to change the colour of the links isn't working and they just wont pick-up the correct style.
Here is some CSS that I tried, I have tried it a few other ways too but wanted to test it using the most basic setup:
a:link {
color:white;
}
a:visited {
color:white;
}

use !important with Sachin's answer
a{
color:white !important;
}

Try this
div #something .gridview td a{
Color: red! important;
}
Try to set style more specific to your anchor tag.

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);

Custom button in HtmlEditorExtender control?

I'm in dire need of assistance.
I need to add a custom button to an HtmlEditorExtender control, but I'm lacking the know-how to actually do that.
I've searched throughout this forum but no information was relevant or whatsoever.
Should someone be so kind to help, I need an example to help me sort this issue out.
Thanks in advance.

One possibility is to add it to the DIV containing the buttons using javascript. I do it using jQuery.
If you inspect the DIV in Firefox, you'll notice that it has a class named 'ajax__html_editor_extender_buttoncontainer'. Knowing this class allows you to select the container and add your own custom button to it.
To do so, add the following jQuery script in the HTML below your HtmlEditorExtender:
<script language="javascript" type="text/javascript">
// retrieve button container div using its class
$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
if ($btnContainer.length == 1) {
// append your custom button to the collection of elements within the button container div
$btnContainer.append("<input id=\"HtmlEditorExtender_YourButtonName\" class=\"ajax__html_editor_extender_YourButtonName\" type=\"button\" name=\"YourButtonName\" title=\"YourButtonName\" style=\"width: 101px; height: 21px;\" unselectable=\"on\"></input>");
}
</script>
To style the button, create images for it and add the following to your style sheet:
/* custom button */
.ajax__html_editor_extender_YourButtonName {
background: url('/images/YourButtonName_off.png') no-repeat scroll;
cursor: pointer;
display: block;
float: right; /* default is left */
border: medium none;
}
.ajax__html_editor_extender_YourButtonName:hover {
background: url('/images/YourButtonName_on.png') no-repeat scroll;
}
The appearance of your button is of course up to you, but the result may look something like this:
Finally, to add functionality, add a click event to elements that have the class you specified. You can do this in your external .js file.
If you want to access the html of the textbox, inside that click you will want to retrieve the html of the first of two divs that have the attribute contenteditable='true'. This is the design view of the HtmlEditorExtender.
Add the following to your .js file:
// click event for the custom button
$("body").on("click", ".ajax__html_editor_extender_YourButtonName", function (e) {
var $editorDiv = $("div[contenteditable='true']").first();
alert($editorDiv.html());
})
There's probably a more efficient way to get the design view but it'll work.

JavaScript in CSS lost on postback (ASP.NET)

I am using the library 'CSS3 Pie' to allow me to use border-radius with previous IE a treat, by having the CSS style for the element like this:
border: 1px solid #122541;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
behaviour: url('../Content/Scripts/PIE.htc');
It works a treat, however when the page is postback (I am using an UpdatePanel if that makes any difference), the JS in PIE.htc that allows border-radius to work, doesn't fire so in previous IE versions the corners go back to being square.
What can I put in my Page_Load to essentially 'refire' the CSS on postback? Or is there another fix?

You could possibly use the JS edition of PIE (link: http://css3pie.com/documentation/pie-js/) and call a script on postback with something like this:
Page.ClientScript.RegisterStartupScript(GetType(), "myScriptName", "<script>if (window.PIE) {$('.rounded').each(function() {PIE.attach(this);});}</script>");