1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Finally got floating header working!

Discussion in 'Off Topic' started by Liam W, Oct 27, 2013.

  1. Liam W

    Liam W Well-Known Member

    BassMan, ManagerJosh and Adam Howard like this.
  2. AdamD

    AdamD Well-Known Member

    That looks really neat :) Good job!
     
  3. Russ

    Russ Well-Known Member

    When you click alerts and it brings you to the post is it hiding it?
     
    Adam Howard likes this.
  4. Lee

    Lee Well-Known Member

    Are you using Chris Deemings notifications modification there?
     
  5. Liam W

    Liam W Well-Known Member

    Yes, why?
     
  6. Liam W

    Liam W Well-Known Member

    What do you mean?
     
  7. Russ

    Russ Well-Known Member

    Well one of the problems I've been having with a floating nav, some others too is when you click on an alert say someone quotes you, it'll take you to that post, but the floating nav is hiding some of the post content.
     
  8. Forsaken

    Forsaken Well-Known Member

    There are a few ways around that, but they're a bit hackish and should be avoided due to complications they can bring up (especially in responsive situations).

    I'll do it on request, or on my own stuff occasionally but I prefer not to do it. It's also a bit of a gimmick and a lot of people find it annoying.
     
  9. Russ

    Russ Well-Known Member

    I've done some funky padding stuff but it doesn't feel right in the end, nor would I put it in a release of mine heh.
     
  10. Dynamic

    Dynamic Well-Known Member

    I got around it by moving the bottom information to the top. Eg "Dynamic, Today at 3:00 PM". That sits at the top of the message content with some padding. I made sure that the bottom of my header was higher than the top of the message content. Looks completely normal and does not look like a "hack".
     
  11. Liam W

    Liam W Well-Known Member

    Hmmm, I just discovered I have the issue. However, I don't want to move the posted info, so I'm moving the anchor toggle class to the li tag.

    However, it is still being obscured. Any tips?
     
  12. Lee

    Lee Well-Known Member

    What's wrong with moving the posted info?

    Just wondered.
     
  13. OSS 117

    OSS 117 Well-Known Member

    Wait until you check it in IE. :p
     
  14. Liam W

    Liam W Well-Known Member

    It looks wrong, and is just wrong.

    Nothing breaks in IE <whatever version I use>.
     
  15. OSS 117

    OSS 117 Well-Known Member

    You must have prayed hard to the web dev gods.
     
  16. akafusion

    akafusion Member

    Nice site you have there @Liam W
    I have quick question if I may - how did you stop youtube videos breaking out of Xenporta frame on the homepage.....
     
  17. Liam W

    Liam W Well-Known Member

    There was a decent amount of swearing involved :)

    I'll see if I can find the css I used.

    EDIT

    I added this CSS to my extra.css:

    Code:
    .video-container {
        position: relative;
        padding-top: 50%;
        overflow: hidden;
        width: 100%;
        max-width: 560px;
    }
    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    
        max-height: 320px;
    }
    and I changed my youtube media code to this:

    HTML:
    <div class="video-container">
    <iframe class="responsiveVideo" type="text/html" width="100%" height="100%" src="//www.youtube.com/embed/{$id}?wmode=opaque&html5=1" frameborder="0" allowfullscreen></iframe>
    </div>
     
    akafusion likes this.
  18. akafusion

    akafusion Member

    That would be great thanks, as I can't seem to find an answer for Xenporta or the free blog addon for breaking the responsive frame
     
  19. akafusion

    akafusion Member

    Excellent. I will try that. Many thanks
    Is the youtube media code located in the same template - the extra css?
     

Share This Page