All,

Need your help, I would appreciate, your help!

1.      I’m hiding some records on page load using jquery, teh result is
displayed under <ul> html tag
2.      On page loads, I’m calling jquery to show only first 3 records and
hide rest of them.
3.      This is working fine in all browsers
4.      The issue is, hide jquery code is also hiding other html tags like
div. I have hyperlinks, in first the result, when user clicks on hyper
link then it should popup a div tag. But it’s not doing in IE but
works in other browsers.

Here is my jquery code.

(function($) {
        $.fn.collapsorz = function(options) {

                // default settings
                var defaults = {
                        toggle: "> *", // elements inside the object to toggle
                        minimum: 4, // number to show in collapsed form
                        showText: "More...", // text for the expand link
                        hideText: "Less...", // text for the collapse link
                        linkLocation: "after", // use "after" or "before" to 
determine
where link displays
                        defaultState: "collapsed", // use "collapsed" or 
"expanded" to show
or hide items by default
                        wrapLink: '' // specify HTML code to wrap around the 
link
                };

        var options = $.extend(defaults, options);
        return this.each(function() {

        var toggleSize =  $(options.toggle, this).length;
        var optMin = options.minimum;

        //Well, I don't know why the toogleSize is different for
different
        //browsers(belowe code is easy fix, decrement the toggle size
for mozilla and other, it's hack but it works fine)

        if(!$.browser.msie)
        {
                  toggleSize = toggleSize - 1;
                  optMin =  optMin + 2 ;
        }

       // only execute if there are more than minimum items
           if(toggleSize > optMin) {

                // setup variables
                                var $obj = $(this);
                                var $targets = $(options.toggle, this);

                                                                //
hide the items if necessary
                                if(options.defaultState == "collapsed")
                                                                {
                                        
$targets.filter(":gt("+(optMin-1)+")").hide;
                                }

                                // append/prepend the toggle link to the object
                                var $toggler = $('<a href="#" 
class="toggler"></a>');

                                if(options.linkLocation == "before") {
                                        $obj.before($toggler);
                                }
                                else {
                                        $obj.after($toggler);
                                }

                                if(options.wrapLink) {
                                        $toggler.wrap(options.wrapLink);
                                }

                // set data, link class, and link text
                                if(options.defaultState == "expanded")
                {
                                        $obj.data("status", "expanded");
                                        $toggler.addClass("expanded");
                                        $toggler.html(options.hideText);
                                }
                                else
                {
                                        $obj.data("status", "collapsed");
                                        $toggler.addClass("collapsed");
                                        $toggler.html(options.showText);
                                }

                // click actions
                                $toggler.click(function() {
                                        if($obj.data("status") == "collapsed") {
                                                
$targets.filter(":hidden").show();
                                                $toggler.html(options.hideText);
                                                $obj.data("status", "expanded");
                                        }
                                        else if($obj.data("status") == 
"expanded") {
                                                
$targets.filter(":gt("+(optMin-1)+")").hide();
                                                $toggler.html(options.showText);
                                                $obj.data("status", 
"collapsed");
                        }
                                        
$(this).toggleClass("collapsed").toggleClass("expanded");
                                        return false;
                                });
                        }
                });
        }
})(jQuery);


My html code -

when user clicks on hyper link, then it should popup a below div tag

 <ul id="module-full-text-list" class="get-full-text collapsorz">
         <a href="javascript:showOrderCart(31198)" id="ocl_31198" >
Item 1</a>
         <a href="javascript:showOrderCart(31198)" id="ocl_31198" >
Item 2</a>
         <a href="javascript:showOrderCart(31198)" id="ocl_31198" >
Item 3</a>
</ul>

<div class="subsection infobubble" style="width:450px; display:none;"
id="ordercartdiv">
        <input type="hidden" id="article_id" value="0"/>
        <table class="results" border="0" cellpadding="0"
cellspacing="0" width="100%" style="width:100%">
            <colgroup class="border"><col width="90%"></colgroup>
            <colgroup class=""><col width="5%"></colgroup>
            <colgroup class=""><col width="5%"></colgroup>

            <tr>
                <th class="selected" align="center"><a>Request print
version of this publication</a></th>
                <th class="selected">&nbsp;</th>
                <th class="selected"><a style="cursor: pointer;"
onclick="resetForm();"><img src="/images/common/
popup_related_close.png" alt="Close" width="12" height="11"
border="0" /></a></th>
            </tr>
            <tr>
                <td><b><c:out value="${requestScope.productName}"/
><span id="article_title"></span></b>
                    <c:if test="${!empty requestScope.AUTHORS}">
                        <br/>By:&nbsp;&nbsp;<c:forEach items="$
{requestScope.AUTHORS}" var="author" varStatus ="authorStatus"><c:if
test="${authorStatus.count > 1 }"><c:choose><c:when test="$
{authorStatus.last && (author['NAME'] != 'editors') && (author
['NAME'] !='editor') && (author['NAME']!='et.al') }">&nbsp;and&nbsp;</
c:when><c:when test="${not authorStatus.first}">&#44; </c:when></
c:choose></c:if><c:choose><c:when test="${author['NAME'] eq
'editors'}">editors</c:when><c:when test="${author['NAME'] eq
'editor'}">editor</c:when><c:when test="${author['NAME'] eq
'et.al'}">et. al.</c:when><c:otherwise><span
class="upperCaseFont"><c:out value="${author['NAME']}"
escapeXml="false" /></span></c:otherwise></c:choose></c:forEach>
                    </c:if>
                    <c:if test="${!empty requestScope.product
['JOURNALTITLE']}">
                        <br/>Published In:&nbsp;&nbsp;<c:out value="$
{requestScope.product['JOURNALTITLE']}" escapeXml="false"/><c:if
test="${!empty requestScope.product['JOURNALVOLUME']}">, <span
style="white-space : nowrap;"><c:out value="${requestScope.product
['JOURNALVOLUME']}" escapeXml="false"/><c:if test="${!empty
requestScope.product['JOURNALNUMBER']}">(<c:out value="$
{requestScope.product['JOURNALNUMBER']}" escapeXml="false"/>)</
c:if><c:if test="${!empty requestScope.product['PAGESTART']}">, pp.
<c:out value="${requestScope.product['PAGESTART']}" escapeXml="false"/
><c:if test="${!empty requestScope.product['PAGEEND']}"><c:if test="${!
empty requestScope.product['PAGESTART']}">-</c:if><c:out value="$
{requestScope.product['PAGEEND']}" escapeXml="false"/></c:if></c:if></
c:if></span>
                    </c:if>
                </td>
                <td colspan="2">Quantity<br/><input name="<
%=OrderBean.PREFIX%><c:out value="${requestScope.product
['PRODUCTID']}" />" type="text" size="1" maxlength="3"
id="ord_quantity" value="1"></td>
            </tr>
        </table>
    </div>

--

You received this message because you are subscribed to the Google Groups 
"jQuery Development" group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to 
jquery-dev+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/jquery-dev?hl=.


Reply via email to