Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Coda Slider Issue - Height

  1. #1
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Coda Slider Issue - Height

    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!
    Last edited by porkchop_001; 07-16-2010 at 06:24 AM.

  2. #2
    Join Date
    Jul 2010
    Location
    Bridport, Dorset
    Posts
    58
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    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.

  3. #3
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Jul 2010
    Location
    Bridport, Dorset
    Posts
    58
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    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!

  5. #5
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    In the stylesheet.css around line 101 I can see this
    Code:
    #content {
    width:2490px;
    }
    this width is messing up the design. Try to delete it or change it to
    Code:
    #content {
    width:815px;
    }
    I think that will help, hopefully !

  6. #6
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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!

  7. #7
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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 ?
    Last edited by azoomer; 07-13-2010 at 04:13 PM. Reason: Now I see the coda slider js, but where is the slider itself ?

  8. #8
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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.

  10. #10
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

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

    Code:
    #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.
    Last edited by azoomer; 07-14-2010 at 10:20 AM.

  11. The Following User Says Thank You to azoomer For This Useful Post:

    porkchop_001 (07-16-2010)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •