using jixedbar as toolbar menu

[Heriyanto Binduni]

hi, i've jixedbar code like below:

<div id="main-bar">
<ul>
<li title="Home"><a href="http://localhost/">
<img src="/Content/images/icons/home.png" alt="" /
></a></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="View"><a href="#">
<img src="/Content/images/icons/network.png"
alt="View" /></a>
<ul>
<li title="View Chart"><a href="#"
id="bChartColumn">
<img src="/Content/images/icons/
chart_column.png" alt="" />&nbsp;&nbsp;&nbsp;Chart Column</a></li>
<li title="View Chart Line"><a href="#"
id="bChartLine">
<img src="/Content/images/icons/
chart_line.png" alt="" />&nbsp;&nbsp;&nbsp;Chart Line</a></li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></
span>
<div class="text-container" id="idx-timeserver"
title="Time Server">
&nbsp;</div>
<span class="jx-separator-right"></span>
</div>
</div>

it suppose to response on some click event when user click
bChartColumn base on code below:

jQuery('#bChartColumn').click(function () {
jQuery("#chartColumnDlg").dialog('open');
return false;
});

but nothing happen when user click the button. could you tell me
what's wrong or should i edit the src jixedbar to make it work?

the others, as you can see on my jixedbar code above, there is one
text, idx-timeserver with title Time Server.
could you tell me how can i have jixedbar to show tooltip Time Server
just like standar button tooltip on jixedbar? right now if user hover
idx-timeserver it just showing native browser tooltip, not jixedbar
tooltip.

thanks for your great work.

regards,
heri

[rye]

Hi Heri,

Thanks for that.

1. For the click event issue, assuming you're using the latest of
jquery-UI stable release (1.8.4), please try using this code:

<!-- (initially) hide DIV element and move the ID attribute on the
parent LI element, for A element to inherit the click event -->
<div id="chartColumnDlg" style="display:none;">The quick brown fox
jumps over the lazy dog.</div>

/* use "$" selector instead of "jQuery" selector */
$('#bChartColumn').click(function () {
$("#chartColumnDlg").dialog(); /* no need for "open" parameter */
return false;
});

Note: I've found an issue with jixedbar's click event while re-
creating your problem. The jixedbar's click event handler continues
with the HREF attribute even with a custom click event using jquery.
I'll look into possible solutions for this issue.

2. Showing tooltip on text container.

I'm sorry but as of now there's still no support for tooltip under
text container. I'll look into it and see if there's a need to add it.
But what I am thinking of adding is a "Hover or a popup container",
similar to a tooltip but a more flexible one that will be triggered by
a click or a hover event. (Something similar to this:
http://code.google.com/p/jixedbar/issues/detail?id=26)

Thank you for using jixedbar, cheers!

Ryan

--------------------------------xxx--------------------------------

[heriyanto binduni]

hi rye,
for the issue no 1, i can't still make it to work. for the work around, i can use something like this on LI element:

<a href="#" onclick="$('#chartColumnDlg').dialog(); return false;">

 if you have any solution for this issue it would be great. also make the button dropdown to optional close after user click the link would be a good too.

for issue no 2, i will do as your suggestion later.

anyway thanks for the great work. greeting from indonesia.

regards,
heri

[heriyanto binduni]

for the issue no 2, i can make it work by modified the code as below:

$("p > span", obj).hover(
                function () { // hover in method event
                    var elemID = $(this).attr("id"); // get ID (w/ or w/o ID, get it anyway)                   
                    var barTooltipID = elemID + "jx-ttip-id"; // set a tooltip ID
                    var tooltipTitle = $(this).attr("title");
           
                    if (tooltipTitle == "") { // if no 'title' attribute then try 'alt' attribute
                        tooltipTitle = $(this).attr("alt"); // this prevents IE from showing its own tooltip
                    }
                   
                    if (tooltipTitle != "") { // show a tooltip if it's not empty
                        // create tooltip wrapper; fix IE6's float double-margin bug
                        barTooltipWrapperID = barTooltipID + "_wrapper";
                        $("<div />").attr("id", barTooltipWrapperID).appendTo("#jx-ttip-con-id");
                        // create tooltip div element and put it inside the wrapper
                        $("<div />").attr("id", barTooltipID).appendTo("#" + barTooltipWrapperID);                       
                       
                        // tooltip default style
                        $("#" + barTooltipID).css({
                            "float": "left"
                        });
                       
                        // theme for tooltip (theme)
                        if ((defaults.showOnTop) && !($.browser.msie && ie6)) { // IE6 workaround; Don't add tooltip pointer if IE6
                            $("<div />").addClass("jx-tool-point-dir-up").appendTo("#" + barTooltipID);
                        }
                            $("<div />").html(tooltipTitle).addClass("jx-bar-button-tooltip").appendTo("#" + barTooltipID);
                           
                        if ((!defaults.showOnTop) && !($.browser.msie && ie6)) { // IE6 workaround; Don't add tooltip pointer if IE6                           
                            $("<div />").addClass("jx-tool-point-dir-down").appendTo("#" + barTooltipID);
                        }
                       
                        // fix tooltip wrapper relative to the associated button
                        lft_pad = parseInt($(this).css("padding-left"));
                        $("#" + barTooltipWrapperID).css({
                            "margin-left": ($(this).offset().left - ($("#" + barTooltipID).width() / 2)) + ($(this).width()/2) + lft_pad // calculate left margin
                        });                                               
                       
                    }
                },
                function () { // hover out method event
                    var elemID = $(this).attr("id"); // get ID (whether there is an ID or none)                   
                    var barTooltipID = elemID + "jx-ttip-id"; // set a tooltip ID
                    var barTooltipWrapperID = barTooltipID + "_wrapper";
                    $("#" + barTooltipID).remove(); // remove tooltip element
                    $("#" + barTooltipWrapperID).remove(); // remove tooltip's element DIV wrapper
                }
            );

regards,
heri