How can I get the height of a div which is placed inside a masterpage?
I'm able to set the height as follow:
((HtmlControl)this.Master.FindControl("sidebar")).Style.Add("height", "600px");
Now I'm trying to get the height from my div called mainPage, how can I do this?
MasterPage.Master:
<div id="_test" style="height: 100px" runat="server"></div>
MasterPage.Master.cs:
public HtmlGenericControl test
{
get { return this._test; }
}
any other cs-file:
string width = ((MasterPage)this.Master).test.style["height"];
Edit: If you want to get any style information created dynamically you will need to store this information into a hidden field, because you won't be able to retrieve the data by calling style["x"] in the postback.
Edit2: Adjusted masterpage-name.
You will have to get the div's height on the client side as it may be rendered differently for each client...
Using jQuery, you can do
$("#sidebar").height();
but for this you will have to wait that the document is ready. So you can put this line in the ready function of the document:
$(document).ready(function(){});
EDIT
Another solution is adding runat="server" to your div
<div ID="sidebar" runat="server">...</div>
Then from your code you can do something like
HtmlGenericControl sb = this.form1.FindControl("sidebar") as HtmlGenericControl;
int sidebarHeight = sb.Height;
Related
I have defined a variable in C# as the item selected in a drop down.
string parametername = ddlCarrier.SelectedItem.Text;
I now want to pass this variable in my URL to the next page. How do I do this in the href tag?
<asp:LinkButton href="Table.aspx?parameter=<%parametername%>" ID="btnSubmit" runat="server">Click Here</asp:LinkButton>
Purely Server-Side Approach
Instead of a LinkButton, you might want to consider using a HyperLink or <a> tag as you aren't going to be doing anything with your code-behind:
<asp:HyperLink ID="btnSubmit" runat="server" NavigateUrl="Table.aspx" Text="Navigate"></asp:HyperLink>
Then you can use the NavigateUrl property, which you might want to consider setting within your code-behind :
// This will set up your Navigation URL as expected
btnSubmit.NavigateUrl = String.Format("Table.aspx?parameter={0}",ddlCarrier.SelectedItem.Text);
If you use this approach, you may want to explicitly set that a PostBack occurs when your DropDownList changes so that this value will consistently be correct :
<asp:DropDownList ID="dllCarrier" runat="server" AutoPostBack="True" ...>
Client-Side Approach
However, if you are expecting to be able to change this to reflect the current value of your Carrier DropDownList without a PostBack, then you'll likely need to resort to Javascript to populate the value prior to actually navigating :
<!-- Set your base URL within the method and append the selected value when clicked -->
<asp:Button ID="Example" runat="server" OnClientClick="ClientSideNavigate('Table.aspx'); return false;" Text="Navigate"></asp:Button>
<script>
function ClientSideNavigate(url) {
// Get the selected element
var e = document.getElementById('<%= ddlCarrier.ClientID %>');
// Navigate
window.location.href = url + '?parameter=' + e.options[e.selectedIndex].value;
}
</script>
Or you could just avoid ASP.NET Controls altogether and just use an <button> tag :
<button onclick="ClientSideNavigate('Table.aspx'); return false;">Navigate</button>
<script>
function ClientSideNavigate(url) {
// Get the selected element
var e = document.getElementById('<%= ddlCarrier.ClientID %>');
// Navigate
window.location.href = url + '?parameter=' + e.options[e.selectedIndex].value;
}
</script>
You need to handle TextChanged or SelectedIndexChanged event for ddlCarrier and properly set href property of btnSubmit to include ddlCarrier.Text.
On the sever side, I've created, a literal with text set to an input type file element with runat = 'server' property, mode set to passThrough and append it to a div. Both the literal and input element have it's own unique id. My issue is trying to get that input element from the div tag. I'm able to get the literal programmatically, but the literal doesn't contain any controls and text value has the input element I need. I tried looking for the input element o it's own and keep getting null. I've inspected the page and I see the input element with runat='server'and it's and yet I can't get it. I need to be able to get this input element in order to upload it's file.
This is what I've tried so far:
Client-Side:
<div runat="server" id="docRequeridosMainDiv" style="display: table;
width: 60%; text-align: right">
<%-- Control set on server side --%>
</div>
Server-Side: (Testing this on pageload event)
//Attach inivisible input type file
uploadLit.Text += string.Format(#"<div><input type='file' id='{0}File' runat = 'server' style='display: none;'
onchange='" + docsRequeridos.ElementAt(i).Nombre + #"FileSelected()' /></div>", lbl.Text);
uploadLit.ID = lbl.Text + "FileLit";
docRequeridosMainDiv.Controls.Add(uploadLit);
//var lit = (Literal)docRequeridosMainDiv.FindControl(uploadLit.ID);
var lit = (HtmlGenericControl)docRequeridosMainDiv.FindControl(lbl.Text +"File");
Ignore the event attached to input, that works.
I've debugged the commented lit and on the controls collection has 0 but the text has the input. The second lit is returns a null value.
Tried getting it with the same Findcontrol line on a click event and still same result. Literal with no controls.
Just in case you're wondering why the input is display:none cause I'm doing a custom file upload, but that's not important cause every other functionality works, the only on that doesn't work is this one.
FindControl() will find only server controls. Adding html control (with runat="server" as string) into a Literal will not make those controls servier-side. But you can use HtmlInputFile to achieve the same, like this:
var fileInput = new HtmlFileInput
{
ID = lbl.Text + "File"
};
fileInput.Attributes["onchange"] = docsRequeridos.ElementAt(i).Nombre + "FileSelected()";
fileInput.Attributes["style"] = "display:none";
docRequeridosMainDiv.Controls.Add(fileInput);
Now, you can find this control like:
var foundFileInput = docRequeridosMainDiv.FindControl(lbl.Text +"File") as HtmlFileInput;
If you want to wrap this file input with div, you need to make another HtmlGenericControl and add that fileInput to that; like this:
var myDiv = new HtmlGenericControl("div")
{
ID = "FileUploadContainer"
};
myDiv.Controls.Add(fileInput);
docRequeridosMainDiv.Controls.Add(myDiv); // Add myDiv instead of fileInput
This will generate exactly the html you wanted, but just programmatically (not with Literal string), and controls are now server-side.
I have a hidden field like this:
<asp:HiddenField ID="showHideFlag" runat="server" />
I am assigning some value to this hidden field in java script as follows:
function controlSearchBar() {
if ($("#MainContent_ProjectListControl_searchBar").is(":hidden")) {
$("#MainContent_ProjectListControl_showHideFlag")[0].value = "showing";
} else {
$("#MainContent_ProjectListControl_showHideFlag")[0].value = "hiding";
}
}
I am trying to read this hidden field in ascx.cs page as follows:
string hdnValue = this.showHideFlag.Value;
But this hdnValue is not getting the value of that hidden field.
Can someone help on this?
Hidden as type="hidden"
$("#MainContent_ProjectListControl_searchBar").attr('type') == 'hidden'
Hidden as display: none
$("#MainContent_ProjectListControl_searchBar").is(":hidden")
Gets the control ID for HTML markup that is generated by ASP.NET.
<asp:Label ID="SelectedSport" runat="server" ClientIDMode="Static" ClientID="showHideFlag">
javascript
$("#showHideFlag").text("found");
You are saying that you can get the value in javascript So I think the the problem is with the hidden field. try to set value by Client id as follows-
var hd = document.getElementById('<%= showHideFlag.ClientID%>');
hd.value = "hi";
And my another question is in which event you are accessing value? because If you are setting value in javascript and accessing in Page Load event then it will not work because first of all Page load event gets fired and then Javascript function executes.
I've been trying to use mshtml to modify a third party web api. Right now I am trying to change the display property on two elements to none so they will be invisible.
I know their id's.
The first one is an img and the id is zendbox_close. The second is a div and the id is zenbox_scrim.
The html looks like this
<div class="zenbox_header">
<img id="zenbox_close"></img>
</div>
...
<div id="zenbox_scrim...></div>
All I want to do is add in some inline styling so it looks like this
<div class="zenbox_header">
<img id="zenbox_close" style="display:none;"></img>
</div>
...
<div id="zenbox_scrim style="display:none;"...></div>
In my code behind for the WPF WebBrowser that is opening up the webpage, I have gotten this far:
IHTMLDocument3 doc = (IHTMLDocument3)this._browser.Document;
IHTMLImgElement element = (IHTMLImgElement)doc.getElementById("zenbox_close");
I saw in another post someone was talking about injecting scripts and they said you can use
IHTMLElement scriptEl = doc.CreateElement("script");
I am not sure what the HTML element analog to this would be though. Also I had to use IHTMLDocument3 to use the method getElementById, but that class doesn't appear to contain anything similar to CreateElement().
My question is how can I inject inline styling into a Document being loaded in my WPF WebBrowser?
Yes you can manipulate styles inline.
A good way to do this is to work with the IHTMLStyle or IHTMLCurrentStyle interfaces when working with an IHTMLElement. There are some differences with the values reflected by those two and they are not always synch'd. A better explanation of why that is:
IHTMLStyle vs IHTMLCurrentStyle
Code sample would look like:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
wb.LoadCompleted += wb_LoadCompleted;
wb.Source = new Uri("http://www.google.com");
}
void wb_LoadCompleted(object sender, NavigationEventArgs e)
{
var doc = wb.Document as HTMLDocument;
var collection = doc.getElementsByTagName("input");
foreach (IHTMLElement input in collection)
{
dynamic currentStyle = (input as IHTMLElement2).currentStyle.getAttribute("backgroundColor");
input.style.setAttribute("backgroundColor", "red");
}
}
}
I make a tablecell using C# in my code behind, and I add a CSS class to the label inside the cell to rotate it:
.vertical {color:#333;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
white-space:nowrap;
display:block;
}
The problem is that after I rotate my label, my table cell (and table) have not resized to fit the new text. Is there a way using CSS or an attribute I can use to have my table re-size automatically to fit the new content?
I'd appreciate any help.
---EDIT---
So after playing around with some the CSS class, I realized the source of my problem. Basically, after I apply CSS changes - my tables don't resize. They still size as if the content was not modified.
Is it possible to make my tables re-size after the CSS style changes the size of my tablecells?
You need to calculate the new height of your Label and then set it's containing element to that height. This fiddle is what I am talking about.
<table>
<tr>
<td id="someLabel" class="vertical">some stuff</td>
<td>some other stuff sljk fkas jd</td>
</tr>
...
</table>
and then using jQuery
$.fn.textWidth = function () {
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
$(function(){
var someLabelSize = $("#someLabel").textWidth();
$("#someLabel").css("height", (someLabelSize + 5));
});
Just change the selectors to reflect your needs.