My question is simple. I have an unordered list <ul>... </ul> with a bunch of <li>...</li> tags. Inside those <li> tags I have some #Html.ActionLink(...) that just won't render. Am I doing something fundimentally wrong here? This is my code:
<div id="menuDiv">
<ul id="myMenu">
<li >#Html.ActionLink("Dashboard", "Index", new { sender = "AgentScoreCareReport"})</li>
</ul>
</div>
Try this
<li >#Html.ActionLink("Dashboard", "Index",
new { sender = "AgentScoreCareReport"},null)</li>
This turned out to be a CSS problem. It's been fixed.
Thanks everyone who made suggestions!
Related
Basically, I'm just trying to change the href attribute to be the result of the ActionLink:
#Html.ActionLink("Home", "Index", "Dashboard", new { }, new { #class = "nav-link active" })
<a class="nav-link active" href="index.html">
<div class="sb-nav-link-icon"><i class="fas fa-home"></i></div>
Home
</a>
If I replaced the index.html with #Html.ActionLink("Home", "Index", "Dashboard"), then what happens is the HTML is not formed correctly.
Any suggestions would be appreciated.
Thanks!
#Url.Action("Index", "Dashboard"), sorry this can be closed. Of course as soon as I ask I find the answer.
I guess that this code will work as you want it to. You don't have to use #Html.ActionLink
<a class="nav-link active" href="Dashboard/Index">
<div class="sb-nav-link-icon"><i class="fas fa-home"></i></div>
Home
</a>
I've just started working with jQuery UI, and while at first it looked like a wonderful tool, I've found that it lacks exactly what I need: a menu button widget.
What I want is the functionality of the jQuery UI Menu Widget, but with some additional bits, primarily a button/clickable area that will show/hide the menu. This alone is simple enough, but what is driving me mad is adding the expected keyboard functionality to this. When a button expands a menu, one expects that clicking outside that menu or pressing ESCAPE will close that menu, and while this works for the widget's submenus, it isn't built into the main widget.
I've been reading about the Widget Factory and extending/modifying widgets, but I'm completely lost as to how to accomplish this specific problem, and I can't seem to find any answers to this that aren't many years old. I've even tried overriding the "collapse" function in the menu instance, but the problem is that I don't quite understand the flow of the code. I basically added an 'else' statement that calls the 'click' event on the button when the conditions for closing a submenu aren't met. This just creates all sorts of weird bugs and I know I don't really have any idea what I'm doing.
A code example of how this is done would be greatly appreciated, but this is a common enough website behavior that I imagine someone has already put this together. I'm just not finding anything up to date.
Thank you in advance!
If you do not find a Widget that is needed, you can combine various elements and use them together.
$(function() {
$(".widget button").button();
$(".widget button").click(function(event) {
event.preventDefault();
if ($("#menu").is(":visible")) {
$("#menu").hide();
} else {
$("#menu").show().menu("focus", null, $("#menu .ui-menu-item:first"));
}
});
$("#menu").menu({
select: function(e, ui) {
console.log(ui.item.text().trim());
}
}).hide();
});
.ui-menu {
width: 150px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="widget">
<h1>Widget Buttons</h1>
<button>A button element</button>
<ul id="menu">
<li class="ui-state-disabled">
<div>Toys (n/a)</div>
</li>
<li>
<div>Books</div>
</li>
<li>
<div>Clothing</div>
</li>
<li>
<div>Electronics</div>
<ul>
<li class="ui-state-disabled">
<div>Home Entertainment</div>
</li>
<li>
<div>Car Hifi</div>
</li>
<li>
<div>Utilities</div>
</li>
</ul>
</li>
<li>
<div>Movies</div>
</li>
<li>
<div>Music</div>
<ul>
<li>
<div>Rock</div>
<ul>
<li>
<div>Alternative</div>
</li>
<li>
<div>Classic</div>
</li>
</ul>
</li>
<li>
<div>Jazz</div>
<ul>
<li>
<div>Freejazz</div>
</li>
<li>
<div>Big Band</div>
</li>
<li>
<div>Modern</div>
</li>
</ul>
</li>
<li>
<div>Pop</div>
</li>
</ul>
</li>
<li class="ui-state-disabled">
<div>Specials (n/a)</div>
</li>
</ul>
</div>
Base Examples:
https://jqueryui.com/menu/
https://jqueryui.com/button/
You can also make use of the Widget Factory to create your own.
I'm using Zend/Navigation in Zend Framework 2. It prints this:
<ul class="Navigation">
<li>
Home Page
</li>
<li>
Contact
</li>
</ul>
But i want to put a <span> element inside every <li> like this:
<ul class="Navigation">
<li>
<span>
Home Page
</span>
</li>
<li>
<span>
Contact
</span>
</li>
</ul>
Is there any way to do that without using a "partial" solution?
There's no other way, how to change html output from menu view helper (except indentation and <ul> class).
Well, of course, you can write your own menu view helper - extend Zend\View\Helper\Navigation\Menu and override htmlify method:
https://github.com/zendframework/zf2/blob/release-2.2.5/library/Zend/View/Helper/Navigation/Menu.php#L472,
but I think, partial template is much better and easier solution.
For anyone who is intrested this guy has created a helper doing this job. http://cmyker.blogspot.gr/2012/11/zend-framework-2-navigation-menu-to.html
Markup:
<ul>
<li>
<ul id="ratx">
<li>Location</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Services</li>
<li class="bar"><span></span></li>
<li class="value">5</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Facilities</li>
<li class="bar"><span></span></li>
<li class="value">3</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Room Cleanliness</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Value for Money</li>
<li class="bar"><span></span></li>
<li class="value">1</li>
</ul>
</li>
</ul>
I want to represent User Ratings dynamically using JQuery so I made a function like this,
jQuery:
$("ul#ratx").each(function(index) {
var val = $(this).children(".value").text();
var barval = val * 40;
/* compute ratings */
$("li.bar span").css("width", barval);
});
Now, when I alert barval I get all 5 values but when I try to apply the "compute ratings" line, all it does is apply the last value that it finds. How should I go about this?
Sorry if the question is a confusing. I am not quite sure how to phrase everything.
The problem is that, while interating through each elements it find, it is applying a common value to all li.bar span. You should represent a single element, you are trying to apply to.
$(this).children("li.bar span").css("width", barval);
Update
Here is a working Demo
The snippet that worked was
$(this).find("li.bar").children("span").css("width", barVal );
Also, I changed the display property of the span to display: inline-block;
You are setting the css for all the elements in the set $("li.bar span"). So at the end, they all have the same width of the last parsed value.
Without seeing you markup, it's difficult to propose you a code solution though.
I have this code that is my navigation bar on my site, it is in my _layout.cshtml page at the top...
<div id="nav">
<ul>
<li id="current">Home</li>
<li>Code Stuff</li>
<li>Music Stuff</li>
<li>Blog</li>
<li>Links</li>
<li>Contact</li>
</ul>
</div>
Im using a razor view page and I need to be able to inject id="current" into the block for the page that im on. My solution was to do something like
<div id="nav">
<ul>
<li id="#Model.PageName">Home</li>
<li id="#Model.PageName">Code Stuff</li>
<li id="#Model.PageName">Music Stuff</li>
<li id="#Model.PageName">Blog</li>
<li id="#Model.PageName">Links</li>
<li id="#Model.PageName">Contact</li>
</ul>
</div>
But of course that wont work because all of the li items will have the pagename in. So without using burly if statements how can I do this dynamically?
First, you really should be using class (as indicated in your title) rather than id (as indicated in your question text). Second, I would define a function that takes an argument differentiated your link and outputs either the empty string or current depending on whether it matches the page name.
#functions
{
public string MenuClass( string menuItem )
{
return string.Equals( Model.PageName, menuItem, StringComparison.OrdinalIgnoreCase )
? "current"
: "";
}
}
<div id="nav">
<ul>
<li class="#MenuClass("Home")">Home</li>
<li class="#MenuClass("Code")">Code Stuff</li>
...
</ul>
</div>