[jQuery] Re: Plugin for styling ?
For custom formatting selects, try the linkselect plugin: http://www.givainc.com/labs/linkselect_jquery_plugin.htm Best, --Carl. On Jun 1, 1:25 pm, amuhlou wrote: > Hey Everyone, > > I've been looking around the web for solutions to styling HTML form > elements and haven't come up with much. Has anyone found a jQuery > plugin (or possibly a standalone javascript) that lets you do this? > > I'm especially interested in styling the element, but it > would be great to know to have a resource that styles other items as > well. It would need to be compatible with IE6+ > > Thanks!
[jQuery] tablesorter plugin help -- getting it to ignore quotation marks
I'm using the tablesorter plugin, and have run into a small issue I can't figure out how to solve: One of the columns in my table contains titles, some of which are books, others of which are articles or television episodes. The latter two start with a double quote (“)... So, for example, one cell in the column might be: Title of Book while another would be: “Title of Article” Tablesorter seems to be factoring these starting double quotes into the sort order for that column, so I end up with a list that is titles without quotes alphabetically first, and then titles with quotes alphabetically second. Is there any way I can get it to ignore the double quote, so that sorting on the column always goes by the first actual letter of the text? Thanks a bunch for any help.
[jQuery] Re: jQuery validation plugin -- how to validate an input only if it contains info
Thank you!
--Carl.
On Mar 11, 7:54 am, Jörn Zaefferer
wrote:
> add if (this.optional(element)) return true; to the top. See any
> existing validation method for an example,
> orhttp://docs.jquery.com/Plugins/Validation/Validator/addMethod
>
> Jörn
>
> On Wed, Mar 11, 2009 at 12:43 PM, clorentzen wrote:
>
> > Hi --
>
> > I've got a contact form here
>
> >http://www.dianlofton.com/contact.shtml
>
> > ...using the jquery.validate.js plugin. The form has an optional input
> > for a phone number, which I'd like to have validated -- but only if
> > there is info in the input. If you look at the source code for that
> > page, you'll see some commented out code for the phone number
> > validation. However, when this scripting is active on the page, it
> > makes the phone number a required field, which is not what I'm after:
>
> > $.validator.addMethod("phone", function(ph, element) {
> > if (ph == null) {
> > return false;
> > }
> > var stripped = ph.replace(/[\s()+-]|ext\.?/gi, "");
> > // 10 is the minimum number of numbers required
> > return ((/\d{10,}/i).test(stripped));
> > }, "Please enter a valid phone number");
>
> > Any help on how to have this field be optional, but still get
> > validated if the user inputs data, would be greatly appreciated.
> > Thanks!
>
> > --Carl.
[jQuery] jQuery validation plugin -- how to validate an input only if it contains info
Hi --
I've got a contact form here
http://www.dianlofton.com/contact.shtml
...using the jquery.validate.js plugin. The form has an optional input
for a phone number, which I'd like to have validated -- but only if
there is info in the input. If you look at the source code for that
page, you'll see some commented out code for the phone number
validation. However, when this scripting is active on the page, it
makes the phone number a required field, which is not what I'm after:
$.validator.addMethod("phone", function(ph, element) {
if (ph == null) {
return false;
}
var stripped = ph.replace(/[\s()+-]|ext\.?/gi, "");
// 10 is the minimum number of numbers required
return ((/\d{10,}/i).test(stripped));
}, "Please enter a valid phone number");
Any help on how to have this field be optional, but still get
validated if the user inputs data, would be greatly appreciated.
Thanks!
--Carl.
[jQuery] Re: LocalScroll with anchor in URL not working
My issue isn't the back button -- but just that if I make repeated
attempts to use the links on my hub.html page, get to the scrolling
page (default.html), and then go back to the hub page and attempt the
"site two" or "site three" links again, and repeat this process,
sometimes the links work correctly, and sometimes it seems to get
stuck on site one and never scrolls over to where those two links
should really go to.
For example, if you try to go to this link directly:
http://www.cementresources.com/paneltest/default.html#panelTwo
Sometimes it will correctly scroll to the second panel, sometimes it
scrolls only a few pixels into panel one and then stops.
This is also true for the other similar link on that hub page:
http://www.cementresources.com/paneltest/default.html#panelThree
Sometimes they work, sometimes not. I can't explain why...
They seem to work without problems on IE6 and IE7, but in FF3 (Mac and
Win) and in Safari 3 (Mac) the intermittent problem exists.
Thanks again,
--Carl.
On Mar 5, 10:36 am, Ariel Flesler wrote:
> Uhm... I really dunno. As I told you, the plugin won't react to clicks
> on the Back button.
> I intend to take another look at this asap.
>
> Try putting the window.scrollTo line outside the document.ready.
>
>
>
> On Thu, Mar 5, 2009 at 1:28 PM, clorentzen wrote:
>
> > Ariel --
>
> > Thanks again for responding. I've tried a few more things, but the
> > links from another page targeting my scrolling page still seem to work
> > unreliably. I'm in FF3 mainly, but can see the issue in Safari 3 and
> > IE6 and 7 as well.
>
> > Sometimes the links to "site two" and "site three" on this page work
> > exactly as intended (scrolling over to the appropriate place), and
> > other times they merely load the page basically at 0,0.
>
> >http://www.cementresources.com/paneltest/hub.html
>
> > The problem with links off my hub.html page doesn't occur every time,
> > though... Which has me even more confused, since sometimes it seems to
> > work, but if I immediately go "back" in the browser and try the link
> > on hub.html again, it might not work the second or third time.
>
> > And if I refresh the scrolling page once loaded (which has a hash in
> > the URL noting the selected anchor), the same problem occurs:
> > sometimes the page reloads scrolled over to the correct spot, other
> > times it just seems to reset the window to 0.0.
>
> > Let me know if you have any ideas. Appreciate the help. Thanks.
>
> > --Carl.
>
> > On Mar 4, 5:39 pm, Ariel Flesler wrote:
> >> It seems to be working well for me, on FF2.
> >> Using the back button won't animatedly scroll, the plugin isn't
> >> monitoring those changes.
>
> >> On Wed, Mar 4, 2009 at 7:28 PM, clorentzen
> >> wrote:
>
> >> > Ariel --
>
> >> > Thanks for your reply. If I go to my test page from one of the full
> >> > URLs with an anchor, and then refresh the page, I still have the
> >> > problem -- namely, it resets to the beginning of the page and doesn't
> >> > properly scroll to the anchor location in the URL. Also, when I click
> >> > my "site two" link, the subsequent properly scrolls all the way from
> >> > the left to the anchor location, but the "site three" link seems to
> >> > scroll over only from 100 or so pixels from the anchor location. Any
> >> > ideas why these things might be happening? Thanks again.
>
> >> > I've updated my sample/test page with the new code you provided.
>
> >> >http://www.cementresources.com/paneltest/hub.html
>
> >> > Best,
>
> >> > --Carl.
>
> >> > On Mar 4, 5:04 pm, Ariel Flesler wrote:
> >> >> I think that happens because you first need to reset the scroll to
> >> >> (0,0).
> >> >> The browser also scrolls natively.
>
> >> >> I'm planning to add this within $.localScroll.hash, as well as taking
> >> >> advantage of sync animations, added since 1.3.
> >> >> But for now... :)
>
> >> >> $(document).ready(function(){
> >> >> window.scrollTo(0,0);
> >> >> $.localScroll.hash({
> >> >> axis:'x',
> >> >> duration:1500
> >> >> });
> >> >> $('#container').localScroll({
> >> >> axis:'x',
> >> >> hash:true,
> >> >> duration: 1000
[jQuery] Re: LocalScroll with anchor in URL not working
Ariel --
Thanks again for responding. I've tried a few more things, but the
links from another page targeting my scrolling page still seem to work
unreliably. I'm in FF3 mainly, but can see the issue in Safari 3 and
IE6 and 7 as well.
Sometimes the links to "site two" and "site three" on this page work
exactly as intended (scrolling over to the appropriate place), and
other times they merely load the page basically at 0,0.
http://www.cementresources.com/paneltest/hub.html
The problem with links off my hub.html page doesn't occur every time,
though... Which has me even more confused, since sometimes it seems to
work, but if I immediately go "back" in the browser and try the link
on hub.html again, it might not work the second or third time.
And if I refresh the scrolling page once loaded (which has a hash in
the URL noting the selected anchor), the same problem occurs:
sometimes the page reloads scrolled over to the correct spot, other
times it just seems to reset the window to 0.0.
Let me know if you have any ideas. Appreciate the help. Thanks.
--Carl.
On Mar 4, 5:39 pm, Ariel Flesler wrote:
> It seems to be working well for me, on FF2.
> Using the back button won't animatedly scroll, the plugin isn't
> monitoring those changes.
>
>
>
> On Wed, Mar 4, 2009 at 7:28 PM, clorentzen wrote:
>
> > Ariel --
>
> > Thanks for your reply. If I go to my test page from one of the full
> > URLs with an anchor, and then refresh the page, I still have the
> > problem -- namely, it resets to the beginning of the page and doesn't
> > properly scroll to the anchor location in the URL. Also, when I click
> > my "site two" link, the subsequent properly scrolls all the way from
> > the left to the anchor location, but the "site three" link seems to
> > scroll over only from 100 or so pixels from the anchor location. Any
> > ideas why these things might be happening? Thanks again.
>
> > I've updated my sample/test page with the new code you provided.
>
> >http://www.cementresources.com/paneltest/hub.html
>
> > Best,
>
> > --Carl.
>
> > On Mar 4, 5:04 pm, Ariel Flesler wrote:
> >> I think that happens because you first need to reset the scroll to
> >> (0,0).
> >> The browser also scrolls natively.
>
> >> I'm planning to add this within $.localScroll.hash, as well as taking
> >> advantage of sync animations, added since 1.3.
> >> But for now... :)
>
> >> $(document).ready(function(){
> >> window.scrollTo(0,0);
> >> $.localScroll.hash({
> >> axis:'x',
> >> duration:1500
> >> });
> >> $('#container').localScroll({
> >> axis:'x',
> >> hash:true,
> >> duration: 1000
> >> });
>
> >> });
>
> >> --
> >> Ariel Fleslerhttp://flesler.blogspot.com
>
> >> On Mar 4, 3:47 pm, clorentzen wrote:
>
> >> > Sorry, I hit "post" button too quickly there...
>
> >> > You can see an example linking to a test page here:
>
> >> >http://www.cementresources.com/paneltest/hub.html
>
> >> > I've seen the issue in FF3, Safari 3, and in IE 6 and 7.
>
> >> > Not sure what I'm doing incorrectly. Any help appreciated. Thank you!
>
> >> > On Mar 4, 1:43 pm, clorentzen wrote:
>
> >> > > Hi --
>
> >> > > I'm using theLocalScrollplugin, and having trouble getting it to
> >> > > work when passing the anchor through as part of the URL. Instead of
> >> > > scrolling to the appropriate anchor id, the window just moves a few
> >> > > pixels and stops.
>
> >> > > CallingLocalScrollon links within the page works fine, but not when
> >> > > the link is coming from another page or typed directly in the browser
> >> > > address bar.
>
> >> > > My code for initializingLocalScrollis:
>
> >> > > $(document).ready(function(){
> >> > > $.localScroll.hash({
> >> > > axis:'x',
> >> > > duration:1500
> >> > > });
> >> > > $('#container').localScroll({
> >> > > axis:'x',
> >> > > hash:true,
> >> > > duration: 1000
> >> > > });
>
> >> > > });
>
> --
> Ariel Fleslerhttp://flesler.blogspot.com
[jQuery] Re: LocalScroll with anchor in URL not working
Ariel --
Thanks for your reply. If I go to my test page from one of the full
URLs with an anchor, and then refresh the page, I still have the
problem -- namely, it resets to the beginning of the page and doesn't
properly scroll to the anchor location in the URL. Also, when I click
my "site two" link, the subsequent properly scrolls all the way from
the left to the anchor location, but the "site three" link seems to
scroll over only from 100 or so pixels from the anchor location. Any
ideas why these things might be happening? Thanks again.
I've updated my sample/test page with the new code you provided.
http://www.cementresources.com/paneltest/hub.html
Best,
--Carl.
On Mar 4, 5:04 pm, Ariel Flesler wrote:
> I think that happens because you first need to reset the scroll to
> (0,0).
> The browser also scrolls natively.
>
> I'm planning to add this within $.localScroll.hash, as well as taking
> advantage of sync animations, added since 1.3.
> But for now... :)
>
> $(document).ready(function(){
> window.scrollTo(0,0);
> $.localScroll.hash({
> axis:'x',
> duration:1500
> });
> $('#container').localScroll({
> axis:'x',
> hash:true,
> duration: 1000
> });
>
> });
>
> --
> Ariel Fleslerhttp://flesler.blogspot.com
>
> On Mar 4, 3:47 pm, clorentzen wrote:
>
> > Sorry, I hit "post" button too quickly there...
>
> > You can see an example linking to a test page here:
>
> >http://www.cementresources.com/paneltest/hub.html
>
> > I've seen the issue in FF3, Safari 3, and in IE 6 and 7.
>
> > Not sure what I'm doing incorrectly. Any help appreciated. Thank you!
>
> > On Mar 4, 1:43 pm, clorentzen wrote:
>
> > > Hi --
>
> > > I'm using the LocalScroll plugin, and having trouble getting it to
> > > work when passing the anchor through as part of the URL. Instead of
> > > scrolling to the appropriate anchor id, the window just moves a few
> > > pixels and stops.
>
> > > Calling LocalScroll on links within the page works fine, but not when
> > > the link is coming from another page or typed directly in the browser
> > > address bar.
>
> > > My code for initializing LocalScroll is:
>
> > > $(document).ready(function(){
> > > $.localScroll.hash({
> > > axis:'x',
> > > duration:1500
> > > });
> > > $('#container').localScroll({
> > > axis:'x',
> > > hash:true,
> > > duration: 1000
> > > });
>
> > > });
[jQuery] Re: LocalScroll with anchor in URL not working
Sorry, I hit "post" button too quickly there...
You can see an example linking to a test page here:
http://www.cementresources.com/paneltest/hub.html
I've seen the issue in FF3, Safari 3, and in IE 6 and 7.
Not sure what I'm doing incorrectly. Any help appreciated. Thank you!
On Mar 4, 1:43 pm, clorentzen wrote:
> Hi --
>
> I'm using the LocalScroll plugin, and having trouble getting it to
> work when passing the anchor through as part of the URL. Instead of
> scrolling to the appropriate anchor id, the window just moves a few
> pixels and stops.
>
> Calling LocalScroll on links within the page works fine, but not when
> the link is coming from another page or typed directly in the browser
> address bar.
>
> My code for initializing LocalScroll is:
>
> $(document).ready(function(){
> $.localScroll.hash({
> axis:'x',
> duration:1500
> });
> $('#container').localScroll({
> axis:'x',
> hash:true,
> duration: 1000
> });
>
> });
[jQuery] LocalScroll with anchor in URL not working
Hi --
I'm using the LocalScroll plugin, and having trouble getting it to
work when passing the anchor through as part of the URL. Instead of
scrolling to the appropriate anchor id, the window just moves a few
pixels and stops.
Calling LocalScroll on links within the page works fine, but not when
the link is coming from another page or typed directly in the browser
address bar.
My code for initializing LocalScroll is:
$(document).ready(function(){
$.localScroll.hash({
axis:'x',
duration:1500
});
$('#container').localScroll({
axis:'x',
hash:true,
duration: 1000
});
});
[jQuery] Re: selector question
Thanks! The lack of something else wrapping each s content was
indeed the problem.
On Dec 4, 1:34 pm, "Charlie Griefer" <[EMAIL PROTECTED]>
wrote:
> On Thu, Dec 4, 2008 at 10:28 AM, Charlie Griefer
> <[EMAIL PROTECTED]>wrote:
>
>
>
> > On Thu, Dec 4, 2008 at 9:56 AM, clorentzen <[EMAIL PROTECTED]>wrote:
>
> >> I'm trying to hide all the contents from s within a table *except*
> >> for the first in each ... I don't want to hide the s,
> >> just their contents, but I'm having trouble finding the correct
> >> selector(s) to accomplish this.
>
> >>
> >>
> >> one
> >> two
> >> three
> >>
> >>
> >> four
> >> five
> >> six
> >>
> >>
>
> >> I'd like to hide the actual *content* "two", "three", "five", and
> >> "six" -- for as many tds there are after the first one in each row,
> >> and for as many rows as there are in the table.
>
> > $(function() {
> > $('tr > td:not(:first-child)').css({visibility:'hidden'});
> > });
>
> Altho, to MorningZ's point... that's affecting the tds themselves, and not
> specifically the content.
>
> --
> I have failed as much as I have succeeded. But I love my life. I love my
> wife. And I wish you my kind of success.
[jQuery] selector question
Hi -- I'm trying to hide all the contents from s within a table *except* for the first in each ... I don't want to hide the s, just their contents, but I'm having trouble finding the correct selector(s) to accomplish this. So, for example, if the table is: one two three four five six I'd like to hide the actual *content* "two", "three", "five", and "six" -- for as many tds there are after the first one in each row, and for as many rows as there are in the table. Thanks in advance! --Carl.
[jQuery] Re: linkselect plugin problem (related hover gets deactivated) -- help please
Dan -- Yep, that was it. Now the hover state of the parent nav panel doesn't get disturbed. ...And you were right about the repercussions on the placement of the dropdown. It's now appearing very far away from the actual initial link, unfortunately. Best, --Carl.
[jQuery] Re: linkselect plugin problem (related hover gets deactivated) -- help please
Dan -- Yeah, I gathered that much. :) When I winnow my .js file down to just the snippet you posted, the error is still present. And I will admit that the complexity of what you provided is a bit more than what I normally put together, so the syntax of it eludes me somewhat. So I'm not sure exactly where that ")" ought to go. Again, very much appreciate the help. Best, --Carl.
[jQuery] Re: linkselect plugin problem (related hover gets deactivated) -- help please
Dan --
Thanks. I'm attempting what you suggested, but maybe my syntax is
incorrect? Firebug tells me "missing ) after formal parameters".
Can you point me in the right direction?
// replace select objects in the main content
$(document).ready(function (){
$('#container select').linkselect({fixedWidth: true});
});
// replace select objects in the header navigation
$(document).ready(function (){
$('#header select').linkselect({
fixedWidth: true
, init: function ($select, $input, $am $container){
$('#navNewsSearch').append($container);
}
});
});
Thanks much.
--Carl.
[jQuery] linkselect plugin problem (related hover gets deactivated) -- help please
I'm using the linkselect plugin to replace select objects in forms with a custom look... The issue I'm having is that when these occur in navigation menus/panels that appear on hover, hovering down onto the replaced select object listing causes the actual navigation menu to disappear, as if the hover behavior that turns it on stops registering as still being hovered. I've posted a test page here: http://www.cement-site.com/selecttest/test.html (mouse over the "news & events" item to display the menu, then click on the "Area Name 1" and mouse down over the list that displays..). There's one linkselect object in the menu, and another, just for comparison, in the content area of the page. What causes the menu hover to deactivate? Is there any way to tweak this so that the menu will persist when the replaced select object is open? (I should add that even with just a regular in that menu [without linkselect], the same problem occurs -- once the selects options are moused onto, the enclosing nav menu goes away). Thanks in advance for any help/advice.
[jQuery] problem when mousing onto object option list (relatedTarget?)
Hi -- I'm working on a site with a nav area that exposes panels/menus when a parent is hovered over -- using hover(). Some of these panels contain forms, including objects. When I click a select in one of these nav menus, and then mouse over the options, it causes the containing menu panel to disappear. I assume this is because the browsers don't consider the option menu part of the , and therefore not contained within the parent , so it reacts as if the parent is no longer being hovered over...? Is there any fix for this? Via some Google searching it sounds like this has something to do with the relatedTarget property, but I am not sure how to come up with a fix that will keep the as still registering as hovered. Thanks!
[jQuery] Re: Need truncator/Expander help (trimming on # of objects rather than character count)
Karl -- Also, fyi, the insertAfter method spec'd in the plugin doesn't seem to play nice in Safari 3.1. But the other choice you mention in the comments, appendTo, works just fine. Best, --Carl. On Jul 6, 5:11 pm, clorentzen <[EMAIL PROTECTED]> wrote: > Karl -- > > Wow! Thank you so much for this! Exactly what I needed! > > Best, > > --Carl. > > On Jul 6, 3:50 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote: > > > sorry, but I'm changing the name from summarizer (with an r) to > > summarize. Seems to make more sense as a verb. so now you can find it > > at: > > >http://plugins.learningjquery.com/summarize/ > > > --Karl > > > > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > > On Jul 6, 2008, at 3:22 PM, Karl Swedberg wrote: > > > > sounds like a reasonable thing to want, so I just whipped up a new > > > plugin for you: > > > >http://plugins.learningjquery.com/summarizer/ > > > > Please keep in mind that it hasn't been tested extensively, and the > > > documentation is kind of spotty, but it shouldn't be too hard to > > > figure out how it works. > > > > One important thing to note is that your selector should be the > > > parent element of the elements you want to expand/collapse. > > > > --Karl > > > > > > Karl Swedberg > > >www.englishrules.com > > >www.learningjquery.com > > > > On Jul 6, 2008, at 11:55 AM, clorentzen wrote: > > > >> I am looking to add an expander/truncator feature to a site I'm > > >> building. However, the plugins and other code snippets I've found cut > > >> off text based on character count. What I'm looking for is something > > >> that cuts off based on a specific number of paragraphs. So, for > > >> example, inside a targeted div, after the second it would hide > > >> all > > >> remaining s, and insert a "read more" link. Clicking would expose > > >> the hidden elements and add a "read less" link. > > > >> I haven't been able to figure out a way to do this... Can anyone > > >> point > > >> me in the right direction? I've posted an example page here: > > > >>http://www.cement-site.com/truncator/example.shtml > > > >> It's making use of the truncator plugin found here: > > >>http://henrik.nyh.se/2008/02/jquery-html-truncate > > > >> (I've also tried Karl Swedberg's Expander plugin, but it doesn't seem > > >> appropriate in this case since it's not intended to truncate/expand > > >> across multiple block-level elements.) > > > >> Can this truncator plugin code be modified to count s rather than > > >> characters? Or is there a simpler/better way to accomplish this? > > > >> Thanks!
[jQuery] Re: Need truncator/Expander help (trimming on # of objects rather than character count)
Karl -- Wow! Thank you so much for this! Exactly what I needed! Best, --Carl. On Jul 6, 3:50 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote: > sorry, but I'm changing the name from summarizer (with an r) to > summarize. Seems to make more sense as a verb. so now you can find it > at: > > http://plugins.learningjquery.com/summarize/ > > --Karl > > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > On Jul 6, 2008, at 3:22 PM, Karl Swedberg wrote: > > > > > sounds like a reasonable thing to want, so I just whipped up a new > > plugin for you: > > >http://plugins.learningjquery.com/summarizer/ > > > Please keep in mind that it hasn't been tested extensively, and the > > documentation is kind of spotty, but it shouldn't be too hard to > > figure out how it works. > > > One important thing to note is that your selector should be the > > parent element of the elements you want to expand/collapse. > > > --Karl > > > > Karl Swedberg > >www.englishrules.com > >www.learningjquery.com > > > On Jul 6, 2008, at 11:55 AM, clorentzen wrote: > > >> I am looking to add an expander/truncator feature to a site I'm > >> building. However, the plugins and other code snippets I've found cut > >> off text based on character count. What I'm looking for is something > >> that cuts off based on a specific number of paragraphs. So, for > >> example, inside a targeted div, after the second it would hide > >> all > >> remaining s, and insert a "read more" link. Clicking would expose > >> the hidden elements and add a "read less" link. > > >> I haven't been able to figure out a way to do this... Can anyone > >> point > >> me in the right direction? I've posted an example page here: > > >>http://www.cement-site.com/truncator/example.shtml > > >> It's making use of the truncator plugin found here: > >>http://henrik.nyh.se/2008/02/jquery-html-truncate > > >> (I've also tried Karl Swedberg's Expander plugin, but it doesn't seem > >> appropriate in this case since it's not intended to truncate/expand > >> across multiple block-level elements.) > > >> Can this truncator plugin code be modified to count s rather than > >> characters? Or is there a simpler/better way to accomplish this? > > >> Thanks!
[jQuery] Need truncator/Expander help (trimming on # of objects rather than character count)
I am looking to add an expander/truncator feature to a site I'm building. However, the plugins and other code snippets I've found cut off text based on character count. What I'm looking for is something that cuts off based on a specific number of paragraphs. So, for example, inside a targeted div, after the second it would hide all remaining s, and insert a "read more" link. Clicking would expose the hidden elements and add a "read less" link. I haven't been able to figure out a way to do this... Can anyone point me in the right direction? I've posted an example page here: http://www.cement-site.com/truncator/example.shtml It's making use of the truncator plugin found here: http://henrik.nyh.se/2008/02/jquery-html-truncate (I've also tried Karl Swedberg's Expander plugin, but it doesn't seem appropriate in this case since it's not intended to truncate/expand across multiple block-level elements.) Can this truncator plugin code be modified to count s rather than characters? Or is there a simpler/better way to accomplish this? Thanks!
[jQuery] How to get text content in nested list
I'm trying to get the text contents of a list item that also contains a nested list -- but only want the text content of the parent , and not the also contained within it. Markup would look something like: The list item text Sub item one Sub item two Sub item three So what I'm trying to get jQuery to capture is "The list item text", but nothing else in that ... Is there a way to accomplish this? Thank you!
[jQuery] help with toggling classes(!)
I'm not sure if "toggling classes" is the right way to describe what
I'm having trouble with, so let me explain a little...
If you look at the example page here:
http://www.cement-site.com/menutest/test2.html
Here are the behaviors:
1) mousing over any of the four tabs produces a hover state
2) Clicking on any of the first three tabs produces an "on" state,
displays the corresponding menu panel, and puts the other tabs in
their "dimmed" state
3) Clicking on another tab when one is already "on" hides the previous
panel, and correctly applies "on" and "dimmed" states
Here's the bit that's not working:
4) if you toggle an exposed panel/tab, the panel hides (correct), its
tab states goes back to the default (also correct), but the other
three tabs are left in their "dimmed" state, rather than going back to
their default state.
5) Also, if you click back and forth between tabs, the "on" state
isn't getting properly toggled (bolding is lost on repeated clicks
back and forth).
Now, the "dimmed" tabs have a class added to them; if I change it from
addClass to toggleClass this produces incorrect results when doing #3
above.
I'm not sure what I need to do -- but my thought is that I need to
test to see if any menu panels are visible. If none are, make sure the
"navDim" class is removed from all the tags. But I'm not sure how
to correctly test for this -- or even if this is the most efficient
thing to do. My jQuery code is below.
jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed,
easing, callback);
};
$(document).ready(function() {
$('div#mainNav> div.navLinks').hide();
$('div#mainNav> h2').hover(
function () {
$(this).children().addClass('navHover');
},
function () {
$(this).children().removeClass('navHover');
}
);
$('div#mainNav> h2.hasMenu').click(function() {
var tc = $(this).attr('class').split(' ').slice(0, 1);
if ($(this).hasClass('navDim'))
$(this).removeClass('navDim');
$(this).toggleClass('navSel');
if ($(this).siblings('h2').not('navDim'))
$(this).siblings('h2').addClass('navDim');
var nd = $('div#mainNav> div[class*=' + tc + ']');
$(nd).slideFadeToggle('fast');
$(nd).siblings('div').hide();
return false;
});
});
Thank you!
[jQuery] help with toggling behavior
I'm new to jquery (and am no javascript pro), and am having trouble
figuring out two things with a behavior that I've put together:
1) how do I simplify this code so that it can be used for numerous
instances on the page, without having to have repeats of the code with
the ids changed out? Can I somehow 'find' partial matches between ids
on the page, based on the id of the item being clicked? (Each 'pair'
of items has similarly named ids -- eg. navProducts and linksProducts)
2) the 'navDim' style needs to toggle off if it's on for any , but
not toggle if it's not in use. I'm having trouble getting that to
happen properly.
The scripting for #navProducts is the most complete chunk, however it
doesn't work correctly if I duplicate it similarly for my other ids.
Any and all suggestions really appreciated. Thanks! Code below:
jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed,
easing, callback);
};
$(document).ready(function() {
$('li#navProducts').click(function() {
$('li#navProducts').removeClass('navDim');
$('li#navProducts').siblings('li.navSel').removeClass('navSel');
$('#linksProducts').slideFadeToggle('normal');
$('li#navProducts').toggleClass('navSel');
$('li#navProducts').siblings('li').toggleClass('navDim');
$('#linksProducts').siblings('div:visible').slideUp('fast');
return false;
});
$('li#navBrands').click(function() {
$('li#navBrands').siblings('li.navSel').removeClass('navSel');
$('#linksBrands').slideFadeToggle('normal');
$(this).toggleClass('navSel');
$('#linksBrands').siblings('div:visible').slideUp('fast');
return false;
});
$('li#navSites').click(function() {
$('li#navSites').siblings('li.navSel').removeClass('navSel');
$('#linksSites').slideFadeToggle('normal');
$(this).toggleClass('navSel');
$('#linksSites').siblings('div:visible').slideUp('fast');
return false;
});
$('li#navLocations').click(function() {
$
('li#navLocations').siblings('li.navSel').removeClass('navSel');
$('#linksLocations').slideFadeToggle('normal');
$(this).toggleClass('navSel');
$('#linksLocations').siblings('div:visible').slideUp('fast');
return false;
});
});
