Finally got floating header working!

[Liam W]

https://www.ingressexperts.com/forum

The header now 'floats'...

Now, to remedy the headache getting it to work caused...

 

[AdamD]

That looks really neat Good job!

 

[Russ]

When you click alerts and it brings you to the post is it hiding it?

 

[Lee]

Are you using Chris Deemings notifications modification there?

 

[Liam W]

Are you using Chris Deemings notifications modification there?

Yes, why?

 

[Liam W]

When you click alerts and it brings you to the post is it hiding it?

What do you mean?

 

[Russ]

What do you mean?

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.

 

[Forsaken]

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.

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.

 

[Russ]

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.

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.

 

[Dynamic]

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".

 

[Liam W]

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".

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?

 

[Lee]

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?

What's wrong with moving the posted info?

Yes, why?

Just wondered.

 

[OSS 117]

Wait until you check it in IE.

 

[Liam W]

What's wrong with moving the posted info?

It looks wrong, and is just wrong.

Wait until you check it in IE.

Nothing breaks in IE <whatever version I use>.

 

[OSS 117]

You must have prayed hard to the web dev gods.

 

[akafusion]

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.....

 

[Liam W]

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.....

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:

.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:

<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]

There was a decent amount of swearing involved

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

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

 

[akafusion]

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:

.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:

<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>

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