3

I'm trying to use bxSlider, and IE8 won't seem to cooperate. In this example, the image slider is either collapsed or doesn't show up at all... it's hard to tell because when I turn on Developer Tools to debug, the slider suddenly shows up and all seems hunky dory.

http://www.ilium.com/test/

There was another similar question in which there was a javascript error (in a different slideshow plugin) that was resolved by turning on the debugging console:

jQuery script only working under ie8/9 developer tools

...but IE doesn't seem to be throwing any errors in my case, and the fixes suggested didn't work for/apply to my situation. Plus I don't think I have a console.log anywhere in my scripts. I've tried adding any number of scripts that activate a console when the page loads, to no avail.

I tried a fix aimed at resolving JQuery conflicts (suggested at another site that I don't yet have rep enough to link to), altering the bxSlider function call like so:

    <script>// <![CDATA[
    $jQ = jQuery.noConflict();
    $jQ('#home').live('pageshow',function(){
    $jQ('.bxslider').bxSlider({
    mode: 'fade',
    auto: true,
    pager: false,
    controls:true,
    pause: 9000,
    });
    });
    // ]]>
    </script>

No good, and started causing whole other conflicts.

In an issue on GitHub (https://github.com/wandoledzep/bxslider-4/issues/197), it was stated that IE was collapsing LIs in bxSlider, and suggested adding some CSS to give the LIs a width. This also did not work for me.

So right now I'm exactly nowhere on this issue after several hours. Any suggestions, Doctors?

Community
  • 1
  • 1
Halfacre
  • 565
  • 8
  • 26

4 Answers4

0

Funny I ran into the same issue this evening - in my scenario I was able to set a fixed height on the bx-wrapper so....

.bx-wrapper{
   height: 500px !important;
}

fixed it for me - not ideal because I expect it to be flexible but it worked here.

I tried debugging the script and kind of narrowed it down to the resizeWindow->redrawSlider handler is what causes the display to right itself (not specifically the developer tools but the resize window event that happens when you open them) - out of time but if I have a better solution tomorrow will let you know.

maehue
  • 505
  • 10
  • 26
  • Thanks @Migo. Glad you got it working. Unfortunately I am going to need this to be flexible. Still, this is good info... I never would have figured this out because I'm using a virtual machine to run IE8, and I can't resize the window. This definitely gives me some ideas to try. I'll let you know if I find a flexible solution as well. Cheers and thanks again! – Halfacre Oct 15 '13 at 13:53
  • Hey @MigoFast, I've found that navigating away from the page and back again also causes the slider to show up. Does that provide any further clues? – Halfacre Oct 17 '13 at 19:41
0

I had the same issue. For me the solution was not resizing the sliding images by percentage, but by exact amount of pixels. E.g., 

<li><img src="image.jpg" style="width: 561px; height: 425px;" /></li>

Instead of

<li><img src="image.jpg" style="width: 170%; height: 170%;" /></li>

and then making the image responsive again by adding bootstrap's img-responsive class.

user2609980
  • 10,264
  • 15
  • 74
  • 143
  • 1
    Hey thanks @user2609980. Glad you responded here because I still haven't got this issue sorted. I'm using JQM, and man do I wish there was an `img-responsive` class. But unless there's some backdoor stuff in Bootstrap that's necessary to make that work, I should just whip one up. It looks like all it does is apply `width:100%;` and `height:auto;`. I'll give this a shot and let you how it goes... though it might take me a bit because my css3mediaqueries.js stopped working at some point, rendering this all moot. – Halfacre Jan 22 '14 at 18:35
  • @MattKristiansen I see now that I might have been answering a different question :). I had the issue that the height did not render in the correct way in IE8 (it was stretched out), but it did render at the good height in FireFox. This was solved with the answer above. – user2609980 Jan 22 '14 at 19:08
  • 1
    If you say it does work while you are debugging there might be a `console.log` somewhere after all. You don't need to use it for IE to break. – user2609980 Jan 22 '14 at 19:12
  • Yeah, @user2609980, that's not really my issue. Thanks for the other suggestion though. I searched my scripts for console.log with no results, is that enough to put that to bed, you think? – Halfacre Jan 22 '14 at 22:30
  • Removing console.log resolved this issue for me. Thanks for the information. – The Jonas Persson Mar 03 '14 at 22:13
0

I was having the same issue with a site, what I did to correct it was instead of resizing the browser (which also worked for me; that's what opening the developer tools is essentially doing) was I added a bit of code to reload the images (not from cache) every time in IE8 by adding an arbitrary query to the end of each image. This seemed to work for me. See below.

<div class="slide"><img src="images/your_image_name.jpg<?php if (strstr($_SERVER['HTTP_USER_AGENT'], "MSIE 8") > ""){ echo "?v=" .  time(); } ?>" ></div>
mbacklas
  • 27
  • 4
0

This is a VERY hacky approach, but I found that it worked in IE8 - Essentially it runs a window resize, forcing the BX slider to reload

Put this inside a window load tag.

if ($('.bxslider').length > 0) {

    slider = $('.bxslider').show().bxSlider();
    slider.reloadSlider();

}

function fireOnResizeEvent() {
 var width, height;

 if (navigator.appName.indexOf("Microsoft") != -1) {
  width  = document.body.offsetWidth;
  height = document.body.offsetHeight;
 } else {
  width  = window.outerWidth;
  height = window.outerHeight;
 }

 window.resizeTo(width - 1, height);
 window.resizeTo(width + 1, height);
}

window.onresize = function() {
    if ($('.bxslider').length > 0) {
        slider.reloadSlider();
    }
}
Ash Whiting
  • 1
  • 3