jQuery Forum

Would you show us some of the code? both, html and js if you have it\can share it.

Hi, thanks for the reply mate,

This is my JS,

<script type="text/javascript">
function display()
{
   
     assetName = '<%=request.getParameter("assetName")%>';
     paramName=$('#dropDownId').val();
    // var newdiv = document.createElement('div');   
     var icons=document.getElementById("divId").innerHTML;
    parameterManager.getPossibleValuesForParam(assetName,paramName,null,function(data)   
    {
        document.getElementById("placeHolder").innerHTML="";
        var tempStr="<div><table>";
         for (var i = 0; i < data.length; i++)
            {
                   
                tempStr = tempStr+"<div style='margin-left:5px; margin-right:5px;padding: 5px 5px 5px 0px;width:auto;clear:both;'><div style='width:30px; float:left;';</div></div><tr><td>Choose Icon for "+ data[i]+"</td><td>"+icons+"</td></tr>";
                   
            }
         alert(icons);
         document.getElementById("placeHolder").innerHTML=tempStr+"</table></div>";
        // document.getElementById("divForPI").appendChild(newdiv1);
    });
}

 $(document).ready(function()
        {
            $(".dropdownarrowIcon").click(function()
                    {
                    var X=$(this).attr('id');
                   
                    if(X==1)
                    {
                    $("#dropdownStyle").hide();
                    $(this).attr('id', '0');   
                    }
                    else
                    {
                    $("#dropdownStyle").show();
                    $(this).attr('id', '1');
                    }
                    });

                    //Mouseup textarea false
                    $("#dropdownStyle").mouseup(function()
                    {
                    return false;
                    });
                    $(".dropdownarrowIcon").mouseup(function()
                    {
                    return false;
                    });


                    //Textarea without editing.
                    $(document).mouseup(function()
                    {
                    $("#dropdownStyle").hide();
                    $(".dropdownarrowIcon").attr('id', '');
                    });
                   
           
        $('table img').click(function()
        {
        $(this).each(function ()
        {
        var srcImgs = $(this).attr('src');
        $('a.dropdownarrowIcon img').attr('src', srcImgs);
        $("#dropdownStyle").hide();
        });  
        });
        });
       
</script>

Here, I have called the label names dynamically, and each label should have that dropdown arrow as shown in first post.

HTML,

<div id="divId">
   
    <a class="dropdownarrowIcon"><img src="images/assets/arrow.png" /></a>
     
    <div id="dropdownStyle" style="display: none;">
               
    <table>
        <tr>
            <td><img width="16px" height="16px" src="images/assets/1.gif"/></td>
                   
            <td><img width="16px" height="16px" src="images/assets/2.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/3.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/4.gif" /></td>
                   
            <td><img width="16px" height="16px" src="images/assets/21.gif" /></td>
 
        </tr>
    </table>

     <table>
        <tr>
            <td><img width="16px" height="16px" src="images/assets/5.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/6.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/7.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/8.gif" /></td>
           
            <td><img width="16px" height="16px" src="images/assets/22.gif"  /></td>
   
        </tr>
    </table>
   
    <table>
        <tr>
            <td><img width="16px" height="16px" src="images/assets/9.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/10.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/11.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/12.gif" /></td>
           
            <td><img width="16px" height="16px" src="images/assets/23.jpg"/></td>

           
        </tr>
    </table>
    <table>
        <tr>
            <td><img width="16px" height="16px" src="images/assets/13.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/14.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/15.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/16.gif" /></td>
           
            <td><img width="16px" height="16px" src="images/assets/24.gif" /></td>

           
        </tr>
    </table>
   
    <table>
        <tr>
            <td><img width="16px" height="16px" src="images/assets/17.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/18.gif" /></td>

            <td><img width="16px" height="16px" src="images/assets/19.png" /></td>

            <td><img width="16px" height="16px" src="images/assets/20.png" /></td>
           
            <td><img width="16px" height="16px" src="images/assets/17.gif" /></td>
           
        </tr>
    </table>
    </div>
   </div>
    <div id="placeHolder"></div>


I need to show label name with arrow image as shown in first post and onclick of all the arrows, I need to show that drop down. Right now its coming(drop down) for the first arrow alone.


Advance Thanks,
Suren