Page title minimize from slide to header
Permalink Browser Info Environment
Not sure if this is possible with the JS and what not you have included with the theme but here is what I want to do. I want to put the pages title in the main slide (slide 1) smack in the middle and as you scroll up I want it to minimize to the header where the site name would normally be. Is that possible with the assets made available in your theme?
| Type: | Discussion |
|---|---|
| Status: | In Progress |
If there was an easy way to reverse the "slide in from above" animation effect to show the text when you scroll down instead of taking it away that would work. Just not sure if thats possible with the loaded JS...
Hi,
the theme is based on Bootstrap 3, so you can use all the functions and styles available in Bootstrap.
What you describe could be achieved using the affix plugin (http://getbootstrap.com/javascript/#affix).
I've created a quick demo, I think this is what you have in mind:
http://longstoryshort.15robots.com/minimize-title...
This is what I've done:
1. Add an empty block to the Site Name area, so the area is empty (and the default Site Name is not displayed).
2. Add the page title to the first Slide using a content block. While you are editing the Content block, click on the HTML button to edit the code directly and add an ID to the title. For instance:
3. Add an HTML block to the fist slide to paste the code to initialize the affix plugin. The HTML block will only contain the javascript code, so it will be invisible. This is the code I've used:
(I've also included some CSS styles to make the page title smaller, and also to make it fade in when it minimizes)
Hope this helps you get started,
Jordi
the theme is based on Bootstrap 3, so you can use all the functions and styles available in Bootstrap.
What you describe could be achieved using the affix plugin (http://getbootstrap.com/javascript/#affix).
I've created a quick demo, I think this is what you have in mind:
http://longstoryshort.15robots.com/minimize-title...
This is what I've done:
1. Add an empty block to the Site Name area, so the area is empty (and the default Site Name is not displayed).
2. Add the page title to the first Slide using a content block. While you are editing the Content block, click on the HTML button to edit the code directly and add an ID to the title. For instance:
<h1 id="page-title">My Page Title</h1>
3. Add an HTML block to the fist slide to paste the code to initialize the affix plugin. The HTML block will only contain the javascript code, so it will be invisible. This is the code I've used:
<script> $( document ).ready(function() { var offset = $('#page-title').offset(); $('#page-title').affix({ offset: { top: offset.top } }); }); </script> <style> #page-title.affix { top: 10px; z-index: 1100; margin: 0px;
Viewing 15 lines of 37 lines. View entire code block.
(I've also included some CSS styles to make the page title smaller, and also to make it fade in when it minimizes)
Hope this helps you get started,
Jordi
I'll have to look at this later. I quickly set it up but it does not appear to be working and I've checked over the code a few times and not seen any obvious issue but I am at work so...
Ok, let me know if you need help (if you want to send me a link I can have a look)
Jordi
Jordi
Very nice work with the tile merge (and the fade) - any chance this could be an option in the theme?
Hi,
thanks!
I'll try to include this as an option in the next version of the theme.
Jordi
thanks!
I'll try to include this as an option in the next version of the theme.
Jordi
Could this work with multiple pages under this scenario:
1. first splash page has title slide into Site Name Box
2. other pages just has title remain in Site Name box - no animation
That is, only the initial splash page does the title sliding up to the Site Name box, and then on all other pages the Site Name box has site name.
Mobile question - will this slide action work on Mobile devices ok or does it [or should it] not be active on them. Just wondering.
ok
1. first splash page has title slide into Site Name Box
2. other pages just has title remain in Site Name box - no animation
That is, only the initial splash page does the title sliding up to the Site Name box, and then on all other pages the Site Name box has site name.
Mobile question - will this slide action work on Mobile devices ok or does it [or should it] not be active on them. Just wondering.
ok
Oh, I see, let me do some testing and I'll let you know.
(And yes, it should also work on mobile.)
Regards,
Jordi
(And yes, it should also work on mobile.)
Regards,
Jordi
Hi,
Just wanted to let you know I've released a new version of the theme (you should be able to update through the dashboard).
I've added the "Affix to header" feautre discussed in this thread.
This is still a pretty experimental feature, so any feedback is welcome.
If you are interested in using it, you simply need to add a Content block with the text or image you intend to affix to the header. Then click on the Content block, select "Design & Custom Templage" and choose the "Affix to Header" custom template.
Once you've selected the custom template, the default Site Title should be invisible, and the text (or image) inside the block should affix to the header once you scroll past it.
I've updated the demo I posted to use the new feature:
http://longstoryshort.15robots.com/minimize-title...
(It seems to work fine for me)
Regarding leal's question, you can use this only on your homepage (or any page you like) and have the standard Site Name box (with no animation) on all other pages.
By the way, if you want to change the title style once it is "pinned" to the header, you can go to Design -> Customize and add your custom CSS. For instance:
(You see, the title will have the class "affix" once it is pinned to the header)
Please let me know if you have any questions,
Regards,
Jordi
Just wanted to let you know I've released a new version of the theme (you should be able to update through the dashboard).
I've added the "Affix to header" feautre discussed in this thread.
This is still a pretty experimental feature, so any feedback is welcome.
If you are interested in using it, you simply need to add a Content block with the text or image you intend to affix to the header. Then click on the Content block, select "Design & Custom Templage" and choose the "Affix to Header" custom template.
Once you've selected the custom template, the default Site Title should be invisible, and the text (or image) inside the block should affix to the header once you scroll past it.
I've updated the demo I posted to use the new feature:
http://longstoryshort.15robots.com/minimize-title...
(It seems to work fine for me)
Regarding leal's question, you can use this only on your homepage (or any page you like) and have the standard Site Name box (with no animation) on all other pages.
By the way, if you want to change the title style once it is "pinned" to the header, you can go to Design -> Customize and add your custom CSS. For instance:
.affix h1 { font-size: 20px; }
(You see, the title will have the class "affix" once it is pinned to the header)
Please let me know if you have any questions,
Regards,
Jordi
Ugh, I feel so clueless but here it goes...
Please forgive my ignorance...
So I'm finally getting some meaningful work done on my website redo and I'm loving the 5.7 version of the theme but I've ran into an issue with regard to the above query...
I got the minimize to work but I'm trying to use the content block which I think you said was the only one you could use the affix option with and I can't get my bloody logo image or even simple text to center/middle align both horizontally and vertically. Any assistance would be greatly appreciated and I feel rather dumb because I'm pretty sure I'm simply missing something simple but why can't I vertically align anything in the content block? >_<
Please forgive my ignorance...
So I'm finally getting some meaningful work done on my website redo and I'm loving the 5.7 version of the theme but I've ran into an issue with regard to the above query...
I got the minimize to work but I'm trying to use the content block which I think you said was the only one you could use the affix option with and I can't get my bloody logo image or even simple text to center/middle align both horizontally and vertically. Any assistance would be greatly appreciated and I feel rather dumb because I'm pretty sure I'm simply missing something simple but why can't I vertically align anything in the content block? >_<
Hi,
I understand how you feel :) Unfortunately, vertically aligning elements in HTML is not as easy as one might imagine.
(More information if you're interested:http://phrogz.net/CSS/vertical-align/index.html... )
Basically you could try one of the following approaches:
A. Center your logo visually by adding some blank lines (or some top padding).
B. Open the theme customizer (Gear Icon -> Design -> Customize). Add the following code to the "Custom CSS" area:
(I assume the logo / text is in the first slide)
Demo:http://longstoryshort.15robots.com/minimize-title...
If this does not work, could you send me a link or screenshot so I can see?
Regards,
Jordi
I understand how you feel :) Unfortunately, vertically aligning elements in HTML is not as easy as one might imagine.
(More information if you're interested:http://phrogz.net/CSS/vertical-align/index.html... )
Basically you could try one of the following approaches:
A. Center your logo visually by adding some blank lines (or some top padding).
B. Open the theme customizer (Gear Icon -> Design -> Customize). Add the following code to the "Custom CSS" area:
#slide1 { height: 100%; padding-top: 0; } #slide1 .container { height: 100%; display: table; } #slide1 .container .row { height: 100%; display: table-cell; vertical-align: middle; }
(I assume the logo / text is in the first slide)
Demo:http://longstoryshort.15robots.com/minimize-title...
If this does not work, could you send me a link or screenshot so I can see?
Regards,
Jordi
I got it working... mostly a few hours later but I'm glad you posted this because it's a much more simple solution and I was not aware of the 'slideN' classes so I was doing all kinds of voodoo and sacrificing to make it work >_<
Thanks for that I got it in place and it's working great.
One thing I've noticed with affix, realizing you said it's still very much a beta feature, is that I only scroll a short ways before it removes the logo from the slide and affixes it to the header. Is there a plan to either make that configurable and possibly give the removal of the logo a animation (fade out) effect rather than just poofing it out of existence.
Thanks again!
Thanks for that I got it in place and it's working great.
One thing I've noticed with affix, realizing you said it's still very much a beta feature, is that I only scroll a short ways before it removes the logo from the slide and affixes it to the header. Is there a plan to either make that configurable and possibly give the removal of the logo a animation (fade out) effect rather than just poofing it out of existence.
Thanks again!
Hi,
glad it helped!
Yes, it's still a beta feature. Ideally, I think the logo should be affixed to the header when it reaches the top of the window (so no need to fade out). However, I see right now the logo becomes affixed to the header earlier than expected... I think it should be easy to fix. Let me have a look at it during the weekend and I'll let you know.
Regards,
Jordi
glad it helped!
Yes, it's still a beta feature. Ideally, I think the logo should be affixed to the header when it reaches the top of the window (so no need to fade out). However, I see right now the logo becomes affixed to the header earlier than expected... I think it should be easy to fix. Let me have a look at it during the weekend and I'll let you know.
Regards,
Jordi
I believe the root cause of the issue is that before the CSS gets applied to move the entity to the vertical center the affix scripting is grabbing it's location and using that as the point of movement... I found a temporary workaround for this by simply adding +300 on the affix offset at line 19 of the content block template file
/packages/theme_long_story_short/blocks/content/templates/affix_to_header/view.php
Hi,
yes, you're right! Thanks for pointing it out. Another solution would be to edit line 15 and change:
to:
I'll fix this in the next version of the theme.
Jordi
yes, you're right! Thanks for pointing it out. Another solution would be to edit line 15 and change:
$( document ).ready(function() {
to:
$( window ).load(function() {
I'll fix this in the next version of the theme.
Jordi
That mostly works but as soon as the first pixel goes out of the viewport it affixes to the header and disappears.
Just at work right now so I can't put to much thought into it but still using the
but then also having it calculate the height of the entity it will be affixing and adding that to the 'top statement should resolve that. There's probably a much more elegant solution but that's just going off what I can think of while sitting here mindlessly working on PC's...
Just at work right now so I can't put to much thought into it but still using the
$( window ).load(function() {
but then also having it calculate the height of the entity it will be affixing and adding that to the 'top statement should resolve that. There's probably a much more elegant solution but that's just going off what I can think of while sitting here mindlessly working on PC's...
Yes, I see, adding the height should work. You'd only need to change line 19 to:
You could also substract the height of the nav bar for added precision :)
Jordi
top: ath_offset.top + $('#affix-to-header<?php echo $bID; ?>').outerHeight()You could also substract the height of the nav bar for added precision :)
top: ath_offset.top + $('#affix-to-header<?php echo $bID; ?>').outerHeight() - 50Jordi