[jQuery] Re: Getting the height of a hidden div in Firefox

[omtay38]

I know its probably not the best solution, but what if you showed the
div just long enough to get the height, hid it again and then slid it
down. You could prevent the div from actually showing by giving it
something like .css(left,-1px) before using .show(). Just a
thought.

Tommy


On Jan 30, 2:00 pm, rob303 rob.cub...@googlemail.com wrote:
 Oh, one other thing.  If I call .css('display', 'block') on the
 element before using height() FF gives me the correct value of 240px.
 Obviously, that breaks the accordion because I want the element
 hidden!

 /me scratches head ...

 Rob.

 On Jan 30, 7:57 pm, rob303 rob.cub...@googlemail.com wrote:

  Thanks for the reply Eric.  But what have different box models got to
  do with it? I'm not setting any border or padding properties on my
  hidden div that would effect the height.  And the difference between
  the two browsers is huge.  IE says 240px and FF says 160px.  I
  certainly don't have 80px worth of padding on that element ...

  Rob.

  On Jan 30, 7:45 pm, Eric Garside gars...@gmail.com wrote:

   Different box models. I'd read up more on the difference between the
   IE/FF box models to point you in the right direction. I'd give you a
   quick tutorial, but I get out at 3 on Fridays! :D

   On Jan 30, 1:52 pm, rob303 rob.cub...@googlemail.com wrote:

Hi,

I've been working on this for days.  The chaps on IRC couldn't find an
answer so I thought I'd post it here just in case anyone knows what's
going on.

I have a basic accordion type feature.  The designer wants to be able
to open more than one of hidden the sections at once ...

So, here is my code:

$(.accordion .accordion_header).click(function() {
    if($(this).hasClass('accordion_selected')) {
          $(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
        } else {
          $(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
        }
  }).next().hide();

.accordion {
  width: 97%;
  list-style-type: none;

}

.accordion_header {
  display: block;
  height: 20px;
  background: url(../images/bgd_accordion_off.gif) repeat-x;
  padding: 5px 10px 0 10px;

}

.accordion_header:hover {
  background: url(../images/bgd_accordion_on.gif) repeat-x;
  color: #d7d7d9;

}

.accordion_selected {
  background: url(../images/bgd_accordion_on.gif) repeat-x;
  color: #d7d7d9;

}

.accordion_section {
  display: block;
  line-height: 20px;
  padding: 0 10px 0 10px;

}

ul class=accordion
  li
    a href=javascript:; class=accordion_headerheading/a
    div class=accordion_section
      A bunch of text
    /div
  /li
/ul

The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to put
in there.  This means I cannot fix the height of those divs.  This in
turn breaks the animate on the slideDown function.  If I set the
height of the div the animate is perfect.  Without it everythings all
jumpy and broken looking.  So I figured that all I needed to do was to
get the height of the hidden div and then apply it using  a css()
call.  This works fine in IE but Firefox doesn't seem able to give me
the correct height for the div.  For example if I use this code:

var h = $(this).next().height();
alert(h);

IE gives me 240 - which correct for that particular div.  But firefox
gives 160 for the same div! Anyone know why?

Many thanks in advance for any help.

Rob.

[jQuery] Variable Flag Problems

[omtay38]

I know I'll hit myself for not figuring this one out but its driving
me crazy!

--- Function ---
User mouses over an item in navigation menu and secondary nav-menu
slides down. the variable downYet prevents other secondary nav menus
from sliding downbut id doesn't

--- Code ---

$(document).ready(function(){

var downYet = false;
$(#bigNavBox  li  
a).mouseover(function(downYet) { //Handy
Dandy SideTab Navigation function
var name = $(this).attr(id);
if (downYet == false)
{
$(ul[jq= + name + 
]).slideDown(200);
downYet = true;
}
});
});


Thanks for the help!
~Omtay

[jQuery] Re: Variable Flag Problems

[omtay38]

Never mind. I got it. (And did hit myself in the head)

On Jan 24, 11:12 am, omtay38 omta...@gmail.com wrote:
 I know I'll hit myself for not figuring this one out but its driving
 me crazy!

 --- Function ---
 User mouses over an item in navigation menu and secondary nav-menu
 slides down. the variable downYet prevents other secondary nav menus
 from sliding downbut id doesn't

 --- Code ---

 $(document).ready(function(){

                                 var downYet = false;
                                 $(#bigNavBox  li  
 a).mouseover(function(downYet) { //Handy
 Dandy SideTab Navigation function
                                         var name = $(this).attr(id);
                                         if (downYet == false)
                                         {
                                                 $(ul[jq= + name + 
 ]).slideDown(200);
                                                 downYet = true;
                                         }
                                 });
                         });

 Thanks for the help!
 ~Omtay

[jQuery] conditionally prevent blur

[omtay38]

Hello,

I am working on a function that highlights an input's containing div
when the input receives focus (to help draw focus on a very input
heavy form). The function looks something like this:

function highlightFields (e) {
$(e)
.focus(function () {
$(this).css({border:1px solid #003399});
$(this).parent().css({background-color: #FF});
$(this).filter(:text).select();

//APPEND BOXESBOX
$(this).parent().append('div class=boxesBox/div');
})
.blur(function () {

$(this).css({border: 1px solid #99});
$(this).parent().css({background-color: #CC});

//REMOVE BOXESBOX
$(this).parent().children(.boxesBox).remove();
});

}

You will notice that focusing a field also appends the div boxesBox
on focus. This box will contain utilities related to the selected
input (like, an about this field button). The idea is, the user can
receive immediate feedback based on the input selected.

What I cant figure out is how to prevent the blur function from
happening when (and only when) this boxesBox div is clicked on. I've
tried various combinations of one() and unbind() but my mind refuses
to wrap around the situation.

Any suggestions?
Thanks!
~omtay38