[jQuery] Slide down / Slide up, stop repeating
Hi all
I've got a drop down menu that expands when you hover over a heading. Here
is the JQuery
$(#header .dropDown .content).hover(
function () {
$(#header .dropDown ul).slideDown();
return false;
},
function () {
$(#header .dropDown ul).slideUp();
return false;
}
);
My problem is that if someone hovers over the .content multiple times, the
JQuery remembers and keeps popping the menu up and down even when you've
taken the mouse away. Is there a way to stop it remembering this? I've tried
adding the .stop() to the function, but this will stop it half way if you
hover out too early.
If anyone has encountered this before, could you tell me how you got around
it?!
Thanks for any help
[jQuery] Multiple select box line wrap
Hi all I'm have a fixed width on a multiple select box. The problem is, some of the options are longer than the width and by default the lines won't wrap. I'm wondering if anyone has seen a way of making lines wrap using either CSS or JQuery. I've added a title to each option, so you can get the full content if you hover over an item, but really need the text to wrap. Here's how the HTML code looks: select multiple=multiple option title=Item 1 -brief description lorem ipsum dolor sit amet consectateur adipscing elit. Item 1 - brief description lorem ipsum dolor sit amet consectateur adipscing elit. /option option title=Item 2 -brief description lorem ipsum dolor sit amet consectateur adipscing elit. Item 2 - brief description lorem ipsum dolor sit amet consectateur adipscing elit. /option option title=Item 3 -brief description lorem ipsum dolor sit amet consectateur adipscing elit. Item 3 - brief description lorem ipsum dolor sit amet consectateur adipscing elit. /option /select Would appreciate any help. Cheers Paul
Re: [jQuery] Multiple select box line wrap
Thanks Nathan That's a good idea actually, guess that would work even if you had scripts turned off... Will put that to use, thanks again. On 16 February 2010 16:34, Nathan Klatt n8kl...@gmail.com wrote: On Tue, Feb 16, 2010 at 9:22 AM, Paul Collins pauldcoll...@gmail.com wrote: I'm have a fixed width on a multiple select box. The problem is, some of the options are longer than the width and by default the lines won't wrap. I'm wondering if anyone has seen a way of making lines wrap Multiple selects are a HTML/CSS/browser weakness. My recommendation is to use checkboxes, styled so they highlight when :selected and the box doesn't show, named as an array, e.g., name=multiSelect[]; put them all in a ul or ol and make wrapping easy. Nathan -- -- Porfolio: paulcollinslondon.com Twitter: twitter.com/paulcollins
Re: [jQuery] Re: Change opacity of item with class of selected
That works Johan, thanks very much.
Doesn't validate, but I guess that's not the end of the world...
Thanks again.
Paul
2010/1/6 Johan Borestad johan.bores...@gmail.com
Hi Paul!
This is a case where you really don't even should use Javascript,
unless you're trying to do some fancy animations. Rely entirely on CSS
with a simple css-rule
#thumbs li.selected {
filter:alpha(opacity=50);
opacity:0.50;
}
This will also be much much faster than any other solutions.
/ Johan
On Jan 5, 7:50 pm, Paul Collins pauldcoll...@gmail.com wrote:
Sorry, the test page:http://paulcollinslondon.com/test/test.html
2010/1/5 Paul Collins pauldcoll...@gmail.com
Thanks very much for your help Brian. That works, but I think the
problem
may go deeper than I thought! I've put up a test page.
I'm using the JQuery Opacity Rollover Script as a part of the
Gallerific
plugin http://www.twospy.com/galleriffic/#1
To try and keep this simple, when you hover over a thumbnail, it
originally
went from dark to light. I've reversed the order of this in
mouseOutOpacity mouseOverOpacity on the scripts.js
jquery.opacityrollover.js, so now they are full opacity by default and
half
when you hover over. There is a selected class applied when you click
on a
thumbnail and I want to make the opacity stay at half when you click on
it.
There seems to be a default on all list items of the thumbs ul of
opacity: 1; I want to change it to 0.5 when an item has a class of
selected,
but can't get it to work.
I've tried removing the inline style first using
$(#portfolio #thumbs li.selected).removeAttr(style);
But this doesn't work.
Sorry for the long windedness of this post, but if anyone could even
give
me a hint of where to start looking, I would be really grateful.
Thanks
2010/1/5 brian zijn.digi...@gmail.com
Just put the class in the selector instead of testing for it first:
$(#portfolio #thumbs li.selected).css('opacity','0.5');
If the class doesn't exist, jQuery will do nothing (instead of
throwing an undefined error or similar).
On Tue, Jan 5, 2010 at 12:45 PM, Paul Collins pauldcoll...@gmail.com
wrote:
Hi all
I've been stuck on this for four hours, and I still can't solve it!
I am trying to check if a list item has a class of selected, then is
so
change the opacity to 0.5. Here is my code:
if ($(#portfolio #thumbs ul li).hasClass(.selected)) {
$(this).css('opacity','0.5');
}
It seems that the this part isn't working, is it to do with
putting it
in
an event?
Would appreciate any help
[jQuery] Change opacity of item with class of selected
Hi all
I've been stuck on this for four hours, and I still can't solve it!
I am trying to check if a list item has a class of selected, then is so
change the opacity to 0.5. Here is my code:
if ($(#portfolio #thumbs ul li).hasClass(.selected)) {
$(this).css('opacity','0.5');
}
It seems that the this part isn't working, is it to do with putting it in
an event?
Would appreciate any help
Re: [jQuery] Change opacity of item with class of selected
Thanks very much for your help Brian. That works, but I think the problem
may go deeper than I thought! I've put up a test page.
I'm using the JQuery Opacity Rollover Script as a part of the Gallerific
plugin http://www.twospy.com/galleriffic/#1
To try and keep this simple, when you hover over a thumbnail, it originally
went from dark to light. I've reversed the order of this in
mouseOutOpacity mouseOverOpacity on the scripts.js
jquery.opacityrollover.js, so now they are full opacity by default and half
when you hover over. There is a selected class applied when you click on a
thumbnail and I want to make the opacity stay at half when you click on it.
There seems to be a default on all list items of the thumbs ul of opacity:
1; I want to change it to 0.5 when an item has a class of selected, but
can't get it to work.
I've tried removing the inline style first using
$(#portfolio #thumbs li.selected).removeAttr(style);
But this doesn't work.
Sorry for the long windedness of this post, but if anyone could even give me
a hint of where to start looking, I would be really grateful.
Thanks
2010/1/5 brian zijn.digi...@gmail.com
Just put the class in the selector instead of testing for it first:
$(#portfolio #thumbs li.selected).css('opacity','0.5');
If the class doesn't exist, jQuery will do nothing (instead of
throwing an undefined error or similar).
On Tue, Jan 5, 2010 at 12:45 PM, Paul Collins pauldcoll...@gmail.com
wrote:
Hi all
I've been stuck on this for four hours, and I still can't solve it!
I am trying to check if a list item has a class of selected, then is so
change the opacity to 0.5. Here is my code:
if ($(#portfolio #thumbs ul li).hasClass(.selected)) {
$(this).css('opacity','0.5');
}
It seems that the this part isn't working, is it to do with putting it
in
an event?
Would appreciate any help
Re: [jQuery] Change opacity of item with class of selected
Sorry, the test page:
http://paulcollinslondon.com/test/test.html
2010/1/5 Paul Collins pauldcoll...@gmail.com
Thanks very much for your help Brian. That works, but I think the problem
may go deeper than I thought! I've put up a test page.
I'm using the JQuery Opacity Rollover Script as a part of the Gallerific
plugin http://www.twospy.com/galleriffic/#1
To try and keep this simple, when you hover over a thumbnail, it originally
went from dark to light. I've reversed the order of this in
mouseOutOpacity mouseOverOpacity on the scripts.js
jquery.opacityrollover.js, so now they are full opacity by default and half
when you hover over. There is a selected class applied when you click on a
thumbnail and I want to make the opacity stay at half when you click on it.
There seems to be a default on all list items of the thumbs ul of
opacity: 1; I want to change it to 0.5 when an item has a class of selected,
but can't get it to work.
I've tried removing the inline style first using
$(#portfolio #thumbs li.selected).removeAttr(style);
But this doesn't work.
Sorry for the long windedness of this post, but if anyone could even give
me a hint of where to start looking, I would be really grateful.
Thanks
2010/1/5 brian zijn.digi...@gmail.com
Just put the class in the selector instead of testing for it first:
$(#portfolio #thumbs li.selected).css('opacity','0.5');
If the class doesn't exist, jQuery will do nothing (instead of
throwing an undefined error or similar).
On Tue, Jan 5, 2010 at 12:45 PM, Paul Collins pauldcoll...@gmail.com
wrote:
Hi all
I've been stuck on this for four hours, and I still can't solve it!
I am trying to check if a list item has a class of selected, then is so
change the opacity to 0.5. Here is my code:
if ($(#portfolio #thumbs ul li).hasClass(.selected)) {
$(this).css('opacity','0.5');
}
It seems that the this part isn't working, is it to do with putting it
in
an event?
Would appreciate any help
[jQuery] Flipv Vertical Text and extra space
Hi all I'm currently using the Jquery Flipv plugin, which works well. The only problem is, some words have extra padding at the end, depending on how many characters. http://www.openstudio.fr/jQuery-flipv.html?lang=en I'm not sure why this is, but it seems that the conversion to vertical text creates some extra spacing on certain browsers. Can anyone tell me why this is? I'm trying to get advice through the site, but it's all in French and I can't understand it! Thanks for any help
[jQuery] Add extra content to the title attribute
Hi all, This is hopefully simple. I have a bunch of links with titles, like TITLE=Facebook and so on. I am adding JQuery to make the links open in a new window and would like to add some text to the title that says this link will open in a new window, whilst keeping the original text. I'm using the add JQuery command, but this actually replaces the original title text. $(a.newWindow).attr(title, - This link will open in a new window); The end result I would like to have is: title=Facebook - This link will open in a new window. Could anyone point me in the right direction?! Cheers
[jQuery] Re: Add extra content to the title attribute
Thanks for your help guys, that worked a treat. You're right Liam, that was my bad, there was no add there, I meant attr, which was the wrong code anyways... Cheers again Paul 2009/8/11 anurag pal mail.anurag@gmail.com Hi, Use prepend method. Regards, Anurag Pal On Tue, Aug 11, 2009 at 3:15 PM, Paul Collins pauldcoll...@gmail.comwrote: Hi all, This is hopefully simple. I have a bunch of links with titles, like TITLE=Facebook and so on. I am adding JQuery to make the links open in a new window and would like to add some text to the title that says this link will open in a new window, whilst keeping the original text. I'm using the add JQuery command, but this actually replaces the original title text. $(a.newWindow).attr(title, - This link will open in a new window); The end result I would like to have is: title=Facebook - This link will open in a new window. Could anyone point me in the right direction?! Cheers
[jQuery] Apply Jquery Tabs to multiple elements on single page
Hi all,
I am using this handy tabs script from here:
http://jqueryfordesigners.com/jquery-tabs/
My problem is, if I try to use the same function for multiple elements on a
page, seperated by a comma, it will only show one of the elements at a time.
I am guessing that is due to the tabcontainers function being applied to
both elements at once.
Is there a way I can apply the tab containers function via childof $(this)
or something along those lines, so I can use the single function for both
elements on the page.
Would appreciate any advice.
$(function () {
var tabContainers = $('#testimonials blockquote, #recentNews dl');
tabContainers.hide().filter(':first').show();
$('#recentNews ul a, #testimonials ul a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).slideDown({fxFade: true, fxSpeed: 'fast' });
$('#contactForm ul a, #recentNews ul a, #testimonials ul
a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
[jQuery] Re: Make width of inner div equal outer
Hi all,
I haven't received a response, so I've put up a test page to make it a bit
more clear.
http://paulcollinslondon.com/test/test.html
Basically, the second level navigation is showing when the page loads,
because the parent list item for ABOUT US has a class of selected. When
you mouseover the second level nav though, it disappears and I'm not sure
why.
If it has a class of selected, I only want it to disappear when you roll
over another top level link. Can anyone let me know what I'm doing wrong
here?
Thanks for any help
Paul
2009/7/27 Paul Collins pauldcoll...@gmail.com
Hi all,
I'm completely stuck and been trying to solve this all day! Any help would
be greatly appreciated...
Basically, I have a suckerfish type navigation. It works fine with CSS and
I'm trying to add some JQuery to animate the slide-down effect. I've got
that working, but I need to have the sub-nav showing when I am on the actual
page and keep it there when you hover over it, unless you hover over a
different top level navigation. With CSS, it works fine as I add a class of
selected to the top level, but I can't work it out in JQuery. Here is my
code:
function mainmenu(){
if ($(#header ul#topNavigation li).is(.selected)){
$(this).find('div:first:visible');
}else{
$(this).find('div:first:invisible');
};
$(#header ul#topNavigation li).hover(function(){
$(this).find('div:first').css({visibility:visible,display:none}).slideDown(300);
},function(){
$(this).find('div:first').css({visibility:hidden});
});
}
// activate function
$(document).ready(function(){
mainmenu();
});
The HTML
div id=header
ul id=topNavigation
lia href=/Home/a/li
li class=selected
a href=/About Us/a
div class=secondLevel
ul
lia href=/Overview/a/li
/ul
/div
/li
lia href=/Contact/a/li
/ul
/div
Currently, the 2nd level appears if I have the class of selected, but it
dissapears when I mouse over it. I would need it to stay there until I hover
over a different top level nav item.
Would really appreciate any help.
Thanks
Paul
[jQuery] Re: Make width of inner div equal outer
Hi all,
I'm completely stuck and been trying to solve this all day! Any help would
be greatly appreciated...
Basically, I have a suckerfish type navigation. It works fine with CSS and
I'm trying to add some JQuery to animate the slide-down effect. I've got
that working, but I need to have the sub-nav showing when I am on the actual
page and keep it there when you hover over it, unless you hover over a
different top level navigation. With CSS, it works fine as I add a class of
selected to the top level, but I can't work it out in JQuery. Here is my
code:
function mainmenu(){
if ($(#header ul#topNavigation li).is(.selected)){
$(this).find('div:first:visible');
}else{
$(this).find('div:first:invisible');
};
$(#header ul#topNavigation li).hover(function(){
$(this).find('div:first').css({visibility:visible,display:none}).slideDown(300);
},function(){
$(this).find('div:first').css({visibility:hidden});
});
}
// activate function
$(document).ready(function(){
mainmenu();
});
The HTML
div id=header
ul id=topNavigation
lia href=/Home/a/li
li class=selected
a href=/About Us/a
div class=secondLevel
ul
lia href=/Overview/a/li
/ul
/div
/li
lia href=/Contact/a/li
/ul
/div
Currently, the 2nd level appears if I have the class of selected, but it
dissapears when I mouse over it. I would need it to stay there until I hover
over a different top level nav item.
Would really appreciate any help.
Thanks
Paul
[jQuery] Re: Make width of inner div equal outer
Excellent, works a treat, thanks Eric...
2009/7/23 Eric Garside gars...@gmail.com
$('.secondLevel').css('width', $('#header').width());
On Jul 23, 1:16 pm, Paul Collins pauldcoll...@gmail.com wrote:
Hi all,
I've got a problem with IE6 and I need to basically find the width of the
header DIV and make the secondLevel DIV match it. So, I guess I need
to
target IE6 specifically in the code. Here's what I have:
div id=header
ul id=topNavigation
lia href=/Home/a/li
li class=selected
a href=/About Us/a
div class=secondLevel
ul
lia href=/Overview/a/li
/ul
/div
/li
lia href=/Contact/a/li
/ul
/div
I'm not sure how to start with the script. I can calculate the width of
the
header DIV, but not sure how to force the secondLevel one to match
it.
alert($(#header).width());
Any help would be fantastic.
Cheers
Paul
[jQuery] Make width of inner div equal outer
Hi all, I've got a problem with IE6 and I need to basically find the width of the header DIV and make the secondLevel DIV match it. So, I guess I need to target IE6 specifically in the code. Here's what I have: div id=header ul id=topNavigation lia href=/Home/a/li li class=selected a href=/About Us/a div class=secondLevel ul lia href=/Overview/a/li /ul /div /li lia href=/Contact/a/li /ul /div I'm not sure how to start with the script. I can calculate the width of the header DIV, but not sure how to force the secondLevel one to match it. alert($(#header).width()); Any help would be fantastic. Cheers Paul
[jQuery] Style Horizontal Scrollbar
Hi all, I'm trying to scroll a horizontal scrollbar and having some troubles. I've been searching far and wide and only come up with scrollpane so far - which works for vertical scrollbars, but not Horizontal. Has anybody managed to style a horizontal scrollbar for a div, (with overflow set to :auto), using JQuery? Would really appreciate any links. Cheers Paul
[jQuery] Re: Change image to black and white on hover
Thanks for your replies everyone. Sorry for the delay, but I've been away
for the festive season :)
Ricardo, your script works well, but if I have multiple images on the same
page using the same class it resets all images to the original image we
stored! Is there a way I could use it on multiple images with the same class
on the same page?
I originally had these images in a CSS hover. But, the images are part of a
CMS and I would have to teach the client how to create a single image with
two states, which is not preferable. So, I would prefer to try a script if I
can and keep it simple for them.
If you could help me get it to work for multiple images, that would be
great. All I really want to do is set the same image back to it's original
state - was hoping it would be simple :)
Thanks for your email too Ben, but I think it works the same way where I
need to create two images.
Thanks again.
Paul
2009/1/3 BenV benv...@gmail.com
Hello there!
I think you can find a way to perform this effect with a nice
transition here :
http://jqueryfordesigners.com/image-cross-fade-transition/
I hope it'll help!
Happy new year everyone
On 23 déc 2008, 17:20, Paul Collins pauldcoll...@gmail.com wrote:
Hi all,
I'm a little stuck and I can't seem to get exactly what I'm after
googling
Basically, I want to apply the pixastic - desaturate function when I
hover
over an image. I've got this working, but I want to be able to remove
that
effect when I mouseout of the image. I can't for the life of me find
something that removes a function, only a class. Here is my code, as I
say
the hover state works when you mouseover, but the mouseout effect isn't
working:
// greyscale on hover
$(document).ready(function() {
// find the div.fade elements and hook the hover event
$(.test).hover(function() {
$(this).pixastic(desaturate);
}, function() {
this.reset();
});
});
Thanks for any help.
Paul
2008/12/23 Paul Collins pauldcoll...@gmail.com
That works perfectly with JQuery Nathan. Thanks for your help. Much
appreciated.
Paul
2008/12/23 Nathan i...@nathan-adams.net
It's not jQuery (although I believe it can act as a plugin - check the
documentation), but this library covers that kind of image
manipulation:
http://www.pixastic.com/
On Dec 23, 9:16 pm, Paul Collins pauldcoll...@gmail.com wrote:
Hi all,
I'd like to think this is possible with JQuery, but can't find a
reference
online.
Basically, I have a bunch of coloured logos that have links wrapped
around
them. I would like to create a hover state using JQuery that makes
the
images turn black and white when you hover over them. Currently I am
creating two images - one colour, one black and white then swapping
them
out
using CSS. If I could create the black and white hover state using
JQuery,
it would save a lot of hassle.
Would appreciate any help.
[jQuery] Change image to black and white on hover
Hi all, I'd like to think this is possible with JQuery, but can't find a reference online. Basically, I have a bunch of coloured logos that have links wrapped around them. I would like to create a hover state using JQuery that makes the images turn black and white when you hover over them. Currently I am creating two images - one colour, one black and white then swapping them out using CSS. If I could create the black and white hover state using JQuery, it would save a lot of hassle. Would appreciate any help.
[jQuery] Re: Change image to black and white on hover
That's a shame, thanks for letting me know Gordon. Are there any other similar hover effects that could be achieved with JQuery? Cheers Paul 2008/12/23 Gordon gordon.mc...@ntlworld.com The only way to do that without a separate black and white image would be to use the filter CSS property, which is nonstandard and would only work in internet explorer. On Dec 23, 11:16 am, Paul Collins pauldcoll...@gmail.com wrote: Hi all, I'd like to think this is possible with JQuery, but can't find a reference online. Basically, I have a bunch of coloured logos that have links wrapped around them. I would like to create a hover state using JQuery that makes the images turn black and white when you hover over them. Currently I am creating two images - one colour, one black and white then swapping them out using CSS. If I could create the black and white hover state using JQuery, it would save a lot of hassle. Would appreciate any help.
[jQuery] Re: Change image to black and white on hover
That works perfectly with JQuery Nathan. Thanks for your help. Much appreciated. Paul 2008/12/23 Nathan i...@nathan-adams.net It's not jQuery (although I believe it can act as a plugin - check the documentation), but this library covers that kind of image manipulation: http://www.pixastic.com/ On Dec 23, 9:16 pm, Paul Collins pauldcoll...@gmail.com wrote: Hi all, I'd like to think this is possible with JQuery, but can't find a reference online. Basically, I have a bunch of coloured logos that have links wrapped around them. I would like to create a hover state using JQuery that makes the images turn black and white when you hover over them. Currently I am creating two images - one colour, one black and white then swapping them out using CSS. If I could create the black and white hover state using JQuery, it would save a lot of hassle. Would appreciate any help.
[jQuery] Re: Change image to black and white on hover
Hi all,
I'm a little stuck and I can't seem to get exactly what I'm after
googling
Basically, I want to apply the pixastic - desaturate function when I hover
over an image. I've got this working, but I want to be able to remove that
effect when I mouseout of the image. I can't for the life of me find
something that removes a function, only a class. Here is my code, as I say
the hover state works when you mouseover, but the mouseout effect isn't
working:
// greyscale on hover
$(document).ready(function() {
// find the div.fade elements and hook the hover event
$(.test).hover(function() {
$(this).pixastic(desaturate);
}, function() {
this.reset();
});
});
Thanks for any help.
Paul
2008/12/23 Paul Collins pauldcoll...@gmail.com
That works perfectly with JQuery Nathan. Thanks for your help. Much
appreciated.
Paul
2008/12/23 Nathan i...@nathan-adams.net
It's not jQuery (although I believe it can act as a plugin - check the
documentation), but this library covers that kind of image
manipulation:
http://www.pixastic.com/
On Dec 23, 9:16 pm, Paul Collins pauldcoll...@gmail.com wrote:
Hi all,
I'd like to think this is possible with JQuery, but can't find a
reference
online.
Basically, I have a bunch of coloured logos that have links wrapped
around
them. I would like to create a hover state using JQuery that makes the
images turn black and white when you hover over them. Currently I am
creating two images - one colour, one black and white then swapping them
out
using CSS. If I could create the black and white hover state using
JQuery,
it would save a lot of hassle.
Would appreciate any help.
[jQuery] Re: Horizontal scroll of lists with differing widths
Hi there John, Thanks for sending me that link. It does look really good. The only issue for me is it doesn't work with Javascript turned off. Accessibility is one of the main issues for the site I am currently working on, so I can't have it not work with Javscript turned off unfortunately. All I really need the Javscript to do is check how many LI's are inside the DIV then stretch the width of the container UL to stretch it out, thus getting horizontal scroll when scripts are turned on and vertical scroll when they're not. Anyway, thanks again for your help. Paul 2008/12/1 John Ruffin [EMAIL PROTECTED]: Paul, I found this interesting. Got it working in no time. If you are going to have a play with it just make sure you use the min and max attributes. It's documented in the blog. http://jqueryfordesigners.com/demo/slider-gallery.html -Original Message- From: Paul Collins [mailto:[EMAIL PROTECTED] Sent: Monday, December 1, 2008 12:07 PM To: jquery-en@googlegroups.com Subject: [jQuery] Horizontal scroll of lists with differing widths Hi all, Just wondering if someone could point me in the right direction for finding this code. Basically, I have a list which could contain 1-6 images. When there are four or more images, I would like to add a horizontal scrollbar to the content. I don't want to do this using CSS as I would need to add the full width to the list regardless of the amount of images. I would like to not have scrolling if there are less than four images. I have taken a look at jScrollPane, but this doesn't seem to support the dynamically changing widths of the list. Would really appreciate any help or direction! Thanks Paul
[jQuery] Horizontal scroll of lists with differing widths
Hi all, Just wondering if someone could point me in the right direction for finding this code. Basically, I have a list which could contain 1-6 images. When there are four or more images, I would like to add a horizontal scrollbar to the content. I don't want to do this using CSS as I would need to add the full width to the list regardless of the amount of images. I would like to not have scrolling if there are less than four images. I have taken a look at jScrollPane, but this doesn't seem to support the dynamically changing widths of the list. Would really appreciate any help or direction! Thanks Paul
[jQuery] Re: Using fade on .toggleClass
Hi Ricardo,
I'm not sure why I said this was working last week, but it doesn't seem to
be! I must have been drunk at the time :)
Sorry to keep bothering you, but when I click on the link, nothing happens
now. I've tried placing alerts and so forth and I've tracked it down to this
line as the problem (I think):
thiz.stop(true,true).fadeIn();
I'm not good enough at Javascript to debug this, been trying for a while.
Here is the full code again:
$.fn.fadeToggle = function(){
var thiz = $(this);
return thiz.is(':visible') ? thiz.stop(true,true).fadeOut() :
thiz.stop(true,true).fadeIn();
};
$(function() {
$(#signInForm).addClass(hide);
$(#profileLinks li.userEmail strong).hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click(function(){
$(#signInForm).fadeToggle();
});
});
Any help would be appreciated, I'm stuck!
2008/11/19 Paul Collins [EMAIL PROTECTED]
That works perfectly, thanks Ricardo, really appreciate it.
Thanks for taking the time
Paul
2008/11/19 ricardobeat [EMAIL PROTECTED]:
IDs should be unique, so there's no point in having all those
selectors. You can also chain the methods for strong, saves you time
from finding the element again.
For the 'slide' effect there is a toggle function (slideToggle), but
you'll have to implement your own for a fade effect:
$.fn.fadeToggle = function(){
var thiz = $(this);
return thiz.is(':visible') ? thiz.stop(true,true).fadeOut() :
thiz.stop(true,true).fadeIn();
};
$(function() {
$(#signInForm).addClass(hide);
$(#profileLinks li.userEmail strong).hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click(function(){
$(#signInForm).fadeToggle();
});
});
- ricardo
On Nov 19, 10:10 am, Paul Collins [EMAIL PROTECTED] wrote:
Hi all,
I'm trying to make something fade in and out when I use toggleClass
to show and hide. I've been looking around for a while and can't see
if it's possible. Here is my code:
$(function() {
$(#topArea ul#profileLinks li.userEmail
form#signInForm).addClass(hide);
$(#topArea ul#profileLinks li.userEmail
strong).hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
$(#topArea ul#profileLinks li.userEmail
strong).click(function(){
$(#topArea ul#profileLinks li.userEmail
form#signInForm).toggleClass('show');
});
});
});
Would appreciate any help.
Cheers
Paul
[jQuery] Re: Show and hide a list of divs according to anchored ID
For anyone who finds this in the future, it's called the tabs plugin. Can be found here: http://stilbuero.de/jquery/tabs_3/ One question on this for anyone who may know, does the tabs plugin only work for links in a list? So, you need to target them via the UL. All my links are in a Table/TD, was wondering if anyone has made it work this way? Thanks for any help. 2008/11/19 Paul Collins [EMAIL PROTECTED]: Hi all, I'm trying to find a reference here and having troubles. Would really appreciate if someone can point me to a tutorial. Basically, I have a list of anchored links that point to content with matching ID's on the same page. With Javascript on, I want to hide all except the first when you come into the page, then when people click on a link it would show the matching ID. I guess the JQuery would grab the anchored links and put them in an array when the page loads? Maybe it doesn't need to be that complex. Any help would be great. An example of the code: !--anchored links-- ul id=anchoredLinks lia href=#architectsArchitects/a/li lia href=#designersstrongDesigners/strong/a/li /ul !--content to show and hide-- div id=architects blah, blah, blah /div div id=designers blah, blah, blah /div Thanks for any help.
[jQuery] Using fade on .toggleClass
Hi all,
I'm trying to make something fade in and out when I use toggleClass
to show and hide. I've been looking around for a while and can't see
if it's possible. Here is my code:
$(function() {
$(#topArea ul#profileLinks li.userEmail
form#signInForm).addClass(hide);
$(#topArea ul#profileLinks li.userEmail strong).hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
$(#topArea ul#profileLinks li.userEmail
strong).click(function(){
$(#topArea ul#profileLinks li.userEmail
form#signInForm).toggleClass('show');
});
});
});
Would appreciate any help.
Cheers
Paul
[jQuery] Show and hide a list of divs according to anchored ID
Hi all, I'm trying to find a reference here and having troubles. Would really appreciate if someone can point me to a tutorial. Basically, I have a list of anchored links that point to content with matching ID's on the same page. With Javascript on, I want to hide all except the first when you come into the page, then when people click on a link it would show the matching ID. I guess the JQuery would grab the anchored links and put them in an array when the page loads? Maybe it doesn't need to be that complex. Any help would be great. An example of the code: !--anchored links-- ul id=anchoredLinks lia href=#architectsArchitects/a/li lia href=#designersstrongDesigners/strong/a/li /ul !--content to show and hide-- div id=architects blah, blah, blah /div div id=designers blah, blah, blah /div Thanks for any help.
[jQuery] Multiple forms, validation plugin
Hi all, I have slowly put together a script to replace the input button with an image, using Jquery. Basically, the image is added as a CSS class; the Jquery replaces the input with a HREF. I have used this in conjunction with the validaition plugin, it works great with a single form, but I would like to perfect it so it would still work if you had multiple forms on a page, each with a unique ID. Here is the test page: http://paulcollinslondon.com/contactTest.php And the main validate line: $(form).validate(); I would like to change form to a variable, within a function. Here is my complete code, can anyone tell me how to specify the variable formID in the validate() call? Thanks for any help, I really need it! Cheers, Paul
[jQuery] Popup window
Hi all, I have been searching for some code to create a popup using JQuery. Surprisingly, I am having a hard time. I want to create one where you can specify size and not have the standard search bar, etc. Would appreciate any help. Cheers Paul
[jQuery] Fwd: [jQuery] Re: Validator plugin submit with HREF
Sorry to bump, just wanted to see if anyone can help me with this?
Cheers
This is all working now, the only issue I have left is how could I use
the Validation plugin with multiple forms? They would need different
ID's, which I can grab with a variable, but I can't seem to submit to
a specific form ID. Here is the line of code to validate:
$(form).validate();
I would like to change form to a variable, within a function. Here is
my complete code, can anyone tell me how to specify the variable
formID in the validate() call? Thanks for any help.
$(document).ready(function(){
$(:submit[id$='_replace']).each(function() {
var submitID = $(this).attr(id);
var submitValue = $(this).attr(value);
var formID = $(this).parents(form).attr(id);
$(this).replaceWith( [ 'a class=replace '
, submitID
, ' id='
, submitID
, ' href=#em/em'
, submitValue
, '/a'
].join('')
);
$('#'+submitID).click(function() {
$('#'+formID).submit();
return false;
});
});
$(form).validate();
});
Cheers
Paul
On 01/04/2008, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Paul Collins schrieb:
Hi all,
I am trying to use an anchor link to submit my form using the
Validator plugin, (so I can change the button to a graphic). I would
like to know what to put into the HREF to submit to the Validator
code.
Currently I have:
href=javascript:$(this).validate();
This doesn't seem to work correctly, here is my full block of code in
case you would like to check. I would greatly appreciate any help or
links.
$(document).ready(function(){
$(:submit[id$='_replace']).each(function() {
var submitID = $(this).attr(id);
var submitValue = $(this).attr(value);
$(this).replaceWith( [ 'a class=replace '
, submitID
, ' id='
, submitID
, '
href=javascript:$(this).validate();em/em'
, submitValue
, '/a'
].join('') );
});
return false;
});
Thanks again
Try this:
a href=# id=clicksubmitSubmit/a
$(function() {
$(#clicksubmit).click(function() {
$(form).submit();
return false;
});
});
There is no need to put javascript inside hrefs when using jQuery.
Jörn
[jQuery] Re: Validator plugin submit with HREF
Thanks Jörn, you've saved me again. Much appreciated.
This is all working now, the only issue I have left is how could I use
the Validation plugin with multiple forms? They would need different
ID's, which I can grab with a variable, but I can't seem to submit to
a specific form ID. Here is the line of code to validate:
$(form).validate();
I would like to change form to a variable, within a function. Here is
my complete code, can anyone tell me how to specify the variable
formID in the validate() call? Thanks for any help.
$(document).ready(function(){
$(:submit[id$='_replace']).each(function() {
var submitID = $(this).attr(id);
var submitValue = $(this).attr(value);
var formID = $(this).parents(form).attr(id);
$(this).replaceWith( [ 'a class=replace '
, submitID
, ' id='
, submitID
, ' href=#em/em'
, submitValue
, '/a'
].join('')
);
$('#'+submitID).click(function() {
$('#'+formID).submit();
return false;
});
});
$(form).validate();
});
Cheers
Paul
On 01/04/2008, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Paul Collins schrieb:
Hi all,
I am trying to use an anchor link to submit my form using the
Validator plugin, (so I can change the button to a graphic). I would
like to know what to put into the HREF to submit to the Validator
code.
Currently I have:
href=javascript:$(this).validate();
This doesn't seem to work correctly, here is my full block of code in
case you would like to check. I would greatly appreciate any help or
links.
$(document).ready(function(){
$(:submit[id$='_replace']).each(function() {
var submitID = $(this).attr(id);
var submitValue = $(this).attr(value);
$(this).replaceWith( [ 'a class=replace '
, submitID
, ' id='
, submitID
, '
href=javascript:$(this).validate();em/em'
, submitValue
, '/a'
].join('') );
});
return false;
});
Thanks again
Try this:
a href=# id=clicksubmitSubmit/a
$(function() {
$(#clicksubmit).click(function() {
$(form).submit();
return false;
});
});
There is no need to put javascript inside hrefs when using jQuery.
Jörn
[jQuery] Validator plugin submit with HREF
Hi all,
I am trying to use an anchor link to submit my form using the
Validator plugin, (so I can change the button to a graphic). I would
like to know what to put into the HREF to submit to the Validator
code.
Currently I have:
href=javascript:$(this).validate();
This doesn't seem to work correctly, here is my full block of code in
case you would like to check. I would greatly appreciate any help or
links.
$(document).ready(function(){
$(:submit[id$='_replace']).each(function() {
var submitID = $(this).attr(id);
var submitValue = $(this).attr(value);
$(this).replaceWith( [ 'a class=replace '
, submitID
, ' id='
, submitID
, '
href=javascript:$(this).validate();em/em'
, submitValue
, '/a'
].join('') );
});
return false;
});
Thanks again
[jQuery] Re: Problem with jquery.validate.js
Thanks again Jorn, you've been a big help...
If anyone can help me, I'd appreciate it, I just need to ask two more
questions. My test page is here:
http://paulcollinslondon.com/contactTest.php
I'd just like to know:
- How can I actually remove HTML and replace it with the JQuery code,
instead of just adding the new code after it?
- How can I submit the form using JQuery after I remove the submit
button and replace it with a HREF?
Any help/links would be greatly appreciated.
Cheers
Paul
On 27/03/2008, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Paul Collins schrieb:
Thanks for your help Jörn, that's solved that part of my equation.
I'm stuck again! I would like to find out how to get the value of an
id that ends in _replace
So for instance, I have the following line that looks for a input tag
with the type of submit, that has an id ending with _replace. (It
can have anything before that).
So, for EG: input type=submit id=sendButton_replace value=Send/
I then want to get the entire content of the id and store it into a
variable. I would also like to get the text in the Value and store it
as another variable.
I currently have:
$(document).ready(function(){
$(:submit[id$='_replace']);
var replaceID = $(:submit[id$='_replace']).val;
alert (replaceID);
return false;
});
How about...
$(:submit[id$='_replace']).attr(id)
Jörn
[jQuery] Re: Problem with jquery.validate.js
Hi all, I've managed to replace the submit button with the following code:
a class=replace sendButton_replace id=sendButton_replace
href=em/emSend/a
All I would like to know now is, how can I create the link for a HREF
to submit the form? The catch is, I would like it to work with the
ajax validator plugin.
Any help is greatly appreciated.
Cheers
paul
On 28/03/2008, Paul Collins [EMAIL PROTECTED] wrote:
Thanks again Jorn, you've been a big help...
If anyone can help me, I'd appreciate it, I just need to ask two more
questions. My test page is here:
http://paulcollinslondon.com/contactTest.php
I'd just like to know:
- How can I actually remove HTML and replace it with the JQuery code,
instead of just adding the new code after it?
- How can I submit the form using JQuery after I remove the submit
button and replace it with a HREF?
Any help/links would be greatly appreciated.
Cheers
Paul
On 27/03/2008, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Paul Collins schrieb:
Thanks for your help Jörn, that's solved that part of my equation.
I'm stuck again! I would like to find out how to get the value of an
id that ends in _replace
So for instance, I have the following line that looks for a input tag
with the type of submit, that has an id ending with _replace. (It
can have anything before that).
So, for EG: input type=submit id=sendButton_replace value=Send/
I then want to get the entire content of the id and store it into a
variable. I would also like to get the text in the Value and store it
as another variable.
I currently have:
$(document).ready(function(){
$(:submit[id$='_replace']);
var replaceID = $(:submit[id$='_replace']).val;
alert (replaceID);
return false;
});
How about...
$(:submit[id$='_replace']).attr(id)
Jörn
[jQuery] Re: Problem with jquery.validate.js
Hi all,
Sorry to keep pestering, maybe I can make my request simpler so
someone can help.
I am using the Validator plugin, I would like to replace the submit
button with an image using JQuery. The only problem is when I want to
submit the form using a HREF, I need to somehow submit to the
validator plugin. Here is my code currently:
href=javascript:$(this).validate();
This doesn't seem to work correctly, here is my full block of code in
case you would like to check. I would greatly appreciate any help or
links.
$(document).ready(function(){
$(:submit[id$='_replace']).each(function() {
var submitID = $(this).attr(id);
var submitValue = $(this).attr(value);
$(this).replaceWith( [ 'a class=replace '
, submitID
, ' id='
, submitID
, '
href=javascript:$(this).validate();em/em'
, submitValue
, '/a'
].join('') );
});
return false;
});
Cheers
On 28/03/2008, Paul Collins [EMAIL PROTECTED] wrote:
Hi all, I've managed to replace the submit button with the following code:
a class=replace sendButton_replace id=sendButton_replace
href=em/emSend/a
All I would like to know now is, how can I create the link for a HREF
to submit the form? The catch is, I would like it to work with the
ajax validator plugin.
Any help is greatly appreciated.
Cheers
paul
On 28/03/2008, Paul Collins [EMAIL PROTECTED] wrote:
Thanks again Jorn, you've been a big help...
If anyone can help me, I'd appreciate it, I just need to ask two more
questions. My test page is here:
http://paulcollinslondon.com/contactTest.php
I'd just like to know:
- How can I actually remove HTML and replace it with the JQuery code,
instead of just adding the new code after it?
- How can I submit the form using JQuery after I remove the submit
button and replace it with a HREF?
Any help/links would be greatly appreciated.
Cheers
Paul
On 27/03/2008, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Paul Collins schrieb:
Thanks for your help Jörn, that's solved that part of my equation.
I'm stuck again! I would like to find out how to get the value of an
id that ends in _replace
So for instance, I have the following line that looks for a input tag
with the type of submit, that has an id ending with _replace. (It
can have anything before that).
So, for EG: input type=submit id=sendButton_replace
value=Send/
I then want to get the entire content of the id and store it into a
variable. I would also like to get the text in the Value and store it
as another variable.
I currently have:
$(document).ready(function(){
$(:submit[id$='_replace']);
var replaceID = $(:submit[id$='_replace']).val;
alert (replaceID);
return false;
});
How about...
$(:submit[id$='_replace']).attr(id)
Jörn
[jQuery] Re: Problem with jquery.validate.js
Thanks for your help Jörn, that's solved that part of my equation.
I'm stuck again! I would like to find out how to get the value of an
id that ends in _replace
So for instance, I have the following line that looks for a input tag
with the type of submit, that has an id ending with _replace. (It
can have anything before that).
So, for EG: input type=submit id=sendButton_replace value=Send/
I then want to get the entire content of the id and store it into a
variable. I would also like to get the text in the Value and store it
as another variable.
I currently have:
$(document).ready(function(){
$(:submit[id$='_replace']);
var replaceID = $(:submit[id$='_replace']).val;
alert (replaceID);
return false;
});
On 26/03/2008, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Paul Collins schrieb:
Hi all,
As a follow up to this, I've decided to try and rewrite the image
replace script with JQuery, so I can re-use it.
The one thing I can't seem to find any info on at the moment is doing
a search for only part of an ID.
So in this instance, I would like to search for all submit input tags
in a form that have an ID ending in _replace. So the ID might be
called submit_replace. I would only like to search for the
_replace part of any ID in the form.
So far I have:
$('form').find('#_replace').addClass(_replace);
Take a look at:
http://docs.jquery.com/Selectors
http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue
Jörn
[jQuery] Re: Problem with jquery.validate.js
Hi all,
I'm really getting stuck here, sorry if I haven't made myself clear. I
will try and explain briefly:
All I want to do is pull the following two things out of the submit
button and make them variables:
- the content of the ID
- the text of the VALUE
Here is the line:
input type=submit id=sendButton_replace name=send value=Send/
Here is my current code:
$(document).ready(function(){
if ( $(:submit[id$='_replace'])) {
$.each(function(){
// get the text...
var me = $(this), txt = me.text();
// replace the text with constructed html...
me.html( [ 'img src=/images/topNav'
, txt
, '.gif alt='
, txt
, ' /'
].join('') );
});
}
return false;
});
Any help would be greatly appreciated... I mean it!
On 27/03/2008, Paul Collins [EMAIL PROTECTED] wrote:
Thanks for your help Jörn, that's solved that part of my equation.
I'm stuck again! I would like to find out how to get the value of an
id that ends in _replace
So for instance, I have the following line that looks for a input tag
with the type of submit, that has an id ending with _replace. (It
can have anything before that).
So, for EG: input type=submit id=sendButton_replace value=Send/
I then want to get the entire content of the id and store it into a
variable. I would also like to get the text in the Value and store it
as another variable.
I currently have:
$(document).ready(function(){
$(:submit[id$='_replace']);
var replaceID = $(:submit[id$='_replace']).val;
alert (replaceID);
return false;
});
On 26/03/2008, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Paul Collins schrieb:
Hi all,
As a follow up to this, I've decided to try and rewrite the image
replace script with JQuery, so I can re-use it.
The one thing I can't seem to find any info on at the moment is doing
a search for only part of an ID.
So in this instance, I would like to search for all submit input tags
in a form that have an ID ending in _replace. So the ID might be
called submit_replace. I would only like to search for the
_replace part of any ID in the form.
So far I have:
$('form').find('#_replace').addClass(_replace);
Take a look at:
http://docs.jquery.com/Selectors
http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue
Jörn
[jQuery] Problem with jquery.validate.js
Hi all, I'm working with the JQuery validate plugin and having a few problems. I must first point out that I am a novice and may be asking dumb questions! Any tips or links would be great. I have a test page here I am working on: http://paulcollinslondon.com/contactTest.php I am using another script to replace the normal submit button with an image (/javascript/scripts.js). The problem with this is when I use this script it doesn't interact with the JQuery validation and it uses the standard PHP. When I remove the ID (id=sendButton_replace) to call the button script, the validation works fine. If anyone has a moment, would they be able to take a look?! You don't have to give me the answer even, just point me in the right direction. I'm stuck! Thanks for any help. Paul
[jQuery] Re: Problem with jquery.validate.js
Hi all,
As a follow up to this, I've decided to try and rewrite the image
replace script with JQuery, so I can re-use it.
The one thing I can't seem to find any info on at the moment is doing
a search for only part of an ID.
So in this instance, I would like to search for all submit input tags
in a form that have an ID ending in _replace. So the ID might be
called submit_replace. I would only like to search for the
_replace part of any ID in the form.
So far I have:
$('form').find('#_replace').addClass(_replace);
Any ideas would be great.
Thanks
Paul
On 26/03/2008, Paul Collins [EMAIL PROTECTED] wrote:
Hi all,
I'm working with the JQuery validate plugin and having a few problems.
I must first point out that I am a novice and may be asking dumb
questions! Any tips or links would be great.
I have a test page here I am working on:
http://paulcollinslondon.com/contactTest.php
I am using another script to replace the normal submit button with an
image (/javascript/scripts.js). The problem with this is when I use
this script it doesn't interact with the JQuery validation and it uses
the standard PHP. When I remove the ID (id=sendButton_replace) to
call the button script, the validation works fine.
If anyone has a moment, would they be able to take a look?! You don't
have to give me the answer even, just point me in the right direction.
I'm stuck!
Thanks for any help.
Paul
[jQuery] Re: Find text in a list item, remove it and replace with an image tag.
Sorry to take so long to get back Andy. I want to keep the strong tag is it depicts a selected state on the navigation. Basically, the image is positioned absolutely in the LI, the LI has a fixed height which is half that of the image. If there is a strong tag around the image, it shifts up 50%, showing a selected state. I hope that makes sense, that's why I would only want it sometimes. If you want me to post more code up, let me know. Thanks On 15/11/2007, Andy Matthews [EMAIL PROTECTED] wrote: Why would you want to keep the bold tag if it's just going to be wrapped around an image? -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of desmond Sent: Thursday, November 15, 2007 1:00 PM To: jQuery (English) Subject: [jQuery] Find text in a list item, remove it and replace with an image tag. Hi all, I am a bit stuck here, I've been looking around, but can't seem to find what I'm after. I am fairly new to Jquery and Javascript, so not sure exactly what to look for. Basically I have the following HTML: div id=topNavigation ul class=firstLevel li class=homea href=/index.phpstrongHome/strong/a/li li class=developmenta href=/front-end- development.phpDevelopment/a/li /ul /div I want to use Jquery to go through each list item, delete the text inside the href (not the strong tag though, if there is one), then add an image tag in it's place (whilst retaining the strong tag around the image if it's there). So the generated code would look like this: div id=topNavigation ul class=firstLevel li class=homea href=/index.phpstrongimg src=/images/ topNavHome.gif alt=Home//strong/a/li li class=developmenta href=/front-end-development.phpimg src=/images/topNavDevelopment.gif alt=Development//a/li /ul /div Now, I'm not sure if we can come up with a clever loop that uses the text to create the image name and alt tag? There are only 5 fixed links in the full version, so I can do manually if need be. I've been trying to use the wrap/prepend/append methods described here http://docs.jquery.com/Tutorials:Rounded_Corners, but really I need to strip the text and replace it with the image tag. Also, there is a strong tag inside the HREF sometimes to show a selected link. I need to keep that there and have the image tag inside it. I don't expect anyone to write the code for me, but if you can just send me some links or point me in the direction of tutorials where I can learn from, that would be great. Thanks Paul
