[jQuery] Re: Set property based on sibling width()
Wow! It really is that simple. Thanks.
On Oct 5, 12:19 pm, brian bally.z...@gmail.com wrote:
$('.caption').each(function()
{
$this.width($this.find('img').width());
}
On Mon, Oct 5, 2009 at 11:52 AM, bombaru bomb...@gmail.com wrote:
Can somebody help me out? I'm trying to set a width of a span class
based on the width of the image inside of it. I've got a container
that will also have a bunch of images... some of them will have
captions and will be wrapped in a class caption... some will not be
wrapped in the caption class. I'm trying to loop through the
container... find all the caption classes... and then set the width
of the caption class based on the width of the image inside of it.
Here's what a basic image with a caption will look like:
span class=caption fltrt
img src= alt= /
pcaption goes here/p
/span
I'm able to look through the containing div and locate all the images
and then get their width using the following:
// Find all images in the overview section
var overviewImgs = $(.overview-content).find(img);
// Get the width of each image in the overview section
for (i = 0; i overviewImgs.length; i++) {
console.log($(.overview-content).find('img:eq('+i+')').width());
}
I can't figure out how to loop through and find all the instances of
caption and then set the width of the caption class based on the
width of the image inside of it.
I can find all the caption classes... and I can find all the images
and get the image widths... but I'm not sure how to combine these two
so I am only finding the images inside of the caption class and then
setting the caption class width based on the width of the image
inside of it.
The images are added by a separate content developer and can be any
size. Not all images will have captions... only the ones wrapped in
the caption class.
Any ideas? I'm at a loss.
Thanks.
[jQuery] Set property based on sibling width()
Can somebody help me out? I'm trying to set a width of a span class
based on the width of the image inside of it. I've got a container
that will also have a bunch of images... some of them will have
captions and will be wrapped in a class caption... some will not be
wrapped in the caption class. I'm trying to loop through the
container... find all the caption classes... and then set the width
of the caption class based on the width of the image inside of it.
Here's what a basic image with a caption will look like:
span class=caption fltrt
img src= alt= /
pcaption goes here/p
/span
I'm able to look through the containing div and locate all the images
and then get their width using the following:
// Find all images in the overview section
var overviewImgs = $(.overview-content).find(img);
// Get the width of each image in the overview section
for (i = 0; i overviewImgs.length; i++) {
console.log($(.overview-content).find('img:eq('+i+')').width());
}
I can't figure out how to loop through and find all the instances of
caption and then set the width of the caption class based on the
width of the image inside of it.
I can find all the caption classes... and I can find all the images
and get the image widths... but I'm not sure how to combine these two
so I am only finding the images inside of the caption class and then
setting the caption class width based on the width of the image
inside of it.
The images are added by a separate content developer and can be any
size. Not all images will have captions... only the ones wrapped in
the caption class.
Any ideas? I'm at a loss.
Thanks.
[jQuery] Re: loop/count
OK... I figured something out to achieve the functionality I'm after.
This will set the first span to active and then add/remove the active
class when the user cycles through using the previous and next
buttons. Since the carousel is a circular loop, I am then addressing
the case when the user is on the first item and hits the previous
button or on the last item and hits the next button. Here's the code
I fudged together:
$('.item-list ul li').each(function(i) {
$('.visual-cue p').append(span/span);
});
$('.visual-cue p span:first').addClass('active');
$('#carousel-next').click(function() {
if($('.visual-cue p span:last.active').length 0) {
$('.visual-cue p
span:last').removeClass('active');
$('.visual-cue p
span:first').addClass('active');
} else {
$('.visual-cue p
span.active').removeClass('active').next().addClass
('active');
}
});
$('#carousel-prev').click(function() {
if($('.visual-cue p span:first.active').length 0) {
$('.visual-cue p
span:first').removeClass('active');
$('.visual-cue p span:last').addClass('active');
} else {
$('.visual-cue p
span.active').removeClass('active').prev().addClass
('active');
}
});
Surely there's got to be a better/cleaner way to achieve this. Thanks
for any help/assistance you can provide.
On Aug 24, 5:15 pm, bombaru bomb...@gmail.com wrote:
Thanks James...
Here's what I've got working:
$('.item-list ul li').each(function(i) {
$('.visual-cue p').append(span/span);
});
$('.visual-cue p span:first').addClass('active');
$('#carousel-next').click(function () {
$('.visual-cue p
span.active').removeClass('active').next().addClass
('active');
});
$('#carousel-prev').click(function () {
$('.visual-cue p
span.active').removeClass('active').prev().addClass
('active');
});
I'm sure there is a more efficient way of writing this, but for now,
at least it's working the way I envisioned it. It's going through,
counting the number of li tags that are returned, and then appending
the same number of span tags. I'm then adding an active class to
the first span tag and changing that with the click function.
The problem I am now having is looping through the results correctly.
The carousel loops, but the above function does not. I need this to
start over at the beginning when it reaches the last one if the user
is clicking the next button, and vice-versa if the user is using the
previous button action.
Thanks again for your help.
On Aug 24, 5:04 pm, James james.gp@gmail.com wrote:
So basically you just want to know how many span tags there are?
If so, something like this could work (untested):
var count = $(div.visual-cue span).length;
On Aug 24, 10:31 am, bombaru bomb...@gmail.com wrote:
I'm trying to add a navigational aid to a carousel that I'm working
on. Basically, I want to visually display the number of results in the
carousel and then highlight the result that is currently in the first
position as the user scrolls through the result set - providing a
visual cue to the user as to where they are in the result set. I've
seen this before on other carousels and it's sort of the same concept
that Apple uses in the iPhone and iPod screens. I know this can be
done rather easily with a bit of jQuery, but my brain is fried. You
can see a mock-up of what I'm trying to achieve here:
http://rule13.com/development/carousel.gif
I'm trying to loop through the result set and count how many items are
returned... then display something like the image above. As a user
navigates through the carousel, an active state is added to the visual
cue. The code I am working with for the visual cue section is
currently just a bunch of span tags (I'm open to alternate
approaches). The number of span tags returned would be the same
number of results returned in the carousel.
div class=visual-cue
pspan/spanspan/spanspan class=active/
spanspan/spanspan/spanspan/spanspan/spanspan/
spanspan/spanspan/span/p
/div
Here's the CSS:
/* visual cue */
#accessorize div.visual-cue {height:16px; line-height:16px;
position:absolute; right:0; width:266px; top:-40px;}
#accessorize div.visual-cue p {text-align:right; line-height:16px;
float:right;}
#accessorize div.visual-cue p span {display:block; background:#fff;
width:10px; height:10px; border:2px solid #EFEFEF; margin-left:2px;
float:left;}
#accessorize div.visual-cue p span.active {background:#D3D3D3; border:
2px solid #D3D3D3;}
Does anyone know how I can achieve this or can someone steer me in the
right
[jQuery] Re: loop/count
For some reason, jQuery 1.3 does not like the if statement in the code
sample - else will never fire. This works fine as is in 1.2.6.
Does anybody know what could be the culprit here? I'm assuming the if
is always returning true, so the else never gets fired... I'm just not
sure how to get around this though.
Thanks
On Aug 25, 11:57 am, bombaru bomb...@gmail.com wrote:
OK... I figured something out to achieve the functionality I'm after.
This will set the first span to active and then add/remove the active
class when the user cycles through using the previous and next
buttons. Since the carousel is a circular loop, I am then addressing
the case when the user is on the first item and hits the previous
button or on the last item and hits the next button. Here's the code
I fudged together:
$('.item-list ul li').each(function(i) {
$('.visual-cue p').append(span/span);
});
$('.visual-cue p span:first').addClass('active');
$('#carousel-next').click(function() {
if($('.visual-cue p span:last.active').length 0) {
$('.visual-cue p
span:last').removeClass('active');
$('.visual-cue p
span:first').addClass('active');
} else {
$('.visual-cue p
span.active').removeClass('active').next().addClass
('active');
}
});
$('#carousel-prev').click(function() {
if($('.visual-cue p span:first.active').length 0) {
$('.visual-cue p
span:first').removeClass('active');
$('.visual-cue p
span:last').addClass('active');
} else {
$('.visual-cue p
span.active').removeClass('active').prev().addClass
('active');
}
});
Surely there's got to be a better/cleaner way to achieve this. Thanks
for any help/assistance you can provide.
On Aug 24, 5:15 pm, bombaru bomb...@gmail.com wrote:
Thanks James...
Here's what I've got working:
$('.item-list ul li').each(function(i) {
$('.visual-cue p').append(span/span);
});
$('.visual-cue p span:first').addClass('active');
$('#carousel-next').click(function () {
$('.visual-cue p
span.active').removeClass('active').next().addClass
('active');
});
$('#carousel-prev').click(function () {
$('.visual-cue p
span.active').removeClass('active').prev().addClass
('active');
});
I'm sure there is a more efficient way of writing this, but for now,
at least it's working the way I envisioned it. It's going through,
counting the number of li tags that are returned, and then appending
the same number of span tags. I'm then adding an active class to
the first span tag and changing that with the click function.
The problem I am now having is looping through the results correctly.
The carousel loops, but the above function does not. I need this to
start over at the beginning when it reaches the last one if the user
is clicking the next button, and vice-versa if the user is using the
previous button action.
Thanks again for your help.
On Aug 24, 5:04 pm, James james.gp@gmail.com wrote:
So basically you just want to know how many span tags there are?
If so, something like this could work (untested):
var count = $(div.visual-cue span).length;
On Aug 24, 10:31 am, bombaru bomb...@gmail.com wrote:
I'm trying to add a navigational aid to a carousel that I'm working
on. Basically, I want to visually display the number of results in the
carousel and then highlight the result that is currently in the first
position as the user scrolls through the result set - providing a
visual cue to the user as to where they are in the result set. I've
seen this before on other carousels and it's sort of the same concept
that Apple uses in the iPhone and iPod screens. I know this can be
done rather easily with a bit of jQuery, but my brain is fried. You
can see a mock-up of what I'm trying to achieve here:
http://rule13.com/development/carousel.gif
I'm trying to loop through the result set and count how many items are
returned... then display something like the image above. As a user
navigates through the carousel, an active state is added to the visual
cue. The code I am working with for the visual cue section is
currently just a bunch of span tags (I'm open to alternate
approaches). The number of span tags returned would be the same
number of results returned in the carousel.
div class=visual-cue
pspan/spanspan/spanspan class=active/
spanspan/spanspan/spanspan/spanspan/spanspan/
spanspan/spanspan/span/p
/div
Here's the CSS:
/* visual cue */
#accessorize div.visual-cue {height:16px; line-height:16px
[jQuery] loop/count
I'm trying to add a navigational aid to a carousel that I'm working
on. Basically, I want to visually display the number of results in the
carousel and then highlight the result that is currently in the first
position as the user scrolls through the result set - providing a
visual cue to the user as to where they are in the result set. I've
seen this before on other carousels and it's sort of the same concept
that Apple uses in the iPhone and iPod screens. I know this can be
done rather easily with a bit of jQuery, but my brain is fried. You
can see a mock-up of what I'm trying to achieve here:
http://rule13.com/development/carousel.gif
I'm trying to loop through the result set and count how many items are
returned... then display something like the image above. As a user
navigates through the carousel, an active state is added to the visual
cue. The code I am working with for the visual cue section is
currently just a bunch of span tags (I'm open to alternate
approaches). The number of span tags returned would be the same
number of results returned in the carousel.
div class=visual-cue
pspan/spanspan/spanspan class=active/
spanspan/spanspan/spanspan/spanspan/spanspan/
spanspan/spanspan/span/p
/div
Here's the CSS:
/* visual cue */
#accessorize div.visual-cue {height:16px; line-height:16px;
position:absolute; right:0; width:266px; top:-40px;}
#accessorize div.visual-cue p {text-align:right; line-height:16px;
float:right;}
#accessorize div.visual-cue p span {display:block; background:#fff;
width:10px; height:10px; border:2px solid #EFEFEF; margin-left:2px;
float:left;}
#accessorize div.visual-cue p span.active {background:#D3D3D3; border:
2px solid #D3D3D3;}
Does anyone know how I can achieve this or can someone steer me in the
right direction?
Thanks.
[jQuery] Re: loop/count
Thanks James...
Here's what I've got working:
$('.item-list ul li').each(function(i) {
$('.visual-cue p').append(span/span);
});
$('.visual-cue p span:first').addClass('active');
$('#carousel-next').click(function () {
$('.visual-cue p
span.active').removeClass('active').next().addClass
('active');
});
$('#carousel-prev').click(function () {
$('.visual-cue p
span.active').removeClass('active').prev().addClass
('active');
});
I'm sure there is a more efficient way of writing this, but for now,
at least it's working the way I envisioned it. It's going through,
counting the number of li tags that are returned, and then appending
the same number of span tags. I'm then adding an active class to
the first span tag and changing that with the click function.
The problem I am now having is looping through the results correctly.
The carousel loops, but the above function does not. I need this to
start over at the beginning when it reaches the last one if the user
is clicking the next button, and vice-versa if the user is using the
previous button action.
Thanks again for your help.
On Aug 24, 5:04 pm, James james.gp@gmail.com wrote:
So basically you just want to know how many span tags there are?
If so, something like this could work (untested):
var count = $(div.visual-cue span).length;
On Aug 24, 10:31 am, bombaru bomb...@gmail.com wrote:
I'm trying to add a navigational aid to a carousel that I'm working
on. Basically, I want to visually display the number of results in the
carousel and then highlight the result that is currently in the first
position as the user scrolls through the result set - providing a
visual cue to the user as to where they are in the result set. I've
seen this before on other carousels and it's sort of the same concept
that Apple uses in the iPhone and iPod screens. I know this can be
done rather easily with a bit of jQuery, but my brain is fried. You
can see a mock-up of what I'm trying to achieve here:
http://rule13.com/development/carousel.gif
I'm trying to loop through the result set and count how many items are
returned... then display something like the image above. As a user
navigates through the carousel, an active state is added to the visual
cue. The code I am working with for the visual cue section is
currently just a bunch of span tags (I'm open to alternate
approaches). The number of span tags returned would be the same
number of results returned in the carousel.
div class=visual-cue
pspan/spanspan/spanspan class=active/
spanspan/spanspan/spanspan/spanspan/spanspan/
spanspan/spanspan/span/p
/div
Here's the CSS:
/* visual cue */
#accessorize div.visual-cue {height:16px; line-height:16px;
position:absolute; right:0; width:266px; top:-40px;}
#accessorize div.visual-cue p {text-align:right; line-height:16px;
float:right;}
#accessorize div.visual-cue p span {display:block; background:#fff;
width:10px; height:10px; border:2px solid #EFEFEF; margin-left:2px;
float:left;}
#accessorize div.visual-cue p span.active {background:#D3D3D3; border:
2px solid #D3D3D3;}
Does anyone know how I can achieve this or can someone steer me in the
right direction?
Thanks.
[jQuery] dom_init
I came across the following script tag in a framework. I've never seen this before and have no clue why it would be used. Can someone help shed some light on this? script type=text/javascriptjQuery(dom_init);/script
[jQuery] Re: li:nth-child(10) toggle
Works like a champ! Thank you again (mkmanning and karl) for all of
your help.
On Jun 19, 9:16 pm, bombaru bomb...@gmail.com wrote:
Thanks mkmanning!!! I'll give this a try tomorrow and let you know.
Looking at it though... I'm pretty confident it will do the trick.
It's amazing how much more efficiently the original chunk of code can
be written and it still makes perfect sense (actually it's clearer).
On Jun 19, 7:36 pm, Karl Swedberg k...@englishrules.com wrote:
Ah, I see. Helps to be able to see the HTML.
Let us know if mkmanning's approach doesn't do the trick.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jun 19, 2009, at 5:56 PM, bombaru wrote:
Thanks Karl... I'm not familiar with slice() but will definitely read
up on it. The problem I'm having with this approach is that every LI
after the 10th one is being hidden.
Here's an example of what the HTML looks like without any JS applied
to it:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
/li
li class=main
Brand
ul
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
/li
li class=mainetc.../li
/ul
The HTML after your approach looks something like this:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
ul style=display:none;
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
a href=#more/a
/li
li class=main
Brand
ul/
ul style=display:none;
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
a href=#more/a
/li
li class=mainetc.../li
/ul
Something is getting screwed up. The first group looks good (but the
toggle does not work). From then on, the following LI groups are all
hidden and there's a strange ul / tag being inserted into the mix.
Any ideas?
On Jun 19, 5:18 pm, Karl Swedberg k...@englishrules.com wrote:
I'd probably use .slice().
Something like this should work:
$(document).ready(function() {
var $list = $('.main ul'),
$items = $list.find('li'),
$moreLink = $('a href=#more/a');
if ($items.length 10) {
$moreItems = $('ul/ul').append($items.slice(10)).hide();
$list.after($moreLink).after($moreItems);
$moreLink.click(function() {
$(this).text($(this).text() == 'more' ? 'less' : 'more');
$moreItems.slideToggle();
return false;
});
}
});
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jun 19, 2009, at 4:54 PM, bombaru wrote:
There has got to be a better way to write this? Basically, I'm
returning a bunch of list item and after the 10th one, setting the
rest to display:none and adding a more link. Clicking on the
more
link removes the display:none and adds a less link at the bottom.
I think
[jQuery] Re: li:nth-child(10) toggle
One question with this approach... how would I implement this only on
groups that contain more than 10 LI's? Right now it's getting added
to every LI group. Groups with less than 10 LI's are also getting the
more link appended but there is obviously nothing to toggle.
Thanks again. This approach is a lot cleaner that what I had
concocted and work with jQuery 1.3.2.
On Jun 19, 9:16 pm, bombaru bomb...@gmail.com wrote:
Thanks mkmanning!!! I'll give this a try tomorrow and let you know.
Looking at it though... I'm pretty confident it will do the trick.
It's amazing how much more efficiently the original chunk of code can
be written and it still makes perfect sense (actually it's clearer).
On Jun 19, 7:36 pm, Karl Swedberg k...@englishrules.com wrote:
Ah, I see. Helps to be able to see the HTML.
Let us know if mkmanning's approach doesn't do the trick.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jun 19, 2009, at 5:56 PM, bombaru wrote:
Thanks Karl... I'm not familiar with slice() but will definitely read
up on it. The problem I'm having with this approach is that every LI
after the 10th one is being hidden.
Here's an example of what the HTML looks like without any JS applied
to it:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
/li
li class=main
Brand
ul
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
/li
li class=mainetc.../li
/ul
The HTML after your approach looks something like this:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
ul style=display:none;
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
a href=#more/a
/li
li class=main
Brand
ul/
ul style=display:none;
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
a href=#more/a
/li
li class=mainetc.../li
/ul
Something is getting screwed up. The first group looks good (but the
toggle does not work). From then on, the following LI groups are all
hidden and there's a strange ul / tag being inserted into the mix.
Any ideas?
On Jun 19, 5:18 pm, Karl Swedberg k...@englishrules.com wrote:
I'd probably use .slice().
Something like this should work:
$(document).ready(function() {
var $list = $('.main ul'),
$items = $list.find('li'),
$moreLink = $('a href=#more/a');
if ($items.length 10) {
$moreItems = $('ul/ul').append($items.slice(10)).hide();
$list.after($moreLink).after($moreItems);
$moreLink.click(function() {
$(this).text($(this).text() == 'more' ? 'less' : 'more');
$moreItems.slideToggle();
return false;
});
}
});
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jun 19, 2009, at 4:54 PM, bombaru wrote
[jQuery] Re: li:nth-child(10) toggle
You are a rock star! I can't thank you enough.
On Jun 20, 1:55 pm, mkmanning michaell...@gmail.com wrote:
A minor refactor then:
$('.main ul').each(function(){
var $this = $(this), lis = $this.find('li:gt(9)').hide();
if(lis.length0){
$this.append($('li').text('More').click(function(){
lis.toggle();
$(this).text($(this).text() === 'More' ? 'Less' :
'More');
}));
}
});
Hide everything at index 10+, then check the length of the jQuery
object from that operation. If it's length is greater than 0, go ahead
and add the 'More' link.
On Jun 20, 10:11 am, bombaru bomb...@gmail.com wrote:
One question with this approach... how would I implement this only on
groups that contain more than 10 LI's? Right now it's getting added
to every LI group. Groups with less than 10 LI's are also getting the
more link appended but there is obviously nothing to toggle.
Thanks again. This approach is a lot cleaner that what I had
concocted and work with jQuery 1.3.2.
On Jun 19, 9:16 pm, bombaru bomb...@gmail.com wrote:
Thanks mkmanning!!! I'll give this a try tomorrow and let you know.
Looking at it though... I'm pretty confident it will do the trick.
It's amazing how much more efficiently the original chunk of code can
be written and it still makes perfect sense (actually it's clearer).
On Jun 19, 7:36 pm, Karl Swedberg k...@englishrules.com wrote:
Ah, I see. Helps to be able to see the HTML.
Let us know if mkmanning's approach doesn't do the trick.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jun 19, 2009, at 5:56 PM, bombaru wrote:
Thanks Karl... I'm not familiar with slice() but will definitely read
up on it. The problem I'm having with this approach is that every LI
after the 10th one is being hidden.
Here's an example of what the HTML looks like without any JS applied
to it:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
/li
li class=main
Brand
ul
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
/li
li class=mainetc.../li
/ul
The HTML after your approach looks something like this:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
ul style=display:none;
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
a href=#more/a
/li
li class=main
Brand
ul/
ul style=display:none;
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
a href=#more/a
/li
li class=mainetc.../li
/ul
Something is getting screwed up. The first
[jQuery] Re: Unresponsive Script
I've pinpointed the script that's causing the timeout. Commenting
this script out resolves the issue. I don't see anything in this
script however that is out of place. I'd be curious if some better
trained eyes find something.
Thanks again for all of your help.
==//
jQuery(document).ready(function($) {
var searchHandler = 'MoneySearch';
function mousedownSearchTracking(e) {
var $zone = $(this);
if (typeof (e.data.action) == undefined) {
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
}
else if (e.data.action == link) {
var linkText = $zone.text();
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + linkText) // with link data
}
else if (e.data.action == position) {
var position = $zone.attr('position');
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + position) // add position data
}
$zone.unbind('mousedown');
}
/// Handle the Search box submit on the Search page
function submitSearchTracking(e) {
var $zone = $(this);
var inputValue = $('input[id=prod-search]').val(); // get the
search value the user typed in
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
$zone.unbind('submit');
}
// Click Events to bind
// ---
// re-search
$('form[id=searchform]').bind('submit', { section: :re-search },
submitSearchTracking);
// Did You Mean
$('div.did-you-mean a').bind('mousedown', { section:
:DidYouMean }, mousedownSearchTracking);
// Category filters
$(li[trackcat='Category'] ul li).not($(li.toggle)).each
(function(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Category'] ul li:nth-child( + thiscounter +
) a).bind('mousedown', { section: :Category + thiscounter },
mousedownSearchTracking);
});
// Brand filters
$(li[trackcat='Brand'] ul li).not($(li.toggle)).each(function
(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Brand'] ul li:nth-child( + thiscounter + )
a).bind('mousedown', { section: :Brand + thiscounter },
mousedownSearchTracking);
});
// Price range filters
$(li[trackcat='Price Range'] ul li a).each(function(counter) {
$(this).bind('mousedown', { section: :PriceRange },
mousedownSearchTracking);
});
// Customer rating filters
$(li[trackcat='Customer Rating'] ul li a).each(function(counter)
{
searchHandler = 'MoneySearchB';
var inputValue = $(this).text();
if (inputValue.search(5 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating5Stars }, mousedownSearchTracking);
else if (inputValue.search(4 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating4Stars }, mousedownSearchTracking);
else if (inputValue.search(3 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating3Stars }, mousedownSearchTracking);
else if (inputValue.search(2 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating2Stars }, mousedownSearchTracking);
else if (inputValue.search(1 star) -1)
$(this).bind('mousedown', { section:
:CustomerRating1Star }, mousedownSearchTracking);
else if (inputValue.search(Not Yet Rated) -1)
$(this).bind('mousedown', { section:
:CustomerRatingNotYetRated }, mousedownSearchTracking);
});
// The 'more' buttons to expand long filters
$(li[trackcat='Category'] li.toggle a).bind('mousedown',
{ section: :CategoryMore }, mousedownSearchTracking);
$(li[trackcat='Brand'] li.toggle a).bind('mousedown', { section:
:BrandMore }, mousedownSearchTracking);
// Learn tab content
$(ul[trackcat='learntabcontent'] li).each(function(counter) {
var thiscounter = counter + 1;
$(ul[trackcat='learntabcontent'] li:nth-child( + thiscounter
+ ) a).bind('mousedown', { section: :Article + thiscounter },
mousedownSearchTracking);
});
// Support content
$(ul[trackcat='supportcontent'] li).each(function(counter) {
var thiscounter = counter + 1;
$(ul[trackcat='supportcontent'] li:nth-child( + thiscounter
+ ) a).bind('mousedown', { section: :Support + thiscounter },
mousedownSearchTracking);
});
// Community content
$(ul[trackcat='communitycontent'] li).each(function(counter) {
var thiscounter = counter + 1;
$(ul[trackcat='communitycontent'] li:nth-child( +
thiscounter + ) a).bind('mousedown', { section:
[jQuery] Re: Unresponsive Script
I've pinpointed the script that's causing the timeout. Commenting
this script out resolves the issue. I don't see anything in this
script however that is out of place. I'd be curious if some better
trained eyes find something.
Thanks again for all of your help.
==//
jQuery(document).ready(function($) {
var searchHandler = 'MoneySearch';
function mousedownSearchTracking(e) {
var $zone = $(this);
if (typeof (e.data.action) == undefined) {
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
}
else if (e.data.action == link) {
var linkText = $zone.text();
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + linkText) // with link data
}
else if (e.data.action == position) {
var position = $zone.attr('position');
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + position) // add position data
}
$zone.unbind('mousedown');
}
/// Handle the Search box submit on the Search page
function submitSearchTracking(e) {
var $zone = $(this);
var inputValue = $('input[id=prod-search]').val(); // get the
search value the user typed in
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
$zone.unbind('submit');
}
// Click Events to bind
// ---
// re-search
$('form[id=searchform]').bind('submit', { section: :re-search },
submitSearchTracking);
// Did You Mean
$('div.did-you-mean a').bind('mousedown', { section:
:DidYouMean }, mousedownSearchTracking);
// Category filters
$(li[trackcat='Category'] ul li).not($(li.toggle)).each
(function(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Category'] ul li:nth-child( + thiscounter +
) a).bind('mousedown', { section: :Category + thiscounter },
mousedownSearchTracking);
});
// Brand filters
$(li[trackcat='Brand'] ul li).not($(li.toggle)).each(function
(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Brand'] ul li:nth-child( + thiscounter + )
a).bind('mousedown', { section: :Brand + thiscounter },
mousedownSearchTracking);
});
// Price range filters
$(li[trackcat='Price Range'] ul li a).each(function(counter) {
$(this).bind('mousedown', { section: :PriceRange },
mousedownSearchTracking);
});
// Customer rating filters
$(li[trackcat='Customer Rating'] ul li a).each(function(counter)
{
searchHandler = 'MoneySearchB';
var inputValue = $(this).text();
if (inputValue.search(5 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating5Stars }, mousedownSearchTracking);
else if (inputValue.search(4 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating4Stars }, mousedownSearchTracking);
else if (inputValue.search(3 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating3Stars }, mousedownSearchTracking);
else if (inputValue.search(2 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating2Stars }, mousedownSearchTracking);
else if (inputValue.search(1 star) -1)
$(this).bind('mousedown', { section:
:CustomerRating1Star }, mousedownSearchTracking);
else if (inputValue.search(Not Yet Rated) -1)
$(this).bind('mousedown', { section:
:CustomerRatingNotYetRated }, mousedownSearchTracking);
});
// The 'more' buttons to expand long filters
$(li[trackcat='Category'] li.toggle a).bind('mousedown',
{ section: :CategoryMore }, mousedownSearchTracking);
$(li[trackcat='Brand'] li.toggle a).bind('mousedown', { section:
:BrandMore }, mousedownSearchTracking);
// Learn tab content
$(ul[trackcat='learntabcontent'] li).each(function(counter) {
var thiscounter = counter + 1;
$(ul[trackcat='learntabcontent'] li:nth-child( + thiscounter
+ ) a).bind('mousedown', { section: :Article + thiscounter },
mousedownSearchTracking);
});
// Support content
$(ul[trackcat='supportcontent'] li).each(function(counter) {
var thiscounter = counter + 1;
$(ul[trackcat='supportcontent'] li:nth-child( + thiscounter
+ ) a).bind('mousedown', { section: :Support + thiscounter },
mousedownSearchTracking);
});
// Community content
$(ul[trackcat='communitycontent'] li).each(function(counter) {
var thiscounter = counter + 1;
$(ul[trackcat='communitycontent'] li:nth-child( +
thiscounter + ) a).bind('mousedown', { section:
[jQuery] Re: Unresponsive Script
I think it's the if/else if statement at the top. If I change the
last else if to just an else, I get a syntax error but no
unresponsive script error.
function mousedownSearchTracking(e) {
var $zone = $(this);
if (typeof (e.data.action) == undefined) {
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section); // just section data
}
else if (e.data.action == link) {
var linkText = $zone.text();
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + linkText); // with link data
}
else if (e.data.action == position) {
var position = $zone.attr('position');
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + position); // add position data
}
$zone.unbind('mousedown');
}
On Jun 19, 10:17 am, bombaru bomb...@gmail.com wrote:
I've pinpointed the script that's causing the timeout. Commenting
this script out resolves the issue. I don't see anything in this
script however that is out of place. I'd be curious if some better
trained eyes find something.
Thanks again for all of your help.
==//
jQuery(document).ready(function($) {
var searchHandler = 'MoneySearch';
function mousedownSearchTracking(e) {
var $zone = $(this);
if (typeof (e.data.action) == undefined) {
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
}
else if (e.data.action == link) {
var linkText = $zone.text();
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + linkText) // with link data
}
else if (e.data.action == position) {
var position = $zone.attr('position');
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + position) // add position data
}
$zone.unbind('mousedown');
}
/// Handle the Search box submit on the Search page
function submitSearchTracking(e) {
var $zone = $(this);
var inputValue = $('input[id=prod-search]').val(); // get the
search value the user typed in
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
$zone.unbind('submit');
}
// Click Events to bind
// ---
// re-search
$('form[id=searchform]').bind('submit', { section: :re-search },
submitSearchTracking);
// Did You Mean
$('div.did-you-mean a').bind('mousedown', { section:
:DidYouMean }, mousedownSearchTracking);
// Category filters
$(li[trackcat='Category'] ul li).not($(li.toggle)).each
(function(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Category'] ul li:nth-child( + thiscounter +
) a).bind('mousedown', { section: :Category + thiscounter },
mousedownSearchTracking);
});
// Brand filters
$(li[trackcat='Brand'] ul li).not($(li.toggle)).each(function
(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Brand'] ul li:nth-child( + thiscounter + )
a).bind('mousedown', { section: :Brand + thiscounter },
mousedownSearchTracking);
});
// Price range filters
$(li[trackcat='Price Range'] ul li a).each(function(counter) {
$(this).bind('mousedown', { section: :PriceRange },
mousedownSearchTracking);
});
// Customer rating filters
$(li[trackcat='Customer Rating'] ul li a).each(function(counter)
{
searchHandler = 'MoneySearchB';
var inputValue = $(this).text();
if (inputValue.search(5 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating5Stars }, mousedownSearchTracking);
else if (inputValue.search(4 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating4Stars }, mousedownSearchTracking);
else if (inputValue.search(3 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating3Stars }, mousedownSearchTracking);
else if (inputValue.search(2 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating2Stars }, mousedownSearchTracking);
else if (inputValue.search(1 star) -1)
$(this).bind('mousedown', { section:
:CustomerRating1Star }, mousedownSearchTracking);
else if (inputValue.search(Not Yet Rated) -1)
$(this).bind
[jQuery] Re: Unresponsive Script
Same result: Unresponsive script error
On Jun 19, 11:17 am, amuhlou amysch...@gmail.com wrote:
what happens if you put an empty else {} after the last elseif?
On Jun 19, 10:33 am, bombaru bomb...@gmail.com wrote:
I think it's the if/else if statement at the top. If I change the
last else if to just an else, I get a syntax error but no
unresponsive script error.
function mousedownSearchTracking(e) {
var $zone = $(this);
if (typeof (e.data.action) == undefined) {
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section); // just section data
}
else if (e.data.action == link) {
var linkText = $zone.text();
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + linkText); // with link data
}
else if (e.data.action == position) {
var position = $zone.attr('position');
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + position); // add position data
}
$zone.unbind('mousedown');
}
On Jun 19, 10:17 am, bombaru bomb...@gmail.com wrote:
I've pinpointed the script that's causing the timeout. Commenting
this script out resolves the issue. I don't see anything in this
script however that is out of place. I'd be curious if some better
trained eyes find something.
Thanks again for all of your help.
==//
jQuery(document).ready(function($) {
var searchHandler = 'MoneySearch';
function mousedownSearchTracking(e) {
var $zone = $(this);
if (typeof (e.data.action) == undefined) {
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
}
else if (e.data.action == link) {
var linkText = $zone.text();
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + linkText) // with link data
}
else if (e.data.action == position) {
var position = $zone.attr('position');
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + position) // add position data
}
$zone.unbind('mousedown');
}
/// Handle the Search box submit on the Search page
function submitSearchTracking(e) {
var $zone = $(this);
var inputValue = $('input[id=prod-search]').val(); // get the
search value the user typed in
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
$zone.unbind('submit');
}
// Click Events to bind
// ---
// re-search
$('form[id=searchform]').bind('submit', { section: :re-search },
submitSearchTracking);
// Did You Mean
$('div.did-you-mean a').bind('mousedown', { section:
:DidYouMean }, mousedownSearchTracking);
// Category filters
$(li[trackcat='Category'] ul li).not($(li.toggle)).each
(function(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Category'] ul li:nth-child( + thiscounter +
) a).bind('mousedown', { section: :Category + thiscounter },
mousedownSearchTracking);
});
// Brand filters
$(li[trackcat='Brand'] ul li).not($(li.toggle)).each(function
(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Brand'] ul li:nth-child( + thiscounter + )
a).bind('mousedown', { section: :Brand + thiscounter },
mousedownSearchTracking);
});
// Price range filters
$(li[trackcat='Price Range'] ul li a).each(function(counter) {
$(this).bind('mousedown', { section: :PriceRange },
mousedownSearchTracking);
});
// Customer rating filters
$(li[trackcat='Customer Rating'] ul li a).each(function(counter)
{
searchHandler = 'MoneySearchB';
var inputValue = $(this).text();
if (inputValue.search(5 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating5Stars }, mousedownSearchTracking);
else if (inputValue.search(4 stars) -1)
$(this).bind('mousedown', { section:
:CustomerRating4Stars }, mousedownSearchTracking);
else if (inputValue.search(3 stars) -1)
$(this).bind('mousedown', { section
[jQuery] li:nth-child(10) toggle
There has got to be a better way to write this? Basically, I'm
returning a bunch of list item and after the 10th one, setting the
rest to display:none and adding a more link. Clicking on the more
link removes the display:none and adds a less link at the bottom.
I think jQuery 1.3.2 is having some trouble with the nth-child
approach. Can someone point me in the right direction on how to
improve this?
Thanks.
$(document).ready(function() {
$('.main ul').each(function() {
$('li', this).each(function(i) {
if (i 9) {
if (i == 10) {
$(this).parent().append('li id=\toggleon
\ class=\toggle\a href=\#\more /a/lili id=\toggleoff\
class=\toggle\ style=\display:none\a href=\#\ less/a/
li');
}
$(this).hide();
}
});
});
$('li.toggle').click(function() {
$(this).parent().find('li:nth-child(10) ~ li').toggle
();
$(this).find('#toggleon').toggle();
$(this).find('#toggleoff').toggle();
return false;
});
});
[jQuery] Re: Unresponsive Script
That's part of Omniture tracking code. Looks like this:
function CreateOnClickEvent(sTitle, nEvarNumber, sValue) {
try {
var s2 = s_gi(s_account);
if (SetS2EvarValue(s2, nEvarNumber, sValue))
{
s2.linkTrackVars = 'eVar' + nEvarNumber;
s2.linkTrackEvents = sTitle;
s2.events = sTitle;
s2.tl(sTitle, 'o', sTitle);
}
}
catch (err) { }
{
}
delay(delayValue); // need the delay so we can get this data to
Omniture before the next data for the page draw.
}
On Jun 19, 2:29 pm, James james.gp@gmail.com wrote:
What does the function for CreateOnClickEvent look like if you don't
mind posting that?
On Jun 19, 6:15 am, bombaru bomb...@gmail.com wrote:
Same result: Unresponsive script error
On Jun 19, 11:17 am, amuhlou amysch...@gmail.com wrote:
what happens if you put an empty else {} after the last elseif?
On Jun 19, 10:33 am, bombaru bomb...@gmail.com wrote:
I think it's the if/else if statement at the top. If I change the
last else if to just an else, I get a syntax error but no
unresponsive script error.
function mousedownSearchTracking(e) {
var $zone = $(this);
if (typeof (e.data.action) == undefined) {
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section); // just section data
}
else if (e.data.action == link) {
var linkText = $zone.text();
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + linkText); // with link data
}
else if (e.data.action == position) {
var position = $zone.attr('position');
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + position); // add position data
}
$zone.unbind('mousedown');
}
On Jun 19, 10:17 am, bombaru bomb...@gmail.com wrote:
I've pinpointed the script that's causing the timeout. Commenting
this script out resolves the issue. I don't see anything in this
script however that is out of place. I'd be curious if some better
trained eyes find something.
Thanks again for all of your help.
==//
jQuery(document).ready(function($) {
var searchHandler = 'MoneySearch';
function mousedownSearchTracking(e) {
var $zone = $(this);
if (typeof (e.data.action) == undefined) {
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
}
else if (e.data.action == link) {
var linkText = $zone.text();
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + linkText) // with link data
}
else if (e.data.action == position) {
var position = $zone.attr('position');
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section + ':' + position) // add position data
}
$zone.unbind('mousedown');
}
/// Handle the Search box submit on the Search page
function submitSearchTracking(e) {
var $zone = $(this);
var inputValue = $('input[id=prod-search]').val(); // get the
search value the user typed in
if (typeof (CreateOnClickEvent) != undefined)
CreateOnClickEvent('Search', 30, searchHandler +
e.data.section) // just section data
$zone.unbind('submit');
}
// Click Events to bind
// ---
// re-search
$('form[id=searchform]').bind('submit', { section: :re-search },
submitSearchTracking);
// Did You Mean
$('div.did-you-mean a').bind('mousedown', { section:
:DidYouMean }, mousedownSearchTracking);
// Category filters
$(li[trackcat='Category'] ul li).not($(li.toggle)).each
(function(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Category'] ul li:nth-child( + thiscounter +
) a).bind('mousedown', { section: :Category + thiscounter },
mousedownSearchTracking);
});
// Brand filters
$(li[trackcat='Brand'] ul li).not($(li.toggle)).each(function
(counter) {
var thiscounter = counter + 1;
$(li[trackcat='Brand'] ul li:nth-child
[jQuery] Re: li:nth-child(10) toggle
Thanks Karl... I'm not familiar with slice() but will definitely read
up on it. The problem I'm having with this approach is that every LI
after the 10th one is being hidden.
Here's an example of what the HTML looks like without any JS applied
to it:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
/li
li class=main
Brand
ul
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
/li
li class=mainetc.../li
/ul
The HTML after your approach looks something like this:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
ul style=display:none;
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
a href=#more/a
/li
li class=main
Brand
ul/
ul style=display:none;
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
a href=#more/a
/li
li class=mainetc.../li
/ul
Something is getting screwed up. The first group looks good (but the
toggle does not work). From then on, the following LI groups are all
hidden and there's a strange ul / tag being inserted into the mix.
Any ideas?
On Jun 19, 5:18 pm, Karl Swedberg k...@englishrules.com wrote:
I'd probably use .slice().
Something like this should work:
$(document).ready(function() {
var $list = $('.main ul'),
$items = $list.find('li'),
$moreLink = $('a href=#more/a');
if ($items.length 10) {
$moreItems = $('ul/ul').append($items.slice(10)).hide();
$list.after($moreLink).after($moreItems);
$moreLink.click(function() {
$(this).text($(this).text() == 'more' ? 'less' : 'more');
$moreItems.slideToggle();
return false;
});
}
});
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jun 19, 2009, at 4:54 PM, bombaru wrote:
There has got to be a better way to write this? Basically, I'm
returning a bunch of list item and after the 10th one, setting the
rest to display:none and adding a more link. Clicking on the more
link removes the display:none and adds a less link at the bottom.
I think jQuery 1.3.2 is having some trouble with the nth-child
approach. Can someone point me in the right direction on how to
improve this?
Thanks.
$(document).ready(function() {
$('.main ul').each(function() {
$('li', this).each(function(i) {
if (i 9) {
if (i == 10) {
$(this).parent().append('li id=\toggleon
\ class=\toggle\a href=\#\more /a/lili id=\toggleoff\
class=\toggle\ style=\display:none\a href=\#\ less/a/
li');
}
$(this).hide();
}
});
});
$('li.toggle').click(function() {
$(this).parent().find('li:nth-child(10) ~ li').toggle
();
$(this).find('#toggleon').toggle();
$(this).find('#toggleoff').toggle();
return false;
});
});
[jQuery] Re: li:nth-child(10) toggle
Thanks mkmanning!!! I'll give this a try tomorrow and let you know.
Looking at it though... I'm pretty confident it will do the trick.
It's amazing how much more efficiently the original chunk of code can
be written and it still makes perfect sense (actually it's clearer).
On Jun 19, 7:36 pm, Karl Swedberg k...@englishrules.com wrote:
Ah, I see. Helps to be able to see the HTML.
Let us know if mkmanning's approach doesn't do the trick.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jun 19, 2009, at 5:56 PM, bombaru wrote:
Thanks Karl... I'm not familiar with slice() but will definitely read
up on it. The problem I'm having with this approach is that every LI
after the 10th one is being hidden.
Here's an example of what the HTML looks like without any JS applied
to it:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
/li
li class=main
Brand
ul
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
/li
li class=mainetc.../li
/ul
The HTML after your approach looks something like this:
ul id=narrow-search
li class=main
Category
ul
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
ul style=display:none;
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
liCategory Name/li
/ul
a href=#more/a
/li
li class=main
Brand
ul/
ul style=display:none;
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
liBrand Name/li
/ul
a href=#more/a
/li
li class=mainetc.../li
/ul
Something is getting screwed up. The first group looks good (but the
toggle does not work). From then on, the following LI groups are all
hidden and there's a strange ul / tag being inserted into the mix.
Any ideas?
On Jun 19, 5:18 pm, Karl Swedberg k...@englishrules.com wrote:
I'd probably use .slice().
Something like this should work:
$(document).ready(function() {
var $list = $('.main ul'),
$items = $list.find('li'),
$moreLink = $('a href=#more/a');
if ($items.length 10) {
$moreItems = $('ul/ul').append($items.slice(10)).hide();
$list.after($moreLink).after($moreItems);
$moreLink.click(function() {
$(this).text($(this).text() == 'more' ? 'less' : 'more');
$moreItems.slideToggle();
return false;
});
}
});
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jun 19, 2009, at 4:54 PM, bombaru wrote:
There has got to be a better way to write this? Basically, I'm
returning a bunch of list item and after the 10th one, setting the
rest to display:none and adding a more link. Clicking on the
more
link removes the display:none and adds a less link at the bottom.
I think jQuery 1.3.2 is having some trouble with the nth-child
approach. Can someone point me in the right direction on how to
improve this?
Thanks.
$(document).ready(function() {
$('.main ul').each(function() {
$('li', this).each(function(i
[jQuery] Unresponsive Script
Anyone know why I might be getting and Unresponsive script warning? I'm running 1.3.2.min. The Warning pops up and states the following: A script on this page may be busy, or may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue. Script: http://localhos/js/jquery/jquery-1.3.2.min.js:19 This error is new since upgrading to jQuery 1.3.2. Previous versions of jQuery did not produce this error. Any help you can provide will be greatly appreciated. Thanks
[jQuery] Re: Unresponsive Script
I switched to the development version of jQuery so I could actually
see where the offending line was. I'm still getting the same error,
but obviously the line number has changed (which will be more
helpful). Sorry.
Here's the error in the development version:
Script: http://localhost/js/jquery/jquery-1.3.2.js:1988
Here's line 1988:
1983 if (parent (parent.sizcache !== doneName || !elem.nodeIndex))
{
1984 var count = 0;
1985 for (node = parent.firstChild; node; node = node.nextSibling)
{
1986 if (node.nodeType === 1) {
1987 node.nodeIndex = ++count;
1988 }
1989 }
1990 parent.sizcache = doneName;
1991 }
Again, any help will be much appreciated.
Thanks.
On Jun 18, 4:45 pm, bombaru bomb...@gmail.com wrote:
Anyone know why I might be getting and Unresponsive script warning?
I'm running 1.3.2.min. The Warning pops up and states the following:
A script on this page may be busy, or may have stopped responding.
You can stop the script now, open the script in the debugger, or let
the script continue.
Script:http://localhos/js/jquery/jquery-1.3.2.min.js:19
This error is new since upgrading to jQuery 1.3.2. Previous versions
of jQuery did not produce this error.
Any help you can provide will be greatly appreciated.
Thanks
[jQuery] Re: Unresponsive Script
Yes. A lot of other scripts. I have started to comment out the
scripts one-by-one and will see if I can locate the offending one. Is
there any reason (that you might know of) why this is happening in
1.3.2 and not older versions of jQuery?
On Jun 18, 5:18 pm, James james.gp@gmail.com wrote:
Do you have other scripts running on the page aside from just jQuery?
Such as other scripts that rely on jQuery?
On Jun 18, 11:00 am, bombaru bomb...@gmail.com wrote:
I switched to the development version of jQuery so I could actually
see where the offending line was. I'm still getting the same error,
but obviously the line number has changed (which will be more
helpful). Sorry.
Here's the error in the development version:
Script:http://localhost/js/jquery/jquery-1.3.2.js:1988
Here's line 1988:
1983 if (parent (parent.sizcache !== doneName || !elem.nodeIndex))
{
1984 var count = 0;
1985 for (node = parent.firstChild; node; node = node.nextSibling)
{
1986 if (node.nodeType === 1) {
1987 node.nodeIndex = ++count;
1988 }
1989 }
1990 parent.sizcache = doneName;
1991 }
Again, any help will be much appreciated.
Thanks.
On Jun 18, 4:45 pm, bombaru bomb...@gmail.com wrote:
Anyone know why I might be getting and Unresponsive script warning?
I'm running 1.3.2.min. The Warning pops up and states the following:
A script on this page may be busy, or may have stopped responding.
You can stop the script now, open the script in the debugger, or let
the script continue.
Script:http://localhos/js/jquery/jquery-1.3.2.min.js:19
This error is new since upgrading to jQuery 1.3.2. Previous versions
of jQuery did not produce this error.
Any help you can provide will be greatly appreciated.
Thanks
[jQuery] Superfish animation
How do I kill/override the animation methods that are built into the
code? I'm not a fan of the opacity or height methods and would like
to see this menu without these additions. Is this the line that needs
tweaking (and if so, can someone show me how)?
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul);
o.onShow.call($ul); });
[jQuery] Re: input box on change event?
Thanks Alex...
Currently, the button appears when focus is on the input box and
disappears when focus is removed from the input box. I want to keep
this behavior if no change has occurred in the input box itself (in
this case quantity) and keep the button visible if there has been
any change. I guess what I need to figure out is how to keep the blur
function but have two arguments inside of it (one for change and one
for no change). The no change would work as it currently does... and
the change would essentially do nothing (meaning keep the button
visible to the user). Does this make any sense? Any ideas?
Thanks again.
Russ
On Sep 16, 11:49 pm, Alex Weber [EMAIL PROTECTED] wrote:
I'm not sure I understand exactly what you mean but I can answer the
question in the title of your thread :)
instead of using the 'blur' event use the 'change' jquery event
(analogous to onChange() traditional js)
http://docs.jquery.com/Events/change
-Alex
On Sep 16, 11:08 pm, bombaru [EMAIL PROTECTED] wrote:
I've got an input box and am displaying a form button on focus... then
hiding the form button on blur. Ideally, I want to display the form
button on focus, but only hide the button if the original contents of
the input box have not changed (put another way... persist the form
button if the quantity has changed). Can someone help steer me in the
right direction? This is for a cart checkout page that I am working
on and will provide users a way to update the quantity of an item in
their cart. Here's the code I am using:
// flag the document as OK for JS
$('html').removeClass('nojs');
//show Update buttons only as necessary
$('input.qty').each(function()
{
var $qButton = $
(this).siblings('[EMAIL PROTECTED]image]');
$(this).focus(function()
{
$qButton.fadeIn(200);
});
$(this).blur(function()
{
$qButton.fadeOut(200);
});
});
As you can probably tell, this approach is less than ideal and
provides the user no time to click the update button after a change
has been made. I can increase the fadeOut duration, but that still
blows.
Thanks for any help you might be able to provide me.
[jQuery] input box on change event?
I've got an input box and am displaying a form button on focus... then
hiding the form button on blur. Ideally, I want to display the form
button on focus, but only hide the button if the original contents of
the input box have not changed (put another way... persist the form
button if the quantity has changed). Can someone help steer me in the
right direction? This is for a cart checkout page that I am working
on and will provide users a way to update the quantity of an item in
their cart. Here's the code I am using:
// flag the document as OK for JS
$('html').removeClass('nojs');
//show Update buttons only as necessary
$('input.qty').each(function()
{
var $qButton = $
(this).siblings('[EMAIL PROTECTED]image]');
$(this).focus(function()
{
$qButton.fadeIn(200);
});
$(this).blur(function()
{
$qButton.fadeOut(200);
});
});
As you can probably tell, this approach is less than ideal and
provides the user no time to click the update button after a change
has been made. I can increase the fadeOut duration, but that still
blows.
Thanks for any help you might be able to provide me.
[jQuery] Select box show/hide
Does anyone have any examples of how I could use a select box to show/
hide different divs on a page. To take it a level further, I would
also like the same behavior to work if images are clicked.
A little background: I'm tring to build a payment options page and
have a list of payment icons (Visa, MC, AmEx, etc) as well as a select
box that lists the options. The page would have all the forms in
their own DIVs with an ititial value set to hide();. clicking on an
image would result in showing the appropriate DIV for that option as
well as changing the select box to alert the customer of their
choice. Using the select box would have the same behavior but no need
to highlight the image. Does this make any sense?
I've been messing around with this for a while and can not seem to get
anything to work. I'd appreciate any help you might be able to offer
me. Here's an example of the page:
h1Payment Methods/h1
pConfused about payment types? a href=#Learn more about your
payment options here./a/p
form
select
option id=value1Option 1/option
option id=value2Option 2/option
option id=value3Option 3/option
option id=value4Option 4/option
option id=value5Option 5/option
option id=value6Option 6/option
option id=value7Option 7/option
/select
/form
div class=option id=option-1Option 1/div
div class=option id=option-2Option 2/div
div class=option id=option-3Option 3/div
div class=option id=option-4Option 4/div
div class=option id=option-5Option 5/div
div class=option id=option-6Option 6/div
div class=option id=option-7Option 7/div
script type=text/javascript
$(document).ready(function() {
// (hide the divs on initial view)
$('#option-1').hide();
$('#option-2').hide();
$('#option-3').hide();
$('#option-4').hide();
$('#option-5').hide();
$('#option-6').hide();
$('#option-7').hide();
// (need help figuring out how to trigger the show)
});
/script
Thanks for your help.
