Floating right column

Post

Posted
Rating:
#5112 (In Topic #1154)
Standard member
ooblek is in the usergroup ‘Well-settled’
When I have only menus in the right column, the entire column floats with you when you scroll down the page, no matter how long the page is. I like that. Even when I put a box below the menus, it still floats. The problem is, however, that when I put boxes at or near the top above the menus, the right column no longer floats.

My question is, can I make the right column continue to float with the page even with the boxes above the menus?
Online now: No Back to the top

Post

Posted
Rating:
#5114
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’
Sounds like a possible bug. I mean, it let's you do it with boxes below so why not above, right? :lol:

Chris should be able to help you a bit better though.

Edit: I've been fooling around with the panels a bit myself. The "floating" functionality of these panels is cool, and actually pretty useful, however it interferes with my layout in a few ways. Is there a way to actually disable this functionality?

Edit2: I hate using the terminology "float" here because, visually, it's always floating in the CSS (this is what keeps the panels on one side of the screen) and has nothing to do with it's fixed-screen positioning. But for the lack of a better term for this feature, I'll continue to call it "floating".

The floating functionality operates pretty strangely. It works sometimes and others not so much. From what I can tell, if the panel's contents are short in height, the floating functionality kicks in. If the panel contents are big in height, it won't float.

My left panel consists of a menu using the menu block. If I set all my parent links to 'contracted', it will float. If I set one parent to 'expanded' (which displays the child-links), it only floats sometimes (which is why I'm really confused as to what dictates whether the panel sets itself as "float-able" or not). If I set two or more as 'contracted', it refuses to float all together.

The issue in my case is, when it decides to float, the entire panel sets itself with a z-index of 1000 (but strangely doesn't appear to  be 'absolute' nor 'fixed'). My header (and nav links) only appear once a user scrolls a little ways down the page, so once it appears, the floating panel is on top of the header. That could be fixed easily, but then I'd have to add top padding to it to show below the header. When I do this, it doesn't shift the footer down when a user scrolls down the page; instead it just overlaps the footer. I think I'll just remove this functionality all together if at all possible.

And I apologize to the OP for hijacking your topic  :$  :$

Last edit: by Joe

Online now: No Back to the top

Post

Posted
Rating:
#5121
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
Right. The best word here is 'sticky'.
Our implementation uses JavaScript, modern browsers have CSS support for it.

To disable you'd remove stuck_nav from GLOBAL_HTML_WRAP.tpl – we look for that CSS class and attach the JS behaviour to it.

It's not to do with what is in your column, simply the height. If Composr (with some hard-coded tolerance) thinks it will be too tall to fit on the screen at once, it won't be made sticky.

Joe, as for all the specific behaviours you've observed - that's really the limitations of a JS solution. Our code will look at the initial heights, and even that is dodgy because images may load late etc. If you look in global.js for stuck_nav you'll find our code.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#5147
Standard member
ooblek is in the usergroup ‘Well-settled’
Thanks, Chris, that makes sense. I put my menu on "Select" and everything "floated" since the column was short enough.

I have another question, though, is it possible to take that same code in global js that makes the column move with the page and put it with the audio player so that the audio stays in view while the reader scrolls down?
Online now: No Back to the top

Post

Posted
Rating:
#5149
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’

ooblek said

Thanks, Chris, that makes sense. I put my menu on "Select" and everything "floated" since the column was short enough.

I have another question, though, is it possible to take that same code in global js that makes the column move with the page and put it with the audio player so that the audio stays in view while the reader scrolls down?

Sure. You can add class="stuck_nav" to the player's element. Just tested and it works.
Online now: No Back to the top

Post

Posted
Rating:
#5184
Standard member
ooblek is in the usergroup ‘Well-settled’
Awesome, Joe. Now, here is my audio custom comcode. Do I put the class="stuck_nav" into here. If so, where and how does it go?

<audio controls="controls">
   <source src="Index of /audio{content}.mp3" type="audio/mp3"></source></audio>

Or do I put it on each page = as in here, and if so, how does it go?

[audio]knowing/1.1JesusbyHeart[/audio]
Online now: No Back to the top

Post

Posted
Rating:
#5185
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’
Try using this in your custom Comcode tag:

Code

<audio class="stuck_nav" controls="controls">

See if that works.

Due to Composr caching, you will probably need to clear the caches in upgrader.php after making this change to your Comcode tag or at the very least, edit the Comcode page containing this tag and save it without any changes. This clears the Comcode cache.
Online now: No Back to the top

Post

Posted
Rating:
#5193
Standard member
ooblek is in the usergroup ‘Well-settled’
Okay, Joe, I put in the code and it does cause the audio to stay with the page. There are two problems, however.

First, when the audio "floats," it also causes the footer to come up a short distance below the audio so that the footer sits right in the middle of my text and the page box with it. The footer doesn't float, it just stays covering over the same text. The audio player does go on down beyond the footer.

Second, as you supposed, the floating audio works only on new pages I create. It does not work on all the other pages. I went to a page where it did not float, erased the audio, then typed it in again and then it floated.

I tried the "save changes" on the upgrader.php page in CPanel as you suggested. That was not enough to make the audio float on prior pages, so I guess that the cache did not clear. I don't have a programmer's mind, so much more than that is outside of my ken.
Online now: No Back to the top

Post

Posted
Rating:
#5195
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’

ooblek said

First, when the audio "floats," it also causes the footer to come up a short distance below the audio so that the footer sits right in the middle of my text and the page box with it. The footer doesn't float, it just stays covering over the same text. The audio player does go on down beyond the footer.

Can you show me a picture or link me to the page? I think this is similar to the issue I was having (as I said in one of my previous posts). I couldn't figure out how to fix it so I was asking how to remove the floating functionality all together.

I'll still check it out for you though, if you can link me to your page.

ooblek said

I tried the "save changes" on the upgrader.php page in CPanel as you suggested. That was not enough to make the audio float on prior pages, so I guess that the cache did not clear. I don't have a programmer's mind, so much more than that is outside of my ken.

I see what you did, lol. Let me clarify how to clear the caches. You can do it one of two ways:
  • Via Composr's upgrader.php script in your browser
    • Navigate to yourbaseurl.com/upgrader.php
    • Login using the master password
    • Click the Clear caches button
  • Alternatively, you can edit the Comcode page containing your custom Comcode tag, but don't make any changes to it, then save the Comcode page.

However, if you have multiple pages using this Comcode tag, you'd have to edit each one and save it – so it would be much easier and quicker to just clear the caches from Composr's upgrader.php script.
Online now: No Back to the top

Post

Posted
Rating:
#5201
Avatar
Site staff
Adam is in the usergroup ‘Super-moderators’
Or you could use the Website Cleanup tools which has options for emptying various caches. No real reason to use upgrade.php if you're not upgrading.
Online now: No Back to the top

Post

Posted
Rating:
#5202
Standard member
ooblek is in the usergroup ‘Well-settled’
I will try clearing the cache again after the footer problem is resolved.

Here is a page link that shows the footer up high on the page.

1.1 Jesus by Heart - Christ Revealed
Online now: No Back to the top

Post

Posted
Rating:
#5204
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’
Yeah, I see what you're saying. This is similar to the issue I was having. Not sure how to fix the issue with stuck_nav, but there may be some workarounds.

I think the best solution is to move away from using stuck_nav and use some other Javascript or HTML to keep the player within view. A few solutions:

You could use a smooth scrolling Javascript solution that will keep the player in the same spot of the screen even after scrolling down the page. Here's a snippet I use on one area of my site. You can place this inside your custom Comcode tag, before the audio tag. You must change the span tags to script. This website keeps changing the tag to span whenever I post it. I imagine it's for security reasons.

Code

<span>
    $(window).scroll(function(){
      $("#my_player").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
    });
  </span>

Then for your player, you have to add some additional attributes to it, like so:

Code

<audio style="float:left;" id="my_player" controls="controls">

The issue with that solution is the player will always stay "floating" in the middle of the screen, and may be considered an eye-soar to some.

Another solution is, you could give the player a fixed position but move it either to the top left or top right side of the screen. This way it doesn't overlap the contents of your Comcode page and doesn't stay in the middle of the screen. Keep in mind, doing this would make the player appear outside the borders of your Comcode page.

Code

<div style="position: absolute;top: 0;right: 0;"><audio controls="controls" style="position: fixed;">
   <source src="https://christrevealed.info/audio/knowing/1.1JesusbyHeart.mp3" type="audio/mp3"></audio></div>

That will put the player in the top right corner. If you wanted it in the top left, you could do:

Code

<div style="position: absolute;top: 0;left: 0;"><audio controls="controls" style="position: fixed;">
   <source src="https://christrevealed.info/audio/knowing/1.1JesusbyHeart.mp3" type="audio/mp3"></audio></div>

Or you could implement both ideas - keeping the player in the top left or top right of the screen and add a smooth scrolling effect to "animate" it as you scroll down the page. I guess it all comes down to what looks better to you. Let me know if you need any additional help!
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

Philip, Paul D, John Connor, deepu_ms

Forum statistics:
  • 1,079 topics, 5,225 posts, 6,072 members
  • Our newest member is khanhbtmsonganh
Birthdays:
Back to Top