Re: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

2006-12-12 Thread Brice Burgess 
Brandon Aaron wrote:
 On 12/9/06, Brice Burgess [EMAIL PROTECTED] wrote:
   
 Glen Lipka wrote:
 
 I didn't analyze the whole thing, but just a quick question:
 Have you considered using the fadeTo() function?   it works better
 than messing with the opacity in the CSS.

 Glen

   
 In jQ 1.0.3 + you can also use $('#el').css('opacity',0.5);  which is
 similar to $('#el').fadeTo(1,0.5); except that it doesn't give the
 element layout to make it compatible with $.anim() routines. The css
 opacity method doesn't allow you to fade over time, however -- though it
 is cleaner IMO.
 

 Anytime you set the opacity of an element in IE, the element is given layout.

 --
 Brandon Aaron
True.. but I'm not refering to the has layout IE attribute -- more so 
to the box layout it seems to apply. E.g. try using $.fadeTo() / 
$.hide()+$.show() or any of the other functions which call the $.anim() 
functions on an inline element. It won't be inline for long? :)

~ Brice

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

2006-12-11 Thread Brandon Aaron 
Can you get the latest from SVN and see if that fixes the problem?

--
Brandon Aaron

On 12/9/06, stargate [EMAIL PROTECTED] wrote:
 Hello,

 i have a problem with the fadeout/fadein function on IE with jquery.I'm
 not really sure if this has something to do with jquery, but as far as i
 figured out
 it all depends on the filter: alpha(opacity=XX) css style wich jquery
 seems to set with the fadeout/fadein on the IE6.

 My goal is like a left-pane wich slide's out and back in. To to this i
 fadein and fadeout 2 different divs.
 On IE when the panel is open (div #leftpanel) and i close it, all is
 fine now, it fades correct out and the #left_pane_tab_swap is visible.
 But when i change the state so the #leftpanel fade's in and the
 #left_pane_tab_swap should fade out, then the #leftPanel is invisible.
 On IE6 i have installed the DOM-Explorer plugin and when i remove the
 filter: alpha(opacity=XX) css style it comes back visible or when i set
 it so 99.99
 In my JS-Function i've tried to set the css style manualy as you see,
 but this didnt changed anything :(

 On FF1.5/2.0 and Opera 9 all works fine this way right now.

 So im asking for help what i maybe make wrong ??

 Thx in advance for any hint/help.

 Ralf


 NOTE: i do use the actual 1.0.3 Version!!!

 CSS and JS follows
 --

 ## CSS START 
 #leftPanel {/* Styling the menu panel */

 background-color:#6699CC;
 text-align: left;
 width: 220px; /* width incl. tab */

 /* You shouldn't change these 5 options unless you need to */
 height: 100%;
 min-height: 100%;
 max-height: 100%;
 left: 0px;
 top: 0px;
 position:absolute;
 display:block;
 color: #fff;
 font-size: 10px;
 }

 #leftPanel #logo {
   margin: 40px 0 20px 0;
 }

 #left_pane_tab {
 background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
 height: 100%;
 width: 20px;
 position: absolute;
 left: 200px;
 border: 0px;
 }

 #leftPanel #leftPanelContent{
 width: 150px;
 margin: 0px;
 padding: 35px 0 0 21px; /* Need to use padding because of IE */
 text-align: left;
 line-height: 150%;
 }

 #leftPanel a:link,
 #leftPanel a:visited {
   color: #ffc;
   text-decoration: none;
   font-weight: bold;
 }

 #leftPanel a:hover,
 #leftPanel a:active {
   color: #ff3;
   text-decoration: none;
   font-weight: bold;
 }

 #left_pane_tab_swap{
 background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
 height: 100%;
 width: 20px;
 position: absolute;
 top: 0px;
 }
 ## CSS END 

 ## JS-Function 
 function SlideLeft(){
   if($(#left_pane_tab_swap).css(display) == none){
$(#leftPanel).fadeOut();
$(#leftPanel).css(display,none);
$(#left_pane_tab_swap).fadeIn();
$(#main).css(margin,0 0 0 20px);
$(#left_pane_tab_swap).css(filter,alpha(opacity=0));
Set_Cookie('lp',0,10);
   } else {
$(#left_pane_tab_swap).fadeOut();
$(#leftPanel).fadeIn();
$(#leftPanel).css(display,block);
$(#main).css(margin,0 0 0 225px);
$(#left_pane_tab_swap).css(filter,alpha(opacity=99.99));
Set_Cookie('lp',1,10);
   }
 }


 ___
 jQuery mailing list
 discuss@jquery.com
 http://jquery.com/discuss/


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

2006-12-11 Thread Brandon Aaron 
On 12/9/06, Brice Burgess [EMAIL PROTECTED] wrote:
 Glen Lipka wrote:
  I didn't analyze the whole thing, but just a quick question:
  Have you considered using the fadeTo() function?   it works better
  than messing with the opacity in the CSS.
 
  Glen
 
 In jQ 1.0.3 + you can also use $('#el').css('opacity',0.5);  which is
 similar to $('#el').fadeTo(1,0.5); except that it doesn't give the
 element layout to make it compatible with $.anim() routines. The css
 opacity method doesn't allow you to fade over time, however -- though it
 is cleaner IMO.

Anytime you set the opacity of an element in IE, the element is given layout.

--
Brandon Aaron

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

[jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

2006-12-09 Thread stargate 
Hello,

i have a problem with the fadeout/fadein function on IE with jquery.I'm 
not really sure if this has something to do with jquery, but as far as i 
figured out
it all depends on the filter: alpha(opacity=XX) css style wich jquery 
seems to set with the fadeout/fadein on the IE6.

My goal is like a left-pane wich slide's out and back in. To to this i 
fadein and fadeout 2 different divs.
On IE when the panel is open (div #leftpanel) and i close it, all is 
fine now, it fades correct out and the #left_pane_tab_swap is visible.
But when i change the state so the #leftpanel fade's in and the 
#left_pane_tab_swap should fade out, then the #leftPanel is invisible.
On IE6 i have installed the DOM-Explorer plugin and when i remove the 
filter: alpha(opacity=XX) css style it comes back visible or when i set 
it so 99.99
In my JS-Function i've tried to set the css style manualy as you see, 
but this didnt changed anything :(

On FF1.5/2.0 and Opera 9 all works fine this way right now.

So im asking for help what i maybe make wrong ??

Thx in advance for any hint/help.

Ralf


NOTE: i do use the actual 1.0.3 Version!!!

CSS and JS follows
--

## CSS START 
#leftPanel {/* Styling the menu panel */

background-color:#6699CC;
text-align: left;
width: 220px; /* width incl. tab */

/* You shouldn't change these 5 options unless you need to */
height: 100%;
min-height: 100%;
max-height: 100%;
left: 0px;
top: 0px;
position:absolute;
display:block;
color: #fff;
font-size: 10px;
}

#leftPanel #logo {
  margin: 40px 0 20px 0;
}

#left_pane_tab {
background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
height: 100%;
width: 20px;
position: absolute;
left: 200px;
border: 0px;
}

#leftPanel #leftPanelContent{
width: 150px;
margin: 0px;
padding: 35px 0 0 21px; /* Need to use padding because of IE */
text-align: left;
line-height: 150%;
}

#leftPanel a:link,
#leftPanel a:visited {
  color: #ffc;
  text-decoration: none;
  font-weight: bold;
}

#leftPanel a:hover,
#leftPanel a:active {
  color: #ff3;
  text-decoration: none;
  font-weight: bold;
}

#left_pane_tab_swap{
background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
height: 100%;
width: 20px;
position: absolute;
top: 0px;
}
## CSS END 

## JS-Function 
function SlideLeft(){
  if($(#left_pane_tab_swap).css(display) == none){
   $(#leftPanel).fadeOut();
   $(#leftPanel).css(display,none);
   $(#left_pane_tab_swap).fadeIn();
   $(#main).css(margin,0 0 0 20px);
   $(#left_pane_tab_swap).css(filter,alpha(opacity=0));
   Set_Cookie('lp',0,10);
  } else {
   $(#left_pane_tab_swap).fadeOut();
   $(#leftPanel).fadeIn();
   $(#leftPanel).css(display,block);
   $(#main).css(margin,0 0 0 225px);
   $(#left_pane_tab_swap).css(filter,alpha(opacity=99.99));
   Set_Cookie('lp',1,10);
  }
}


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

2006-12-09 Thread Glen Lipka 

I didn't analyze the whole thing, but just a quick question:
Have you considered using the fadeTo() function?   it works better than
messing with the opacity in the CSS.

Glen


On 12/9/06, stargate [EMAIL PROTECTED] wrote:


Hello,

i have a problem with the fadeout/fadein function on IE with jquery.I'm
not really sure if this has something to do with jquery, but as far as i
figured out
it all depends on the filter: alpha(opacity=XX) css style wich jquery
seems to set with the fadeout/fadein on the IE6.

My goal is like a left-pane wich slide's out and back in. To to this i
fadein and fadeout 2 different divs.
On IE when the panel is open (div #leftpanel) and i close it, all is
fine now, it fades correct out and the #left_pane_tab_swap is visible.
But when i change the state so the #leftpanel fade's in and the
#left_pane_tab_swap should fade out, then the #leftPanel is invisible.
On IE6 i have installed the DOM-Explorer plugin and when i remove the
filter: alpha(opacity=XX) css style it comes back visible or when i set
it so 99.99
In my JS-Function i've tried to set the css style manualy as you see,
but this didnt changed anything :(

On FF1.5/2.0 and Opera 9 all works fine this way right now.

So im asking for help what i maybe make wrong ??

Thx in advance for any hint/help.

Ralf


NOTE: i do use the actual 1.0.3 Version!!!

CSS and JS follows
--

## CSS START 
#leftPanel {/* Styling the menu panel */

   background-color:#6699CC;
   text-align: left;
   width: 220px; /* width incl. tab */

   /* You shouldn't change these 5 options unless you need to */
   height: 100%;
   min-height: 100%;
   max-height: 100%;
   left: 0px;
   top: 0px;
   position:absolute;
   display:block;
   color: #fff;
   font-size: 10px;
}

#leftPanel #logo {
margin: 40px 0 20px 0;
}

#left_pane_tab {
   background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
   height: 100%;
   width: 20px;
   position: absolute;
   left: 200px;
   border: 0px;
}

#leftPanel #leftPanelContent{
   width: 150px;
   margin: 0px;
   padding: 35px 0 0 21px; /* Need to use padding because of IE */
   text-align: left;
   line-height: 150%;
}

#leftPanel a:link,
#leftPanel a:visited {
color: #ffc;
text-decoration: none;
font-weight: bold;
}

#leftPanel a:hover,
#leftPanel a:active {
color: #ff3;
text-decoration: none;
font-weight: bold;
}

#left_pane_tab_swap{
   background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
   height: 100%;
   width: 20px;
   position: absolute;
   top: 0px;
}
## CSS END 

## JS-Function 
function SlideLeft(){
 if($(#left_pane_tab_swap).css(display) == none){
  $(#leftPanel).fadeOut();
  $(#leftPanel).css(display,none);
  $(#left_pane_tab_swap).fadeIn();
  $(#main).css(margin,0 0 0 20px);
  $(#left_pane_tab_swap).css(filter,alpha(opacity=0));
  Set_Cookie('lp',0,10);
 } else {
  $(#left_pane_tab_swap).fadeOut();
  $(#leftPanel).fadeIn();
  $(#leftPanel).css(display,block);
  $(#main).css(margin,0 0 0 225px);
  $(#left_pane_tab_swap).css(filter,alpha(opacity=99.99));
  Set_Cookie('lp',1,10);
 }
}


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

2006-12-09 Thread Dave Methvin 
Yesterday there was a discussion here about opacity in IE; Kelvin Luck
started the thread. You didn't show your markup, but the problem may be that
the inheritance of opacity isn't working the way you expect.

http://www.ozoneasylum.com/5561
 

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of stargate
Sent: Saturday, December 09, 2006 4:48 AM
To: jQuery Discussion.
Subject: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

Hello,

i have a problem with the fadeout/fadein function on IE with jquery.I'm not
really sure if this has something to do with jquery, but as far as i figured
out it all depends on the filter: alpha(opacity=XX) css style wich jquery
seems to set with the fadeout/fadein on the IE6.

My goal is like a left-pane wich slide's out and back in. To to this i
fadein and fadeout 2 different divs.
On IE when the panel is open (div #leftpanel) and i close it, all is fine
now, it fades correct out and the #left_pane_tab_swap is visible.
But when i change the state so the #leftpanel fade's in and the
#left_pane_tab_swap should fade out, then the #leftPanel is invisible.
On IE6 i have installed the DOM-Explorer plugin and when i remove the
filter: alpha(opacity=XX) css style it comes back visible or when i set it
so 99.99 In my JS-Function i've tried to set the css style manualy as you
see, but this didnt changed anything :(

On FF1.5/2.0 and Opera 9 all works fine this way right now.

So im asking for help what i maybe make wrong ??

Thx in advance for any hint/help.

Ralf


NOTE: i do use the actual 1.0.3 Version!!!

CSS and JS follows
--

## CSS START 
#leftPanel {/* Styling the menu panel */

background-color:#6699CC;
text-align: left;
width: 220px; /* width incl. tab */

/* You shouldn't change these 5 options unless you need to */
height: 100%;
min-height: 100%;
max-height: 100%;
left: 0px;
top: 0px;
position:absolute;
display:block;
color: #fff;
font-size: 10px;
}

#leftPanel #logo {
  margin: 40px 0 20px 0;
}

#left_pane_tab {
background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
height: 100%;
width: 20px;
position: absolute;
left: 200px;
border: 0px;
}

#leftPanel #leftPanelContent{
width: 150px;
margin: 0px;
padding: 35px 0 0 21px; /* Need to use padding because of IE */
text-align: left;
line-height: 150%;
}

#leftPanel a:link,
#leftPanel a:visited {
  color: #ffc;
  text-decoration: none;
  font-weight: bold;
}

#leftPanel a:hover,
#leftPanel a:active {
  color: #ff3;
  text-decoration: none;
  font-weight: bold;
}

#left_pane_tab_swap{
background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
height: 100%;
width: 20px;
position: absolute;
top: 0px;
}
## CSS END 

## JS-Function 
function SlideLeft(){
  if($(#left_pane_tab_swap).css(display) == none){
   $(#leftPanel).fadeOut();
   $(#leftPanel).css(display,none);
   $(#left_pane_tab_swap).fadeIn();
   $(#main).css(margin,0 0 0 20px);
   $(#left_pane_tab_swap).css(filter,alpha(opacity=0));
   Set_Cookie('lp',0,10);
  } else {
   $(#left_pane_tab_swap).fadeOut();
   $(#leftPanel).fadeIn();
   $(#leftPanel).css(display,block);
   $(#main).css(margin,0 0 0 225px);
   $(#left_pane_tab_swap).css(filter,alpha(opacity=99.99));
   Set_Cookie('lp',1,10);
  }
}


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

2006-12-09 Thread stargate 
Hi Glen,

good tip, but this still doesnt solve the problem :(

Greets

Ralf

 I didn't analyze the whole thing, but just a quick question:
 Have you considered using the fadeTo() function?   it works better 
 than messing with the opacity in the CSS.
  
 Glen

  
 On 12/9/06, *stargate* [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] 
 wrote:

 Hello,

 i have a problem with the fadeout/fadein function on IE with
 jquery.I'm
 not really sure if this has something to do with jquery, but as
 far as i
 figured out
 it all depends on the filter: alpha(opacity=XX) css style wich
 jquery
 seems to set with the fadeout/fadein on the IE6.

 My goal is like a left-pane wich slide's out and back in. To to
 this i
 fadein and fadeout 2 different divs.
 On IE when the panel is open (div #leftpanel) and i close it, all is
 fine now, it fades correct out and the #left_pane_tab_swap is visible.
 But when i change the state so the #leftpanel fade's in and the
 #left_pane_tab_swap should fade out, then the #leftPanel is invisible.
 On IE6 i have installed the DOM-Explorer plugin and when i remove the
 filter: alpha(opacity=XX) css style it comes back visible or when
 i set
 it so 99.99
 In my JS-Function i've tried to set the css style manualy as you see,
 but this didnt changed anything :(

 On FF1.5/2.0 and Opera 9 all works fine this way right now.

 So im asking for help what i maybe make wrong ??

 Thx in advance for any hint/help.

 Ralf


 NOTE: i do use the actual 1.0.3 Version!!!

 CSS and JS follows
 --

 ## CSS START 
 #leftPanel {/* Styling the menu panel */

background-color:#6699CC;
text-align: left;
width: 220px; /* width incl. tab */

/* You shouldn't change these 5 options unless you need to */
height: 100%;
min-height: 100%;
max-height: 100%;
left: 0px;
top: 0px;
position:absolute;
display:block;
color: #fff;
font-size: 10px;
 }

 #leftPanel #logo {
 margin: 40px 0 20px 0;
 }

 #left_pane_tab {
background: #fff url(../images/left_tab_bg.gif) repeat-y
 left top;
height: 100%;
width: 20px;
position: absolute;
left: 200px;
border: 0px;
 }

 #leftPanel #leftPanelContent{
width: 150px;
margin: 0px;
padding: 35px 0 0 21px; /* Need to use padding because of IE */
text-align: left;
line-height: 150%;
 }

 #leftPanel a:link,
 #leftPanel a:visited {
 color: #ffc;
 text-decoration: none;
 font-weight: bold;
 }

 #leftPanel a:hover,
 #leftPanel a:active {
 color: #ff3;
 text-decoration: none;
 font-weight: bold;
 }

 #left_pane_tab_swap{
background: #fff url(../images/left_tab_bg.gif) repeat-y
 left top;
height: 100%;
width: 20px;
position: absolute;
top: 0px;
 }
 ## CSS END 

 ## JS-Function 
 function SlideLeft(){
  if($(#left_pane_tab_swap).css(display) == none){
   $(#leftPanel).fadeOut();
   $(#leftPanel).css(display,none);
   $(#left_pane_tab_swap).fadeIn();
   $(#main).css(margin,0 0 0 20px);
   $(#left_pane_tab_swap).css(filter,alpha(opacity=0));
   Set_Cookie('lp',0,10);
  } else {
   $(#left_pane_tab_swap).fadeOut();
   $(#leftPanel).fadeIn();
   $(#leftPanel).css(display,block);
   $(#main).css(margin,0 0 0 225px);
   $(#left_pane_tab_swap).css(filter,alpha(opacity=99.99));
   Set_Cookie('lp',1,10);
  }
 }


 ___
 jQuery mailing list
 discuss@jquery.com mailto:discuss@jquery.com
 http://jquery.com/discuss/ http://jquery.com/discuss/


 

 ___
 jQuery mailing list
 discuss@jquery.com
 http://jquery.com/discuss/
   


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

2006-12-09 Thread Brice Burgess 
Glen Lipka wrote:
 I didn't analyze the whole thing, but just a quick question:
 Have you considered using the fadeTo() function?   it works better 
 than messing with the opacity in the CSS.
  
 Glen

In jQ 1.0.3 + you can also use $('#el').css('opacity',0.5);  which is 
similar to $('#el').fadeTo(1,0.5); except that it doesn't give the 
element layout to make it compatible with $.anim() routines. The css 
opacity method doesn't allow you to fade over time, however -- though it 
is cleaner IMO.

~ Brice

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/