Question

jsFiddle

I’m trying to output images and text horizontally. The text elements use the jQuery Cycle Lite Plugin to cycle over a list of words. As you can see in the jsFiddle above, the cycling text elements are on the page, but for some reason the positioning of the elements is messed up. Some of the text elements appear in/on the images, then there are a bunch stacked on top of each other at the end. What is causing this?

I know there are some plugins, like jQuery Masonry, that may be able to automatically position the elements, but I need to maintain the order that the HTML outputs them all. All I really need is to have the text elements interspersed with the pictures so that they are all visible, and not jumbled up and appearing on each other.

Thanks for reading.

EDIT:

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js" type="text/javascript"></script>

            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="a"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="b"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="c"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="d"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="e"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="f"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="g"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="h"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="i"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="j"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>

Javascript:

$(document).ready(function() {
    $('#a').cycle();
    $('#b').cycle();
    $('#c').cycle();
    $('#d').cycle();
    $('#e').cycle();
    $('#f').cycle();
    $('#g').cycle();
    $('#h').cycle();
    $('#i').cycle();
    $('#j').cycle(); 
});

EDIT 2:

Here is an image representing what I’m trying to do. The blue boxes are the images, and the red ones represent the area that I want the cycling text to appear.

Answer 1

Ok, after your edit, here’s a version that does exactly what you want: jsfiddle.net/PcD8n jsfiddle.net/AcPxx

I took the liberty of tinyurl-ifying your images, as they made the code unwieldy. Also, for conciseness, I removed the wrapper <a> tags. You can add them back if you like.

Finally, I removed the ids from the cyclers, as they weren’t necessary in the context of the code you gave us.