This post should be to the jQuery list, not the jQuery developer list.
But... first off, an <a> element can't be the child of a <ul> element.
So you can't count on any browser doing anything correctly if you
continue to use markup like that. You should start using a validator.
--Bill
On Nov 16, 8:09 am, Veeru <vhosam...@gmail.com> wrote:
> 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"> </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: <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') }"> and </
> c:when><c:when test="${not authorStatus.first}">, </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: <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=.
