[jQuery] Re: Slide down and up element and remain vertical size
I was trying to replicate the Apple.com downloads accordion and I came accross the same issue. The Soultion very simple use mousemove instead of mouseenter. works like a charm for my jquery accordions -- View this message in context: http://www.nabble.com/Slide-down-and-up-element-and-remain-vertical-size-tp21600343s27240p21958290.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Slide down and up element and remain vertical size
I have had the same issue on 2 different accordions, where sometimes
the hover event doesnt trigger the drawer to open, and you have to
mouse out and back over again to trigger it. Anyone have a thought as
to how to smooth that out? Mech7, your jumping is pretty subtle, but
Remy over at jqueryfordesigners.com has a tute about jumps in
accordions- check it out.
:::
Adam
On Jan 22, 3:03 am, Mech7 chris.de@gmail.com wrote:
That is what i used first but it's very specific about the html
elements like it expects a p tag as content, that's why i decided
to make my own... :)
On Jan 22, 4:28 pm, Richard D. Worth rdwo...@gmail.com wrote:
You may want to look at the jQuery UI Accordion (if you haven't already):
http://ui.jquery.com/demos/accordion#mouseover
- Richard
On Thu, Jan 22, 2009 at 4:08 AM, Mech7 chris.de@gmail.com wrote:
I have an example here:
http://www.mech7.net/tmp/slide_down/
When i hover the elements it jumps a little in vertical space, does
anybody know a solution how to remain the space my code is :
$(document).ready(function(){
$('#portfolio div.item:first div').addClass('open');
$('#portfolio div.item:first h3').addClass('active');
function slideDownEffect(){
var speed = 100;
$('#portfolio div.item').mouseenter(function () {
if($(this).children('h3').hasClass('active') ==
false)
{
$('#portfolio div.item div').slideUp(speed);
$(this).children('div').slideDown(speed,
slideDownEffect);
$(#portfolio div.item).unbind('mouseenter');
$('#portfolio div.item h3').removeClass('active');
$(this).children('h3').addClass('active');
}
});
}
slideDownEffect();
});
[jQuery] Re: Slide down and up element and remain vertical size
You may want to look at the jQuery UI Accordion (if you haven't already):
http://ui.jquery.com/demos/accordion#mouseover
- Richard
On Thu, Jan 22, 2009 at 4:08 AM, Mech7 chris.de@gmail.com wrote:
I have an example here:
http://www.mech7.net/tmp/slide_down/
When i hover the elements it jumps a little in vertical space, does
anybody know a solution how to remain the space my code is :
$(document).ready(function(){
$('#portfolio div.item:first div').addClass('open');
$('#portfolio div.item:first h3').addClass('active');
function slideDownEffect(){
var speed = 100;
$('#portfolio div.item').mouseenter(function () {
if($(this).children('h3').hasClass('active') ==
false)
{
$('#portfolio div.item div').slideUp(speed);
$(this).children('div').slideDown(speed,
slideDownEffect);
$(#portfolio div.item).unbind('mouseenter');
$('#portfolio div.item h3').removeClass('active');
$(this).children('h3').addClass('active');
}
});
}
slideDownEffect();
});
[jQuery] Re: Slide down and up element and remain vertical size
That is what i used first but it's very specific about the html
elements like it expects a p tag as content, that's why i decided
to make my own... :)
On Jan 22, 4:28 pm, Richard D. Worth rdwo...@gmail.com wrote:
You may want to look at the jQuery UI Accordion (if you haven't already):
http://ui.jquery.com/demos/accordion#mouseover
- Richard
On Thu, Jan 22, 2009 at 4:08 AM, Mech7 chris.de@gmail.com wrote:
I have an example here:
http://www.mech7.net/tmp/slide_down/
When i hover the elements it jumps a little in vertical space, does
anybody know a solution how to remain the space my code is :
$(document).ready(function(){
$('#portfolio div.item:first div').addClass('open');
$('#portfolio div.item:first h3').addClass('active');
function slideDownEffect(){
var speed = 100;
$('#portfolio div.item').mouseenter(function () {
if($(this).children('h3').hasClass('active') ==
false)
{
$('#portfolio div.item div').slideUp(speed);
$(this).children('div').slideDown(speed,
slideDownEffect);
$(#portfolio div.item).unbind('mouseenter');
$('#portfolio div.item h3').removeClass('active');
$(this).children('h3').addClass('active');
}
});
}
slideDownEffect();
});
[jQuery] Re: Slide down and up element and remain vertical size
Actually you can use pretty much any element you want. More details
here: http://docs.jquery.com/UI/Accordion/accordion
Jörn
On Thu, Jan 22, 2009 at 11:03 AM, Mech7 chris.de@gmail.com wrote:
That is what i used first but it's very specific about the html
elements like it expects a p tag as content, that's why i decided
to make my own... :)
On Jan 22, 4:28 pm, Richard D. Worth rdwo...@gmail.com wrote:
You may want to look at the jQuery UI Accordion (if you haven't already):
http://ui.jquery.com/demos/accordion#mouseover
- Richard
On Thu, Jan 22, 2009 at 4:08 AM, Mech7 chris.de@gmail.com wrote:
I have an example here:
http://www.mech7.net/tmp/slide_down/
When i hover the elements it jumps a little in vertical space, does
anybody know a solution how to remain the space my code is :
$(document).ready(function(){
$('#portfolio div.item:first div').addClass('open');
$('#portfolio div.item:first h3').addClass('active');
function slideDownEffect(){
var speed = 100;
$('#portfolio div.item').mouseenter(function () {
if($(this).children('h3').hasClass('active') ==
false)
{
$('#portfolio div.item div').slideUp(speed);
$(this).children('div').slideDown(speed,
slideDownEffect);
$(#portfolio div.item).unbind('mouseenter');
$('#portfolio div.item h3').removeClass('active');
$(this).children('h3').addClass('active');
}
});
}
slideDownEffect();
});
[jQuery] Re: Slide down and up element and remain vertical size
Ah ok cool didnt see that one... only umm i would still like to know
how to solve this on my own :p
On Jan 22, 5:08 pm, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
Actually you can use pretty much any element you want. More details
here:http://docs.jquery.com/UI/Accordion/accordion
Jörn
On Thu, Jan 22, 2009 at 11:03 AM, Mech7 chris.de@gmail.com wrote:
That is what i used first but it's very specific about the html
elements like it expects a p tag as content, that's why i decided
to make my own... :)
On Jan 22, 4:28 pm, Richard D. Worth rdwo...@gmail.com wrote:
You may want to look at the jQuery UI Accordion (if you haven't already):
http://ui.jquery.com/demos/accordion#mouseover
- Richard
On Thu, Jan 22, 2009 at 4:08 AM, Mech7 chris.de@gmail.com wrote:
I have an example here:
http://www.mech7.net/tmp/slide_down/
When i hover the elements it jumps a little in vertical space, does
anybody know a solution how to remain the space my code is :
$(document).ready(function(){
$('#portfolio div.item:first div').addClass('open');
$('#portfolio div.item:first h3').addClass('active');
function slideDownEffect(){
var speed = 100;
$('#portfolio div.item').mouseenter(function () {
if($(this).children('h3').hasClass('active') ==
false)
{
$('#portfolio div.item div').slideUp(speed);
$(this).children('div').slideDown(speed,
slideDownEffect);
$(#portfolio div.item).unbind('mouseenter');
$('#portfolio div.item h3').removeClass('active');
$(this).children('h3').addClass('active');
}
});
}
slideDownEffect();
});
[jQuery] Re: Slide down and up element and remain vertical size
Also the accordion has a issue where as you move fast over the items, before the animation is finished it does not catch the mouseenter event, so you have to go over it once again to open it.
[jQuery] Re: Slide down and up element and remain vertical size
Ah ok cool didnt see that one... only umm i would still like to know
how to solve this on my own :p
On Jan 22, 5:08 pm, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
Actually you can use pretty much any element you want. More details
here:http://docs.jquery.com/UI/Accordion/accordion
Jörn
On Thu, Jan 22, 2009 at 11:03 AM, Mech7 chris.de@gmail.com wrote:
That is what i used first but it's very specific about the html
elements like it expects a p tag as content, that's why i decided
to make my own... :)
On Jan 22, 4:28 pm, Richard D. Worth rdwo...@gmail.com wrote:
You may want to look at the jQuery UI Accordion (if you haven't already):
http://ui.jquery.com/demos/accordion#mouseover
- Richard
On Thu, Jan 22, 2009 at 4:08 AM, Mech7 chris.de@gmail.com wrote:
I have an example here:
http://www.mech7.net/tmp/slide_down/
When i hover the elements it jumps a little in vertical space, does
anybody know a solution how to remain the space my code is :
$(document).ready(function(){
$('#portfolio div.item:first div').addClass('open');
$('#portfolio div.item:first h3').addClass('active');
function slideDownEffect(){
var speed = 100;
$('#portfolio div.item').mouseenter(function () {
if($(this).children('h3').hasClass('active') ==
false)
{
$('#portfolio div.item div').slideUp(speed);
$(this).children('div').slideDown(speed,
slideDownEffect);
$(#portfolio div.item).unbind('mouseenter');
$('#portfolio div.item h3').removeClass('active');
$(this).children('h3').addClass('active');
}
});
}
slideDownEffect();
});
[jQuery] Re: Slide down and up element and remain vertical size
Ah if i change the accordion:
.ui-accordion-content { padding: 1em 2.2em; }
to
.ui-accordion-content { padding: 0px; }
It has the same issue it iwll jump, does anybody know why?
