[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/
[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, 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] Animate or ToggleClass
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!
