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
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/
I'm desperate. I've followed all the advices on the others post about this problem:
I've tried to use ng-cloak or class="ng-cloak" , to add this rule to css
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
But nothing to do , the directive doesn't work.
Can someone help me? Is there an alternative to ng-cloak?
I'm developing a very big portal with liferay , the page needs a lot of time to be loader , so it is fundamental for me to use something like ng-cloak!!
Thanks
This is a page for example:
I'm using Liferay with AngularJS
<div class="navbar ng-cloak" style="display:hidden;" ng-style="loaded" ng-controller="NavBarController">
<div class="navbar-inner ng-cloak" ng-show="navbarScope.menuEpermessiRetrieved" >
<div class="container ng-cloak" style="width: auto;" ng-show="navbarScope.showNavbar" ng-cloak>
<!-- navbar per acquisitore -->
<ul class="nav ng-cloak" role="navigation" id="navigatorAcquisitore" ng-if="navbarscope.isAcquisitore">
<%-- <li role="presentation" ng-hide="${isAcquisizione}" ><a role="menuitem" tooltip="{{navbarScope.acquisizione.description}}" tabindex="-1" href="${goToAcquisizioneURL}" >{{navbarScope.acquisizione.title}} </a> </li> --%>
<li class="active ng-cloak" role="presentation" ng-if="navbarscope.isAcquisitore" ><a role="menuitem" tabindex="-1" href="${goToAcquisizioneURL}" class="ng-cloak">{{navbarScope.acquisizione.title}} </a></li>
</ul>
<a class="brand ng-cloak" id="toolTipHome" ng-if="!navbarScope.isAcquisitore" href="${goToHomeURL}">
<i class="ng-cloak glyphicon glyphicon-home" tooltip="{{navbarScope.brand.description}}" data-toggle="tooltip" data-placement="bottom" title="{{navbarScope.brand.description}}"></i>
</a>
<!-- navbar standard -->
<ul class="nav ng-cloak" role="navigation" ng-if="!navbarScope.isAcquisitore">
<ul class="nav ng-cloak" id="menuAttivita" ng-if="navbarScope.menuAttivita">
<li class="ng-cloak" role="presentation" ng-hide="${isAttivita}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.menuAttivita.description}}" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}} </a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isAttivita}"><a c role="menuitem" tooltip="{{navbarScope.menuAttivita.description}}" class="ng-cloak" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}}</a></li>
<%-- <li id="fat-menu" class="dropdown active" ng-show="${isAttivita}"> --%>
<!-- {{navbarScope.menuAttivita.title}} <b class="caret"></b> -->
<!-- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!-- <li role="presentation" ng-repeat="action in navbarScope.menuAttivita.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
<!-- area di lavoro -->
<li role="presentation" class="ng-cloak" ng-hide="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.areaDiLavoro.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" >{{navbarScope.areaDiLavoro.title}}</a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" ng-click="hideMenu()" >{{navbarScope.areaDiLavoro.title}}</a></li>
<!-- area archivio -->
<li role="presentation" class="ng-cloak" ng-hide="${isDocumenti}"><a role="menuitem" tooltip="{{navbarScope.areaArchivio.description}}" tabindex="-1" href="${goToDocumentiURL}" class="ng-cloak" >{{navbarScope.areaArchivio.title}}</a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isDocumenti}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="#" >{{navbarScope.areaArchivio.title}}</a></li>
</ul>
<!-- menu fascicolo standard -->
<ul id="navigatorStandard" class="nav ng-cloak" ng-if="navbarScope.mostraFascicoliStandard" >
<li class="dropdown ng-cloak" ng-if="!${isFascicoloStandardCreate} && !${isFascicoloStandardSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
{{navbarScope.fascicoliStandard.title}} <b class="caret ng-cloak"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation " class="ng-cloak" ng-if="navbarScope.fsCreateAllowed">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardSearchURL}" > Ricerca </a>
</li>
</ul>
</li>
<li class="dropdown active ng-cloak" ng-if="${isFascicoloStandardCreate} || ${isFascicoloStandardSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
{{navbarScope.fascicoliStandard.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && !${isFascicoloStandardCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && ${isFascicoloStandardCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="showCreaFascicoloStandard()" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed && !${isFascicoloStandardSearch}">
<a role="menuitem" tabindex="-1" href="${goToFStandardSearchURL}" class="ng-cloak" > Ricerca </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fsSearchAllowed && ${isFascicoloStandardSearch}">
<a role="menuitem" tabindex="-1" class="ng-cloak" ng-click="backToRicerca()" > Ricerca </a>
</li>
</ul>
</li>
</ul>
<!-- menu fascicoli del personale-->
<ul class="nav ng-cloak" id="navigatorPersonale" ng-if="navbarScope.mostraFascicoli">
<li class="dropdown ng-cloak" ng-if="!${isFascicoloPersonaleCreate} && !${isFascicoloPersonaleSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
{{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" ng-if="navbarScope.fpCreateAllowed" class="ng-cloak">
<a role="menuitem" tabindex="-1" class="ng-cloak" href="${goToFPersonaleCreateURL}" > Crea </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed">
<a class="ng-cloak" role="menuitem" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
</li>
</ul>
</li>
<li class="dropdown active ng-cloak" ng-if="${isFascicoloPersonaleCreate} || ${isFascicoloPersonaleSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
{{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed && !${isFascicoloPersonaleCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed && ${isFascicoloPersonaleCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="goToCrea()" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpSearchAllowed && !${isFascicoloPersonaleSearch}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed && ${isFascicoloPersonaleSearch}">
<a class="ng-cloak" role="menuitem" tabindex="-1" ng-click="goToCerca()" > Ricerca </a>
</li>
</ul>
</li>
<%-- <li role="presentation" ng-hide="${isFascicoloPersonale}" ><a role="menuitem" tooltip="{{navbarScope.fascicoliPersonale.description}}" tabindex="-1" href="${goToFascicoloPersonaleURL}" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a></li> --%>
<%-- <li id="fat-menu" class="dropdown active" ng-show="${isFascicoloPersonale}"> --%>
<!-- <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a> -->
<!-- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!-- <li role="presentation" ng-repeat="action in navbarScope.fascicoliPersonale.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
<ul class="nav pull-right ng-cloak" id="listaUffici">
<li id="fat-listaUffici-menu" class="dropdown ng-cloak" >
<a href="#" id="drop6" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ufficioSelected.nomeUnitaOrganizzativa}} " >{{navbarScope.ufficioSelected.displayName}}
<b class="caret ng-cloak" ng-show="navbarScope.listaUffici.length>1"></b></a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop6" ng-show="navbarScope.listaUffici" >
<li role="presentation" class="ng-cloak" ng-repeat="u in navbarScope.listaUffici" class="ng-cloak"><a role="menuitem" tabindex="-1" href="" ng-click="navbarScope.cambiaUfficio(u)" title="{{u.nomeUnitaOrganizzativa}}" >{{u.displayName}}</a>
</li>
</ul>
</li>
<li id="fat-listaRuoli-menu" class="dropdown ng-cloak" >
<a href="#" id="drop7" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ruoloSelected.codice}}" >{{navbarScope.ruoloSelected.codice}}
<b class="caret ng-cloak" ng-show="navbarScope.ufficioSelected.ruoli.length>1"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop7" >
<li role="presentation" ng-repeat="r in navbarScope.ufficioSelected.ruoli" class="ng-cloak" >
<a role="menuitem" class="ng-cloak" tabindex="-1" href="" ng-click="navbarScope.cambiaRuolo(r)" title="{{r.codice}}" >{{r.codice}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
There is some reason you need the "style" attribute? This style overrides the class css code and if is present it will always be "display:hidden".
As a quick&dirty option you can use ng-if to show/hide html code. Remove all ng-cloack and the style attribute and use:
<div ng-if="loadEnded"> content </div>
I used it in a portlet with liferay 6.2/angular 1.4 and it works.
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()
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 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.