I have a Navigation Menu in .aspx web page.
I set every MenuItem.ImageUrl to a .png Image.
The problem is that the image is shown with a border around of it.
The question is how can I eliminate this border ?
Thankyou very much
Piercarlo
In additions of previous :
I want to eliminate the border indicated by the arrow, the image was put on the menu Item by the property of menuItem .ImageUrl.
The image is 16 pixel .png with background transparent and without border
I tried without success following:
css: border:none,
property of menu:
<asp:Menu runat="server">
<StaticMenuItemStyle BorderStyle="None" />
<DynamicMenuItemStyle BorderStyle="None" />
I have no idea how do.
Thankyou for helping;
Set the CssClass property of the Menu control to the CSS class for the control where you can then remove the border around the image with border:none;
I found a resolution to my problems with help of javascript following the code:
window.onload = GetMenuImage;
function GetMenuImage() {
var NavMenu = document.getElementById('<%=NavigationMenu.ClientID%>');
if (NavMenu != null) {
var Images = NavMenu.getElementsByTagName('img')
var cont = 0;
while (cont < Images.length) {
Images[cont].style.border = 'none';
Images[cont].style.heigth = '10%';
Images[cont].style.width = '10%';
cont++;
}
}
I hope that this can help some other else
Bye
Piercarlo
Related
I am looking at websites for inspiration for my new start ups homepage. I saw https://www.pactcoffee.com/ and their home page features a full background image for the header and the nav bar is transparent then it becomes a solid color nav bar as you scroll down. I have only been able to set up the CSS for the site but I don't understand what to do to have the change in nav bar color.
You can do something like this...
http://jsfiddle.net/ojcqbLr2/
Check the Fiddle to see the rest of the code... like the CSS.
This JS will do this.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.topMenu').fadeIn();
} else {
$('.topMenu').fadeOut();
} });
By the way, I found this info by search.
Show div on scrollDown after 800px
I just made edits to the code so it was at the top and not bottom.
Best of luck.
I have found that you can set two divs. One of which will be display set to none.
$(document).scroll(function () {
var headerHeight = $('header').height(),
s = $('.nav'),
y = $(this).scrollTop();
if (y > headerHeight) {
$('.navLong').fadeIn();
$('.nav').fadeOut();
} else {
$('.navLong').fadeOut();
$('.nav').fadeIn();
}});
This allows one div to disappear when one appears and vice versa. A working example is can be found in the DEMO
How do i load the original image so that when the user brings the cursor onto top of the image, it should change automatically without showing white background then loading the original pic? Is there any code that loads the original image wheh my webpage loads? Please let me know. my code is :
#middlefoto{
background-image:url(../images/middleblack.jpg);
margin-left:1px;
height:158px;
width:333px;
}
#middlefoto:hover{
background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
}
Use sprites with positioning.
Find more information at W3 Schools
The reason you are seeing the blank background for an instant is because the hover image has not yet been loaded from the server. To avoid this, preload the images. There are several ways to do this but the concept is the same: force the browser to load the image before it is actually needed. Here's a simple way to do this using JavaScript:
function preloadImages(sources)
{
var img = new Image();
for (var i = 0; i < sources.length; i++) {
img.src = sources[i];
}
}
preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);
Include the image in an off-screen element (push it off screen with CSS). This will cause the browser to download the image so it should be ready for the rollover. You could clean up the offscreen images after page load.
<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />
(don't really use inline styles)
Then, if you're using jquery
$(document).ready(function(){ $('.preloader').remove(); });
to clean up.
How can i change hover color of dropdownlist arrow button ? here when hover on dropdown its in blue color . i want change this to yellow . how can do this?
Alternate solution: use Ajax DropDownExtender you can easily change css style.
<ajaxToolkit:DropDownExtender runat="server" ID="DDE"
TargetControlID="TextLabel"
DropDownControlID="DropPanel" />
visit this link for demo:DropDown Demonstration
this will be done on page load
foreach(ListItem item in ddlName.Items) {
if(item.Value == "someStringValue") {
item.Attributes.Add("style", "color:red")
}
}
If that doesn't work, you can move this code to the DataBound event of the Drop Down List.
I have a RadGrid with a filtercontrol on it. The grid fits the size of the window, but certain views have quite a few columns and when the columns get shrunk down, the filter controls don't resize to fit. Is there any way to set those filter controls to auto fix within the width of the column?
In latest RadGrid, there is an easy fix for this. Just set the filter control width in your markup or code-behind as shown below.
Set Filter Control width in markup
<telerik:GridBoundColumn DataField="ProductName" FilterControlWidth="80%"
HeaderText="Product Name" UniqueName="ProductName" HeaderStyle-Width="130px"
AllowFiltering="true"></telerik:GridBoundColumn>
Set Filter Control Width in code-behind
boundColumn.FilterControlWidth = Unit.Percentage(80);
As shown in the screenshot, the filter textbox width is beyond the header column. To set it within limit you can use the following JQuery code.
$(document).ready(function fn() { $(".riTextBox").css("width", "80%"); });
In this 'riTextBox' is css class of filter textbox generated by RadGrid. You can set the width as you need.
Last time I checked, the size of the filter button was 20.16px, so you can use put this in your css:
.RadGrid .rgFilterBox {
width: calc(100% - 20.16px);
}
You might take a look at column editors. I think they'll let you control the style of controls nested in the grid from outside of the grid.
<telerik:GridBoundColumn ColumnEditorID="TextBoxColumnEditor" ... />
<telerik:GridTextBoxColumnEditor ID="TextBoxColumnEditor" runat="server">
<TextBoxStyle Width="500" />
</telerik:GridTextBoxColumnEditor>
Here's a link that explains it in detail:
http://www.telerik.com/help/aspnet/grid/grdstylingthroughdeclarativecustomeditors.html
I have faced this issue and didn't find the 80% width solution sufficient. As your column gets wider, the gap between the filter button and the text box grows and it isn't a very clean solution. I have a mostly working solution for the problem that uses jQuery to create appropriate wrappers around the elements. It currently doesn't work well for situation where you are using a column that would filter for a date range (uses two date filters in the Telerik controls), but other than that has served me well.
function fixRadGridFilterBar() {
jQuery('.rgFilterRow > td').each(function () {
var cell = jQuery(this);
var isDate = false;
if (cell.children().length) {
var filterBox = cell.find('.riTextBox');
if (filterBox.length) {
if (cell.find('.RadPicker').length){
filterBox = cell.find('.RadPicker');
filterBox.css("width", "100%");
isDate = true;
}
}
if (!filterBox.length) {
filterBox = cell.find('.rgFilterBox');
}
if (filterBox.length) {
var filterWidth = cell.find('.rgFilter').outerWidth();
var padRight = isDate ? 0 : parseInt(cell.css('padding-right'));
var marginRight = parseInt(cell.css('margin-right'));
var filterPadding = (isNumber(padRight) ? padRight : 0) + (isNumber(marginRight) ? marginRight : 0);
cell.css('position', 'relative');
cell.children().wrap("<div class='filter-input'></div>");
filterBox.parent().css('float', 'left').css('width', '100%');
filterBox.wrap('<div></div>');
filterBox.parent().css('padding-right', (filterWidth + filterPadding).toString() + 'px');
cell.find('.rgFilter').parent().css('width', filterWidth.toString() + 'px').css('position', 'absolute').css('right', '0');
cell.children().wrapAll("<div style='position:relative;'></div>");
}
}
});
jQuery('.RadGrid > table').each(function () {
jQuery(this).wrap('<div class="rgHeaderWrapper"></div>');
});
}
I change the border style and border color on a .net textbox to solid red respectively. After a postback I am attempting to return the textbox to its default values, but I cannot seem to get the color right. I have googled this, and tried to get the default values in the debugger, but the values in the debugger always look too dark of a gray when applied. Is there an easy way to return to the default look and feel of a textbox?
try this:
TextBoxTitle.BorderColor = System.Drawing.Color.Empty;
You can write two CSS classes:
.tb_with_border {
border: 1px #FF0000 solid;
}
.tb_without_border {
border: none;
}
.. and then you can change styles by assigning CssClass property of your textbox, for example:
Textbox1.CssClass = "tb_without_border";
or in markup:
<asp:TextBox id="Textbox1" runat="server" CssClass="tb_with_border" />
If you're just switching the particular element style off then this works:
Textbox1.BorderColor = Nothing
You should be using CSS to do this anyways...
Textbox1.Style.Remove("border")
txt_TextBox.BorderColor = System.Drawing.Color.Empty;
txt_TextBox.BorderStyle = BorderStyle.NotSet;
Simple. Add another textbox or dropdownlist with default values and make it hidden.
To RESET to defaults, just set your textbox's border color, width and style to that of the hidden textbox like so:
txtMyTextBoxToReset.BorderColor = txtHiddenTextBox.BorderColor;
txtMyTextBoxToReset.BorderWidth = txtHiddenTextBox.BorderWidth;
This works in all browsers and works for Drop down lists as well