Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by ltoshea
ltoshea
845 Points

Javascript plugin (cycle2) ignores grid layout

Hi all, First of let me start by saying in a relative beginner. I've included cycle2, a query image slider/fader. The problem I am having is that the picture container now sits on top of the text (rather than the text being at the side) as I would expect. It seems like to me that the javascript element doesn't get rendered before the "p" tags in the html underneath which then take up the space where the container is meant to be. 

<div class="grid-container">
<div class="grid-8">
<h2>Primary Content</h2>
<div class="cycle-slideshow grid-8">
<img class="feat-img" 
<img src="testimage1.png" />
<img src="experimental/glowfinal.png">
</div>
<p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef</p>

I'm using a basic grid system to lay out my page (.grid-1 {width: 6.5%;}) etc.. In my mind the text fills up the space since that section of the grid is empty then the javascript element ends up on top. I've tried adding the CSS attribute z-index:9999 to the .cycle-slideshow.

I notice that If I go into the javascript code and change slideCss: { position: 'absolute', top: 0, left: 0 }, to position: "relative" then it works. However it then does not act as a slideshow but stacks the images down the page.

Could anyone offer some advice? Thanks!

ltoshea
ltoshea
845 Points

I should also note that the instructions for the cycle plugin state that to get it to work in it's most basic form I need the synatx

<div class="cycle-slideshow">
<img class="">
<img class="">
</div>

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi LIam,

I think you must have been editing the site just now while I was looking at it. I think you have it sorted out?

Rather than floating the slideshow and trying to get the paragraphs on the right you made use of the grid and gave each one a grid_4 correct?

I think this will be fine as long as you don't want extra primary content to flow under the cycle slideshow. Extra primary content is going to remain in that middle column if it extends past the bottom of the slideshow.

If your intention was to have extra primary content flowing under the slideshow and essentially taking up both columns from that point on then I think you're going to have to go back to putting both elements back into a grid_8 and we'll have to work out how to make that work.

As it stands right now, I think if you had long primary content then you're going to have a bunch of empty space below your slideshow.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Liam,

Your first img tag doesn't have a src attribute and it's not closed. Also, you have 3 opening div tags in your code but you're only showing 1 closing div tag. It's hard to know which div the paragraph belongs with. Can you get this fixed first and then we can see where you're at?

As I understand it right now, you want the heading and slideshow in the left column and the paragraph should be in the right column?

ltoshea
ltoshea
845 Points
ltoshea
ltoshea
845 Points

Hi Jason that is exactly right. Here is the section in it's entirety:

<div class="grid-container">
<div class="grid-8">
<h2>Primary Content</h2>
    <div class="cycle-slideshow">
    <img class="feat-img" src="http://www.epigram.org.uk/images/uploads/2014/DSC_0104__kopie.JPG" display="relative"/>
    <img src="experimental/glowfinal.png"/>
    </div>

<p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
<p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin.</p>
</div>
    <div class="grid-4">
        <h3>Secondary Content</h3>
        <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
        <hr/>
        <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
        <hr/>
        <p>Meatball pastrami shoulder, brisket ribeye spare ribs turkey tongue strip steak t-bone.</p>
    </div>
</div>
ltoshea
ltoshea
845 Points

If you wish to see it in action I won't be changing it for the next hour or two: http://ltoshea.co.uk/ Cheers!

ltoshea
ltoshea
845 Points
ltoshea
ltoshea
845 Points

HI Jason, Thanks so much for your reply, after many many hours of messing around I did indeed fix it! Maybe it's not the most elegant fix but I'm really happy that it's now positioned roughly correct. I'm happy with the layout as it is, even if I need to bulk out the "primary content" section.

Out of interest do you have any idea why it did not work with grid-8, it would be great to understand technically what the problem is so I don't end up making the same mistake again!