Hi John,
thanks for the info, I'll try that.
But it seems that there is another problem, because the part where
the .attr("style") thing is checked, depends on the link beiing
generated, wich does not happen in IE.
The result of the code in IE is
<h3><img /> Text</h3>
(which is the "static" html code)
in Firefox and Safari (didn't checked with Opera) it is
<h3><a><img /><img />Text <span>another Text</span></h3>
("static" code plus the 'inserted' code through jQuery)
- Tom
On 25 Jul., 20:39, "John Resig" <[EMAIL PROTECTED]> wrote:
> This is going to be an issue:
> .attr("style") == "display: none;"
>
> Up until just the other day, that wasn't working in IE (it's fixed
> now, and it will be in jQuery 1.1.4). In the meantime I recommend that
> you do:
>
> .is(":hidden")
>
> or:
>
> .css("display") == "none"
>
> --John
>
> On 7/24/07, webrocker <[EMAIL PROTECTED]> wrote:
>
>
>
> > Hello group,
>
> > I try to dynamically add some tags and content to an existing element
> > (basically a toggle-link, that's only to be seen if JS is active and
> > that slideToggles a div). Somehow my code doesn't work in IE, although
> > it works fine in other browsers like Firefox or Safari:
>
> > +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
> > ++++++++
> > JQuery:
>
> > $(document).ready(function(){
> > // hide div on pageready:
> > if( $("div.reduction-wrap") ){
> > $("div.reduction-wrap").hide();
> > // add toggle link with icon to headline
> > with( $("#toggle-link") ){
> > children('img').append('<img src="images/pfeil-blau-r.gif"
> > id="toggle-icon" alt="">');
> > append(' <span>show</span>');
> > html( '<a href="javascript:;"
> > id="reduction-toggle">'+$("#toggle-
> > link").html()+'</a>');
> > }
> > // click on link toggles hidden div:
> > $("#reduction-toggle").click( function() {
> > $("div.reduction-wrap").slideToggle("normal",
> > function(){
> > if( $("div.reduction-wrap").attr("style")
> > == "display: none;") {
> >
> > $("#reduction-toggle").children("span").html("show");
> >
> > $("#toggle-icon").attr({src:"images/pfeil-blau-r.gif", id:
> > "toggle-icon", alt: ""});
> > } else {
> >
> > $("#reduction-toggle").children("span").html("hide");
> >
> > $("#toggle-icon").attr({src:"images/pfeil-blau-u.gif", id:
> > "toggle-icon", alt: ""});
> > }
> > });
> > // make sure nothing happens with the link:
> > this.blur();
> > return false;
> > });
> > }
> > });
>
> > HTML:
> > <h3 id="toggle-link"><img src="images/icon-reductions.gif" alt="" />
> > Title</h3>
> > <div class="reduction-wrap">content</div>
>
> > +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
> > ++++++++
>
> > What is wrong with that? IE will hide the div, but no link-markup is
> > inserted to the html.
> > Thanks for any hint or shove in the right direction...
> > Tom
