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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=.
