i have created a arraylist in php
It is place in a button . When i click on it opens the button, it opens all the aaraylist but there is some problem with the code the link to,the code is here.
can someone tell me where is the problem.
var Arraylist<String> = new Arraylist<String>;
The problem is that any click will immediately hide the dropdown, after which you make it visible again by toggling it.
I'm trying to edit you fiddle to try and get it to work the way you want :).
Edit: here is a fiddle that does what I think you want it to do: fiddle
The idea I got from your fiddle is that you want to toggle the menu when you click it, and if you click anywhere else, the menu is hidden by default.
This works by remembering if the item was toggled or not, if not, it'll hide by default.
var nav = $('#nav');
nav.find('ul#nav').toggle();
var emp = $(this);
$("html").click(function() {});
$(document).bind('click', function(e) {
var dd = $("ul.dropdown");
var toggled = false;
var target = $(e.target); //2
if (target.parent().is('#nav')) {
var li = target.closest('li.menu');
toggled = true;
li.find('ul.dropdown').toggle();
}
if (!toggled) {
dd.hide();
}
});
You just need to get rid of the additional hide() as you are hiding then toggling, overriding your toggle.
See this for instance with it working http://jsfiddle.net/RxJer/11/
var nav = $('#nav');
nav.find('ul#nav').toggle();
var emp = $(this);
$("html").click(function() {});
$(document).bind('click', function(e) {
var target = $(e.target); //2
var dropdown = target.parents('#nav').find('li.menu ul.dropdown');
dropdown.toggle();
});
Try this:
$(document).bind('click', function(e) {
var target = $(e.target); //2
if (target.parent().is('#nav') || target.parent().is('.menu')) {
var li = target.closest('li.menu');
var dd = li.find('ul.dropdown');
var isVis = dd.is(':visible');
$("ul.dropdown").hide();
(isVis) ? dd.hide() : dd.show();
} else {
$("ul.dropdown").hide();
}
});
OK, let's tackle all the problems with your code. I'll explain what you're doing wrong and why, and what is recommended.
First up:
Your included example code contains markup errors. You're closing one of your list items inside the nested unordered list after the nested unordered list. Minor, but yet important for valid markup. Some browsers can go nuts over these things.
The second thing I noticed was that you're using the same ID for the lists. An ID is unique to the document in order to quickly reference it in CSS and Javascript. If you intend to select more than one element in the document, use classes, that's what they're there for. You can read more about it here or here.
Depending on what intended use you have for it; to achieve the same desired result, consider using this markup instead
<div class='emp_alt'>
<div class='container'>
<div class='title'>EMP</div>
<img src="http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico">
</div>
<div class='dropdown'>Contact no.</div>
</div>
Generally speaking, it requires less processing time for the client the less elements you have. When you apply CSS to the elements it is highly recommended to select them by class or ID, not by tag name. Using tag names can take up extra processing time because the client has to do more generalized searches. You can read more about efficient CSS here.
Here's a working example with your corrected markup.
Here's a working example using the alternate markup.
I'm not sure if you're trying to accomplish a sort of tooltip behavior, in which case, this example should suit you.
The other answers rightly pointed out your main problem was that you were hiding the dropdown on click. What they didn't address was that when the user clicks on something, and your document click picks up on it, it's going to return the element that is in the front.
So, when you click on the text, the #nav element is in the front. The image however, is an element in its own, and is in front of the #nav element.
This is why you should use the proper events instead because they include everything inside the element.
As you may have noticed in my examples above, there is a faster, cleaner and better way of achieving what you want.
You should be doing something like this instead
var dropdowns = $(".dropdown");
$(".nav > li").click(function(e){
//Prevent document click event from firing
e.stopPropagation();
var this_dropdown = $(this).children("ul.dropdown");
dropdowns.not(this_dropdown).hide();
this_dropdown.toggle();
});
//Hide all dropdowns if not clicked on a list item (or container)
$(document).click(function(){
dropdowns.hide();
});
Note: if you don't want to stop propagation you can use a "sensor" instead. Basically, a sensor determines a boolean's state which is then used to determine if the document click event should do anything or not. An if statement checking the boolean's state at document click should suffice.
var dropdowns = $(".dropdown");
var sensor_state = true;
$(".nav > li").click(function(e){
var this_dropdown = $(this).children("ul.dropdown");
dropdowns.not(this_dropdown).hide();
this_dropdown.toggle();
}).mouseenter(function(){
sensor_state = false;
}).mouseleave(function(){
sensor_state = true;
});
$(document).click(function(){
if(sensor_state){
dropdowns.hide();
}
});
This relies on the markup where the nav element has a dropdown child. Here's an example using your example.
The problem here is that your markup makes this code toggle the dropdown when it itself is clicked. That's why I added a container to the earlier examples.
Hopefully, I've made at least some sense and cleared up your problem.
After your latest comments, indicating you're using jqgrid and you want a dropdown inside, I decided to create a rather thorough example of how it can be done.
I suggest you study the code and learn from it. You don't have to do exactly as I did, as long as you know how and why.
Functionality:
The dropdown container is not attached to the cell itself, but is instead positioned from the outside. This allows us to reuse the same container, instead of creating new containers for every single cell, saving us time in the process.
This is as far as writing your code I'm willing to go. The rest is up to you mate :)
I am reluctant to add more text to this post, but for completeness sake, I will add the entirety of the example code.
Code | JSFiddle Example
HTML
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css" />
<script src="http://trirand.com/blog/jqgrid/js/jquery.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.layout.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/ui.multiselect.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>
<table id="list"></table>
<div id="pager"></div>
<div id="contact_info"></div>
CSS
#contact_info{
position: absolute;
top: 0;
left: 0;
display:none;
background-color: white;
border: 1px solid gray;
padding: 5px 3px;
-moz-box-shadow: 3px 3px 4px #CCC;
-webkit-box-shadow: 3px 3px 4px #CCC;
box-shadow: 3px 3px 4px #CCC;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";
}
#list .contact{
cursor: pointer;
}
.container{
cursor: pointer;
}
td.contact:active{
background-color: #FBEC88;
}
.container .dropdown{
display: none;
}
.ui-jqgrid tr.jqgrow td{
white-space: normal;
}
/*
Style the dropdown box
*/
h2{
border-bottom: 1px solid lightgray;
}
p{
padding: 2px;
}
h2, p{
margin: 0;
}
.close_btn{
font-size: 10px;
line-height: 10px;
float: right;
text-decoration: none;
}
Javascript
//Preload the image to avoid flashes
search_img= new Image();
search_img.src = "http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico";
//The dropdown container
var contact_info = $("#contact_info");
//ID of last clicked row
var last_row;
//Sensor state determining whether document click will close the dropdown container on click
var sensor_state = true;
//Dropdown information data (base)
var dd_bp = "<img src='"+search_img.src+"'>",
dd_inf = "<h2>Contact information</h2><p>Phone: 555-12345<br/>E-mail: something@someplace.whatever<br/>P/O Box: 555555</p>"
//Data array (don't know what you use as a source, but I'll keep it simple)
//This setup allows you to send dropdown data from the server as well :)
var data_from_server = [
{id:"1",title:"Economy advisor",name:"Luke",lname:"North", contact: dd_bp, dropdown: dd_inf},
{id:"2",title:"Salesperson",name:"John",lname:"Smith",contact: dd_bp, dropdown: dd_inf},
{id:"3",title:"Economy advisor",name:"Jimmy",lname:"Hendrix",contact: dd_bp, dropdown: dd_inf},
{id:"6",title:"IT Manager",name:"Caroline",lname:"GlaDos",contact: dd_bp, dropdown: dd_inf},
{id:"5",title:"Quality Inspector",name:"Paul",lname:"Shoreman",contact: dd_bp, dropdown: dd_inf},
{id:"4",title:"Quality Inspector",name:"Liza",lname:"Ingridge",contact: dd_bp, dropdown: dd_inf},
{id:"8",title:"Distribution manager",name:"Elisabeth",lname:"Welman",contact: dd_bp, dropdown: dd_inf},
{id:"10",title:"Quality Inspector",name:"John",lname:"Johansson",contact: dd_bp, dropdown: dd_inf},
{id:"11",title:"Economy advisor",name:"Tommy",lname:"the Knuckle",contact: dd_bp, dropdown: dd_inf},
{id:"9",title:"Manufacturer",name:"Rosa",lname:"Minx",contact: dd_bp, dropdown: dd_inf}
];
//Adds the content to and repositions the dropdown container to the current row cell
function show_contact_info(rowid){
var row = $("#"+rowid),
contact_cell = $("td.contact", row),
dropdown_content = $("td.dropdown", row).html();
//Add the content
contact_info.html(dropdown_content).append("<a class='close_btn' href='#'>close</a>");
//Add a close button event
$(".close_btn").on("click", function(e){
e.preventDefault();
contact_info.hide();
});
//Position the contact info box
contact_info.css({
//The last calculations will center the container
left: contact_cell.offset().left - contact_info.outerWidth()/2 + contact_cell.outerWidth()/2,
//The last calculation will position the container below the cell, replace it with
// -contact_info.outerHeight() to position it above the cell
top: contact_cell.offset().top + contact_cell.outerHeight(),
});
contact_info.show();
}
function sensor_enter(){sensor_state = false;}
function sensor_leave(){sensor_state = true;}
function add_sensor(element){
element
.on("mouseenter", sensor_enter)
.on("mouseleave", sensor_leave);
}
//Setup jqgrid
$("#list").jqGrid({
datatype: "local",
width: 600,
colNames:['EID', 'Title','First name', 'Last name', 'Contact', "Dropdown"],
colModel:[
{name:'id',index:'id', width:20, sorttype:"int"},
{name:'title',index:'title', width:90},
{name:'name',index:'name', width:50, align:"left"},
{name:'lname',index:'lname', width:50, align:"left"},
{name:'contact',index:'contact', width:25, align:"center", classes:'contact'},
{name:'dropdown', index:'dropdown', hidden:true, classes:'dropdown'}
],
rowNum:10,
rowList:[5,10,15],
pager: '#pager',
viewrecords: true,
caption:"Employees",
onSelectRow: function(rowid, status, e){
var row = $("#"+rowid)
//"Hide" selection so that cell selection looks "cooler" :)
row.attr("class", "ui-widget-content jqgrow ui-row-ltr ui-state-hover");
},
onCellSelect: function(rowid, iCol, cellcontent, e){
if(iCol == 4){
if(last_row == rowid){
if(contact_info.is(":hidden")){
show_contact_info(rowid);
}else{
contact_info.hide();
}
}else{
show_contact_info(rowid);
}
last_row = rowid;
}
},
idPrefix: "emp_",
gridComplete: function(){
//Because the content is dynamic, we need to add it after the grid has finished
//This should be done for server generated content, ie the loadComplete event for server requests
add_sensor($("tr td.contact"));
}
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
for(var i=0;i<=data_from_server.length;i++){
$("#list").jqGrid('addRowData',i+1,data_from_server[i]);
}
//Sensor for the dropdown container
add_sensor($("#contact_info"));
//Hide contact info on document click
$(document).click(function(){
if(sensor_state){
contact_info.hide();
}
});
Here is what it should look like
Here are all the references
return false vs e.stopPropagation();.click.children.not
