All,
I have a strange issue with jquery, I'm using jquery to hide some
results on page load.
1. I have a jsp page whihc displays 10 records under <ul> </ul> tag
2. In Jquery, I'm hiding 5 results and replace with more.. toggle
hyper link, once the user clicks on more link, then remaining records
will be displayed with less hyper link to toggle(hide 5 records)
3. This works perfectly fine. The issue is, when hide code executes,
it is hiding other html tags also, for instance, I have a hyper link
in first five records, when user clicks on that link, tyen it should
popup div tag. this is not working in IE(when I hide first five
records) but this works fine in all other browser.
here is my JQuery script
(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);
--
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=.
