The goal of this page is to show different options based on the drop down selection. The toggle is currently working as desired without the if statement in place. How can I adjust my if statement to do the correct comparison?
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/SearchInventory.css" rel="stylesheet" />
<script>
$(function () {
$(".dropdown-menu li a").click(function () {
var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());
if(selection =='Projectors') {
$('#projectorSearch').toggle();
}
});
});
</script>
<h2>Search Inventory</h2>
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="dropDownSelectItemType" data-toggle="dropdown" aria-expanded="true">
Select an Item Type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectItemType">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Projectors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Desktop Printers</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Network Printers</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Tablets</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Televisions</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Polycom Phones</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cameras</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Monitors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Leased Printers</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell Phones</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chair(ergo)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Keyboard(ergo)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Mouse(ergo)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Footrest(ergo)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Licensed Software</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Desk Phones</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="projectorSearch" id="projectorSearch">
<label>onomonpeia</label>
</div>
</div>
You don't need to go arround to find the clicked text because you already have access to HTMLAnchorElement element referenced as this
Use
var selection = $(this).text();
Instead of
var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());
The full example:
$(function () {
$(".dropdown-menu li a").click(function () {
var selection = $(this).text();
if(selection =='Projectors') {
$('#projectorSearch').toggle();
}
});
Here is a Working Sample
you did well, but missed one thing.
var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());
this line will change text of .selection. but doesn't return $(this).text()
so you have to compare $(this).text() with string, not selection.
or just redefine the selection again, like these 2 lines.
$(this).parents(".btn-group").find('.selection').text($(this).text());
var selection = $(this).text()
Related
I have 2 dropdown menu items under single parent dropdown class. But when I click dropdown action 1 then it is showing the body of dropdown menu 2 items.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<h2>Dropdown Example</h2>
<p>The <strong>toggle</strong> method toggles the dropdown.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example 1
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
<br>
<br>
<button class="btn btn-primary dropdown-toggle" id="menu2" type="button" data-toggle="dropdown">Dropdown Example 2
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div><br>
<p><strong>Note:</strong> For dropdowns, you should always include the data-toggle="dropdown" attribute. Do not rely solely on the toggle method, as it may not work as expected in all browsers.</p>
</div>
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown("toggle");
});
</script>
</body>
</html>
Here is the fiddle link: https://jsfiddle.net/ajay1008/jumpgkfc/
So I want to open their respective body dropdown-menus.
you must wrap each dropdown button in another .btn-group.
<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" open'">Dropdown Example 1
<span class="caret"></span></button>...</div>
mycode(you can copy this code):
https://jsfiddle.net/rezajafari2a/c1yw3hbv/
We are trying to code a way to click one of the vegetable selections and have it be added to a list at the side of the page
<div class="container">
<h2>
</h2>
<p></p>
<div class="dropdown">
<div id="dropdown" style="position:fixed; left:400px; top:120px;" class="main">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Vegetable
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menutype" tabindex="1" href="#">Carrots</a></li>
<li role="presentation"><a role="menuitem" tabindex="2" href="#">Tomatos</a></li>
<li role="presentation"><a role="menuitem" tabindex="3" href="#">Lettuce</a></li>
<li role="presentation"><a role="menuitem" tabindex="4" href="#">Peas</a></li>
<li role="presentation"><a role="menuitem" tabindex="5" href="#">Green Beans</a></li>
<li role="presentation"><a role="menuitem" tabindex="6" href="#">Potatoes</a></li>
<li role="presentation"><a role="menuitem" tabindex="7" href="#">Corn</a></li>
<li role="presentation" class="divider"></li>
</ul>
</div>
</div>
I would create a new function and add this to the dropdown:
onChange="OnSelectedIndexChange()"
And modify this function to your needs. Upon new selection on the dropdown, it will append the li item to your other list (ul). Maybe you need to change the attribute you want to get the text instead of the value.
//function for changed selection
function OnSelectedIndexChange()
{
document.getElementById('myListOfItems').append("<li>"+document.getElementById('dropdown').value+"</li>");
}
I have to create search engine like in this site : http://olx.co.id . it has three keywords. First is searching by Item, second is searching by City, and the third is searching by Categories. Users can search with one keywords, two keywords, and three keywords. I did't have any Idea to do this. Here is my code but I am not sure it is working well or not.
<form method="GET" action="category-grid.php">
<div class="control-group">
<input type="text" name="search_item_" class="search-field" placeholder="Searching Item ..." />
<ul class="categories-filter animate-dropdown">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >All Cities</button>
<ul class="dropdown-menu" role="menu" id="city" >
<li role="presentation"><a role="menuitem" tabindex="-1" >Jakarta</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" >Singapore</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" >Beijing</a></li>
</ul>
</li>
</ul>
<ul class="categories-filter animate-dropdown">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">All Categories</a>
<ul class="dropdown-menu" role="menu" id="category">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Car</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Motorcycle</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Property</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Industry</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Elektronic & Gadget</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sport</a></li>
</ul>
</li>
</ul>
<a class="search-button" href="<?php echo base_url();?>search" ></a>
</div>
</form>
my question is how how to get the value of category when user changes the value of city or get the value of city when user changes the value of category.
<script>
var city; var category; var item=$('search_item').val();
$('#city li').on('click', function(){
city = $(this).text();
if(category == "") window.location.assign('<?php echo base_url()?>index.php/searching/'+city);
else window.location.assign('<?php echo base_url()?>index.php/searching/'+city+'/'+category);
});
$('#category li').on('click',function(){
$category = $(this).text();
if(city == "") window.location.assign('<?php echo base_url()?>index.php/searching/'+category);
else window.location.assign('<?php echo base_url()?>index.php/searching/'+lokasi+'/'+kategori);
});
<script>
Thanks for all comments and answers
I would suggest you to use apache solr, it's a java based search engine.
I think woud work pretty good with the scenario you want.
tutorial
download
It's just my suggestion. If you like try it out.
I have been researching for a while now and could not find a solution for this nor any related question to my issue, So sorry if this was already asked before.
I'm developing a website using Twitter Bootstrap 2.3 and I have an issue with the collapsible menu component in Android (tested using Samsung Galaxy s4 with android 4.2 on Chrome latest version).
When I "uncollapse" the menu for the first time, the components works as expected, but if I collapse it, and then "uncollapse" it again, the links appear like "hidden". I can still touch them and the links work as expected. But nothing is displayed, as if they where transparent or something.
Did anybody experience an issue like this one? Any help would be appreciatted.
I have found a solution to this. It is kinda rough though.
This was my html markup:
<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;">
<ul id="headerNav" class="nav green">
<li class="active"><a class="headerLink" href="/es">El Pueblo</a></li>
<li><a class="headerLink" href="#">Cómo llegar</a></li>
<li><a class="headerLink" href="/es/noticias">Noticias</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1">
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li>
</ul>
</li>
<li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li>
<li><a class="headerLink" href="#">Contacto</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li>
</ul>
</li>
</ul>
</div>
This is the fix that worked for me:
.nav-collapse {
-webkit-transform: none !important;
z-index: 1 !important;
}
This issue was only present in Android using Chrome. On IOS the issue was not there
I have found a solution to this. It is kinda rought thouth.
This was my html markup:
<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;">
<ul id="headerNav" class="nav green">
<li class="active"><a class="headerLink" href="/es">El Pueblo</a></li>
<li><a class="headerLink" href="#">Cómo llegar</a></li>
<li><a class="headerLink" href="/es/noticias">Noticias</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1">
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li>
</ul>
</li>
<li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li>
<li><a class="headerLink" href="#">Contacto</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li>
</ul>
</li>
</ul>
</div>
This is the fix that worked for me:
.nav-collapse {
-webkit-transform: none !important;
z-index: 1 !important;
}
This issue was only present in Android using Chrome. On IOS the issue was not there
I have this code:
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<ul class="nav">
<li>Startseite</li>
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
it shoud show up like this:
but it is showing up like this in my code(i click on produkte):
this is my header in html:
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/jquery191.js"></script>
<script src="{{STATIC_URL}}js/bootstrap.min.js"></script>
why is this? can someone please help me?
thanks a lot
you have used float:left for li you need to remove it from you custom css file.