Nivo-Slider disappears while slide is being changed in IE ≤ 8

Question

I'm testing the slider and it works in Chrome and IE 9+ but doesn't work properly in earlier versions.

The problem that occurs to me is that while the previous slide is rolled up, an error-like image is revealed (and the loading.gif is then visible) and remains for over two seconds, until the next slide appears.
I tried changing the animation type but the problem persists.

I applied this answer and it didn't solve the issue.

Any clue?

I've posted same question at dev7studios as well, no answer however.

Update This is the method that generates the images:

private static MvcHtmlString BuildImageTag(string blobName, object htmlAttributes = null, string name = null)
{
  TagBuilder tag = new TagBuilder("img");

  var src = BlobHelper.GetBlobUri(blobName);

  tag.Attributes.Add("src", src.ToString());
  tag.Attributes.Add("name", name);
  if (htmlAttributes != null)
    tag.MergeAttributes(new RouteValueDictionary(htmlAttributes), true);

  return MvcHtmlString.Create(tag.ToString(TagRenderMode.Normal));
}

How do I change it so that the closing tag is separate (as explain in this answer)?

Update 2

After enabling JS debugging, I see there is a debugger break at the nivo slider js file.

The line in the JS is:

u.attr("src",i.currentImage.attr("src")).show();

I'm not even sure it's related but I thought it might help.

Declinature

Answer 1

In the source code of your page, i see:

<img name="ImageFileName" src="https://levelblob.blob.core.windows.net/levelblob/images/slides/b0624213-f3cd-4e0f-b1ae-e5e97429b087.jpg" title=""></img>

This is not valid img tag as W3C specify:

The tag is empty, which means that it contains attributes only, and has no closing tag.

BTW, an alt attribute is required by standard, however, no browsers will complain about that.

So in your case, you should rewrite all your img tags as follow: {no '/' at end of img tag and of course no '' closing tag}

 <img name="ImageFileName" src="..." title="" alt="">

Plus note tip still from W3C:

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

Not sure your problem come from something here, but i'm sure that non-valid html can lead in some problems.

UPDATE

Following your update, i see you are using (asp) to render html. You should try this at end of your function:

return MvcHtmlString.Create(tag.ToString(TagRenderMode.StartTag));

PS: i cannot test any asp code.

Lylalyle

I reupdate answer, you should infact try to use "TagRenderMode.StartTag" not "TagRenderMode.SelfClosing" i think. But im afraid, i cannot test asp code. msdn.microsoft.com/en-us/library/… – Lylalyle

I already changed it, yes this is it, I'm testing it now, and hope you soon get 215 new rep! – Declinature

You edit my answer with "EndTag". Are you sure it's not "StartTag" instead? – Lylalyle

Rolled back. Now it works in IE8, but not in IE7. I'm checking the HTML source, and I see that the img tag is still self-closing. How can I explicitly set the TagBuilder to render separate opening and closing tags? – Declinature

I have just tested on emulated ie7, ie8, ie9 and that seems to work fine now. Have you think to clear browser's cache? – Lylalyle

"You may award your bounty in 36 minutes." BTW, what emulator do you use? Is there a browser emulator for Google Chrome? – Declinature

Thx shimmy! Using Internet Explorer and dev tools (F12), you can change between IE version and quirks mode. This is not possible using chrome as chrome is an auto-updating browser meaning you should always have/use the last stable version available. – Lylalyle

U deserve every bit of it man, thanks for your catch, you're indeed good! – Declinature

Answer 2

Is the site written in HTML 5?

I recently implemented this into a website that I created and it works perfectly in both IE 8 and IE 7. The website I created was written in HTML 5 and the only thing I changed in order to make the slider work was to change the div tags around the slider to sections and then add the HTML 5 shiv everything else was stock from the site.

Here's the site I created that works, so hopefully this might help you too

(Don't have 50 rep so can't post this as a comment)

Mukul

:( The issue still persists. I added the html5shiv to the MainLayout page, was that supposed to work? If you solve this issue, you'll get more than 50 rep (It's 65 I think)... – Declinature

I also changed the divs surrounding the slider to sections using html5 tags – Mukul