[jQuery] Re: Hiding Table Columns
Thanks for the tip. As far as I know, there's no way to apply a class or ID
to an entire column, so I'd have to apply it to every cell in a particular
column, right?
Next, how do I enable the visitor to invoke the hide function? For example,
if a visitor is viewing a table with ten columns, and he wants to make four
columns disappear, he would presumably have to click a link, radio button,
etc. to summon $("td").eq().hide().
Is that something else that can be done with JavaScript?
Thanks.
On Tue, May 12, 2009 at 6:19 AM, waseem sabjee wrote:
> $("#myid").hide();
> $(".myclass").hide();
> $("td").eq().hide();
> $("tr").eq().hide();
>
> note if you say
> $("tr)".eq(0).hide();
> it will completely hide the first tr that appears in your code
>
> if you say $("tr").eq(0).remove();
> it will completely remove the first tr in your code from the DOM
> meaning they won't get it back unless they refresh.
>
> On Tue, May 12, 2009 at 12:46 PM, David Blomstrom <
> david.blomst...@gmail.com> wrote:
>
>> Imagine a table with ten columns. Is there a JavaScript function that will
>> let visitors render particular columns invisible?
>> For example, I have a table that uses a jQuery function to create sortable
>> columns. However, it takes forever because the table is so big. But if
>> visitors could make some of the less important columns disappear, then it
>> might sort faster.
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Applying Table Row Sorter to Multiple Tables
Please ignore my last question; I found the thread I was looking for. I'll give the various solutions that were offered another try, and if it still doesn't work, I'll put a live example online. Thanks. On Tue, May 12, 2009 at 6:18 PM, David Blomstrom wrote: > Wow, the idea of sorting multiple tables at the same time is interesting. I > may check that out, too. > In the meantime, thanks for the tip, aquaone. I'm now able to place > multiple sortable tables on a page. > Now I just have to fix one other problem - numerals with commas don't sort > properly. I asked about that in another thread and got several responses - > none of which worked for me - but I can't find that thread now. > Is there a way to find all threads in this group I've started on the > Internet? I'm using GMail, and I have a lot of threads to sort through. > Thanks. > -- David Blomstrom Writer & Web Designer (Mac, M$ & Linux) www.geobop.org
[jQuery] Re: Applying Table Row Sorter to Multiple Tables
Wow, the idea of sorting multiple tables at the same time is interesting. I may check that out, too. In the meantime, thanks for the tip, aquaone. I'm now able to place multiple sortable tables on a page. Now I just have to fix one other problem - numerals with commas don't sort properly. I asked about that in another thread and got several responses - none of which worked for me - but I can't find that thread now. Is there a way to find all threads in this group I've started on the Internet? I'm using GMail, and I have a lot of threads to sort through. Thanks.
[jQuery] Hiding Table Columns
Imagine a table with ten columns. Is there a JavaScript function that will let visitors render particular columns invisible? For example, I have a table that uses a jQuery function to create sortable columns. However, it takes forever because the table is so big. But if visitors could make some of the less important columns disappear, then it might sort faster. -- David Blomstrom Writer & Web Designer (Mac, M$ & Linux) www.geobop.org
[jQuery] Re: tablesorter.js vs Numerals with Commas
Sorry for the late response; I posted three questions regardingthe
tablesorter/zebra stripes functions, but I thought they hadn't been posted
on this forum.
Anyway, thanks for the tip, but the first one didn't work for me, and I
can't figure out how to implement the second. Can you show me how to insert
the code within my code? Thanks.
echo '
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: [\'zebra\']} );
$("#triggerMS").click(function(){
$("#menuMS").show();
return false;
});
$("#menuMS").click( function(){
$("#menuMS").hide();
return true;
});
$("#triggerReg").click(function(){
$("#menuReg").show();
return false;
});
$("#menuReg").click( function(){
$("#menuReg").hide();
return true;
});
$("#triggerKids").click(function(){
$("#menuKids").show();
return false;
});
$("#menuKids").click( function(){
$("#menuKids").hide();
return true;
});
$("#triggerLinks").click(function(){
$("#menuLinks").show();
return false;
});
$("#menuLinks").click( function(){
$("#menuLinks").hide();
return true;
});
$("#triggerBooks").click(function(){
$("#menuBooks").show();
return false;
});
$("#menuBooks").click( function(){
$("#menuBooks").hide();
return true;
});
}
);
';
On Thu, Apr 30, 2009 at 1:54 PM, aquaone wrote:
> There are two simple ways of fixing this: having a hidden span or similar
> element appearing within your td prior to the value or better to define your
> own parser.
>
> e.g.
> $.tablesorter.addParser({
> id: "commaNum",
> is: function(s) {
> return /^[\d-]?[\d,]*(\.\d+)?$/.test(s);
> },
> format: function(s) {
> return s.replace(/,/g,'');
> },
> type: 'numeric'
> });
>
> aquaone
> (yes, you could use a more precise regex...)
>
>
> On Wed, Apr 29, 2009 at 20:41, David Blomstrom
> wrote:
>
>> I'm using jQuery's tablesorter.js to create tables with sortable rows. It
>> works fine on both text and numerals - but only if they have no commas. For
>> example, the following column would sort properly:
>> 2
>> 18
>> 401
>> 3
>> 15
>> But this column...
>> 1,200
>> 408
>> 26,048
>> ...would sort like this:
>> 1,200
>> 26,048
>> 408
>> Does anyone know how to fix this?
>> I'm using PHP and MySQL to derive my data from a database table, using the
>> following code:
>> $Area = number_format($row["Area"]);
>> Then I simply insert $Area in a dynamic table cell, like so...
>> $Area
>> I posted my JavaScript links below. Thanks for any tips!
>> * * * * *
>> http://MySite/js/jquery-1.3.1.min.js"</a>;
>> type="text/javascript">
>> http://MySite/js/tablesorter/jquery.tablesorter.js"</a>;
>> type="text/javascript">
>>
>> $(document).ready(function()
>> {
>> $("#myTable").tablesorter({ widgets: ['zebra']} );
>>
>> $("#triggerMS").click(function(){
>> $("#menuMS").show();
>> return false;
>> });
>> $("#menuMS").click( function(){
>> $("#menuMS").hide();
>> return true;
>> });
>>
>> $("#triggerReg").click(function(){
>> $("#menuReg").show();
>> return false;
>> });
>> $("#menuReg").click( function(){
>> $("#menuReg").hide();
>> return true;
>> });
>>
>> $("#triggerKids").click(function(){
>> $("#menuKids").show();
>> return false;
>> });
>> $("#menuKids").click( function(){
>> $("#menuKids").hide();
>> return true;
>> });
>>
>> $("#triggerLinks").click(function(){
>> $("#menuLinks").show();
>> return false;
>> });
>> $("#menuLinks").click( function(){
>> $("#menuLinks").hide();
>> return true;
>> });
>>
>> $("#triggerBooks").click(function(){
>> $("#menuBooks").show();
>> return false;
>> });
>> $("#menuBooks").click( function(){
>> $("#menuBooks").hide();
>> return true;
>> });
>>
>> }
>> );
>>
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Applying Table Row Sorter to Multiple Tables
Sorry it took me so long to reply. I thought my posts weren't showing up on
this forum.
Anyway, thanks for the tip. I understand it now. Unfortunately, it isn't
working for some reason.
Is there a way to instead designate multiple ID's - like myTable, myTable2
and myTable3?
Thanks.
On Thu, Apr 30, 2009 at 1:41 PM, aquaone wrote:
> IDs are unique for a document. A document containing multiple elements with
> the same ID is invalid. Use a class instead and invoke tablesorter on all
> tables with that class.
>
> e.g.
>
> ...
>
>
> and
>
> $("table.tablesorter").tablesorter({ widgets: ['zebra'] });
>
>
>
> On Wed, Apr 29, 2009 at 20:35, David Blomstrom
> wrote:
>
>> I'm using jQuery's tablesorter.js to create tables with sortable rows, as
>> applied to tables with the ID "myTable."
>> I just wondered if there's a way to make it work with multiple tables on a
>> single page. I created two tables and gave each of them the ID myTable, but
>> only the first table worked. I can't remember if the specific ID is required
>> for my Zebra widget (alternate row colors), too, or not, but I would guess
>> it is.
>> I posted my JS links below, to show you my setup. Thanks for any tips.
>> * * * * *
>> http://MySite/js/jquery-1.3.1.min.js"</a>;
>> type="text/javascript">
>> http://MySite/js/tablesorter/jquery.tablesorter.js"</a>;
>> type="text/javascript">
>>
>> $(document).ready(function()
>> {
>> $("#myTable").tablesorter({ widgets: ['zebra']} );
>>
>> $("#triggerMS").click(function(){
>> $("#menuMS").show();
>> return false;
>> });
>> $("#menuMS").click( function(){
>> $("#menuMS").hide();
>> return true;
>> });
>>
>> $("#triggerReg").click(function(){
>> $("#menuReg").show();
>> return false;
>> });
>> $("#menuReg").click( function(){
>> $("#menuReg").hide();
>> return true;
>> });
>>
>> $("#triggerKids").click(function(){
>> $("#menuKids").show();
>> return false;
>> });
>> $("#menuKids").click( function(){
>> $("#menuKids").hide();
>> return true;
>> });
>>
>> $("#triggerLinks").click(function(){
>> $("#menuLinks").show();
>> return false;
>> });
>> $("#menuLinks").click( function(){
>> $("#menuLinks").hide();
>> return true;
>> });
>>
>> $("#triggerBooks").click(function(){
>> $("#menuBooks").show();
>> return false;
>> });
>> $("#menuBooks").click( function(){
>> $("#menuBooks").hide();
>> return true;
>> });
>>
>> }
>> );
>>
>>
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] tablesorter.js vs Numerals with Commas
I'm using jQuery's tablesorter.js to create tables with sortable rows. It
works fine on both text and numerals - but only if they have no commas. For
example, the following column would sort properly:
2
18
401
3
15
But this column...
1,200
408
26,048
...would sort like this:
1,200
26,048
408
Does anyone know how to fix this?
I'm using PHP and MySQL to derive my data from a database table, using the
following code:
$Area = number_format($row["Area"]);
Then I simply insert $Area in a dynamic table cell, like so...
$Area
I posted my JavaScript links below. Thanks for any tips!
* * * * *
http://MySite/js/jquery-1.3.1.min.js"</a>;
type="text/javascript">
http://MySite/js/tablesorter/jquery.tablesorter.js"</a>;
type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: ['zebra']} );
$("#triggerMS").click(function(){
$("#menuMS").show();
return false;
});
$("#menuMS").click( function(){
$("#menuMS").hide();
return true;
});
$("#triggerReg").click(function(){
$("#menuReg").show();
return false;
});
$("#menuReg").click( function(){
$("#menuReg").hide();
return true;
});
$("#triggerKids").click(function(){
$("#menuKids").show();
return false;
});
$("#menuKids").click( function(){
$("#menuKids").hide();
return true;
});
$("#triggerLinks").click(function(){
$("#menuLinks").show();
return false;
});
$("#menuLinks").click( function(){
$("#menuLinks").hide();
return true;
});
$("#triggerBooks").click(function(){
$("#menuBooks").show();
return false;
});
$("#menuBooks").click( function(){
$("#menuBooks").hide();
return true;
});
}
);
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Applying Table Row Sorter to Multiple Tables
I'm using jQuery's tablesorter.js to create tables with sortable rows, as
applied to tables with the ID "myTable."
I just wondered if there's a way to make it work with multiple tables on a
single page. I created two tables and gave each of them the ID myTable, but
only the first table worked. I can't remember if the specific ID is required
for my Zebra widget (alternate row colors), too, or not, but I would guess
it is.
I posted my JS links below, to show you my setup. Thanks for any tips.
* * * * *
http://MySite/js/jquery-1.3.1.min.js"</a>;
type="text/javascript">
http://MySite/js/tablesorter/jquery.tablesorter.js"</a>;
type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: ['zebra']} );
$("#triggerMS").click(function(){
$("#menuMS").show();
return false;
});
$("#menuMS").click( function(){
$("#menuMS").hide();
return true;
});
$("#triggerReg").click(function(){
$("#menuReg").show();
return false;
});
$("#menuReg").click( function(){
$("#menuReg").hide();
return true;
});
$("#triggerKids").click(function(){
$("#menuKids").show();
return false;
});
$("#menuKids").click( function(){
$("#menuKids").hide();
return true;
});
$("#triggerLinks").click(function(){
$("#menuLinks").show();
return false;
});
$("#menuLinks").click( function(){
$("#menuLinks").hide();
return true;
});
$("#triggerBooks").click(function(){
$("#menuBooks").show();
return false;
});
$("#menuBooks").click( function(){
$("#menuBooks").hide();
return true;
});
}
);
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Zebra (stripes) Widget vs Colgroups (CSS)
I'm using jQuery and the Zebra widget to produce alternately colored rows on
my tables. It works great but it kills my CSS colgroup functions. For
example, the following code...
...should produce a table where every cell in the first column is aqua,
every cell in the second yellow. But if my Zebra widget dictates that
alternate rows are gray and white, then EVERY cell in every row and column
is either gray and white.
Does anyone know if there's a way to reverse the relationship, so that
colgroups trump alternate row colors? It isn't absolutely critical, as I
could probably accomplish my goal by simply assigning each cell a class
(e.g. ), but I'd prefer to use colgroups for bigger tables.
I posted my JavaScript links below. Thanks.
* * * * *
http://MySite/js/jquery-1.3.1.min.js"</a>;
type="text/javascript">
http://MySite/js/tablesorter/jquery.tablesorter.js"</a>;
type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: ['zebra']} );
$("#triggerMS").click(function(){
$("#menuMS").show();
return false;
});
$("#menuMS").click( function(){
$("#menuMS").hide();
return true;
});
$("#triggerReg").click(function(){
$("#menuReg").show();
return false;
});
$("#menuReg").click( function(){
$("#menuReg").hide();
return true;
});
$("#triggerKids").click(function(){
$("#menuKids").show();
return false;
});
$("#menuKids").click( function(){
$("#menuKids").hide();
return true;
});
$("#triggerLinks").click(function(){
$("#menuLinks").show();
return false;
});
$("#menuLinks").click( function(){
$("#menuLinks").hide();
return true;
});
$("#triggerBooks").click(function(){
$("#menuBooks").show();
return false;
});
$("#menuBooks").click( function(){
$("#menuBooks").hide();
return true;
});
}
);
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Hover vs Click, etc.
Thanks, Stephen; that works beautifully.
I used the escape quotes because I'm working in PHP. However, I tried your
code without the escape quotes, and it works just fine.
I'll have ty give that close button a try, too.
Thanks again.
* * * * *
On Mon, Feb 16, 2009 at 3:36 AM, Stephan Veigl wrote:
>
> Hi David,
>
> a close button is quite simple, see:
> http://jsbin.com/ocoyo/edit
> for an example
>
> 1. Why do you escape the quotes in $(\'#triggerReg\')? Is this just a
> copy&paste error, or do you define your function in an HTML attribute?
>
> 2. The click handle does take only one callback function (in contrast
> to hover, which takes two)
>
> What exactly does not work? Do you get an error from the browser? Does
> the menu not open / not close? ...
>
> try this:
>
> $("#triggerReg").click(function(){
> $("#menuReg").show();
> return false;
> });
> $("#menuReg").click( function(){
> $("#menuReg").hide();
> return true;
> });
>
>
> by(e)
> Stephan
>
> 2009/2/16 David Blomstrom :
> > I haven't learned how to make a close button yet. I tried the second
> method,
> > but I'm doing something wrong. I combined the two scripts as follows, but
> it
> > doesn't work.
> >
> > $(\'#triggerReg\').click(function(){
> >
> > $(\'#menuReg\').show();
> > },function(){
> >
> >
> > $("#menuReg").click( function(){
> > $(this).hide();
> > return true;
> > });
> >
> > Thanks!
> >
> > * * * * *
> >
> > On Mon, Feb 16, 2009 at 1:41 AM, Stephan Veigl
> > wrote:
> >>
> >> Hi,
> >>
> >> I would add a close button (or link) to your links div and add something
> >> like:
> >>
> >> closeBtn.click( function(){
> >> $(this).parent().hide();
> >> });
> >>
> >> alternatively you can do:
> >>
> >> $("#menuReg").click( function(){
> >> $(this).hide();
> >> return true;
> >> });
> >>
> >> Than your menu is closed whenever you click somewhere within your
> >> menu. If you click on a link, the link will be followed (return true;)
> >>
> >> by(e)
> >> Stephan
> >>
> >> 2009/2/16 WebRanger :
> >> >
> >> > The following script produces a box that opens on mouseover and closes
> >> > on mouseover.
> >> >
> >> > $(\'#triggerReg\').hover(function(){
> >> >// do something on mouse over
> >> >$(\'#menuReg\').show();
> >> > },function(){
> >> >// do something on mouse out
> >> >$(\'#menuReg\').hide();
> >> > });
> >> >
> >> > It works fine for displaying brief text messages. But if you display a
> >> > column of links, it closes as soon as you try to put the cursor over a
> >> > link.
> >> >
> >> > Can someone show me how to modify this so that the menu stays open
> >> > until you manually close it again? I changed hover(function() to click
> >> > (function(), and it now opens when you click it - and it stays open.
> >> > But I can't figure out how to close it.
> >> >
> >> > I've been searching for online references that list the various
> >> > options, but I haven't found one I can understand yet.
> >> >
> >> > Thanks.
> >
> >
> >
> > --
> > David Blomstrom
> > Writer & Web Designer (Mac, M$ & Linux)
> > www.geobop.org
> >
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Hover vs Click, etc.
I haven't learned how to make a close button yet. I tried the second method,
but I'm doing something wrong. I combined the two scripts as follows, but it
doesn't work.
$(\'#triggerReg\').click(function(){
$(\'#menuReg\').show();
},function(){
$("#menuReg").click( function(){
$(this).hide();
return true;
});
Thanks!
* * * * *
On Mon, Feb 16, 2009 at 1:41 AM, Stephan Veigl wrote:
>
> Hi,
>
> I would add a close button (or link) to your links div and add something
> like:
>
> closeBtn.click( function(){
> $(this).parent().hide();
> });
>
> alternatively you can do:
>
> $("#menuReg").click( function(){
> $(this).hide();
> return true;
> });
>
> Than your menu is closed whenever you click somewhere within your
> menu. If you click on a link, the link will be followed (return true;)
>
> by(e)
> Stephan
>
> 2009/2/16 WebRanger :
> >
> > The following script produces a box that opens on mouseover and closes
> > on mouseover.
> >
> > $(\'#triggerReg\').hover(function(){
> >// do something on mouse over
> >$(\'#menuReg\').show();
> > },function(){
> >// do something on mouse out
> >$(\'#menuReg\').hide();
> > });
> >
> > It works fine for displaying brief text messages. But if you display a
> > column of links, it closes as soon as you try to put the cursor over a
> > link.
> >
> > Can someone show me how to modify this so that the menu stays open
> > until you manually close it again? I changed hover(function() to click
> > (function(), and it now opens when you click it - and it stays open.
> > But I can't figure out how to close it.
> >
> > I've been searching for online references that list the various
> > options, but I haven't found one I can understand yet.
> >
> > Thanks.
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Need help with scrambled open/shut script
I downloaded jQuery a few months ago and used it to make a simple open-shut
script. While redesigning/upgrading my websites, I messed it up. I'm not
sure if I deleted a critical file, nixed the link to a critical file or
what.
I published a simplified version of a page at
http://www.geobop.org/Test.phpThere are four open/shut scripts on the
page:
MyRegions (top center)
Microsoft notice (top right)
Links (bottom)
Books (bottom)
I think it might actually be a CSS problem, not JavaScript. When I hover my
cursor over the Microsoft banner, the page moves in response (in Opera, at
least), though the related display div doesn't open.
The MyRegions box was frozen open until I added the following styles:
.trigger {
position:relative;
cursor:pointer;
z-index:2;
}
.menu {
position:absolute;
visibility:hidden;
overflow:hidden;
z-index:1;
margin:0;
padding:4px;
background:#BF8660;
}
Now it's frozen shut.
I suspect the fix is a simple one, but I'm confused between JavaScript, CSS
and all my PHP includes. I may simply have several things in the wrong
order.
Thanks for any tips.
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Invisible Element Opens on Page Load
Perfect fix. Thanks.
On Thu, Dec 11, 2008 at 5:07 PM, Michael Geary wrote:
> It's up to you to make the #menu2 element invisible when the page loads.
>
> You *could* do this by adding this code inside your ready function, and
> outside the hover code:
>
> $('#menu2').hide();
>
> However, it would be much better to do it with CSS, to avoid the chance of
> the element being displayed temporarily before the document ready code
> executes.
>
> You could do it with this CSS rule:
>
> #menu2 { display:none; }
>
> Or with a style on the element itself:
>
> ...
>
> -Mike
>
> --
> *From:* David Blomstrom
>
> I recently modified my JQuery code to create an element that opens when
> someone mouses over it. It should be closed by default.
>
> It works, with one small problem. When you first load the page the element
> opens. It doesn't close unless you mouse over it. Is there some way to fix
> it so that the element remains closed until a user opens it?
>
> Below is my code. Thanks.
>
> * * * * *
>
> type="text/javascript">
> type="text/javascript">
>
> $(document).ready(function()
> {
> $("#myTable").tablesorter({ widgets: [\'zebra\']} );
>
> $(\'#MSFree\').hover(function(){
> // do something on mouse over
> $(\'#menu2\').show();
> },function(){
> // do something on mouse out
> $(\'#menu2\').hide();
> });
>
> }
> );
>
>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Invisible Element Opens on Page Load
Yes; I'm echoing the code in PHP.
On Thu, Dec 11, 2008 at 4:29 PM, MorningZ wrote:
>
> is there a reason you are escaping the selector strings? ie/$
> (\'#MSFree\')[\'zebra\'] etc
>
>
>
>
> David Blomstrom wrote:
> > I recently modified my JQuery code to create an element that opens when
> > someone mouses over it. It should be closed by default.
> >
> > It works, with one small problem. When you first load the page the
> element
> > opens. It doesn't close unless you mouse over it. Is there some way to
> fix
> > it so that the element remains closed until a user opens it?
> >
> > Below is my code. Thanks.
> >
> > * * * * *
> >
> > > type="text/javascript">
> > > type="text/javascript">
> >
> > $(document).ready(function()
> > {
> > $("#myTable").tablesorter({ widgets: [\'zebra\']} );
> >
> > $(\'#MSFree\').hover(function(){
> > // do something on mouse over
> > $(\'#menu2\').show();
> > },function(){
> > // do something on mouse out
> > $(\'#menu2\').hide();
> > });
> >
> > }
> > );
> >
> >
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Invisible Element Opens on Page Load
I recently modified my JQuery code to create an element that opens when
someone mouses over it. It should be closed by default.
It works, with one small problem. When you first load the page the element
opens. It doesn't close unless you mouse over it. Is there some way to fix
it so that the element remains closed until a user opens it?
Below is my code. Thanks.
* * * * *
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: [\'zebra\']} );
$(\'#MSFree\').hover(function(){
// do something on mouse over
$(\'#menu2\').show();
},function(){
// do something on mouse out
$(\'#menu2\').hide();
});
}
);
[jQuery] Re: Need Open/Shut Function
I see. Thanks.
On Wed, Dec 10, 2008 at 1:08 PM, Andy Matthews <[EMAIL PROTECTED]>wrote:
> If you're going to have the "same" code in more than one place, you might
> consider creating a function for that. Something like this maybe:
>
> function mouseExpand(source,target) {
> $('#' + source).hover(function(){
> $('#' + target).show();
> },function(){
> $('#' + target).hide();
> });
> }
>
> and you'd call it like this:
>
> mouseExpand('MSFree','menu2');
>
>
>
> andy
>
>
> --
> *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On
> Behalf Of *David Blomstrom
> *Sent:* Wednesday, December 10, 2008 2:04 PM
> *To:* jquery-en@googlegroups.com
> *Subject:* [jQuery] Re: Need Open/Shut Function
>
> Yes, it does work.
>
> I just have a couple follow up questions. When I first load the page, the
> element that's supposed to be hidden is displayed. Is there a way to modify
> it so that it doesn't display until someone mouses over the yellow "MS-Free"
> thingy?
>
> I put a working example online at http://www.geobop.org/Test.php
>
> Also, suppose I wanted to add a similar function, named Stuff, for example.
> Would I just add a separate script, as below?:
> $(\'#MSFree\').hover(function(){
> // do something on mouse over
> $(\'#menu2\').show();
> },function(){
> // do something on mouse out
> $(\'#menu2\').hide();
> });
>
> $(\'#Stuff\').hover(function(){
> // do something on mouse over
> $(\'#menu3\').show();
> },function(){
> // do something on mouse out
> $(\'#menu3\').hide();
> });
> Thanks.
> On Wed, Dec 10, 2008 at 11:39 AM, David Blomstrom <
> [EMAIL PROTECTED]> wrote:
>
>> No, it isn't working. I deleted the JavaScript that previously controlled
>> it, then I looked for any CSS styles that might have been interfering with
>> it.
>>
>> I looked at the page with the Firebug console, and it doesn't report any
>> errors. I know I'm conneced to my JQuery scripts because some JQuery table
>> sorting functions on the same page are working.
>>
>> I'll go back and take a fresh look at it in a moment.
>>
>> Thanks.
>>
>> On Wed, Dec 10, 2008 at 11:14 AM, Hector Virgen <[EMAIL PROTECTED]>wrote:
>>
>>> That looks good, did it work?
>>>
>>> -Hector
>>>
>>>
>>> On Wed, Dec 10, 2008 at 10:57 AM, David Blomstrom <
>>> [EMAIL PROTECTED]> wrote:
>>>
>>>> So should the code in my head section look something like this?:
>>>> >>> type="text/javascript">
>>>> >>> type="text/javascript">
>>>>
>>>> $(document).ready(function()
>>>> {
>>>> $("#myTable").tablesorter({ widgets: [\'zebra\']} );
>>>>
>>>>
>>>>
>>>> $(\'#MSFree\').mouseover(function()
>>>> {
>>>> $(\'#menu2\').show();
>>>> });
>>>>
>>>> $(\'#MSFree\').mouseout(function()
>>>> {
>>>> $(\'#menu2\').hide();
>>>> });
>>>>
>>>>
>>>>
>>>> }
>>>> );
>>>>
>>>>
>>>> ...or do I need to place the code you gave me in the body somehow?
>>>>
>>>> On Wed, Dec 10, 2008 at 10:51 AM, Hector Virgen <[EMAIL PROTECTED]>wrote:
>>>>
>>>>> The .show() and .hide() functions are on-demand functions -- they'll
>>>>> happen immediately when the code is called. What you need to do is observe
>>>>> the user's actions and show/hide the div based on what they are doing.
>>>>>
>>>>> For that, you can use .mouseover() and .mouseout with callback
>>>>> functions. The callback functions will be called when certain events
>>>>> happen,
>>>>> and that is where you place the .hide() and .how() code:
>>>>>
>>>>> // Untested...
>>>>> $('#MSFree').mouseover(function()
>>>>> {
>>>>> $('#menu2').show();
>>>>> });
>>>>>
>>>>> $('#MSFree').mouseout(function()
>>>>> {
>>>>> $('#menu2').hide();
>>>>> });
>&g
[jQuery] Re: Need Open/Shut Function
Yes, it does work.
I just have a couple follow up questions. When I first load the page, the
element that's supposed to be hidden is displayed. Is there a way to modify
it so that it doesn't display until someone mouses over the yellow "MS-Free"
thingy?
I put a working example online at http://www.geobop.org/Test.php
Also, suppose I wanted to add a similar function, named Stuff, for example.
Would I just add a separate script, as below?:
$(\'#MSFree\').hover(function(){
// do something on mouse over
$(\'#menu2\').show();
},function(){
// do something on mouse out
$(\'#menu2\').hide();
});
$(\'#Stuff\').hover(function(){
// do something on mouse over
$(\'#menu3\').show();
},function(){
// do something on mouse out
$(\'#menu3\').hide();
});
Thanks.
On Wed, Dec 10, 2008 at 11:39 AM, David Blomstrom <[EMAIL PROTECTED]
> wrote:
> No, it isn't working. I deleted the JavaScript that previously controlled
> it, then I looked for any CSS styles that might have been interfering with
> it.
>
> I looked at the page with the Firebug console, and it doesn't report any
> errors. I know I'm conneced to my JQuery scripts because some JQuery table
> sorting functions on the same page are working.
>
> I'll go back and take a fresh look at it in a moment.
>
> Thanks.
>
> On Wed, Dec 10, 2008 at 11:14 AM, Hector Virgen <[EMAIL PROTECTED]>wrote:
>
>> That looks good, did it work?
>>
>> -Hector
>>
>>
>> On Wed, Dec 10, 2008 at 10:57 AM, David Blomstrom <
>> [EMAIL PROTECTED]> wrote:
>>
>>> So should the code in my head section look something like this?:
>>> >> type="text/javascript">
>>> >> type="text/javascript">
>>>
>>> $(document).ready(function()
>>> {
>>> $("#myTable").tablesorter({ widgets: [\'zebra\']} );
>>>
>>>
>>>
>>> $(\'#MSFree\').mouseover(function()
>>> {
>>> $(\'#menu2\').show();
>>> });
>>>
>>> $(\'#MSFree\').mouseout(function()
>>> {
>>> $(\'#menu2\').hide();
>>> });
>>>
>>>
>>>
>>> }
>>> );
>>>
>>>
>>> ...or do I need to place the code you gave me in the body somehow?
>>>
>>> On Wed, Dec 10, 2008 at 10:51 AM, Hector Virgen <[EMAIL PROTECTED]>wrote:
>>>
>>>> The .show() and .hide() functions are on-demand functions -- they'll
>>>> happen immediately when the code is called. What you need to do is observe
>>>> the user's actions and show/hide the div based on what they are doing.
>>>>
>>>> For that, you can use .mouseover() and .mouseout with callback
>>>> functions. The callback functions will be called when certain events
>>>> happen,
>>>> and that is where you place the .hide() and .how() code:
>>>>
>>>> // Untested...
>>>> $('#MSFree').mouseover(function()
>>>> {
>>>> $('#menu2').show();
>>>> });
>>>>
>>>> $('#MSFree').mouseout(function()
>>>> {
>>>> $('#menu2').hide();
>>>> });
>>>>
>>>> -Hector
>>>>
>>>>
>>>> On Wed, Dec 10, 2008 at 10:35 AM, David Blomstrom <
>>>> [EMAIL PROTECTED]> wrote:
>>>>
>>>>> Here's a condensed version of my code...
>>>>>
>>>>> VMicrosoft-Free
>>>>>
>>>>> This website was designed
>>>>> So I would convert your code to this?:
>>>>> $('#MSFree').show();
>>>>> $('#MSFree').hide();
>>>>> Would I just add that to the JQuery code in my head section, and the
>>>>> script would then open whenever someone mouses over it?
>>>>> Thanks.
>>>>> On Wed, Dec 10, 2008 at 10:20 AM, Andy Matthews <
>>>>> [EMAIL PROTECTED]> wrote:
>>>>>
>>>>>> jQuery has built in show() / hide() methods. The syntax would look
>>>>>> something like this:
>>>>>>
>>>>>> $('#someElement').show();
>>>>>> $('#someElement').hide();
>>>>>>
>>>>>> Where someElement was a container with an ID.
>>>>>>
>>>>>>
>>>>
[jQuery] Re: Need Open/Shut Function
No, it isn't working. I deleted the JavaScript that previously controlled
it, then I looked for any CSS styles that might have been interfering with
it.
I looked at the page with the Firebug console, and it doesn't report any
errors. I know I'm conneced to my JQuery scripts because some JQuery table
sorting functions on the same page are working.
I'll go back and take a fresh look at it in a moment.
Thanks.
On Wed, Dec 10, 2008 at 11:14 AM, Hector Virgen <[EMAIL PROTECTED]> wrote:
> That looks good, did it work?
>
> -Hector
>
>
> On Wed, Dec 10, 2008 at 10:57 AM, David Blomstrom <
> [EMAIL PROTECTED]> wrote:
>
>> So should the code in my head section look something like this?:
>> > type="text/javascript">
>> > type="text/javascript">
>>
>> $(document).ready(function()
>> {
>> $("#myTable").tablesorter({ widgets: [\'zebra\']} );
>>
>>
>>
>> $(\'#MSFree\').mouseover(function()
>> {
>> $(\'#menu2\').show();
>> });
>>
>> $(\'#MSFree\').mouseout(function()
>> {
>> $(\'#menu2\').hide();
>> });
>>
>>
>>
>> }
>> );
>>
>>
>> ...or do I need to place the code you gave me in the body somehow?
>>
>> On Wed, Dec 10, 2008 at 10:51 AM, Hector Virgen <[EMAIL PROTECTED]>wrote:
>>
>>> The .show() and .hide() functions are on-demand functions -- they'll
>>> happen immediately when the code is called. What you need to do is observe
>>> the user's actions and show/hide the div based on what they are doing.
>>>
>>> For that, you can use .mouseover() and .mouseout with callback functions.
>>> The callback functions will be called when certain events happen, and that
>>> is where you place the .hide() and .how() code:
>>>
>>> // Untested...
>>> $('#MSFree').mouseover(function()
>>> {
>>> $('#menu2').show();
>>> });
>>>
>>> $('#MSFree').mouseout(function()
>>> {
>>> $('#menu2').hide();
>>> });
>>>
>>> -Hector
>>>
>>>
>>> On Wed, Dec 10, 2008 at 10:35 AM, David Blomstrom <
>>> [EMAIL PROTECTED]> wrote:
>>>
>>>> Here's a condensed version of my code...
>>>>
>>>> VMicrosoft-Free
>>>>
>>>> This website was designed
>>>> So I would convert your code to this?:
>>>> $('#MSFree').show();
>>>> $('#MSFree').hide();
>>>> Would I just add that to the JQuery code in my head section, and the
>>>> script would then open whenever someone mouses over it?
>>>> Thanks.
>>>> On Wed, Dec 10, 2008 at 10:20 AM, Andy Matthews <
>>>> [EMAIL PROTECTED]> wrote:
>>>>
>>>>> jQuery has built in show() / hide() methods. The syntax would look
>>>>> something like this:
>>>>>
>>>>> $('#someElement').show();
>>>>> $('#someElement').hide();
>>>>>
>>>>> Where someElement was a container with an ID.
>>>>>
>>>>>
>>>>> andy
>>>>>
>>>>> --
>>>>> *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED]
>>>>> *On Behalf Of *David Blomstrom
>>>>> *Sent:* Wednesday, December 10, 2008 12:11 PM
>>>>> *To:* jquery-en@googlegroups.com
>>>>> *Subject:* [jQuery] Need Open/Shut Function
>>>>>
>>>>> I've been looking for JQuery examples pages and started browsing
>>>>> through plugins, but I haven't found what I'm looking for yet, so I
>>>>> wondered
>>>>> if anyone here could make some recommendations.
>>>>>
>>>>> If you visit my web page at http://www.geosymbols.org/World/Arizona/,
>>>>> you'll see a "Microsoft-Free" box in the top right corner of the page.
>>>>> Hovering over it with your mouse causes a small display to appear.
>>>>>
>>>>> At the end of the article is a little Links/Books image with similar
>>>>> behavior (though there's currently no content to display).
>>>>>
>>>>> What JQuery function, plugin or whatever should I use to duplicate
>>>>> those functions? I'd like to be able to style it so that it looks pretty
>>>>> much as it does now.
>>>>>
>>>>> Also, on my World home page at http://www.geosymbols.org/World I have
>>>>> links to a series of JavaScript pop-up boxes with links to various
>>>>> nations.
>>>>> It's a pretty simple, straightforward JavaScsript. I just wondered if
>>>>> there
>>>>> are any JQuery functions that would somehow enhance those popups.
>>>>>
>>>>> So far I'm using a JQuery table sorter plugin and "zebra stripes"
>>>>> widget. My code looks like this:
>>>>>
>>>>> >>>> type="text/javascript">
>>>>> >>>> type="text/javascript">
>>>>>
>>>>> $(document).ready(function()
>>>>> {
>>>>> $("#myTable").tablesorter({ widgets: [\'zebra\']} );
>>>>> }
>>>>> );
>>>>>
>>>>>
>>>>> Thanks.
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> David Blomstrom
>>>> Writer & Web Designer (Mac, M$ & Linux)
>>>> www.geobop.org
>>>>
>>>
>>>
>>
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Need Open/Shut Function
So should the code in my head section look something like this?:
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: [\'zebra\']} );
$(\'#MSFree\').mouseover(function()
{
$(\'#menu2\').show();
});
$(\'#MSFree\').mouseout(function()
{
$(\'#menu2\').hide();
});
}
);
...or do I need to place the code you gave me in the body somehow?
On Wed, Dec 10, 2008 at 10:51 AM, Hector Virgen <[EMAIL PROTECTED]> wrote:
> The .show() and .hide() functions are on-demand functions -- they'll happen
> immediately when the code is called. What you need to do is observe the
> user's actions and show/hide the div based on what they are doing.
>
> For that, you can use .mouseover() and .mouseout with callback functions.
> The callback functions will be called when certain events happen, and that
> is where you place the .hide() and .how() code:
>
> // Untested...
> $('#MSFree').mouseover(function()
> {
> $('#menu2').show();
> });
>
> $('#MSFree').mouseout(function()
> {
> $('#menu2').hide();
> });
>
> -Hector
>
>
> On Wed, Dec 10, 2008 at 10:35 AM, David Blomstrom <
> [EMAIL PROTECTED]> wrote:
>
>> Here's a condensed version of my code...
>>
>> VMicrosoft-Free
>>
>> This website was designed
>> So I would convert your code to this?:
>> $('#MSFree').show();
>> $('#MSFree').hide();
>> Would I just add that to the JQuery code in my head section, and the
>> script would then open whenever someone mouses over it?
>> Thanks.
>> On Wed, Dec 10, 2008 at 10:20 AM, Andy Matthews <[EMAIL PROTECTED]
>> > wrote:
>>
>>> jQuery has built in show() / hide() methods. The syntax would look
>>> something like this:
>>>
>>> $('#someElement').show();
>>> $('#someElement').hide();
>>>
>>> Where someElement was a container with an ID.
>>>
>>>
>>> andy
>>>
>>> --
>>> *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On
>>> Behalf Of *David Blomstrom
>>> *Sent:* Wednesday, December 10, 2008 12:11 PM
>>> *To:* jquery-en@googlegroups.com
>>> *Subject:* [jQuery] Need Open/Shut Function
>>>
>>> I've been looking for JQuery examples pages and started browsing through
>>> plugins, but I haven't found what I'm looking for yet, so I wondered if
>>> anyone here could make some recommendations.
>>>
>>> If you visit my web page at http://www.geosymbols.org/World/Arizona/,
>>> you'll see a "Microsoft-Free" box in the top right corner of the page.
>>> Hovering over it with your mouse causes a small display to appear.
>>>
>>> At the end of the article is a little Links/Books image with similar
>>> behavior (though there's currently no content to display).
>>>
>>> What JQuery function, plugin or whatever should I use to duplicate those
>>> functions? I'd like to be able to style it so that it looks pretty much as
>>> it does now.
>>>
>>> Also, on my World home page at http://www.geosymbols.org/World I have
>>> links to a series of JavaScript pop-up boxes with links to various nations.
>>> It's a pretty simple, straightforward JavaScsript. I just wondered if there
>>> are any JQuery functions that would somehow enhance those popups.
>>>
>>> So far I'm using a JQuery table sorter plugin and "zebra stripes" widget.
>>> My code looks like this:
>>>
>>> >> type="text/javascript">
>>> >> type="text/javascript">
>>>
>>> $(document).ready(function()
>>> {
>>> $("#myTable").tablesorter({ widgets: [\'zebra\']} );
>>> }
>>> );
>>>
>>>
>>> Thanks.
>>>
>>
>>
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Need Open/Shut Function
Here's a condensed version of my code...
VMicrosoft-Free
This website was designed
So I would convert your code to this?:
$('#MSFree').show();
$('#MSFree').hide();
Would I just add that to the JQuery code in my head section, and the script
would then open whenever someone mouses over it?
Thanks.
On Wed, Dec 10, 2008 at 10:20 AM, Andy Matthews <[EMAIL PROTECTED]>wrote:
> jQuery has built in show() / hide() methods. The syntax would look
> something like this:
>
> $('#someElement').show();
> $('#someElement').hide();
>
> Where someElement was a container with an ID.
>
>
> andy
>
> --
> *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On
> Behalf Of *David Blomstrom
> *Sent:* Wednesday, December 10, 2008 12:11 PM
> *To:* jquery-en@googlegroups.com
> *Subject:* [jQuery] Need Open/Shut Function
>
> I've been looking for JQuery examples pages and started browsing through
> plugins, but I haven't found what I'm looking for yet, so I wondered if
> anyone here could make some recommendations.
>
> If you visit my web page at http://www.geosymbols.org/World/Arizona/,
> you'll see a "Microsoft-Free" box in the top right corner of the page.
> Hovering over it with your mouse causes a small display to appear.
>
> At the end of the article is a little Links/Books image with similar
> behavior (though there's currently no content to display).
>
> What JQuery function, plugin or whatever should I use to duplicate those
> functions? I'd like to be able to style it so that it looks pretty much as
> it does now.
>
> Also, on my World home page at http://www.geosymbols.org/World I have
> links to a series of JavaScript pop-up boxes with links to various nations.
> It's a pretty simple, straightforward JavaScsript. I just wondered if there
> are any JQuery functions that would somehow enhance those popups.
>
> So far I'm using a JQuery table sorter plugin and "zebra stripes" widget.
> My code looks like this:
>
> type="text/javascript">
> type="text/javascript">
>
> $(document).ready(function()
> {
> $("#myTable").tablesorter({ widgets: [\'zebra\']} );
> }
> );
>
>
> Thanks.
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: Need Open/Shut Function
That's the best example I have, as there's currently no content in my Links
open/shut script.
As a former teacher, I found some of the things Microsoft did to my students
distasteful. I decided to speak out, and I never apologize for speaking the
truth.
On Wed, Dec 10, 2008 at 10:23 AM, Andy Matthews <[EMAIL PROTECTED]>wrote:
> As a side note, I personally find your "ms free" note a little
> distasteful. I'm no MS fanboy, but it seem a little self-serving to post
> that note.
>
>
> andy
>
> --
> *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On
> Behalf Of *David Blomstrom
> *Sent:* Wednesday, December 10, 2008 12:11 PM
> *To:* jquery-en@googlegroups.com
> *Subject:* [jQuery] Need Open/Shut Function
>
> I've been looking for JQuery examples pages and started browsing through
> plugins, but I haven't found what I'm looking for yet, so I wondered if
> anyone here could make some recommendations.
>
> If you visit my web page at http://www.geosymbols.org/World/Arizona/,
> you'll see a "Microsoft-Free" box in the top right corner of the page.
> Hovering over it with your mouse causes a small display to appear.
>
> At the end of the article is a little Links/Books image with similar
> behavior (though there's currently no content to display).
>
> What JQuery function, plugin or whatever should I use to duplicate those
> functions? I'd like to be able to style it so that it looks pretty much as
> it does now.
>
> Also, on my World home page at http://www.geosymbols.org/World I have
> links to a series of JavaScript pop-up boxes with links to various nations.
> It's a pretty simple, straightforward JavaScsript. I just wondered if there
> are any JQuery functions that would somehow enhance those popups.
>
> So far I'm using a JQuery table sorter plugin and "zebra stripes" widget.
> My code looks like this:
>
> type="text/javascript">
> type="text/javascript">
>
> $(document).ready(function()
> {
> $("#myTable").tablesorter({ widgets: [\'zebra\']} );
> }
> );
>
>
> Thanks.
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Need Open/Shut Function
I've been looking for JQuery examples pages and started browsing through
plugins, but I haven't found what I'm looking for yet, so I wondered if
anyone here could make some recommendations.
If you visit my web page at http://www.geosymbols.org/World/Arizona/, you'll
see a "Microsoft-Free" box in the top right corner of the page. Hovering
over it with your mouse causes a small display to appear.
At the end of the article is a little Links/Books image with similar
behavior (though there's currently no content to display).
What JQuery function, plugin or whatever should I use to duplicate those
functions? I'd like to be able to style it so that it looks pretty much as
it does now.
Also, on my World home page at http://www.geosymbols.org/World I have links
to a series of JavaScript pop-up boxes with links to various nations. It's a
pretty simple, straightforward JavaScsript. I just wondered if there are any
JQuery functions that would somehow enhance those popups.
So far I'm using a JQuery table sorter plugin and "zebra stripes" widget. My
code looks like this:
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: [\'zebra\']} );
}
);
Thanks.
[jQuery] Re: TableSorter vs CMS
I do, though I've never really learned how to use it. I'll have to take a closer look at it. Opera is actually my default browser, though I love Firefox for all its extensions. * * * * * On Wed, Dec 10, 2008 at 9:23 AM, Michael Geary <[EMAIL PROTECTED]> wrote: > Don't feel bad! I am also somewhat chagrined that diffing the two > versions of the page as I suggested probably wouldn't have helped in this > case. :-) > > BTW, in addition to Firebug, do you also have the Web Developer Toolbar? > It's probably the other most essential developer tool for Firebug. Go get it > now if you don't have it, and take a look through all of its menus. A ton of > good stuff there. > > -Mike > > -- > *From:* David Blomstrom > > Wow, you were right - my link/path file was incorrect. I assumed it was OK > because the links to my style sheets were OK, but there was a PHP error on > the JavaScript link. > > I feel about bad about fueling such a lengthy discussion on a stupid > mistake. If it's any consolation, I learned how to use Firebug (and got some > other valuable tips besides). :) > > Thanks for all the help. > > -- David Blomstrom Writer & Web Designer (Mac, M$ & Linux) www.geobop.org
[jQuery] Re: TableSorter vs CMS
Yes. I'm going to remove it.
I think that's for another JS function I'd like to replace with JQuery. I'll
make another post soon askng how to do it with JQuery if I can't figure it
out.
Thanks.
On Wed, Dec 10, 2008 at 5:41 AM, Olivier Percebois-Garve <
[EMAIL PROTECTED]> wrote:
> xAddEventListener is not defined==> means there is a script using
> another libraries code.
>
> You hqave to remove that script, if your are not using it.
> If you do use it, you will have a conflict between jQuery and Prototype,
> both are using a $ function.
> In that case, have a look at how to run jQuery in noConflict mode.
>
>
> On Wed, Dec 10, 2008 at 2:01 PM, David Blomstrom <
> [EMAIL PROTECTED]> wrote:
>
>>
>>
>> On Wed, Dec 10, 2008 at 4:14 AM, Olivier Percebois-Garve <
>> [EMAIL PROTECTED]> wrote:
>>
>>>
>>> There is a lot to grasp for you, but what you are doing is rather simple.
>>>
>>> Forget the "AJAX callback" and "onSuccess". This is the answer to a
>>> common problem that you dont have,
>>>
>>> since your not using any AJAX.
>>>
>>> For firebug, you need to activate the console, and look there if there is
>>> no js error.
>>>
>> OK, I activated Firebug's console, and it reports three errors:
>> 1. xAddEventListener is not defined
>> xAddEventListener(window, 'load',
>> 2. $ is not defined
>> $(document).ready(function()
>> 3. xAddEventListener is not defined
>> xAddEventListener(window, 'load',
>>
>>> then in the bottom line of the console, paste this:
>>>
>>> $('table').css('border','10px solid red');
>>>
>>> If your table becomes red, then jquery is there. Otherwise, you to load
>>> jquery correctly, with the right path.
>>>
>> I pasted it in, but nothing turned red. When you say I have to "load"
>> JQuery correctly, are you simply saying I need the correct path for my links
>> to the JavaScript files?
>> After doing this, I copied the source code, pasted it into my static test
>> page, then repeated the process. This time Firebug lists just one error (the
>> first error listed above). When I pasted the code into the bottom of the
>> console, there was once again no effect; nothing turns red.
>> However, the table on the static web page is working. The columns are
>> sortable and they have alternating colors.
>> Thanks.
>>
>>> Olivier
>>> On Wed, Dec 10, 2008 at 1:02 PM, David Blomstrom <
>>> [EMAIL PROTECTED]> wrote:
>>>
>>>> Thanks for the tips, but I'm confused. You're suggesting I use an AJAX
>>>> callback function and initiate the PHP onSuccess. I searched for "AJAX
>>>> callback" and "onSuccess" on JQuery's website but found no information
>>>> about
>>>> either one.
>>>>
>>>> I downloaded Firebug, but I'm not yet sure how to use it. It displays my
>>>> webpage on top, with the source code appearing in a bottom panel. I don't
>>>> see any obvious indications of JavaScript errors.
>>>>
>>>> Thanks.
>>>>
>>>> On Tue, Dec 9, 2008 at 2:31 PM, taylormade <[EMAIL PROTECTED]>wrote:
>>>>
>>>>>
>>>>> I was having the same problem... It depends how you call the PHP...
>>>>> Best bet is using jquery's AJAX callback function and initiate the PHP
>>>>> onSuccess...
>>>>>
>>>>> i did the same thing here: (use firebug to explore the code):
>>>>> (everything in the is print()'d by PHP...
>>>>>
>>>>> http://www.themeans.info/cms/galleryManager.php
>>>>>
>>>>> On Dec 9, 2:24 pm, "David Blomstrom" <[EMAIL PROTECTED]>
>>>>> wrote:
>>>>> > With the help of this group, I got my first JQuery function to work -
>>>>> a
>>>>> > combination sortable table columns/alternate row colors script. The
>>>>> only
>>>>> > problem is that it works on my static page but not on a dynamic page
>>>>> in my
>>>>> > content management system (PHP).
>>>>> >
>>>>> > The weird thing is that I copied the source code from a dynamic page
>>>>> into my
>>>>> > static page, and it does work - but only on the static page.
>>>>> >
>>>>> > On my dynamic page, the sortable column function doesn't work at all.
>>>>> The
>>>>> > zebra stripes function works only to the extent that any row I
>>>>> mouseover
>>>>> > acquires a colored background.
>>>>> >
>>>>> > Does anyone have a hunch what's going on?
>>>>> >
>>>>> > Thanks.
>>>>> >
>>>>> > * * * * *
>>>>> >
>>>>> > >>>> type="text/javascript">
>>>>> > >>>> > type="text/javascript">
>>>>> >
>>>>> > $(document).ready(function()
>>>>> > {
>>>>> > $("#myTable").tablesorter({ widgets: ['zebra']} );
>>>>> > }
>>>>> > );
>>>>> >
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> David Blomstrom
>>>> Writer & Web Designer (Mac, M$ & Linux)
>>>> www.geobop.org
>>>>
>>>
>>>
>>
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: TableSorter vs CMS
Wow, you were right - my link/path file was incorrect. I assumed it was OK
because the links to my style sheets were OK, but there was a PHP error on
the JavaScript link.
I feel about bad about fueling such a lengthy discussion on a stupid
mistake. If it's any consolation, I learned how to use Firebug (and got some
other valuable tips besides). :)
Thanks for all the help.
On Wed, Dec 10, 2008 at 5:11 AM, James Hughes <[EMAIL PROTECTED]> wrote:
>
> Does /1A/js/jquery-1.2.6.min.js exist? Can you access it via the
> address bar in the browser?
>
> Check the Net tab of firebug and see the get request for the JS file - is
> the response a 404 or the contents of the file?
>
> James
>
>
> From: jquery-en@googlegroups.com on behalf of David Blomstrom
> Sent: Wed 10/12/2008 13:08
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: TableSorter vs CMS
>
>
>
> I'm checking that right now. If the links to my style sheets are OK (and
> they are), then the links to my JavaScripts should be OK.
>
> However, there is aother possible problem that just occurred to me. I
> pasted my JQuery files in MySite, while the page I'm viewing is in MySite2.
> I essentially have several content management systems sharing includes from
> one master CMS. All my other JavaScript functions have worked correctly but
> maybe JQuery is different?
>
>
> I'll past the JQuery file into MySite 2, change the link and see if that
> makes a difference...
>
>
> On Wed, Dec 10, 2008 at 5:03 AM, James Hughes <[EMAIL PROTECTED]> wrote:
>
>
>
>if it saying - 2. $ is not defined
>
>jQuery isn;t included on the page correctly. Are your directory and
> file names alright?
>
>
>
>From: jquery-en@googlegroups.com on behalf of David Blomstrom
>Sent: Wed 10/12/2008 13:01
>To: jquery-en@googlegroups.com
>
>Subject: [jQuery] Re: TableSorter vs CMS
>
>
>
>
>
>On Wed, Dec 10, 2008 at 4:14 AM, Olivier Percebois-Garve <
> [EMAIL PROTECTED]> wrote:
>
>
>
> There is a lot to grasp for you, but what you are doing is
> rather simple.
>
>
> Forget the "AJAX callback" and "onSuccess". This is the
> answer to a common problem that you dont have,
>
> since your not using any AJAX.
>
> For firebug, you need to activate the console, and look there
> if there is no js error.
>
>OK, I activated Firebug's console, and it reports three errors:
>1. xAddEventListener is not defined
>xAddEventListener(window, 'load',
>2. $ is not defined
>$(document).ready(function()
>3. xAddEventListener is not defined
>xAddEventListener(window, 'load',
>
> then in the bottom line of the console, paste this:
>
> $('table').css('border','10px solid red');
>
> If your table becomes red, then jquery is there. Otherwise,
> you to load jquery correctly, with the right path.
>
>I pasted it in, but nothing turned red. When you say I have to
> "load" JQuery correctly, are you simply saying I need the correct path for
> my links to the JavaScript files?
>After doing this, I copied the source code, pasted it into my static
> test page, then repeated the process. This time Firebug lists just one error
> (the first error listed above). When I pasted the code into the bottom of
> the console, there was once again no effect; nothing turns red.
>However, the table on the static web page is working. The columns
> are sortable and they have alternating colors.
>Thanks.
>
>
>
> Olivier
>
> On Wed, Dec 10, 2008 at 1:02 PM, David Blomstrom <
> [EMAIL PROTECTED]> wrote:
>
>
> Thanks for the tips, but I'm confused. You're
> suggesting I use an AJAX callback function and initiate the PHP onSuccess. I
> searched for "AJAX callback" and "onSuccess" on JQuery's website but found
> no information about either one.
>
> I downloaded Firebug, but I'm not yet sure how to use
> it. It displays my webpage on top, with the source code appearing in a
> bottom panel. I don't see any obvious indications of JavaScript errors.
>
>
> Thanks.
>
>
> On Tue, Dec 9, 2008 at 2:31 PM, taylormade <
> [EMAIL PROTECTED]> wrote:
>
>
>
>
[jQuery] Re: TableSorter vs CMS
I'm checking that right now. If the links to my style sheets are OK (and
they are), then the links to my JavaScripts should be OK.
However, there is aother possible problem that just occurred to me. I pasted
my JQuery files in MySite, while the page I'm viewing is in MySite2. I
essentially have several content management systems sharing includes from
one master CMS. All my other JavaScript functions have worked correctly but
maybe JQuery is different?
I'll past the JQuery file into MySite 2, change the link and see if that
makes a difference...
On Wed, Dec 10, 2008 at 5:03 AM, James Hughes <[EMAIL PROTECTED]> wrote:
>
> if it saying - 2. $ is not defined
>
> jQuery isn;t included on the page correctly. Are your directory and file
> names alright?
>
>
>
> From: jquery-en@googlegroups.com on behalf of David Blomstrom
> Sent: Wed 10/12/2008 13:01
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: TableSorter vs CMS
>
>
>
>
> On Wed, Dec 10, 2008 at 4:14 AM, Olivier Percebois-Garve <
> [EMAIL PROTECTED]> wrote:
>
>
>
>There is a lot to grasp for you, but what you are doing is rather
> simple.
>
>
>Forget the "AJAX callback" and "onSuccess". This is the answer to a
> common problem that you dont have,
>
>since your not using any AJAX.
>
>For firebug, you need to activate the console, and look there if
> there is no js error.
>
> OK, I activated Firebug's console, and it reports three errors:
> 1. xAddEventListener is not defined
> xAddEventListener(window, 'load',
> 2. $ is not defined
> $(document).ready(function()
> 3. xAddEventListener is not defined
> xAddEventListener(window, 'load',
>
>then in the bottom line of the console, paste this:
>
>$('table').css('border','10px solid red');
>
>If your table becomes red, then jquery is there. Otherwise, you to
> load jquery correctly, with the right path.
>
> I pasted it in, but nothing turned red. When you say I have to "load"
> JQuery correctly, are you simply saying I need the correct path for my links
> to the JavaScript files?
> After doing this, I copied the source code, pasted it into my static test
> page, then repeated the process. This time Firebug lists just one error (the
> first error listed above). When I pasted the code into the bottom of the
> console, there was once again no effect; nothing turns red.
> However, the table on the static web page is working. The columns are
> sortable and they have alternating colors.
> Thanks.
>
>
>
>Olivier
>
>On Wed, Dec 10, 2008 at 1:02 PM, David Blomstrom <
> [EMAIL PROTECTED]> wrote:
>
>
>Thanks for the tips, but I'm confused. You're suggesting I
> use an AJAX callback function and initiate the PHP onSuccess. I searched for
> "AJAX callback" and "onSuccess" on JQuery's website but found no information
> about either one.
>
>I downloaded Firebug, but I'm not yet sure how to use it. It
> displays my webpage on top, with the source code appearing in a bottom
> panel. I don't see any obvious indications of JavaScript errors.
>
>
>Thanks.
>
>
>On Tue, Dec 9, 2008 at 2:31 PM, taylormade <
> [EMAIL PROTECTED]> wrote:
>
>
>
>I was having the same problem... It depends how you
> call the PHP...
>Best bet is using jquery's AJAX callback function
> and initiate the PHP
>onSuccess...
>
>i did the same thing here: (use firebug to explore
> the code):
>(everything in the is print()'d by PHP...
>
>http://www.themeans.info/cms/galleryManager.php
>
>On Dec 9, 2:24 pm, "David Blomstrom" <
> [EMAIL PROTECTED]>
>wrote:
>
>> With the help of this group, I got my first JQuery
> function to work - a
>> combination sortable table columns/alternate row
> colors script. The only
>> problem is that it works on my static page but not
> on a dynamic page in my
>> content management system (PHP).
>>
>> The weird thing is that I copied the source code
> from a dynamic page into my
>> static page, and it does work - but only on the
> static page.
>
[jQuery] Re: TableSorter vs CMS
On Wed, Dec 10, 2008 at 4:14 AM, Olivier Percebois-Garve <
[EMAIL PROTECTED]> wrote:
>
> There is a lot to grasp for you, but what you are doing is rather simple.
>
> Forget the "AJAX callback" and "onSuccess". This is the answer to a common
> problem that you dont have,
>
> since your not using any AJAX.
>
> For firebug, you need to activate the console, and look there if there is
> no js error.
>
OK, I activated Firebug's console, and it reports three errors:
1. xAddEventListener is not defined
xAddEventListener(window, 'load',
2. $ is not defined
$(document).ready(function()
3. xAddEventListener is not defined
xAddEventListener(window, 'load',
> then in the bottom line of the console, paste this:
>
> $('table').css('border','10px solid red');
>
> If your table becomes red, then jquery is there. Otherwise, you to load
> jquery correctly, with the right path.
>
I pasted it in, but nothing turned red. When you say I have to "load" JQuery
correctly, are you simply saying I need the correct path for my links to the
JavaScript files?
After doing this, I copied the source code, pasted it into my static test
page, then repeated the process. This time Firebug lists just one error (the
first error listed above). When I pasted the code into the bottom of the
console, there was once again no effect; nothing turns red.
However, the table on the static web page is working. The columns are
sortable and they have alternating colors.
Thanks.
> Olivier
> On Wed, Dec 10, 2008 at 1:02 PM, David Blomstrom <
> [EMAIL PROTECTED]> wrote:
>
>> Thanks for the tips, but I'm confused. You're suggesting I use an AJAX
>> callback function and initiate the PHP onSuccess. I searched for "AJAX
>> callback" and "onSuccess" on JQuery's website but found no information about
>> either one.
>>
>> I downloaded Firebug, but I'm not yet sure how to use it. It displays my
>> webpage on top, with the source code appearing in a bottom panel. I don't
>> see any obvious indications of JavaScript errors.
>>
>> Thanks.
>>
>> On Tue, Dec 9, 2008 at 2:31 PM, taylormade <[EMAIL PROTECTED]>wrote:
>>
>>>
>>> I was having the same problem... It depends how you call the PHP...
>>> Best bet is using jquery's AJAX callback function and initiate the PHP
>>> onSuccess...
>>>
>>> i did the same thing here: (use firebug to explore the code):
>>> (everything in the is print()'d by PHP...
>>>
>>> http://www.themeans.info/cms/galleryManager.php
>>>
>>> On Dec 9, 2:24 pm, "David Blomstrom" <[EMAIL PROTECTED]>
>>> wrote:
>>> > With the help of this group, I got my first JQuery function to work - a
>>> > combination sortable table columns/alternate row colors script. The
>>> only
>>> > problem is that it works on my static page but not on a dynamic page in
>>> my
>>> > content management system (PHP).
>>> >
>>> > The weird thing is that I copied the source code from a dynamic page
>>> into my
>>> > static page, and it does work - but only on the static page.
>>> >
>>> > On my dynamic page, the sortable column function doesn't work at all.
>>> The
>>> > zebra stripes function works only to the extent that any row I
>>> mouseover
>>> > acquires a colored background.
>>> >
>>> > Does anyone have a hunch what's going on?
>>> >
>>> > Thanks.
>>> >
>>> > * * * * *
>>> >
>>> > >> type="text/javascript">
>>> > >> > type="text/javascript">
>>> >
>>> > $(document).ready(function()
>>> > {
>>> > $("#myTable").tablesorter({ widgets: ['zebra']} );
>>> > }
>>> > );
>>> >
>>>
>>
>>
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: TableSorter vs CMS
Thanks for the tips, but I'm confused. You're suggesting I use an AJAX
callback function and initiate the PHP onSuccess. I searched for "AJAX
callback" and "onSuccess" on JQuery's website but found no information about
either one.
I downloaded Firebug, but I'm not yet sure how to use it. It displays my
webpage on top, with the source code appearing in a bottom panel. I don't
see any obvious indications of JavaScript errors.
Thanks.
On Tue, Dec 9, 2008 at 2:31 PM, taylormade <[EMAIL PROTECTED]>wrote:
>
> I was having the same problem... It depends how you call the PHP...
> Best bet is using jquery's AJAX callback function and initiate the PHP
> onSuccess...
>
> i did the same thing here: (use firebug to explore the code):
> (everything in the is print()'d by PHP...
>
> http://www.themeans.info/cms/galleryManager.php
>
> On Dec 9, 2:24 pm, "David Blomstrom" <[EMAIL PROTECTED]>
> wrote:
> > With the help of this group, I got my first JQuery function to work - a
> > combination sortable table columns/alternate row colors script. The only
> > problem is that it works on my static page but not on a dynamic page in
> my
> > content management system (PHP).
> >
> > The weird thing is that I copied the source code from a dynamic page into
> my
> > static page, and it does work - but only on the static page.
> >
> > On my dynamic page, the sortable column function doesn't work at all. The
> > zebra stripes function works only to the extent that any row I mouseover
> > acquires a colored background.
> >
> > Does anyone have a hunch what's going on?
> >
> > Thanks.
> >
> > * * * * *
> >
> >
> > > type="text/javascript">
> >
> > $(document).ready(function()
> > {
> > $("#myTable").tablesorter({ widgets: ['zebra']} );
> > }
> > );
> >
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] Re: TableSorter vs CMS
What constitutes "manipulation"? It's a dynamic table, so I use PHP and a
MySQL query to "populate" it with data. I removed a PHP script that gave
each table row a class - though I didn't touch a similar touch that gives
each table cell a class.
At any rate, I'll replace the entire dynamic table script with a simple
table from my source code tomorrow and see how that works.
Thanks for the tip.
On Tue, Dec 9, 2008 at 4:20 PM, MorningZ <[EMAIL PROTECTED]> wrote:
>
> Understanding
>
>
> $(document).ready(function()
> {
> $("#myTable").tablesorter({ widgets: ['zebra']} );
> }
> );
>
>
>
> would go a long way to understanding why/how...
>
> That code gets executed *one single time*, when the page is pulled up
> and the DOM is "ready"
>
> if at some point after that, you manipulate "#myTable", then the
> tablesorting functionality is *gone* and it will need to be wired up
> upon re-population...
>
>
[jQuery] Re: TableSorter vs CMS
Thanks for all the tips, even if I don't understand all this stuff yet. :) Unfortunately, I got called in to work, so I'm away from my main computer. However, I'll try the things you suggested when I get home in the morning.
[jQuery] TableSorter vs CMS
With the help of this group, I got my first JQuery function to work - a
combination sortable table columns/alternate row colors script. The only
problem is that it works on my static page but not on a dynamic page in my
content management system (PHP).
The weird thing is that I copied the source code from a dynamic page into my
static page, and it does work - but only on the static page.
On my dynamic page, the sortable column function doesn't work at all. The
zebra stripes function works only to the extent that any row I mouseover
acquires a colored background.
Does anyone have a hunch what's going on?
Thanks.
* * * * *
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: ['zebra']} );
}
);
[jQuery] Re: TableSorter vs Zebra Stripes
Awesome - it works! Thanks so much for all the tips.
[jQuery] Re: TableSorter vs Zebra Stripes
Sorry, when I pasted that script in, there were still no row colors, plus
the sorting function sstopped working.
On Tue, Dec 9, 2008 at 12:46 PM, Olivier Percebois-Garve <
[EMAIL PROTECTED]> wrote:
> ok. do that instead:
>
>
> type="text/javascript">
>
> $(document).ready(function()
> {
> $("#myTable").tablesorter( widgets: ['zebra'] );
> }
> );
>
>
> On Tue, Dec 9, 2008 at 9:43 PM, David Blomstrom <[EMAIL PROTECTED]
> > wrote:
>
>> Thanks.
>>
>> I changed my code accordingly...
>>
>>
>> > type="text/javascript">
>>
>> $(document).ready(function()
>> {
>> $("#myTable").tablesorter();
>> }
>> );
>>
>>
>>
>> $("table").tablesorter({
>> widgets: ['zebra']
>> });
>>
>>
>> * * * * *
>>
>> But it works just as before; there are no table colors except when I
>> mouseover a row.
>>
>> I'm assuming I only need to add the proper CSS.
>>
>> According to this page -
>> http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy - I need to
>> create CSS styles for .alt and .over. In fact, I already have those styles,
>> yet there's no background color.
>>
>> Any tips?
>>
>> Thanks.
>>
>> On Tue, Dec 9, 2008 at 12:19 PM, Olivier Percebois-Garve <
>> [EMAIL PROTECTED]> wrote:
>>
>>> sry. wrong paste:
>>>
>>> $("table").tablesorter({
>>> widgets: ['zebra']
>>>
>>>
>>> });
>>>
>>>
>>>
>>> On Tue, Dec 9, 2008 at 9:18 PM, Olivier Percebois-Garve <
>>> [EMAIL PROTECTED]> wrote:
>>>
>>>> The zebra code you have seems to be based on another library (Prototype
>>>> ?),
>>>> so it wont run using without it.
>>>> Anyway, there's a zebra plugin included by default in the tablesorter.
>>>> just do:
>>>>
>>>> $("table").tablesorter({
>>>>
>>>>
>>>>
>>>> widgets: ['zebra','repeatHeaders']
>>>> });
>>>>
>>>>
>>>>
>>>> Olivier
>>>>
>>>>
>>>>
>>>> On Tue, Dec 9, 2008 at 9:01 PM, David Blomstrom <
>>>> [EMAIL PROTECTED]> wrote:
>>>>
>>>>> I want to create a table that features sortable columns and alternate
>>>>> row colors. I found scripts that do one or the other, but when I implement
>>>>> both, the row color function is impaired.
>>>>>
>>>>> First, I downloaded the JQuery TableSorter plugin; hence the links to
>>>>> jquery-1.2.6.min.js and jquery.tablesorter.js below. Below that is the
>>>>> JavaScript for the "Zebra Stripes" function. When used together, the table
>>>>> exhibits no row colors except when I mouseover a row.
>>>>>
>>>>> Does anyone know how I can fix this?
>>>>>
>>>>> Thanks.
>>>>>
>>>>> * * * * *
>>>>>
>>>>> >>>> type="text/javascript">
>>>>>
>>>>> >>>> type="text/javascript">
>>>>>
>>>>>
>>>>>
>>>>> $(document).ready(function()
>>>>> {
>>>>> $("#myTable").tablesorter();
>>>>> }
>>>>> );
>>>>>
>>>>>
>>>>>
>>>>> var Event = {
>>>>> add: function(obj,type,fn) {
>>>>> if (obj.attachEvent) {
>>>>> obj['e'+type+fn] = fn;
>>>>> obj[type+fn] = function() { obj['e'+type+fn](window.event); }
>>>>> obj.attachEvent('on'+type,obj[type+fn]);
>>>>> } else
>>>>> obj.addEventListener(type,fn,false);
>>>>> },
>>>>> remove: function(obj,type,fn) {
>>>>> if (obj.detachEvent) {
>>>>> obj.detachEvent('on'+type,obj[type+fn]);
>>>>> obj[type+fn] = null;
>>>>> } else
>>>>> obj.removeEventListener(type,fn,false);
>>>>> }
>>>>> }
>>>>>
>>>>> function $() {
>>>>> var elements = new Array();
>>>>> f
[jQuery] Re: TableSorter vs Zebra Stripes
Sorry, I missed the messag that references class "odd." Yet when I insert
the following style...
tr.odd td { background: #ff0; }
...there are still no colored rows.
[jQuery] Re: TableSorter vs Zebra Stripes
Thanks.
I changed my code accordingly...
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
$("table").tablesorter({
widgets: ['zebra']
});
* * * * *
But it works just as before; there are no table colors except when I
mouseover a row.
I'm assuming I only need to add the proper CSS.
According to this page -
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy - I need to create
CSS styles for .alt and .over. In fact, I already have those styles, yet
there's no background color.
Any tips?
Thanks.
On Tue, Dec 9, 2008 at 12:19 PM, Olivier Percebois-Garve <
[EMAIL PROTECTED]> wrote:
> sry. wrong paste:
>
> $("table").tablesorter({
> widgets: ['zebra']
> });
>
>
>
> On Tue, Dec 9, 2008 at 9:18 PM, Olivier Percebois-Garve <
> [EMAIL PROTECTED]> wrote:
>
>> The zebra code you have seems to be based on another library (Prototype
>> ?),
>> so it wont run using without it.
>> Anyway, there's a zebra plugin included by default in the tablesorter.
>> just do:
>>
>> $("table").tablesorter({
>>
>> widgets: ['zebra','repeatHeaders']
>> });
>>
>>
>>
>> Olivier
>>
>>
>>
>> On Tue, Dec 9, 2008 at 9:01 PM, David Blomstrom <
>> [EMAIL PROTECTED]> wrote:
>>
>>> I want to create a table that features sortable columns and alternate row
>>> colors. I found scripts that do one or the other, but when I implement both,
>>> the row color function is impaired.
>>>
>>> First, I downloaded the JQuery TableSorter plugin; hence the links to
>>> jquery-1.2.6.min.js and jquery.tablesorter.js below. Below that is the
>>> JavaScript for the "Zebra Stripes" function. When used together, the table
>>> exhibits no row colors except when I mouseover a row.
>>>
>>> Does anyone know how I can fix this?
>>>
>>> Thanks.
>>>
>>> * * * * *
>>>
>>>
>>>
>>> >> type="text/javascript">
>>>
>>>
>>>
>>> $(document).ready(function()
>>> {
>>> $("#myTable").tablesorter();
>>> }
>>> );
>>>
>>>
>>>
>>> var Event = {
>>> add: function(obj,type,fn) {
>>> if (obj.attachEvent) {
>>> obj['e'+type+fn] = fn;
>>> obj[type+fn] = function() { obj['e'+type+fn](window.event); }
>>> obj.attachEvent('on'+type,obj[type+fn]);
>>> } else
>>> obj.addEventListener(type,fn,false);
>>> },
>>> remove: function(obj,type,fn) {
>>> if (obj.detachEvent) {
>>> obj.detachEvent('on'+type,obj[type+fn]);
>>> obj[type+fn] = null;
>>> } else
>>> obj.removeEventListener(type,fn,false);
>>> }
>>> }
>>>
>>> function $() {
>>> var elements = new Array();
>>> for (var i=0;i<arguments.length;i++) {
>>> var element = arguments[i];
>>> if (typeof element == 'string') element =
>>> document.getElementById(element);
>>> if (arguments.length == 1) return element;
>>> elements.push(element);
>>> }
>>> return elements;
>>> }
>>>
>>> String.prototype.trim = function() {
>>> return this.replace(/^\s+|\s+$/,"");
>>> }
>>>
>>> function addClassName(el,className) {
>>> removeClassName(el,className);
>>> el.className = (el.className + " " + className).trim();
>>> }
>>>
>>> function removeClassName(el,className) {
>>> el.className = el.className.replace(className,"").trim();
>>> }
>>>
>>> var ZebraTable = {
>>> bgcolor: '',
>>> classname: '',
>>> stripe: function(el) {
>>> if (!$(el)) return;
>>> var rows = $(el).getElementsByTagName('tr');
>>> for (var i=1,len=rows.length;i<len;i++) {
>>> if (i % 2 == 0) rows[i].className = 'alt';
>>> Event.add(rows[i],'mouseover',function() { ZebraTable.mouseover(this);
>>> });
>>> Event.add(rows[i],'mouseout',function() { ZebraTable.mouseout(this);
>>> });
>>> }
>>> },
>>> mouseover: function(row) {
>>> this.bgcolor = row.style.backgroundColor;
>>> this.classname = row.className;
>>> addClassName(row,'over');
>>> },
>>> mouseout: function(row) {
>>> removeClassName(row,'over');
>>> addClassName(row,this.classname);
>>> row.style.backgroundColor = this.bgcolor;
>>> }
>>> }
>>>
>>> window.onload = function() {
>>> ZebraTable.stripe('myTable');
>>> }
>>>
>>>
>>>
>>>
>>
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
[jQuery] TableSorter vs Zebra Stripes
I want to create a table that features sortable columns and alternate row
colors. I found scripts that do one or the other, but when I implement both,
the row color function is impaired.
First, I downloaded the JQuery TableSorter plugin; hence the links to
jquery-1.2.6.min.js and jquery.tablesorter.js below. Below that is the
JavaScript for the "Zebra Stripes" function. When used together, the table
exhibits no row colors except when I mouseover a row.
Does anyone know how I can fix this?
Thanks.
* * * * *
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
var Event = {
add: function(obj,type,fn) {
if (obj.attachEvent) {
obj['e'+type+fn] = fn;
obj[type+fn] = function() { obj['e'+type+fn](window.event); }
obj.attachEvent('on'+type,obj[type+fn]);
} else
obj.addEventListener(type,fn,false);
},
remove: function(obj,type,fn) {
if (obj.detachEvent) {
obj.detachEvent('on'+type,obj[type+fn]);
obj[type+fn] = null;
} else
obj.removeEventListener(type,fn,false);
}
}
function $() {
var elements = new Array();
for (var i=0;i
[jQuery] Problem with Tablesorter Plugin
I just downloaded JQuery. For my first project, I'd like to make a table
with sortable columns and alternating row colors.
For the sortable columns, I downloaded the Tablesorter plugin, then followed
the tutorial at http://tablesorter.com/docs/
I don't know a lot about JavaScript, but I have implemented and tweaked many
pre-made JavaScripts. So I don't understand why I can't get this one to
work.
First, I tried it on a PHP page with a table displaying dynamic content.
When that didn't work, I made a very simple page, with nothing but a table,
in the same directory as the two JavaScripts I linked to in the head
section.
My table has head and body tags, along with the proper ID ("myTable").
Here's the entire code for the page:
* * * * *
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml";>
Untitled Document