I know this has been asked countless times before, and they all seem to be resolved by this approach, Although I can't seem to get it to work for my situation.
I'm moving away from CSSFriendly as it is not supported in .net 4 (unless I render it as 3.5), and I'm close to mimicing the functionality using the default CSS styling, although I'm stuck on one issue - Parent selected.
I've read a few solutions on SO and .net forums, although I still can't get it to work for my situation, here is my predicment:
I have an asp.net 4 Menu in a masterpage together with a SiteMapDataSource which loads from a site map. When clicking on the child node, I want its parents CSS to change as well.
Here is a simplified version of my sitemap
<siteMapNode Parent - hidden/no url>
<siteMapNode Home - url="~/" >
<siteMapNode Item - no url >
<siteMapNode Item-child1 - url = "~/child"/>
<siteMapNode Item-child2 - url = "~/child2"/>
</siteMapNode>
</siteMapNode>
All the CSS styling works fine, however I have a horizontal menu which before the ul li css would change as the CSS attribute was "selected". However now, the .net 4 implementation only selects the menu item you select.
I've tried to manually select the parent on the MenuItemDataBound hook, although this does 2 things:
Applys "selected" to the 'a' tag (I need to style the ul li)
Deselects the sub menu item (I can't have both items selected)
Heres the CSS:
.elfabMenu{position:relative;}
.elfabMenu ul li a.popout{padding:0px !important; background-image:none !important;}
.elfabMenu ul{display:block;width:961px!important;margin:0;padding:0}
.elfabMenu ul li{font-family:Arial,Helvetica,sans-serif;font-size:13.5px;background:url(../images/menu_sep.png) no-repeat scroll left bottom transparent;text-decoration:none;color:#000;line-height:38px;padding:10px 23px 0}
.elfabMenu ul li li{background-image:none!important;width:230px;border-bottom:1px solid #000;border-top:1px solid #121212;padding:0;background-color:#0E0E0E;color:#ffffff}
.elfabMenu ul li li a{color:#ffffff; padding:5px 0 5px 15px}
.elfabMenu ul li li:hover{background-color:#000!important}
.elfabMenu ul li li a.selected{background-color:#000!important}
.elfabMenu ul li a.selected{background-image:none!important}
.elfabMenu ul li li.has-popup{background:url(../images/primary-menu-current-children.gif) no-repeat scroll 210px 20px #0E0E0E !important}
.elfabMenu ul li ul li ul.level3 {margin-top:-1px!important}
Heres the databound method:
void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
if (SiteMap.CurrentNode != null)
{
if (e.Item.Selected == true)
{
e.Item.Selected = true;
e.Item.Parent.Selectable = true;
e.Item.Parent.Selected = true;
}
}
}
Hopefully I'm just overlooking something here, but its driving me mad! Would very much appretiate someones help.
Cheers,
Rocky
Update
By design the ASP.net menu can only have one menuitem selected at a time. This is always applied to the <a> tag of the menuitem list. I've changed the menu to incorporate this design, and decided that having the menu parent node selected and not its children is good enough, as I looks like a javascript/page rendering hack is required.
Instead what I do is find the current selected node, use recursion to find the parent and select it. Heres the code for anyone wanting to do the same:
protected void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
if (SiteMap.CurrentNode != null)
{
if (e.Item.Selected)
{
MenuItem parent = MenuParent_Recursion(e.Item);
parent.Selectable = true;
parent.Selected = true;
}
}
}
static MenuItem MenuParent_Recursion(MenuItem item)
{
if (item.Parent == null)
{
return item;
}
return MenuParent_Recursion(item.Parent);
}
Slight modification of this worked for me.
if (SiteMap.CurrentNode != null)
{
if (e.Item.Selected)
{
if (e.Item.Depth == 1)
{
e.Item.Parent.Selectable = true;
e.Item.Parent.Selected = true;
}
if (e.Item.Depth == 2)
{
e.Item.Parent.Parent.Selectable = true;
e.Item.Parent.Parent.Selected = true;
}
if (e.Item.Depth == 3)
{
e.Item.Parent.Parent.Parent.Selectable = true;
e.Item.Parent.Parent.Parent.Selected = true;
}
}
}
Not sure why my depths were one lower, maybe because I have ShowStartingNode="False" on my site map.
This probably isn't the real issue, but it seems that even if you get the selected class onto the li, you don't yet have a css declaration (eg li.selected {...}) that does anything with it.
Answering my own question - By design the ASP.net menu can only have one menuitem selected at a time. This is always applied to the tag of the menuitem list. I've changed the menu to incorporate this design, and decided that having the menu parent node selected and not its children is good enough, as I looks like a javascript/page rendering hack is required.
Instead what I do is find the current selected node, use recursion to find the parent and select it. Heres the code for anyone wanting to do the same:
protected void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
if (SiteMap.CurrentNode != null)
{
if (e.Item.Selected)
{
MenuItem parent = MenuParent_Recursion(e.Item);
parent.Selectable = true;
parent.Selected = true;
}
}
}
static MenuItem MenuParent_Recursion(MenuItem item)
{
if (item.Parent == null)
{
return item;
}
return MenuParent_Recursion(item.Parent);
}
Related
I have a WordPress site using the Divi theme. I have a dropdown in the navbar that I want to stay open until I click somewhere with the mouse. My trouble is, I don't understand the CSS of the dropdown. I don't know which CSS class to use for opening/closing the dropdown programatically.
The dropdown is the lime green one in the top right of the page with label "Våra erbjudanden", see the screenshot:
So in short, which Divi classes are used to toggle dropdowns? How would you go about doing this?
Thanks!
To make the dropdown stay open after hover, you can use the following code:
jQuery(document).ready(function() {
spriderMain.run();
});
var spriderMain = {
run() {
document.addEventListener('click', this.onAnyClick, true);
this.fixDropdown();
},
fixDropdown() {
var dropdown = document.querySelectorAll("nav > ul > li")[1];
dropdown.addEventListener("mouseover", this.onDropdownMouseOver);
},
onAnyClick() {
setTimeout(function() {
var dropdown = document.querySelectorAll("nav > ul > li > ul")[0];
dropdown.style.visibility = "hidden";
dropdown.style.opacity = "0";
var dropdownBox = document.querySelectorAll("nav > ul > li")[1];
dropdownBox.style.pointerEvents = "auto";
dropdown.style.pointerEvents = "auto";
}, 100);
},
onDropdownMouseOver() {
var dropdown = document.querySelectorAll("nav > ul > li > ul")[0];
dropdown.style.visibility = "visible";
dropdown.style.opacity = "1";
}
};
However, a problem might cause the dropdown to reopen on hover, although it already has been opened. This issue is discussed here:
How can I prevent the dropdown from animating/reopening again when already open in WordPress Divi theme site?
i am working on this Wordpress website and as you can see is a one scroll landing page. Every section as an id and this class id is connected to the navigation points like this
Example:
http://ergon.nowcommu.myhostpoint.ch/home/#idee
What i need is to highlight the active navigation point when you scroll with the mouse on the sections and when you click on the navigation on the relative link.
How can i do it?
Your website has already been built with functionality that changes the class of the menu item once it's content/counterpart is in the viewport of the end user.
If you inspect the element, you will notice that the a tags in your menu receive a class .mPS2id-highlight when their content counterparts are in view.
Thusly, you can simply add a CSS rule to achieve your goal.
I've tested the rule below in firebug on your website and it seems to work fine (the !important was necessary):
.mPS2id-highlight {
color: #b51339 !important;
}
If you would like to keep your border functionality, you can use the following rules instead:
.cssmenu > ul.menu > li:hover {
border-bottom: 0 solid;
}
.mPS2id-highlight {
border-color: #b51339 !important;
color: #b51339 !important;
}
You need declare the highlight with javascript particularly you do with jquery in custom code de your wordpress with something like this:
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
also you look at the console of the browser because it have an error in your page
I need to hide the focus outline when I click on a link.
But i also need to show it when I slide links with tabindex.
Some websites doing this with any specific workaround.It seems that is the dafault behaviour.
But in my website, when I click on a link it shows also the outline.
How can I show he outline only when I slide links with tabindex key?
Thanks in advance.
Helmut
If the tab behaviour is specifically what you need to detect when adjusting the CSS outline property, I don't believe CSS can ascertain the input device type from the such states as :focus or :active.
Instead, you could hide the outline for all elements on the page with CSS:
a:focus, a:active {
outline:0;
}
a.tabbed {
outline:1px solid red;
}
Then you'd to use JavaScript to adjust the outline for certain elements that receive focus with the tab key.
document.addEventListener('keyup', function (e) {
var code = e.keyCode ? e.keyCode : e.which;
var el = document.activeElement;
if (code == 9 && el.tagName == 'A') {
el.className = "tabbed";
}
}, true);
I've added a quick example: http://codepen.io/anon/pen/aljsu
hi all I have a MenuItem that im dynamically adding childrent to using the following code
MenuItem c1 = new MenuItem("text","value");
parent.ChildItems.Add(c1);
however I need to add a css class to it at the the same time something like
c1.cssClass = "cssclass";
or
c1.attributes.Add("Class","cssclass");
does anyone know how?
MenuItem doesn't have a CSS class property, instead add the class to the parent Menu:
Menu menu = new Menu();
menu.CssClass = "myclass";
If you want to dynamically add classes to the menu then try creating a helper method (Extension Methods in C#):
public static class MenuExtension
{
public static void AddCSSClass(this Menu menu, string className)
{
// additional code here to tidy / remove duplicates etc.
menu.CssClass = string.Concat(menu.CssClass, " ", className);
}
}
Since our Menu renders a UL you can then use CSS selectors to cascade the style to all child LI elements:
.myclass > li {
// your attributes
}
Or alternatively, specific LI elements (things like nth-child etc are only supported in CSS 3.0):
.myclass > li:first-child {
// your attributes
}
.myclass > li:nth-child(1) {
// your attributes
}
You can try with MenuItemStyle property of your menu
Link : http://msdn.microsoft.com/fr-fr/library/system.web.ui.webcontrols.menuitemstyle.aspx
Is there a way to hide the checkbox icon for an ListItem and just display the value-text.
Like Below - Checkbox for items is hidden.
I could figure out that I could disable (grey-out) or completely hide (invisible) a list item but not just hide the checkbox icon (square)
I recently did this as part of a project and accomplished it via setting an attribute when creating the ListItem and then using CSS to style it.
li.Attributes.Add("id", "removecheckbox");
Since the attribute is added as part of a tag, you can use the following descriptor in your CSS.
#removecheckbox
{
color: Gray;
}
#removecheckbox input
{
display: none;
}
Of course, you can format the CSS any way you'd like, but this should get you started.
If you'd like more information using selectors in CSS, check out this reference from w3.org.
HTH!
CSS3 will help you, define Inline style, good point is to make special UserControl for CheckBoxList to use following solution
<style>
input:disabled {
display: none;
}
</style>
and in CheckBoxList PreRender event disable ListItem to apply CSS input:disabled selector
protected void CheckBoxListMajad_PreRender(object sender, EventArgs e)
{
foreach (ListItem it in this.CheckBoxListMajad.Items)
{
if (it.Value.Equals("0"))
{
it.Enabled = false;
it.Selected = false;
it.Attributes.Add("style", "font-size:14px;height:16px;font-weight:bold;");
}
}
}
CheckBoxListMajad.RepeatColumn=3