[jQuery] Re: Plugin for styling select ?
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 amysch...@gmail.com 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 select 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 (#8220;)... So, for example, one cell in the column might be: tdemTitle of Book/em/td while another would be: td#8220;Title of Article#8221;/td 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] 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: 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 joern.zaeffe...@googlemail.com
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 carl.lorent...@gmail.com 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] 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 afles...@gmail.com 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 carl.lorent...@gmail.com 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 afles...@gmail.com 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 carl.lorent...@gmail.com 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 carl.lorent...@gmail.com 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
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 afles...@gmail.com 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 carl.lorent...@gmail.com 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 afles...@gmail.com 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 carl.lorent...@gmail.com
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 afles...@gmail.com 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 carl.lorent...@gmail.com 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 carl.lorent...@gmail.com 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
[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: 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 carl.lorent...@gmail.com 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
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 afles...@gmail.com 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 carl.lorent...@gmail.com 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 carl.lorent...@gmail.com 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] selector question
Hi -- I'm trying to hide all the contents from tds within a table *except* for the first td in each tr... I don't want to hide the tds, just their contents, but I'm having trouble finding the correct selector(s) to accomplish this. So, for example, if the table is: table tr tdone/td tdtwo/td tdthree/td /tr tr tdfour/td tdfive/td tdsix/td /tr /table 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: selector question
Thanks! The lack of something else wrapping each tds 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 tds within a table *except*
for the first td in each tr... I don't want to hide the tds,
just their contents, but I'm having trouble finding the correct
selector(s) to accomplish this.
table
tr
tdone/td
tdtwo/td
tdthree/td
/tr
tr
tdfour/td
tdfive/td
tdsix/td
/tr
/table
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] 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 --
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] 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] 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 select 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 selec object option list (relatedTarget?)
Hi -- I'm working on a site with a nav area that exposes panels/menus when a parent li is hovered over -- using hover(). Some of these panels contain forms, including select 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 select, and therefore not contained within the parent li, so it reacts as if the parent li 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 li as still registering as hovered. 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 p it would hide all remaining ps, 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 ps 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 p it would hide all remaining ps, 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 ps 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 -- 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 p it would hide all remaining ps, 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 ps 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 li, and not the ul also contained within it. Markup would look something like: ul class=specialList liThe list item text ul lia href=#Sub item one/a/li lia href=#Sub item two/a/li lia href=#Sub item three/a/li /ul /li /ul So what I'm trying to get jQuery to capture is The list item text, but nothing else in that li... 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 h2 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 li, 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;
});
});
