<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="Tab0" aria-labelledby="ui-id-1" aria-selected="true">
<a href="#Tab0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">
<span class="titlecase">jones,mike dr</span>
</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Tab1" aria-labelledby="ui-id-2" aria-selected="false">
<a href="#Tab1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">
<span class="titlecase">asdf,asdfasd mrs</span>
</a>
</li>
I have a function that will change the tab on the index its on, but for some reason it automatically gets -1 for the second so my onclick="javascript:ChangeTabLocation('1');" never hits the second tab.
Any ideas where in the code it automatically assigns a -1 to that?
Related
trying to make a drop once click on the html action, works with anchor tag
As per below it works with
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<p>Testing<span class="dropdown-toggle"></span> </p>
</a>
<div class="collapse" id="auth">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/login.html"> Home 1 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/login-2.html"> Home 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/register.html"> Home 3 </a></li>
</ul>
</div>
</li>
working with tag
as per below does not work.\
<li class="nav-item dropdown" id="User">
<i class="fas fa-user-edit " style="margin-left: 30px;margin-top: 6px;"> </i>
#Html.ActionLink("User Management", "Index", "Users", null, new { #class = "nav-link dropdown-toggle", data_toggle = "dropdown", aria_expanded = "false" })
<div class="collapse">
<ul class="nav flex-column sub-menu">
<li>
<a class="nav-link">Home 1</a>
</li>
<li>
<a class="nav-link">Home 2</a>
</li>
<li>
<a class="nav-link">Home 3</a>
</li>
</ul>
</div>
</li>
I'm having a hard time to make <li> class to active when page is loaded. Here's my scenario I copied a sample Dropdown in a certain website to integrate it in my website. I'm using C# Asp.Net
_Layout.cshtml
<body>
<div id="header">
#Html.Partial("_HeaderPartial")
</div>
<!--SIDEBAR Navigation-->
<aside id="menu">
// The Dropdown
#Html.Partial("_SidebarPartial")
</aside>
<div id="wrapper">
#RenderBody()
<footer class="footer">
#Html.Partial("_FooterPartial")
</footer>
</div>
<div id="right-sidebar" class="animated fadeInRight">
#Html.Partial("_RightSidebarPartial")
</div>
</body>
_SidebarPartial
<ul class="nav" id="side-menu">
<li>
<span class="nav-label">Dashboard</span>
</li>
<li>
<span class="nav-label">Analytics</span>
</li>
<li>
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
<li>
<span class="nav-label">App views</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Contacts</li>
<li>Projects</li>
<li>Project detail</li>
<li>App plans</li>
<li>Social board</li>
</ul>
</li>
<li>
<span class="nav-label">Charts</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>ChartJs</li>
<li>Flot charts</li>
<li>Inline graphs</li>
</ul>
</li>
<li>
<span class="nav-label">Box transitions</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li><span class="label label-success pull-right">Start</span> Overview </li>
<li>Columns from up</li>
</ul>
</li>
</ul>
As I commented, here is a small example with an id attribute on the list:
<ul class="nav" id="side-menu">
<li id="interfaces">
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
</ul>
And then you could add the following line to the document.ready function:
$("#interfaces").attr("class", "active");
Check this out. This will also help you
just write the following code inside document.ready function
$('#interfaces').addClass('active');
Cheers
I try to automate a Task "Navigating on a Website" with WatiN.
Now, I have the following problem:
The website shows this:
There I have to simulate a click on "Einstellungen". When I look at the Sourcecode it looks like:
<div class="ui-widget ui-opt-outer-nav ui-widget-content ui-corner-all nav_nav_panel">
<div class="ui-widget ui-opt-inner-nav ui-widget-content ui-corner-all">
<div id="NAV" class="nav_nav nav_pointer">
<ul>
<li id="jBtnMENUShipmentList" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0120">Sendungsübersicht</label></span></span></li>
<li id="jBtnMENUCreateShipment" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0130">Sendung erstellen</label></span></span></li>
<li id="jBtnMENUAddressBook" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0140">Adressbuch</label></span></span></li>
<li id="jBtnMENUEndOfDayManifest" data-opt-load-type="menu">
<span class="select-buttons" data-opt-title="">
<span><label data-opt-label-key="V7GMGLMBTN0150">Tagesabschluss</label></span>
</span>
</li>
<li id="jBtnMENUPickup" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0160">Abholung</label></span></span></li>
<li id="jBtnMENURateEnquiry" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0170">Preisauskunft</label></span></span></li>
<li id="jBtnMENUExpertFunctions" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0180">Einstellungen</label></span></span></li>
</ul>
</div>
</div>
</div>
But I have no idea, how I can now with WatiN simulate the click on "Einstellungen".
I have tried:
browser.Link(Find.ByName("jBtnMENUExpertFunctions")).Click();
but with no success.
Comment from jessehouwing is the solution:
The Browser.Link method will search for a Link element, but the element in the DOM you need to click is a Label, so you should probably use:
Browser.Label(Find.ByText("Einstellungen").Click()
I am trying to build, from a static menu, with pre-defined CSS classes into a dynamic one, using the .NET/C# 'Templates', specifically to EPiServer.
Information on PageTree
I am not technical at all, more front end, but been asked to do this project.
Menu code is here.
<ul onClick="" class="zetta-menu zm-effect-fade">
<li style="margin-left: 185px;">
<a href="http://intranet/en/Web-Developments-draft/Marc-Testing/Self-Help/">Self-help
<i class="zm-caret fa fa-angle-down"></i>
</a>
<ul class="w-300">
<li>Email</li>
</ul>
</li>
<li>
<a href="#">Clinical Systems
<i class="zm-caret fa fa-angle-down"></i>
</a>
</li>
<li>
<a href="#">Equipment
<i class="zm-caret fa fa-angle-down"></i>
</a>
</li>
<li>
<a href="#">Training
<i class="zm-caret fa fa-angle-down"></i>
</a>
<li>
<a href="#">Performance
<i class="zm-caret fa fa-angle-down"></i>
</a>
<li>
<a href="#">About us
<i class="zm-caret fa fa-angle-down"></i>
</a>
<ul class="w-300">
<li>Information Governance</li>
<ul class="zm-drop-left w-300">
<li>Drop down</li>
</ul>
</ul>
</li>
</ul>
<br class="clear" />
I have a dropdown defined within a nav-bar (http://getbootstrap.com/components/#nav-dropdowns) and I want to, when I click on the dropdown a function on server side to be executed.
My dropdown:
<li role="presentation" class="dropdown">
<a href="../#" id="notS" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="glyphicon glyphicon-bell" aria-hidden="true"><span id="not" class="badge">3</span></span>
</a>
<ul id="notificacoes" class="dropdown-menu" role="menu">
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/VerRevisoes?id=1144">
As revisões do caso 1144 estão completas
</a>
</li>
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/VerRevisao?id=7">
Foi adicionada uma nova revisão ao caso 1144
</a>
</li>
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/Casos">
O caso 1145 foi adicionado pelo utilizador 1
</a>
</li>
</ul>
</li>
And my funtion setVisivel it C# and it's on server side:
protected void setVisivel(object sender, EventArgs e)
{
DBConFactory.getInstance().setVisibleNotificacao(int.Parse(Context.User.Identity.GetUserName()));
}
But when I click the dropdown, the function setVisivel is not called!
Make sure that you have set the property of ASP.NET DropDown control: AutoPostBack="True" (like explained in MSDN online:
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listcontrol.autopostback%28v=vs.110%29.aspx )
Working example, the DropDownList is declared as:
<asp:DropDownList ID="cmbSelectChannel" runat="server" AutoPostBack="true"/>
Hope this may help. Best regards,
in my opinion; try to integrate two different technologies .NET and bootstrap in a way others have tried before.
try to read this:
http://techbrij.com/responsive-menu-twitter-bootstrap-asp-net
then modify your bootstrap CSS and make it look like what your dropdown looks like now.