I add hover images to .Net LinkButtons using the following method:
.rollover a
{
background-image:url(/images/shoppingcart/butpill_continue.gif);
}
.rollover a:hover
{
background-image:url(/images/shoppingcart/butpill_continue_over.gif);
}
<div class="rollover">
<asp:LinkButton ID="btnContinue" runat="server"></asp:LinkButton>
</div>
This works fine with regular link buttons.
I need to add this to my next/previous buttons in a DataPager. I tried setting the ButtonType to "Link" and applying the ButtonCssClass="rollover" but this doesn't work. Is there a way to accomplish this?
Try changing your css to
a.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
a.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
Or just
.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
You'll also have to change your other images to something like this
<asp:LinkButton ID="btnContinue" runat="server" CssClass="rollover" />
Related
I'm working on a ASP.Net Web Forms project .I need to show icon in Gridview row dynamically based on a condition and need to show a tool tip when user hovers on that icon. Using the title attribute I was able to show the tool tip, but I need to design the tool tip as required (Square). How can I achieve that ..? ,How to add style to title attribute ..?
This is the code behind method
protected string GetUnsupportedIcon(MNDto a)
{
if (!a.Supported)
{
return $#"<i class=""fa fa-warning"" title='{message}' style=""color:#EEA42E;font-size:16px""></i>";
}
else return $#"<i class=""hidden""></i>";
}
Calling this method from aspx page
<asp:TemplateField HeaderText="<%$ Resources:ColumnNewCategory.HeaderText %>" HeaderStyle-HorizontalAlign="Left" HeaderStyle-VerticalAlign="Middle" ItemStyle-VerticalAlign="Middle" ItemStyle-CssClass="mxcell" HeaderStyle-CssClass="Outside">
<ItemTemplate>
<%# ((MNDto)Container.DataItem).SuggestedCategory %> <%# GetUnsupportedIcon((MNDto)Container.DataItem) %>
</ItemTemplate>
</asp:TemplateField>
You can't style an actual title attribute
How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.
You can make a pseudo-tooltip with CSS and a custom attribute (e.g. data-title)
Example code:
<a href="http://www.google.com/" title="Hello Stackoverflow!">
Example code --- Hover me
</a>
Example CSS:
a {
position: relative;
display: inline-block;
margin-top: 20px;
}
a[title]:hover::after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
I am trying to add dynamic button in panel
<asp:Panel ID="pnl001" runat="server" Height="300px" Width="1174px" ></asp:Panel>
How can i fix position (Left,Right,Top from panel) of that button
Please suggest
Give the panel and your button a class (IDs can sometimes be tricky with Web Forms:
<asp:Panel ID="pnl001" runat="server" Height="300px" Width="1174px" CssClass="MyPanel" >
<asp:Button ID="myButton" Text="Click Me" CssClass="MyButton" />
</asp:Panel>
Now you need to add some styles to your <head> element or your stylesheet:
<style type="text/css">
.MyPanel { position:relative; }
.MyButton {
position:absolute;
top:0;
left:0;
}
</style>
UPDATE
Since you are adding the button dynamically, remember to add the class like this in your code-behind:
btn.CssClass = "MyButton;
I hope you might be adding button to your pannel like this
Button btn = new Button ();
btn.Text = "mytext";
btn .ID = "btn1";
btn.CssClass="MyCSSClassName";
pnl001.Controls.Add(btn);
now before pnl001.Controls.Add(btn); add this line btn.CssClass="MyCSSClassName"; and add the following class in your stylesheet
<style type="text/css">
.MyCSSClassName{
//your properties for positioning the button inside a panel
}
</style>
hope this works for you.
I have the following code but it doesnt seem to work:
<td align="center" style="padding-bottom:52.5px">
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png"/>
</td>
And a CSS class to change image on hover:
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png') !important;
}
Please advise.
Thanks
I prefer this way:
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png" onmouseover="this.src='/_layouts/Right_GreenArrow.png'" onmouseout="this.src='/_layouts/Right_GrayArrow.png'"/>
bye
An ImageButton controls renders as a <input type="image" /> element with the ImageUrl property becoming the src attribute like:
<input type="image" src="/_layouts/Right_GrayArrow.png" />
Therefore you are applying a background image to this, which you cannot see as the src image is being overlayed on top of it.
You have 2 choices:
1) Change the ImageButton to use a background image:
.RightArrow
{
width: /* width of image */
height: /* height of image */
background-image:url('/_layouts/Right_GrayArrow.png');
}
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png');
}
If you are going to use this method though, I would recommend using an <asp:Button /> instead. It seems pointless using an <asp:ImageButton /> if you're not even making use of the src attribute.
2) Use jQuery to change the image on hover:
$(".RightArrow").hover(function(){
$(this).attr("src", "/_Layouts/Right_GreenArrow.png");
},
function(){
$(this).attr("src", "/_Layouts/Right_GrayArrow.png");
});
Worth noting this will only work with javascript enabled, and you must include the jQuery library.
The ImageUrl property isn't the same as setting the background-image. Remove the CSS and set the onmouseout and onmouseover properties in your page.
I have an div element in website markup as follows.
<div id="mainContainer" class="container" runat="server">
I have assigned it a css class as follows.
div#mainContainer.container {
width: 100%;
margin: 0 auto;
margin-top:40px;
height:500px;
background:url("../img/bgimg.png")no-repeat;
}
Now after a button click I want to remove only the background of that div and don't want to tamper any positioning of elements inside it. And btw I am using ASP.net to create this website. How can I do that ?
If you want to achieve this in a server-side event, you'll need to add the runat="server" attribute to your <div> element, and it will need an id attribute. This will make it easy to alter server-side.
You'll need an event-handler method in your code-behind for the button click.
In this event handler, do something like (this assumes the id of your <div> is "container")
container.Style["background"] = String.Empty;
However, in your question, you say you've assigned your element a class. If this is the case, the above might not work. It might be easiest to define another CSS class without this background image rule, and then in the code-behind do this:
container.Attributes["class"] = "newClass";
Now with pure CSS.
.button{
background:green;
}
.background-class{
background:red;
}
.button:active + .background-class{
background:yellow;
}
Check this http://jsfiddle.net/AX8tY/
You will need to use JavaScript (either direct or some JavaScript framework like jQuery) and set the CSS style to
background:none
This means you could alter the style of the specific instance or you could define a new CSS class to apply.
With a simple javascript as:
onclick="javascript:getElementById('div_element_id').style.backgroundImage = '';"
or you may use jQuery's API aswell.
How about something like this:
If your HTML is something like this:
<button class="your-button" />
<div class="background-class">
...
</div>
Then your JS might look something like this (this assumes you're also using jQuery):
$(".your-button").click(function(){
$(".background-class").removeClass("background-class");
});
EDIT : I just saw in your comment that you'd like to use a server-side event. This is a client-side solution.
If you use jQuery you could try something like this :
$('button#idButton').click(function{
$('div#idDiv').css('background':'none')
});
If you don't use jquery you should implement a javascript function on the onClick event, try something like :
<input type="button" name="button1" id="button1" onClick="javascript:deleteBackground()" />
<script>
function deleteBackground(){
Document.getElementById('div_element_id').style.backgroundImage = '';
}
</script>
if you defined a class
.yourclassname {
background: url('..');
}
you can also use the remove class function
$('div').removeClass('yourclassname');
<script language="javascript" type="text/javascript">
function SetClass() {
var ID = document.getElementById('<%=mainContainer.ClientID %>');
ID.className += " ChangeBackground";
return false;
}
</script>
<style type="text/css">
div#mainContainer.container
{
width: 100%;
margin: 0 auto;
margin-top: 40px;
height: 500px;
background: url("wallpaper-1554220.jpg")no-repeat;
}
.ChangeBackground
{
background: none !important;
}
</style>
<asp:Button ID="btn" OnClientClick="return SetClass();" runat="server" Text="Change CSS"/>
I've got CSS that looks like this:
a.HyperLinkHover
{
color: #95FBCF;
background-color:#ff0;
background-color: #377CB1;
}
a.HyperLinkHover:visited { color:Purple;}
But when I click my <asp:HyperLink> where it is defined as:
<asp:Hyperlink runat=server id=hlfile cssclass=HyperlinkHover />
it does not have a purple color for being visited.
I assume I did it wrong ?
unless you have a copy paste error then your cssClass doesnt match the CssDefinition
One has an uppercase Link and the other has a lower case link in HyperLinkHover
a.HyperLinkHover {
color: #95FBCF;
background-color:#ff0;
background-color: #377CB1; }
a.HyperLinkHover:visited { color:Purple;}
/* hover style would come after visited */
and make sure the CssClass is defined with the same capitalisation
<asp:Hyperlink runat=server id=hlfile cssClass="HyperLinkHover" />