3

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

  • Encapsulating code in j(function() {...});
  • Switching "-" (hyphen) to "_" (underscore)

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>
gherkins
  • 14,603
  • 6
  • 44
  • 70
David Peters
  • 1,587
  • 1
  • 12
  • 10
  • http://jsbin.com/esilot/1/edit – Roko C. Buljan Mar 13 '13 at 19:31
  • I'm not sure it will help but you can do away with the `i` counter by appending the active div to its container at each cycle. At the start of each cycle select the next div in the rotation with `divs.eq(0)`. – Beetroot-Beetroot Mar 13 '13 at 19:36
  • Take a look at this SO post, might be relevant. http://stackoverflow.com/questions/1284163/jquery-ie-fadein-and-fadeout-opacity – DACrosby Mar 13 '13 at 19:37
  • A couple of other things to try (i) purge hyphens from element ids in favour of underscores, (ii) wrap your javascript in `j(function() {...})`, and (optionally) move the script into the document head. – Beetroot-Beetroot Mar 13 '13 at 19:40
  • 1
    Also, make sure the document has a right at the top. If it already has one, then make sure it the HTML5 variant ` `. – Beetroot-Beetroot Mar 13 '13 at 19:46
  • I can confirm that the original page is !DOCTYPE html – David Peters Mar 13 '13 at 19:56
  • I'm unsure if the fade is the issue. It's bringing up the next div in the sequence with id names: cda2012-1, cda2012-2, etc. – David Peters Mar 13 '13 at 19:57
  • I added a background color to each div being faded. This doesn't fix the issue of IE9 hiding the first div and not displaying the second. – David Peters Mar 13 '13 at 20:05

4 Answers4

1

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

iGanja
  • 2,374
  • 2
  • 28
  • 32
  • Would that cause the div to not hide though? The hide/show functionality is the one I'm concerned about. – David Peters Mar 13 '13 at 19:45
  • I added a background color to each div being faded. This doesn't fix the issue of IE9 hiding the first div and not displaying the second. – David Peters Mar 13 '13 at 20:04
  • FadeIn[Out] works in IE9. It may be due to using background colors. The no show itself was fixed thanks to @Beetroot-Beetroot's suggestion of encapsulating the code in j(function() {...}) – David Peters Mar 13 '13 at 22:41
1

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.

Beetroot-Beetroot
  • 18,022
  • 3
  • 37
  • 44
  • 1
    That page is ` `, not ` `. – Beetroot-Beetroot Mar 13 '13 at 20:54
  • Unfortunately, my company doesn't have access to changing that part of the page ourselves (long story, offsite AMS). It looks like I won't be able to set the DOCTYPE. Is there a way around this? @Beetroot-Beetroot – David Peters Mar 13 '13 at 22:10
  • I tried changing the id to class, per one recommendation. No luck, so I switched it back to id. – David Peters Mar 13 '13 at 22:12
  • 1
    Encapsulating the code in j(function() {...}) worked! I did not have to modify my original script aside from this and using underscores instead of hyphens. No other changes were necessary and I didn't need the code above. I owe you a cold one, @Beetroot-Beetroot – David Peters Mar 13 '13 at 22:24
0

-------------- 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/

Community
  • 1
  • 1
MlgMainstream
  • 81
  • 2
  • 9
  • I added a background color to each div being faded. This doesn't fix the issue of IE9 hiding the first div and not displaying the second. – David Peters Mar 13 '13 at 20:03
-1

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.

MlgMainstream
  • 81
  • 2
  • 9
  • I'm using IE9. It's up-to-date. It's in Browser Mode: IE9 and Document Mode: IE9 Standards – David Peters Mar 13 '13 at 19:36
  • 1
    A lot of us need to support more than the newest version of IE. IE is not dying. That is not a good way to think about things. One should look to support as much of their target audience as possible as the OP is doing. – Buggabill Mar 13 '13 at 19:36
  • Bugga, you dont go around telling people how to do things. Also, IE is a dying browser. It's mircrosoft's own fault they are separating themselves from productivity and financial growth. As a web developer, you do not have time or money to build stuff for such stupid actions. You build to present NEW ideas, NEW code (HTML 5, CSS3 / CSS4, and JQUERY 2), as you build with these new features you force your community to drop the dying products (ex: IE) and pick up the new ones so they can experience these great features. – MlgMainstream Mar 13 '13 at 19:47
  • As for David, You are up to date, did you try adding a pair of parenthesis to this: .fadeOut(450, cycle); ----->> .fadeOut(450, cycle()); – MlgMainstream Mar 13 '13 at 19:49
  • Negative. Adding the () after cycle breaks the hide/show part of script in FF & IE9 – David Peters Mar 13 '13 at 19:52
  • Ah, good point. Sorry I cannot test this on IE browser because I am on my work computer. I posted another answer about filter problems in using FadeIN and FadeOUTs. – MlgMainstream Mar 13 '13 at 20:00
  • The fadeout/in isn't the issue though. The next div in the sequence doesn't display at all, nor does it cycle back to the first div as it does in FF/Chrome. – David Peters Mar 13 '13 at 20:05
  • @MlgMainstream - Really? A full 48% of the visitors to my company's site alone are on IE. That is after we have installed Firefox and Chrome on a good portion of the PCs in the office and with a large group hitting the site from mobile devices. Supporting as many possible users of a web app that I might develop is in the best interest of my company and the perspective users of that app. Please do not try to resurrect the browser wars of the past with your holier-than-MS mantra. You should not try to force your community to do anything unless you want a ticked off community. Cheers! – Buggabill Mar 13 '13 at 20:43
  • 1
    Yes, IE is still very much a major player and since the introduction of HTML5, it's no more out of step with the standards than any other major browser. A few years ago the forums were full of "doesn't work in IE" questions. Now you just as likely to see the same said of FF/Chrome/Opera/Safari. Not so Konqueror though - I guess the user-base is pretty small? – Beetroot-Beetroot Mar 13 '13 at 21:06
  • I am not forcing anyone to do anything. I just build simple code for crappy browsers like IE. I am merely saying, "I'm not holding back my ideas, code, functionality for people who still use crappy browsers because it's time to move on and experience something new. It's good to show the community what theyre missing out on and by doing so, you help eliminate the slack offs / inbred browsers like IE. IE needs to use webkit because they are losing hundreds millions of dollars to competitor browsers." -- IE will die, stats show it has a 15% play in the developer world. – MlgMainstream May 16 '13 at 20:36