treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Anything Slider not working in IE 6 & 7, seems perfect in all other browsers.

  • Hi,

    I'm having trouble getting the Anything Slider to work in IE on a website that I am currently developing. It seem to work fine in all other browsers. The site can be accessed here: http://www.tferesearch.com/build/

    I have validated the doc and the HTML and CSS seems fine so I assume this is a JS conflict. I have 2 different jquery sliders running, however removing the other one doesn't seem to resolve the problem.

    Any help would be much appreciated.

    Naoise



  • Hi naoiseo!

    You have a trailing comma in your AnythingSlider options... it make IE6, 7 and probably 8 stab itself in the eye with a fork. Remove the comma and all will be good:

    The extra comma is after "resizeContents: false"

    $('#slider2').anythingSlider({
    autoPlay : true,
    startStopped : false,
    width : 820,
    height : 260,
    buildNavigation : false,
    resizeContents : false, // Remove this comma!
    })


  • Thanks a million Mottie! The simple problems are always the most annoying.
  • i've got a similar problem. i can view my slider in all browsers except IE 6,7, or 8. any suggestions on how to fix this issue?

    i'm getting a HUGE gap of white under the sliding image and the controls disconnected from the sliding section.

    any help would be greatly appreciated!

    http://www.palestiniancleftsociety.com
  • Hi uc_designs!

    There is an error with the masonry plugin... the file doesn't exist:

    http://palestiniancleftsociety.com/wp-content/themes/PCS_Custom/js/jquery.masonry.min.js?ver=3.3.1

    Thus causing an error with the plugin is called which is most likely why IE stops running scripts.
  • I am having a similar issue as uc_designs. I have a slider on our home page that looks great in Safar, Firefox, and Chrome, but not in IE. There is a huge amount of space (equal to the total number of slides if they were vertical, instead of in a slider) and the controls are at the bottom of that space. Help!!! The site is http://gapfamilycenter.org
  • Hi Joelc!

    It looks like that page needs a doc type. So at the very top of the page add the following:
    <!DOCTYPE html>
  • I added that, and when I did, it broke our Nav Bar (it didn't load) so I deleted it since that is more important than any slider (which, by the way, works in some versions of IE, like the version on Vista works fine, but the version on XP and 7 don't)
  • Every page needs a doc type in order for IE to not go into quirks mode. Basically it's a fallback mode that even effects IE9 and disables a lot of IE7-9's capabilities.

    You might want to also check out some of the other validation problems on that site: w3c validation service
  • I am having a problem with the slider in "The Builder" wordrpress theme. There are 2 different slider options..Piecemaker and Nivo. Piecemaker looks better but will not work in IE, Firefox or Safari. When i open them up there is a large gap in between the bottom of the slide and the content below

  • @smartbuilddesign This thread is actually in reference to the AnythingSlider plugin. I think it would be better if you started a new thread and shared the code you are using. It would be even better if you had a live demo to save the people trying to help you the work of starting from scratch.

  • I have a slider issue in the denitto theme in IE. It works fine in Firefox. It worked perfectly fine in IE until sometime last night when i uploaded a new picture. I did an update on the wordpress theme however, the slider was working after I did that a couple of days ago. Any suggestions?

  • @mrswalterdeuce Sorry what exactly is the issue? Is something offset, not showing at all or is the slider breaking?

  • Hello, Thanks for all the help I've seen here, but I've tried the above solutions, and my slider is still not working on any of the IE versions. I don't understand why. My site is http://www.milemarker.com. Any help would be greatly appreciated. Thanks.

  • Hi @ceez10!

    Well, it looks like you're loading jQuery, prototype AND scriptaculous. You'll need to set jQuery into no conflict mode, then use the variable you assign to jQuery for everything else. So it should look something like this:

          <script src="jquery.js"></script>
          <script>
          var $jq = jQuery.noConflict();
          </script>
          <script src="other-libraries.js"></script>
          <script>
          $jq(function($){
              // initialize plugins using "$"
          });
          </script>
    
  • Hello! I would love if someone could assist me in troubleshooting my AnythingSlider. I just finished a beautiful website that looks great in every browser, except IE. I think it may have happened while I made some modifications in the styles.css or scripts.js for Contact-Form-7, but I'm not sure.

    http://autoglasssarasota.com

    Please help :)

  • Hi @hiatus999!

    It looks like there are some issues with the HTML markup. The main problem is the contents of the image alt tag:

      <img class="slideimage" src="http://www.autoglasssarasota.com/wp-content/themes/striking/cache/images/167_Slider1-1-950x330.jpg" alt="<font size="3">• Insurance Questions<br>• Auto Glass Quotes<br>• Discounts and Price Match</font size><br><br><center><b>Live Help:<br>(941) 404-4030</b></center><br><font size="3"><center>Monday - Friday<br>8:30 AM to 5:30 PM" />
    

    If you're going to add data to the alt tag, make sure you escape the quotes or use an apostrophe.

      <font size=\"3\">• Insurance Questions<br>• Auto Glass Quotes<br>• Discounts and Price Match</font size><br><br><center><b>Live Help:<br>(941) 404-4030</b></center><br><font size=\"3\"><center>Monday - Friday<br>8:30 AM to 5:30 PM
    

    It's also missing a closing </center> and a closing </font>.

  • hello i'm having trouble in my slider>>not working in ie only

    can you help me how to fix this?

    this is my site

    http://viankonatura.com/2u/

  • Hi @manaz!

    I can't seem to connect to your site, but if it's an IE problem, I can almost bet it because of a trailing comma... look for a comma at the end of a line with nothing after it, like this, and remove it:

    $('#slider').anythingSlider({
        theme: 'metallic', // trailing comma!!!
    });
    
  • i have remove comma at the end line but not working yet

    this is the script

      var sliderOptions=
      {
          sliderId: "slider",
          effect: "series1",
          effectRandom: false,
          pauseTime: 2600,
          transitionTime: 500,
          slices: 12,
          boxes: 8,
          hoverPause: true,
          autoAdvance: true,
          captionOpacity: 0.3,
          captionEffect: "fade",
          thumbnailsWrapperId: "thumbs",
          m: false,
          license: "mylicense"
      };
    
      var imageSlider=new mcImgSlider(sliderOptions);
    

    your help is needed TQ

    you help is really

  • BTW my sidebar in ie can't see it..i dont know how to fix it...I've done a variety of ways sorry for my bad english..

  • That is not AnythingSlider, but I think the reason for your problems is because you're missing a doctype at the very top of the page. Because that is missing, it puts IE into quirks mode and pretty much breaks everything.

  • ok TQ so much

  • Hi I'm running anything slider on a Typo3 website. It looks fine in Chrome & Firefox but I have a big problem in IE. I think it's pretty similar to the issues above. http://www.8m3.de/index.php?id=6

    It would be great if you could help me! ;)

  • Hi BastiHo!

    The problem is actually a console log. It causes an error in IE if the console isn't open. Press F12 and reload the page and you'll see the slider functioning perfectly. So just remove this line:

      console.log("curTitle", curTitle);
    

    in SliderControl.js, line 3.

  • hi, i get some trouble for my anythingslider in IE, i have remove comma at the end line but not working yet ..

    This my script ...

    $('#slider').anythingSlider({
        resizeContents      : false,
        addWmodeToObject    : 'transparent',
        navigationFormatter : function(index, panel){ // Format navigation labels with text
          return ['Vimeo-iframe', 'Vimeo-embed', 'YouTube-iframe', 'YouTube-embed', 'HTML5 Video'][index - 1];
        },
    
        // Autoplay video in initial panel, if one exists
        onInitialized: function(e, slider) {
          playvid(slider);
        },
        // pause video when out of view
        onSlideInit: function(e, slider) {
          var vid = slider.$lastPage.find('video');
          if (vid.length && typeof(vid[0].pause) !== 'undefined') {
            vid[0].pause();
          }
        },
        // play video
        onSlideComplete: function(slider) {
          playvid(slider);
        },
        // pause slideshow if video is playing
        isVideoPlaying: function(slider) {
          var vid = slider.$currentPage.find('video');
          return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
        }
    
      });
    

    please give me the solution, and i'm sorry for my bad english thx

  • Hi redzase!

    I can't tell if there are any problems in the code above. What does playvid() do?

    It would be better if you could share a demo of the slider or check to see if there are any errors (press F12 and look in the console tab).

  • Hi @Mottie, I have a few slides in AnythingSlider and each uses a large (1300x650) background image. Everything loads great but with infiniteSlides set to true when it goes from slide3 to the (cloned, I suppose?) slide1, the background blinks into view only after the slide animation ends. No such effect occurs going from 1 to 2 or 2 to 3 (nor when infiniteSlides is false). I even tried placing the image in a container on a lower z-index beneath the slide content and the same thing occurred. Unfortunately, I don't have permission to publish the contents at this time so I can't share the URL yet. :/

    Any ideas?

    thanks kindly

  • I figured it out... my background images are assigned in the CSS to a container ID in each panel. It took me a while to realize that the cloned panel can only replicate classes and not ID properties. I re-assigned the background to a class and it was fine. I also now understand why each li uses class rather than id for panel1, panel2, etc.

    Another issue that arose was the background was set to top center. Because the slide is moving, the background position seems to change during transition and it works better when a fixed top left value can be defined. I hope this helps out someone.

  • Hi, I have a problem with AnythingSlider in an ebay store. You can take a look here:http://stores.ebay.co.uk/dabsoutlet/pages/official-acer-outlet In IE when you click on an item and then click Back button, another banner appears on the place of the slider. Can you help me?

    Thanks

  • @Dahlia.

    Could you please start a new thread as your issue is not related to the original question?

    Oh...and which version(s) of IE?

This discussion has been closed.
All Discussions