CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
David Peters
David Peters

Reputation: 1637

Hide/show not working in Internet Explorer

Overview

I'm creating series of divs with id named "cda2012_#" where # represents the order. They should appear for 8.5 seconds and be replaced by the next div in the sequence. These divs will cycle indefinitely. The script below executes at the bottom of the page, after the divs have loaded.

Desired Effect

Specific divs flagged by id will cycle between each other, in order, indefinitely. (Works in FF/Chrome)

Error in IE9

First div displays fine but second div won't display, nor will it cycle back to the first div in the sequence.

UDPATE: The issue in IE9 is that the next div in the sequence doesn't show. In Firefox/Chrome, the divs will cycle indefinitely for 8.5 seconds.

UPDATE 2: Switch from - to _ in div id and script, per request. Still doesn't pull next div in sequence in IE9.

UPDATE 3: Updated divs elements being hid to have background colors, per suggestions. This doesn't have an impact on cycling between the divs in IE9.

UPDATE 4: Encapsulated code using: j(function() {...});

Solution

Fixed thanks to input from @Beetroot-Beetroot

<script>
    var divs = j('div[id^="cda2012_"]').hide(),
        i = 0;

    (function cycle() { 
        divs.eq(i).fadeIn(450)
            .delay(8500)
            .fadeOut(450, cycle);

            i = ++i % divs.length;
    })();
</script>

Here is an example div that would appear above the script in the HTML:

<div id="cda2012_1">
    <div id="table-hd">Project Title</div>
    <div id="table-bd">
        <span id="table-q">
            <img align="middle" alt="" src="http://aiawa.org/associations/12413/files/cda2012-hogue.png" />
            <hr id="table-hr" />
            Firm: <a href="http://lmnarchitects.com/" target="_blank">LMN</a><br />
            Photo: <a href="http://lmnarchitects.com/" target="_blank">LMN</a></span><span id="table-v"><br />
            <center>
                <span id="table-h2">Did you know?</span>
            </center><br />
            Students and faculty at Central Washington University can assemble wind turbines or test photovoltaic technologies on the &quot;working roof&quot; of their 92,000GSF LEED Platinum facility. <br />
        </span>
    </div>
</div>

Upvotes: 3

Views: 2528

Answers (4)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

I did something similar a while back and the code (from memory) was something like this :

j(function() {
    var projectContainer = j("#.....");//the parent div
    projectContainer.find('.projects').hide();//select by class
    var t_ref, allowCycle = true;
    function cycle() {
        projectContainer.find('.projects:last').hide().prependTo(projectContainer).fadeIn(450);
        if(allowCycle) t_ref = setTimeout(cycle, 8950);
    };
});

As far as I'm aware IE(version?) had no problems with it.

Vars t_ref and allowCycle allow the cycle to be stopped if necessary.

Upvotes: 1

MlgMainstream
MlgMainstream

Reputation: 81

-------------- Read this about how to fix the FadeIN and FadeOUT functions ---------------

it has to do with the "filter" 's that IE requires to do opacity and coloring changes.

link:: http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

Upvotes: 0

MlgMainstream
MlgMainstream

Reputation: 81

Just for some quick thoughts on where the problem lies:

  • What version is the IE browser you are using? Try updating.

  • Use the newest version of JQuery from google.

  • *A problem might exist "because browsers understand javascript and not stand alone jQuery snippets. jQuery turns our code into normal javascript code, so that the browsers can interpret what we are saying. Javascript libraries are shortcuts. If you were to load a library plugin before the library itself has been loaded, the plugin would be seen as bunch of mumbo-jumbo by the browser. This snippet of code means absolute nothing before the library has been loaded." *(sourced here:: http://css-plus.com/2010/03/6-steps-to-take-if-your-jquery-is-not-working/)

  • Hope this helps, IE is a dyeing browser anyways. Good Luck.

Upvotes: -1

iGanja
iGanja

Reputation: 2464

I believe fadeIn[Out] - which affects CSS opacity - does not work in older versions of IE.

Upvotes: 1

Related Questions