I display a part of a menu with
<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown">
<a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button">
<span class="glyphicon glyphicon-user"></span><span class="caret"></span>
</a>
...
</li>
After i add a text
$('a[name="usernameMenu"] span:eq(0)').after("test");
In the html code i see
<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown">
<a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button">
<span class="glyphicon glyphicon-user"></span>test<span class="caret"></span>
</a>
...
</li>
A search a way to replace test in this html code by another value
If I understood correctly, you want to append a text node after the span and then later replace it with something else.
This answer gives you a way to get the next 'text' element. With that, you can assign a value like the sample code below:
$(function() {
$('a[name="usernameMenu"] span:eq(0)').after(" test ");
setTimeout( function(){
// getting the next text element done line this
$('a[name="usernameMenu"] span:eq(0)')[0].nextSibling.nodeValue = "new TEXT"
}, 3000 ); // wait 3 secs before changing it
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
Text below will change in 3 secs
<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown">
<a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button">
<span class="glyphicon glyphicon-user"></span><span class="caret"></span>
</a>
</li>
Maybe a hacky solution, but find and replace test:
var t = $('a[name="usernameMenu"]').html();
$('a[name="usernameMenu"]').html(t.replace('test', 'another value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown">
<a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button">
<span class="glyphicon glyphicon-user"></span>test<span class="caret"></span>
</a>
...
</li>
Related
I'm trying to get the full href string off of my nav-link item but it's not working. Here is my menu:
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" id="menuClient" href="Modules/Clients/ClientDashboard.aspx" value="Client" runat="server">Client</a>
</li>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" href="Modules/Suppliers/SuppliersDashboard.aspx" value="Suppliers" id="ddSuppliers" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" runat="server">
Suppliers
</a>
<div class="dropdown-menu" aria-labelledby="ddSuppliers">
<a class="dropdown-item" style="z-index: 999;" id="ddAddNewSupplier" runat="server" href="Modules/Supplier/AddSupplier.aspx">Add Supplier</a>
<a class="dropdown-item" style="z-index: 999;" id="ddSupplierList" runat="server" href="Modules/Supplier/List.aspx">Supplier List</a>
</div>
</li>
</ul>
</div>
I'm getting the href attribute in this jQuery function:
$('#navbarNavDropdown').find('.nav-link').each(function () {
var curr = $(this).attr('href');
console.log(curr);
});
And whenever I'm clicking on a menu instead of getting the full href I only get the current page. For example, if I click on client,
($this).attr('href');
gives me ClientDashboard.aspx instead of Modules/Clients/ClientDashboard.aspx.
How can I get the full string?
Thanks in advance.
What I need is a smooth hover effect for my dropdown menu.
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500); is not working for me. When the mouse out hover, the effect isn't working.
$(document).ready(function () {
// executes when HTML-Document is loaded and DOM is ready
// breakpoint and up
$(window).resize(function () {
if ($(window).width() >= 980) {
// when you hover a toggle show its dropdown menu
$(".navbar .dropdown-toggle").hover(function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
});
// hide the menu when the mouse leaves the dropdown
$(".navbar .dropdown-menu").mouseleave(function () {
$(this).removeClass("show");
});
// do something here
}
});
// document ready
//wow.js init
new WOW().init();
});
Here is my HTML markup. I am using bootstrap 4 latest version. what can I do with a smooth hover effect with jQuery or javascript
<header class="header_area">
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#">Light House</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single.html">Single Post</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
<a class="dropdown-item" href="#">Item 4</a>
<a class="dropdown-item" href="#">Item 5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact_us.html">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 search_icon" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</nav>
</header>
.hover() has two handlers. The mouse IN and the mouse OUT.
If you wish to define something to happen on mouse out, you have to define the handler.
element.hover(mouseenter, mouseleave);
Documentation
So I suggest:
$(".navbar .dropdown-toggle").hover(
// Mouseenter event handler
function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
},
// Mouseleave event handler
function(){
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
}
);
If you wish to use .hover(), this can be done like so:
$(".navbar .navbar-toggler").hover(function(e) {
$(".navbar .navbar-collapse").addClass("show").fadeIn(500);
}, function(e) {
$(".navbar .navbar-collapse").removeClass("show").fadeOut(500);
});
This has drawbacks as as soon as you move the mouse to click or select one of the Menu items, it will revert the class and become hidden.
I would advise staying with .click() for all cases. This will work for Mobile and Desktop browsers:
$(".navbar .navbar-toggler").click(function() {
$(".navbar .navbar-collapse").toggleClass("collapse show");
});
Working Example: https://jsfiddle.net/4gas2aok/4/
If you want to retain the fade, use .fadeToggle():
$(".navbar .navbar-toggler").click(function() {
$dropdown.fadeToggle(500).toggleClass("collapse show");
});
Bootstrap CSS addresses a lot of the width issues already, so you should not need to check the Window width, just let bootstrap handle it on it's own.
Full Example: https://jsfiddle.net/4gas2aok/7/
I knew javaScript but I'm not used to it as I'm more focus on creating UI design. So decided to take up some short courses and then I've encountered this problem. There should be dropdown which consist of 4 items to choose: red, blue, green, yellow. If a user choose a color let's say yellow, the div box underneath will become yellow. I used Bootstrap for this by the way.
My code goes something like this ` Dropdown 1
<ul class="dropdown-menu">
<li id="red">Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
`
Full code resides here
http://jsfiddle.net/0c4dbr9t/7/
Try this simple code
Demo
Code:
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li data-color="red">Red
</li>
<li data-color="blue">Blue
</li>
<li data-color="green">Green
</li>
<li data-color="yellow">Yellow
</li>
</ul>
</div>
<div id ="box"><div>
$( document ).ready(function() {
$('.dropdown-menu li').click(function(){
var color = $(this).data("color");
$("#box").css('background-color',color);
});
});
Please let me know if this is what you needed..
html
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul id="dd" class="dropdown-menu">
<li>Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
</div>
<div id ="box"><div>
css
#box {
margin-top: 20px;
background-color: #000;
padding: 50px;
}
js
var ul = document.getElementById('dd');
ul.addEventListener("click", changeColor, false);
function changeColor (e) {
if(e.target.nodeName == "A") {
document.getElementById("box").style.background =e.target.innerHTML;
}
}
Using simple javascript:
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="red">Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
</div>
<div id ="box"> Some Text <div>
<script>
var menu = document.querySelector("ul.dropdown-menu");
menu.onclick = function(evt) {
console.log(evt.target.innerText)
document.getElementById("box").style.backgroundColor = evt.target.innerText;
}
</script>
I'm trying to hide html element based on Session Value, using razor or js but i can't. I've tried more than one solution, but no result.
First attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li style="#(Session[" UserRole "].Equals("2 ") ? "display:none " : "display:block ")">
اعتماد الملاحظات
</li>
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Second attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session["UserRole"].ToString().Equals("1")) {
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Any suggestion?
Try below logic, it may work for you
<li style="#(Session["UserRole"].ToString() == "2" ? "display:block" : "display:none")">
Just use an if instead of mixing with the element's style:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session[" UserRole "].Equals("2 "))
{
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
As the title states, I'm looking to have one single dropdown then have other HTML content in another dropdown submenu, making the dropdown act as a pop out for HTML content. The issue I'm having so far is that once I try just putting a div and code into the UL tag for the secondary drop down, it no longer stays visible on hover. Here is my current markup,
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <i class="icon-caret-down"></i></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<div>
<h1 style="color: #333;">Things</h1>
</div>
</ul>
</li>
The markup is to be honest horrendous as of now, but is there an easier way to have custom content in a Bootstrap sub drop down? This way is causing miles upon miles of issues.
You can think of this way:
<ul class="unstyled">
<li class="dropdown">
<a class="dropdown-toggle btn" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<li>
<div class="custom">
<h1 style="color: #333;">Things</h1>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This makes the menu more semantically correct and valid... I feel something you might require in the CSS is:
.custom {padding: 0 10px;}
.custom h1 {font-size: 1.5em; margin: 0; padding: 0;}
Preview
Fiddle: http://jsfiddle.net/praveenscience/yEJ3c/
If you don't need the other children and you're just looking for a rich dropdown, perhaps you want to be using the Popover component instead of the Dropdown component.
Update for Bootstrap 4 - it's now easy to add custom HTML to dropdowns:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item active" href="#">Option one</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">
<div class="row">
<div class="col">Html</div>
<div class="col">Content</div>
<div class="col">Here</div>
</div>
</a>
</div>
</div>