Here is my HTML code, and there are some <li> tags in it. I plan to use Speed 1, Speed 2, Speed 3, etc. to replace Content. How can I do it on Javascript ?
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Content <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Speed 1</li>
<li>Speed 2</li>
<li>Speed 3</li>
<li>Speed 4</li>
<li>Speed 5</li>
</ul>
</div>
Could someone give me advice?
Try this,
$('li a').on('click',function(e){
e.preventDefault();
$('button').text($(this).text());
});
Live Demo
I had misunderstood the problem and have changed the solution to fix it:
$(".dropdown-menu > li > a").click( function (e) {
e.preventDefault();
$(this).parent().parent().prev().text($(this).text());
})
You could use one of the button classes or even the button html tag to address the change but by using relative paths you will adress the right element without risking to change other buttons on your page.
fiddle
answer for you question ...........:
http://jsfiddle.net/MFmwy/
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Content <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href=# onclick=javascript:xxxx>Speed 1</a></li>
<li><a href=#>Speed 2</a></li>
<li><a href=#>Speed 3</a></li>
<li><a href=#>Speed 4</a></li>
<li><a href=#>Speed 5</a></li>
</ul>
</div>
Try this instead
HTML:
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Content <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href=# onclick=javascript:xxxx>Speed 1</a></li>
<li><a href=#>Speed 2</a></li>
<li><a href=#>Speed 3</a></li>
<li><a href=#>Speed 4</a></li>
<li><a href=#>Speed 5</a></li>
</ul>
</div>
Jquery:
$('li a').click(function(){
$('button').text($(this).text());
});
JsFiddle
You'll need to watch that you don't replace the <span class="caret"></span>, so you'll need to modify the HTML slightly to add an extra span for the content:
HTML:
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span>Content</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Speed 1</li>
<li>Speed 2</li>
<li>Speed 3</li>
<li>Speed 4</li>
<li>Speed 5</li>
</ul>
</div>
Javascript:
$('li a').on('click', function (e) {
e.preventDefault();
$('button span:first').text($(this).text());
});
See JSFiddle
EDIT: Another Alternative
Based on a comment you made in another answer about loading the content on page refresh, you can take advantage of the 'hash' part of the page address. Therefore
HTML:
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span>Content</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Speed 1</li>
<li>Speed 2</li>
<li>Speed 3</li>
<li>Speed 4</li>
<li>Speed 5</li>
</ul>
</div>
Javascript:
$(window).bind('hashchange', onChangeSelectedSpeed);
function onChangeSelectedSpeed() {
$("li a[href="+window.location.hash+"]").each(function(){
$('button span:first').text($(this).text());
});
}
//Trigger hashchange on page load (on DOM ready)
$(window).trigger('hashchange');
And here's the JSFiddle showing it work (although the page refresh won't be demonstrable there).
Related
I want to extract a specific text which is located between the <li></li> tags in the navigation bar of a html page, but the code's not consistent. The order of the navbar elements changes depending on the conditions that I'm unable to predict. The only thing that doesn't change in the code is the <li></li> tags where the text I want to extract is embedded.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Homepage</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Menu - 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Menu - 1 - Option - 1</li>
<li>Menu - 1 - Option - 1</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Menu - 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Menu - 2 - Option - 1</li>
<li>Menu - 2 - Option - 2</li>
<li role="separator" class="divider"></li>
<li>Menu - 2 - Option - 3</li>
<li>Menu - 2 - Option - 4</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Menu - 3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Menu - 3 - Option - 1</li>
<li>Menu - 3 - Option - 2</li>
</ul>
</li>
<!-- The element I need to access -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
------->[TEXT I WANT TO EXTRACT]<-------
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>My Account</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Help</li>
<li>Contact Us</li>
<li>Logout</li>
</ul>
</li>
<!-- The element I need to access -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Menu - 5<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Menu - 5 - Option - 1</li>
<li>Menu - 5 - Option - 2</li>
<li>Menu - 5 - Option - 3</li>
</ul>
</li>
</ul>
</div>
So, the following <li></li> tags of the code never changes, but its placement in the navbar changes:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
------->[TEXT I WANT TO EXTRACT]<-------
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>My Account</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Help</li>
<li>Contact Us</li>
<li>Logout</li>
</ul>
</li>
When I try to extract the text using querySelector from JavaScript, it sometimes doesn't work because the <li></li> element is no longer the fifth one in the list. Thus, the selector doesn't match:
document.querySelector('li.dropdown:nth-child(5) > a:nth-child(1)');
What would be the safest way for me to extract this text?
Maybe you can give a class to the li that you want to extract and then select that class using querySelector.
Here I am assuming you want to select the logout list element.
------->[TEXT I WANT TO EXTRACT]<-------
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>My Account</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Help</li>
<li>Contact Us</li>
<li class="logout">Logout</li> //Here I have given a class 'logout'
</ul>
</li>
Select that li element using querySelector
let text = document.querySelector('.logout').innerText;
Using the filter method to find the right element is the solution to my issue. I just check whether the children of the specified tags contain a particular text that the element I want to access has. Then, I simply extract the text like the following:
// Retrieve all children inside of the navbar
Array.from(document.querySelectorAll(".nav > li.dropdown"))
// Filter the child that contains the text
.filter((el) => el.textContent.includes("Logout"))[0]
// Extract the text from the child tag
.querySelector("a").textContent.trim();
Actually I have a slider to display my menu, this menu slide from right to left to go to next level and left to right to return, but when I clicked on "return", yes, go back but at the same time return to the actual div, below is my code.
<div class="total">
<div class="slidepanel">
<center>
<button id="sleft">«</button>
<button id="sright">»</button>
</center>
<div class="box-wrapper">
<div class="block" id ="block1">
<ul id="mm-1" class="mm-list visible">
<li><a class="mm-next" href="#" data-target="#parent-1">parent 1</a></li>
<li><a class="mm-next" href="#" data-target="#parent2">parent 2</a></li>
<li><a class="mm-next" href="#" data-target="#parent-3">parent 3</a></li>
</ul>
</div>
<div class="block" id ="block2">
<ul id="women" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i> Return Home</a></li>
<li class="menu-title"><span>title parent 1</span></li>
<li><a class="mm-next" href="#" data-target="#women-features">sub parent 1</a></li>
</ul>
<ul id="men" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i>Return Home</a></li>
<li class="menu-title"><span>title parent 2</span></li>
<li><a class="mm-next" href="#" data-target="#men-features">sub parent 2</a></li>
</ul>
<ul id="hilfiger" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i>Return Home</a></li>
<li>title parent 3</li>
<li>Hombre</li>
</ul>
</div>
<div class="block" id ="block3">
<!-- women -->
<ul id="women-features" class="mm-list subCat-Mobile mm-listView">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#women">
<i class="glyphicon glyphicon-triangle-left"></i>Return previous parent</a></li>
<li class="menu-title"><span>title subcat 1</span></li>
<li>subcat 1</li>
<li>subcat 2</li>
</ul>
<!-- men -->
<ul id="men-features" class="mm-list subCat-Mobile mm-listView">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#men">
<i class="glyphicon glyphicon-triangle-left"></i>Return previous parent</a></li>
<li class="menu-title"><span>title subcat 2</span></li>
<li>subcat 1</li>
</ul>
</div>
</div>
</div>
</div>
my script is the next.
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
$(target).show();
return false;
});
$(document).ready(function() {
var cur = 1;
var max = $(".box-wrapper div").length;
$("#sright, li.backMenu a.mm-next.icon").click(function(){
if (cur == 1 && cur < max)
return false;
cur--;
$(".block").animate({"left": "+=24.9%"}, "slow");
});
$("#sleft, li a.mm-next").click(function(){
if (cur+1 > max)
return false;
cur++;
$(".block").animate({"left": "-=24.9%"}, "slow");
});
});
How can I prevent hide/show the container the same container? you can check the issue when you clicked on the option "return"?
here is my fiddle
If I understand your question correctly, why not just change the class names of your 'Return Home' options to something like mm-previous instead of mm-next? Then you can do the following:
$("#sright, li.backMenu a.mm-previous.icon").click(function(){
$(".block").animate({"left": "+=24.9%"}, "slow")
})
$("#sleft, li a.mm-next").click(function(){
$(".block").animate({"left": "-=24.9%"}, "slow")
})
Fiddle here.
The reason why it is going both ways for you, is that your selections trigger in both cases. So you need to setup a naming convention that helps you distinguish elements better.
I have this piece of code of dropdown,
like this there are more than 1 dropdown,
from which i want to get the name of each drop down and its selected value
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Front-Desk<span class="caret"></span></button>
<ul class="dropdown-menu">
<li> 0</li>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> Empty Values</li>
</ul>
</div>
for example: for the above code angularjs should return me 'Front-Desk' with its selected value '2'(say).
If there is solution from JQuery then also i would really appreciate the help.
I think I understood what you want, so your html code should be like below:
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" ng-click="name='Back-Desk'">Back-Desk<span class="caret"></span></button>
<ul class="dropdown-menu ">
<li ng-click="getValue(0)"><a><span> 0</span></a></li>
<li ng-click="getValue(1)"><a><span> 1</span></a></li>
<li ng-click="getValue(2)"><a><span> 2</span></a></li>
<li ng-click="getValue(3)"><a><span> 3</span></a></li>
<li ng-click="getValue('Empty Values')"><a><span> Empty Values</span></a></li>
</ul>
</div>
and your controller should contain this function
$scope.getValue = function(value) {
console.log("this is value:",$scope.name, value);
}
Hello I think you are new in angular btw:
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Front-Desk<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><span ng-model="value"> 0</span></li>
<li><span ng-model="value"> 1</span></li>
<li><span ng-model="value"> 2</span></li>
<li><span ng-model="value"> 3</span></li>
<li><span ng-model="value"> Empty Values</span></li>
</ul>
</div>
In controller you have to declare a variable "$scope.value" in which your selected value will come.
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>
Can anybody suggest what I am missing in below html to add submenu to bootstrap dropdown?
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li class="dropdown-submenu">
e
<ul class="dropdown-menu">
<li><a ui-sref="e1">e1 (sub of e)</a></li>
</ul>
</li>
</ul>
</div>
EDIT 1
Added plunker
Because uibDropDown directive restricted to attribute.
You should write
<ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button">