Develop Reference

How can i override a:before propertie-value in/from my Html file

This is my code:
li a:before {
transition: all 0.2s ease-in-out;
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 5px 11px 0;
border-color: transparent #d9d9d9 transparent transparent;
position: absolute;
left: -5px;
top: 0;
}
<ul>
<li>
</li>
</ul>
Now I want to override the color wich is defined in my css a:before { border-color: transparent #d9d9d9 transparent transparent; } from my html file.
I want my users to chose which color they like.
I want override border-color in Html and dont want to remove li a::before from my css.
I think somthin like that:
< a href="http://Amino.dk" style="border-color: transparent red transparent transparent;">

You can always use <style> tags for that anywhere in the HTML responsible to render that page. I have an example snippet for you:
<style>
li a:before {
border-color: #333; /* Or any other color you want in the borders */
}
</style>
Hope this helped.

You can always overwrite CSS styles by using a style tag in your a-tag.
Give your users a choice of colours, get the selected colour via JavaScript and pass it to your a-tag inside a variable.
This should do the trick:
<a href="http://Amino.dk" style="border-color: transparent red transparent transparent">

hyperlink is dropped to new line

This is my aspx code,
<div class="ellipsis">
Body Text Body Text Body Text Body Text Body
Text Body Text Body Text Body Text Body !!!
</div>
<asp:HyperLink ID="HyperLink1" runat="server">
<span style="color: Maroon; font-style: italic; font-size: small;">
More..
</span>
</asp:HyperLink>
CSS
.ellipsis
{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
I want to show single line likes
Body Text Body Text ...More..
But the hyperlink HyperLink1 is dropped to new line . How can I fix it ?
This is Fiddle !

I would not recommend using floats for this. While it does do the trick, it changes the layout of the page and is unneccessary for such a small change. It would be just as easy to fix by changing the display type of the div to inline-block.
.ellipsis
{
display: inline-block;
...
}
Here is a fiddle: http://jsfiddle.net/JntkC/2/

Add a style:
float:left;
to both the div and the link

Adding the style to the div works. See the updated version of your fiddle http://jsfiddle.net/JntkC/1/
Add this line to the CSS
float: left;

How to show a div after postback on a button click?

Here i have a div in which i am showing it during the mouse hover in the master page and after mouse hover three href links will appear in that div .After clicking that href link it is traversing to another page,postback happens and that div is getting hidden in the master page.I need to show that div after that click also.I have used updatepanel and tried it but still it is not working.here is my code
//Div part
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Update" runat="server">
<ContentTemplate>
<div runat="server" class="divSUBMenu" id="describe" style="width: 700px; height: 20px;
font: Arial, Helvetica, sans-serif;" onclick="show(0)">
</div>
</ContentTemplate>
</asp:UpdatePanel>
//Onhover part
<a href="#" onmouseover="showit(0)">
<img src="Images/Analyze_over.jpg" name="image1" width="84" height="22" border="0"
id="image1" alt="" /></a>
//Javascript for mousehover(working fine)
var submenu = new Array();
submenu[0] = ' <font style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a> <a style="color: #FFFFFF; text-decoration: none;" href="AEventPerformance.aspx">Event Performance</a> <a style="color: #FFFFFF; text-decoration: none;" href="ACannibalization.aspx">Cannibalization</a> <a style="color: #FFFFFF; text-decoration: none;" href="AHaloEffect.aspx">Halo Effect</a> <a style="color: #FFFFFF; text-decoration: none;" href="AVolumeDecomposition.aspx">Volume Decomposition</a></font></span>';
var delay_hide = 500;
var menuobj = document.getElementById ? document.getElementById("describe") : document.all ? document.all.describe : document.layers ? document.dep1.document.dep2 : "";
function showit(which) {
clear_delayhide();
document.getElementById("describe").style.visibility = 'visible';
thecontent = (which == -1) ? "" : submenu[which];
if (document.getElementById || document.all) {
menuobj.innerHTML = thecontent;
}
else if (document.layers) {
menuobj.document.write(thecontent);
menuobj.document.close();
}
}
and finally the part below is not working during the onclick but this alert is working
function show(which) {
alert("test");
document.getElementById("describe").style.visibility = 'visible';
}
Any suggestion??
EDIT:
This is the href am clicking
<a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a>

You have to use ClientScriptManager
http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
Example:
void Page_Load(object sender, EventArgs e)
{
if(checkDisplayCount.Checked)
{
String scriptText = "";
scriptText += "function DisplayCharCount(){";
scriptText += " spanCounter.innerText = " +
" document.forms[0].TextBox1.value.length";
scriptText += "}";
ClientScriptManager.RegisterClientScriptBlock(this.GetType(),
"CounterScript", scriptText, true);
TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
LiteralControl spanLiteral = new
LiteralControl("<span id=\"spanCounter\"></span>");
PlaceHolder1.Controls.Add(spanLiteral);
}
}

Since the div is set to runat=server, you could control this on the server side - setting describe.IsVisible = false initially, and changing it to describe.IsVisible = true post-click.
If for whatever reason this must be done on the client, due to reliance on other scripts or something, then make sure you're looking for the control by using the correct identifier - it could be, depending on the version of ASP.NET you're using, that the control is prefixed with ctl00_x. In fact, even in newer versions of ASP.NET (above .NET 3.5), I think the UpdatePanel might explicitly alter the identifiers of its elements using a prefix so as to keep track of what it contains, don't quote me on that though. Check the rendered markup output on the page to check this.

HtmlElement.invoke(“click”) doesn't work

I'm trying to create an application that can fill html form automatically using WebBrowser control(C#). There is a option list on the web page and I can get corresponding elements in the drop down box. But when I call the invokemember("click") methods, there is no responce.Below in the selection element of HTML
<div>
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
<a class="select" v="0" href="javascript:;">Not </a>
<a v="419000" href="javascript:;">insure</a></div>
Here is my codes,I find ScrollIntoView and Focus method is ok
HtmlElementCollection element_div=currentWindow.Frames[0].Document.GetElementsByTagName ("div");
foreach (HtmlElement item in element_div)
{
if (item.GetAttribute("classname") == "ddlcont" && item.Children.Count !=0)
{
item.Children[1].ScrollIntoView(true);
item.Children[1].Focus();
item.Children [1].SetAttribute("selected", "true");
item.Children [1].InvokeMember("Click");
}
}
I am appreciate that if anyone can help me to solve the problem. Thanks for your help!

You may have pasted wrong, but in your example div doesn't have a class.
Look:
<div>
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
should be
<div
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
(no > on the first line)

Try something like this instead:
Button1.GetType().GetEvent("OnClick").GetRaiseMethod().Invoke(Button1, EventArgs.Empty);
You may need to tweak the syntax a little bit, but this should put you on the right path.

'Please wait' screen between pages in C# ASP.NET. Best practice?

I have a gridview with some imagebuttons, each of which kicks off a report page for that item. The report take 10-15 seconds to run, so I'd like a popup 'Generating report, please wait' type thing. I can think of a few ways but would like the opinion of those more experienced than I. The options I was considering:
a) link my imagebutton to an intermediate page that says 'please wait', and then refer it onto the report page from there. Seems a bit clunky
b) Investigate using jquery or similar. I have telerik controls, they have a few things but it isn't clear if any are suitable.
c) Define some kind of CSS layer with a please wait warning on it, and make it visible as part of the button's onclick event
d) Look into jquery or similar
Any thoughts?
Thanks!

I use Div with transparency, and its pretty cool and simple. Give it a try.
<div id="ModalPopup" style="visibility: hidden;">
<div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: Gray;
filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
width: 200px;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
Procesando....
</div>
</td>
</tr>
</table>
</div>
To display the div, use this JavaScript:
document.getElementById('ModalPopup').style.visibility = 'visible';

I have the exact same problem before but I found the AJAX Server Control UpdateProgress very useful. Here's a link to UpdateProgress Control.

you can have an <iframe> on the page, of which its style is set to display:none. a button (which you will use to execute an action) will perform a javascript function that will set the style of the <iframe> to display:block on click.

please wait on page load in js can be used in any language give a try
in body place this code
<body>
<div id='loadingmsg' style='display: none;'></div>
<div id='loadingover' style='display: none;'></div>
</body>
in css
#loadingmsg {
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("assets/img/loaders/load10.gif") no-repeat center center rgba(255,255,255,0);
}
#loadingover {
background: #23351f;
z-index: 99;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
js
<script>
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
showLoading();
}
else if (state == 'complete') {
hideLoading();
}
}
function showLoading() {
document.getElementById('loadingmsg').style.display = 'block';
document.getElementById('loadingover').style.display = 'block';
}
function hideLoading() {
document.getElementById('loadingmsg').style.display = 'none';
document.getElementById('loadingover').style.display = 'none';
}
</script>