Coda Slider Issue - Height

[porkchop_001]

Hi Guys,

I'm new to the JavaScript scene.

I'm designing a site over at http://www.thenativedrum.com/website and I'm beginning to run into some issues.

I'm trying to add a fourth box to the content-slider, but for some reason it keeps appearing on the first content box (i.e. Training is appearing under the Home div for some reason.

Have a look at my source and see if you can spot the issue. Each <div> has it's own ID (line #98 <div class="section" id="home-pane"> and line #130 <div class="section" id="training-pane"> are the two lines I'm referring to).

I'm all out of ideas. It may be a CSS issue - but none that I can spot. Thanks!

[lilpete]

I just ran the code through Dreamweaver and it found an unclosed div.
The offender: <div id="frame">
so add a </div> just before your body tag and that might do it.

[porkchop_001]

Thanks. I've looked through a few times and put the </div> tage where you suggested. Still no luck. Maybe I'm not looking closely enough. I'll keep going through! If anyone else can confirm this it'll ease my stress me greatly!

[lilpete]

Sometimes its the little things, sometimes it isnt... sorry that didnt solve it.
I will have a good look when im home, at work atm.

Good luck!

[azoomer]

In the stylesheet.css around line 101 I can see this

#content {
width:2490px;
}

this width is messing up the design. Try to delete it or change it to

#content {
width:815px;
}

I think that will help, hopefully !

[porkchop_001]

Hi azoomer. Yes I've been aware of the mysterious 2490px width definition for quite some time now. I didn't design the plugin so I'm not sure what was going on there.

I've tried to fix it before but it always ruins the design. I've changed it to 815[x just so you can see (it should be updated on the webpage now). So have a look and see what you think it may be.

I have no doubt it's probably the perpetrator - but fixing it is another issue within itself!

[azoomer]

looking at the site now it looks fine to me. All 4 divs appearing in place. Do you see any problems ?

Okay i have to admit i don't understand why the post is called coda slider issue. I can not see any coda slider, but maybe I need to take a better look. And what's with the fancybox ? what is that used for ? I guess I don't fully understand what the overall plan is for the page. How do you want the page to function ?
I am surely missing something ! what plugin are we talking about ?

[porkchop_001]

azoomer: it's called CODA because the plugin that makes the conent slide from side from side uses a plugin from the Panic Coda website.

What SHOULD be happening is that each individual (Home, About etc.) should be in an individual box and every time you click a navigation button on the bottom it's slides so it's respective section.

The four DIV's are in the same place. They should be appearing like this http://www.thenativedrum.com/practice (but obviously looking much different).

Are you following now? Fancy Box will be used for pictures and inline HTML at a later date. I just haven't got around to it lol

Hopefully once you look at that link above you'll understand what I want to get at.

[azoomer]

Ahhhh now i understand where you are heading. It's a good idea. I have seen the coda slider before, very nice, but i have never implemented it. Now i understand that the width was was such a large number, and it probably has to be even larger, but i will take a look at it later tonight and get back to you when i understand the script better. It would be nice to get it working on your page.

[azoomer]

Ok couldn't help trying a little something now. Changed the

#content {
width:3260px;
}

4 x 815px and suddenly everything was sliding back and forth as on the other demo page. Try it and see if that's how you want it. ( I am using firefox so don't know yet how it looks in the other browsers). It also looks fine if the width is even larger f.ex 3600px, but if it is just 1 px smaller the design breaks.

edit; Now I tried it in chrome, safari and opera and it works fine. However, In Internet explorer 8 there are some problems. It doesn't work, probably because of some javasscript errors that have to be fixed. another note: there are links to two identical copies of jQuery 1.4.2 on the page and one of them can safely be deleted.

A few of the errors will probably be due to the fact that the ultimate fadein slideshow is in jquery noconflict mode. So the syntax with $ that you have for the fadebox initiation will give errors. you can try to replace every instance of '$' with 'jQuery' or just change the ready function like this
jQuery(document).ready(function($) {
not sure what will work.

Another possibility is to change the fadeshowscript so that it is not in noconflict mode. (make a search on this forum)

That said, I would find it better to start by removing the fancybox script( all components) from the page until everything works perfectly, and then introducing it again later when you need it.
It will make debugging easier.

And of course, there could be more issues.