[jQuery] Re: Animate or ToggleClass
Hi Waseem.
Thanks for your help. A slidedown transition would work just fine!
On 4 ene, 09:07, waseem sabjee wrote:
> Hi,
> I can do your solution here no problem.
> I am still at work for now. will be done in about an hour then I can work on
> your small project :)
>
> tell me exactly what type of animation you want.
>
> slide fade...slide bounce...slide elastic etc.
>
> On Sun, Jan 3, 2010 at 10:28 PM, John Sanabria wrote:
>
>
>
> > Waseem, again thank you for your help.
>
> > Now, this is what I'm trying to do. (I'm adding a couple of screenshots for
> > further detail)
>
> > First image:
>
> > As you can see, I have a unordered list with an id of "filter" that
> > *filters* the items of the also unordered list with an id of portafolio. The
> > filtering works by adding a class of "current" to the items that are visible
> > (and match the category you're clicking, eg web, print, etc) and a hidden
> > class (witha a display:none) to the ones that are hidden.
>
> > The div with an class of portfolioclip is the container of the portfolio
> > items and it initially displays ONLY the first three items, regardless if
> > the number of items made visible by the filtering script is higher. The
> > .portfolioclip has a height of 225px and overflow:hidden.
>
> > So when one clicks in the plus button (#portfolio-morelink) I want the
> > container's height to grow automatically to show all the visible items, as
> > you can see in the next image. I've sort of accomplished this toggling the
> > class of the container with jQuery to .portfoliofull (height:100%) and a
> > 2000 ms duration so it slides smoothly when it grows.
>
> > $s('.portfolioclip').toggleClass('portfoliofull', 2000);
> > return false;
> > });
>
> > The problem, as I stated in the first post, is that Internet Explorer
> > doesn't pick the duration value and it expands/contracts the div very
> > harshly, no smooth animation.
>
> > I've read I can do this with toggling the initial height (232px) with the
> > final height (auto) but I don't understand how to state the initial height
> > is different than 0. So it goes from 232px to 0 which is not what I want.
>
> > Also I tried with animating the height without the toggling and it works
> > fine except it only works once cause since there is no toggling, the div
> > doesn't return to its previous state.
>
> > I hope I've explained myself. If not, please tell me what more info do you
> > need and I will answer. Again, thank you very much.
>
> > PD: The link, once more, ishttp://invitro.vegasoftweb.com/es/
Re: [jQuery] Re: Animate or ToggleClass
heres our HTML & CSS
we have 9 divs. the first three are shown and other 6 are hidden.
* {
margin:0;
padding:0;
}
. block {
float:left;
width:32%; // 3 blocks per row. less 1% for IE
height:200px; // height is good to have...but required for IE
border:1px solid #000; // thin black border
}
.end {
clear:left; // clear float
height:0; // no weird space
}
. expand {
width:100%;
text-align:left;
}
Block Content Here
Block Content Here
Block Content Here
class="expander">+
Block Content Here
Block Content Here
Block Content Here
Block Content Here
Block Content Here
Block Content Here
heres our script
var $w = jQuery.noConflict(); // prevent any possible conflicts
$w(function() {
var obj = $w(". container"); // obj reference point
var rows = $w(". rowwrap", obj); // row reference point
rows.slideUp(0);
rows.eq(0).slideDown(0);
var expander = $(".expander", obj);
var switcher = 0;
expander.click(function(e) {
e.preventDefault();
if(switcher == 0) {
rows.eq(1).slideDown(500);
rows.eq(2).slideDown(500);
expander.text("-");
switcher = 1;
} else if(switcher == 1) {
rows.eq(1).slideUp(500);
rows.eq(2).slideUp(500);
expander.text("+");
switcher = 0;
}
});
});
On Sun, Jan 3, 2010 at 10:28 PM, John Sanabria wrote:
> Waseem, again thank you for your help.
>
> Now, this is what I'm trying to do. (I'm adding a couple of screenshots for
> further detail)
>
> First image:
>
> As you can see, I have a unordered list with an id of "filter" that
> *filters* the items of the also unordered list with an id of portafolio. The
> filtering works by adding a class of "current" to the items that are visible
> (and match the category you're clicking, eg web, print, etc) and a hidden
> class (witha a display:none) to the ones that are hidden.
>
> The div with an class of portfolioclip is the container of the portfolio
> items and it initially displays ONLY the first three items, regardless if
> the number of items made visible by the filtering script is higher. The
> .portfolioclip has a height of 225px and overflow:hidden.
>
> So when one clicks in the plus button (#portfolio-morelink) I want the
> container's height to grow automatically to show all the visible items, as
> you can see in the next image. I've sort of accomplished this toggling the
> class of the container with jQuery to .portfoliofull (height:100%) and a
> 2000 ms duration so it slides smoothly when it grows.
>
>
> $s('.portfolioclip').toggleClass('portfoliofull', 2000);
> return false;
> });
>
> The problem, as I stated in the first post, is that Internet Explorer
> doesn't pick the duration value and it expands/contracts the div very
> harshly, no smooth animation.
>
> I've read I can do this with toggling the initial height (232px) with the
> final height (auto) but I don't understand how to state the initial height
> is different than 0. So it goes from 232px to 0 which is not what I want.
>
> Also I tried with animating the height without the toggling and it works
> fine except it only works once cause since there is no toggling, the div
> doesn't return to its previous state.
>
> I hope I've explained myself. If not, please tell me what more info do you
> need and I will answer. Again, thank you very much.
>
> PD: The link, once more, is http://invitro.vegasoftweb.com/es/
>
Re: [jQuery] Re: Animate or ToggleClass
Hi,
I can do your solution here no problem.
I am still at work for now. will be done in about an hour then I can work on
your small project :)
tell me exactly what type of animation you want.
slide fade...slide bounce...slide elastic etc.
On Sun, Jan 3, 2010 at 10:28 PM, John Sanabria wrote:
> Waseem, again thank you for your help.
>
> Now, this is what I'm trying to do. (I'm adding a couple of screenshots for
> further detail)
>
> First image:
>
> As you can see, I have a unordered list with an id of "filter" that
> *filters* the items of the also unordered list with an id of portafolio. The
> filtering works by adding a class of "current" to the items that are visible
> (and match the category you're clicking, eg web, print, etc) and a hidden
> class (witha a display:none) to the ones that are hidden.
>
> The div with an class of portfolioclip is the container of the portfolio
> items and it initially displays ONLY the first three items, regardless if
> the number of items made visible by the filtering script is higher. The
> .portfolioclip has a height of 225px and overflow:hidden.
>
> So when one clicks in the plus button (#portfolio-morelink) I want the
> container's height to grow automatically to show all the visible items, as
> you can see in the next image. I've sort of accomplished this toggling the
> class of the container with jQuery to .portfoliofull (height:100%) and a
> 2000 ms duration so it slides smoothly when it grows.
>
>
> $s('.portfolioclip').toggleClass('portfoliofull', 2000);
> return false;
> });
>
> The problem, as I stated in the first post, is that Internet Explorer
> doesn't pick the duration value and it expands/contracts the div very
> harshly, no smooth animation.
>
> I've read I can do this with toggling the initial height (232px) with the
> final height (auto) but I don't understand how to state the initial height
> is different than 0. So it goes from 232px to 0 which is not what I want.
>
> Also I tried with animating the height without the toggling and it works
> fine except it only works once cause since there is no toggling, the div
> doesn't return to its previous state.
>
> I hope I've explained myself. If not, please tell me what more info do you
> need and I will answer. Again, thank you very much.
>
> PD: The link, once more, is http://invitro.vegasoftweb.com/es/
>
Re: [jQuery] Re: Animate or ToggleClass
Hi, yes that does seem like a script errors.I will get back to you later on.
it's 10:27 AM here So i am still at work.
On Sun, Jan 3, 2010 at 10:28 PM, John Sanabria wrote:
> Waseem, again thank you for your help.
>
> Now, this is what I'm trying to do. (I'm adding a couple of screenshots for
> further detail)
>
> First image:
>
> As you can see, I have a unordered list with an id of "filter" that
> *filters* the items of the also unordered list with an id of portafolio. The
> filtering works by adding a class of "current" to the items that are visible
> (and match the category you're clicking, eg web, print, etc) and a hidden
> class (witha a display:none) to the ones that are hidden.
>
> The div with an class of portfolioclip is the container of the portfolio
> items and it initially displays ONLY the first three items, regardless if
> the number of items made visible by the filtering script is higher. The
> .portfolioclip has a height of 225px and overflow:hidden.
>
> So when one clicks in the plus button (#portfolio-morelink) I want the
> container's height to grow automatically to show all the visible items, as
> you can see in the next image. I've sort of accomplished this toggling the
> class of the container with jQuery to .portfoliofull (height:100%) and a
> 2000 ms duration so it slides smoothly when it grows.
>
>
> $s('.portfolioclip').toggleClass('portfoliofull', 2000);
> return false;
> });
>
> The problem, as I stated in the first post, is that Internet Explorer
> doesn't pick the duration value and it expands/contracts the div very
> harshly, no smooth animation.
>
> I've read I can do this with toggling the initial height (232px) with the
> final height (auto) but I don't understand how to state the initial height
> is different than 0. So it goes from 232px to 0 which is not what I want.
>
> Also I tried with animating the height without the toggling and it works
> fine except it only works once cause since there is no toggling, the div
> doesn't return to its previous state.
>
> I hope I've explained myself. If not, please tell me what more info do you
> need and I will answer. Again, thank you very much.
>
> PD: The link, once more, is http://invitro.vegasoftweb.com/es/
>
[jQuery] Re: Animate or ToggleClass
It seemed my images are not showing through googlegroups. SO the first
one is in http://i45.tinypic.com/2jb4n55.jpg and the second one is in
http://i49.tinypic.com/jhwzh2.jpg
On Jan 3, 3:28 pm, John Sanabria wrote:
> Waseem, again thank you for your help.
>
> Now, this is what I'm trying to do. (I'm adding a couple of screenshots for
> further detail)
>
> First image:
>
> As you can see, I have a unordered list with an id of "filter" that
> *filters* the items of the also unordered list with an id of portafolio. The
> filtering works by adding a class of "current" to the items that are visible
> (and match the category you're clicking, eg web, print, etc) and a hidden
> class (witha a display:none) to the ones that are hidden.
>
> The div with an class of portfolioclip is the container of the portfolio
> items and it initially displays ONLY the first three items, regardless if
> the number of items made visible by the filtering script is higher. The
> .portfolioclip has a height of 225px and overflow:hidden.
>
> So when one clicks in the plus button (#portfolio-morelink) I want the
> container's height to grow automatically to show all the visible items, as
> you can see in the next image. I've sort of accomplished this toggling the
> class of the container with jQuery to .portfoliofull (height:100%) and a
> 2000 ms duration so it slides smoothly when it grows.
>
> $s('.portfolioclip').toggleClass('portfoliofull', 2000);
> return false;
> });
>
> The problem, as I stated in the first post, is that Internet Explorer
> doesn't pick the duration value and it expands/contracts the div very
> harshly, no smooth animation.
>
> I've read I can do this with toggling the initial height (232px) with the
> final height (auto) but I don't understand how to state the initial height
> is different than 0. So it goes from 232px to 0 which is not what I want.
>
> Also I tried with animating the height without the toggling and it works
> fine except it only works once cause since there is no toggling, the div
> doesn't return to its previous state.
>
> I hope I've explained myself. If not, please tell me what more info do you
> need and I will answer. Again, thank you very much.
>
> PD: The link, once more, ishttp://invitro.vegasoftweb.com/es/
[jQuery] Re: Animate or ToggleClass
Waseem, again thank you for your help.
Now, this is what I'm trying to do. (I'm adding a couple of screenshots for
further detail)
First image:
As you can see, I have a unordered list with an id of "filter" that
*filters* the items of the also unordered list with an id of portafolio. The
filtering works by adding a class of "current" to the items that are visible
(and match the category you're clicking, eg web, print, etc) and a hidden
class (witha a display:none) to the ones that are hidden.
The div with an class of portfolioclip is the container of the portfolio
items and it initially displays ONLY the first three items, regardless if
the number of items made visible by the filtering script is higher. The
.portfolioclip has a height of 225px and overflow:hidden.
So when one clicks in the plus button (#portfolio-morelink) I want the
container's height to grow automatically to show all the visible items, as
you can see in the next image. I've sort of accomplished this toggling the
class of the container with jQuery to .portfoliofull (height:100%) and a
2000 ms duration so it slides smoothly when it grows.
$s('.portfolioclip').toggleClass('portfoliofull', 2000);
return false;
});
The problem, as I stated in the first post, is that Internet Explorer
doesn't pick the duration value and it expands/contracts the div very
harshly, no smooth animation.
I've read I can do this with toggling the initial height (232px) with the
final height (auto) but I don't understand how to state the initial height
is different than 0. So it goes from 232px to 0 which is not what I want.
Also I tried with animating the height without the toggling and it works
fine except it only works once cause since there is no toggling, the div
doesn't return to its previous state.
I hope I've explained myself. If not, please tell me what more info do you
need and I will answer. Again, thank you very much.
PD: The link, once more, is http://invitro.vegasoftweb.com/es/
Re: [jQuery] Re: Animate or ToggleClass
Ok, what I gave you was a simple example.
Lets analyse a little more and lets see what you want exactly.
1. you want a list of parent items with + signs before them.
2. when these parent items are clicked you want your content to slide fade
down or slide fade up depending on their current state
3. you say you have a small script that does filtering. could you show me
the HTML output of this script So i could help you integrate it easier.
4. theres many ways to skin a cat :) they may not all be pretty but they
still work. I will. show you my way after you read through this list and
responded.
On Sun, Jan 3, 2010 at 5:37 AM, Once wrote:
> Waseem, thanks for your answers. I tried to implement what you
> suggested but it seems the script only hides and show
> the .extendedcontent container. Since the portfolio also has a small
> script that filters the item depending on the category (web, print,
> branding), all the items have to be in the same div, so putting some
> in one div and the others in the hidden .extendencontent would break
> the filtering... If you take a look, you can see what I mean
> http://invitro.vegasoftweb.com/es/ under Proyectos Recientes.
>
> I believe there is a way to toggle the height and animate the effect
> with a starting height, so it goes from that specific height to a full
> height, thus showing the first three items to the total nine. I just
> don't know how to write the code to do that since I couldn't find
> where to put a starting height value for that...
>
> On 2 ene, 17:49, waseem sabjee wrote:
> > lets say I have this HTML & CSS markup
> > . extendcontent {
> > display:none;
> >
> > }
> >
> >
> > +Click to
> > extend
> >
> > // all your extend content goes here
> >
> > This is div #1 of extended content
> >
> >
> > This is div #2 of extended content
> >
> >
> > This is div #3 of extended content
> >
> >
> >
> >
> > now heres the script
> >
> > var $s = jQuery.noConflict();
> > $s(function() {
> > var obj_extend = $s(". extender");
> > var btn_extend = $s(". extend", obj_extend);
> > btn_extend .click(function(e) {
> > e.preventDefault();
> > btn_extend.next().show();
> > });
> >
> >
> >
> > });
> > On Sat, Jan 2, 2010 at 9:38 PM, Once wrote:
> > > Hi. I'm new to jQuery and ran into this dilemma. In the portfolio
> > > section of my homepage (http://invitro.vegasoftweb.com/es/). I have
> > > a div with 9 items but only 3 are showing, the other 6 are hidden by
> > > another div that has a fixed height and thus clip them. I am trying to
> > > implement a soft transition when a "+" button is clicked and the
> > > hidden 6 are visible.
> >
> > > I tried this two ways:
> >
> > > 1. Toggling classes between the clipdiv and the fulldiv and adding a
> > > duration value for toggleClass. However the transition doesn't work in
> > > IE
> >
> > >var $s = jQuery.noConflict();
> > >$s(document).ready(function() {
> > > $s('a#portfolio-morelink').click(function() {
> > > $s('.portfolioclip').toggleClass('portfoliofull',
> 2000);
> > > return false;
> > > });
> >
> > > 2. trying the "Animate - toggle height" but I can't get it to work
> > > with a starting height so it goes from showing the 3 items to not
> > > showing anything, instead of opening and revealing the hidden 6.
> >
> > > var $s = jQuery.noConflict();
> > >$s(document).ready(function() {
> > > $s('a#portfolio-morelink').click(function() {
> > > $s('.portfolioclip').animate({height: auto});
> > > return false;
> > > });
> >
> > > Also, tried the "Animate height" and it does work but it doesn't
> > > toggle, meaning you can only do it once and it won't return to
> > > smaller.
> >
> > > var $s = jQuery.noConflict();
> > >$s(document).ready(function() {
> > > $s('a#portfolio-morelink').click(function() {
> > > $s('.portfolioclip').animate({height:"toggle"}, 5000);
> > > return false;
> > > });
> >
> > > Any help would be highly appreciated. Thanks!
>
[jQuery] Re: Animate or ToggleClass
Waseem, thanks for your answers. I tried to implement what you
suggested but it seems the script only hides and show
the .extendedcontent container. Since the portfolio also has a small
script that filters the item depending on the category (web, print,
branding), all the items have to be in the same div, so putting some
in one div and the others in the hidden .extendencontent would break
the filtering... If you take a look, you can see what I mean
http://invitro.vegasoftweb.com/es/ under Proyectos Recientes.
I believe there is a way to toggle the height and animate the effect
with a starting height, so it goes from that specific height to a full
height, thus showing the first three items to the total nine. I just
don't know how to write the code to do that since I couldn't find
where to put a starting height value for that...
On 2 ene, 17:49, waseem sabjee wrote:
> lets say I have this HTML & CSS markup
> . extendcontent {
> display:none;
>
> }
>
>
> +Click to
> extend
>
> // all your extend content goes here
>
> This is div #1 of extended content
>
>
> This is div #2 of extended content
>
>
> This is div #3 of extended content
>
>
>
>
> now heres the script
>
> var $s = jQuery.noConflict();
> $s(function() {
> var obj_extend = $s(". extender");
> var btn_extend = $s(". extend", obj_extend);
> btn_extend .click(function(e) {
> e.preventDefault();
> btn_extend.next().show();
> });
>
>
>
> });
> On Sat, Jan 2, 2010 at 9:38 PM, Once wrote:
> > Hi. I'm new to jQuery and ran into this dilemma. In the portfolio
> > section of my homepage (http://invitro.vegasoftweb.com/es/). I have
> > a div with 9 items but only 3 are showing, the other 6 are hidden by
> > another div that has a fixed height and thus clip them. I am trying to
> > implement a soft transition when a "+" button is clicked and the
> > hidden 6 are visible.
>
> > I tried this two ways:
>
> > 1. Toggling classes between the clipdiv and the fulldiv and adding a
> > duration value for toggleClass. However the transition doesn't work in
> > IE
>
> > var $s = jQuery.noConflict();
> > $s(document).ready(function() {
> > $s('a#portfolio-morelink').click(function() {
> > $s('.portfolioclip').toggleClass('portfoliofull', 2000);
> > return false;
> > });
>
> > 2. trying the "Animate - toggle height" but I can't get it to work
> > with a starting height so it goes from showing the 3 items to not
> > showing anything, instead of opening and revealing the hidden 6.
>
> > var $s = jQuery.noConflict();
> > $s(document).ready(function() {
> > $s('a#portfolio-morelink').click(function() {
> > $s('.portfolioclip').animate({height: auto});
> > return false;
> > });
>
> > Also, tried the "Animate height" and it does work but it doesn't
> > toggle, meaning you can only do it once and it won't return to
> > smaller.
>
> > var $s = jQuery.noConflict();
> > $s(document).ready(function() {
> > $s('a#portfolio-morelink').click(function() {
> > $s('.portfolioclip').animate({height:"toggle"}, 5000);
> > return false;
> > });
>
> > Any help would be highly appreciated. Thanks!
