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
vGibson
View Replies:
vGibson replied on at Permalink Reply
vGibson
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...
jordif replied on at Permalink Reply
jordif
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:

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


(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
vGibson replied on at Permalink Reply
vGibson
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...
jordif replied on at Permalink Reply
jordif
Ok, let me know if you need help (if you want to send me a link I can have a look)

Jordi
leal replied on at Permalink Reply
Very nice work with the tile merge (and the fade) - any chance this could be an option in the theme?
jordif replied on at Permalink Reply
jordif
Hi,

thanks!

I'll try to include this as an option in the next version of the theme.

Jordi
leal replied on at Permalink Reply
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
jordif replied on at Permalink Reply
jordif
Oh, I see, let me do some testing and I'll let you know.

(And yes, it should also work on mobile.)

Regards,

Jordi
jordif replied on at Permalink Reply
jordif
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:

.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
vGibson replied on at Permalink Reply
vGibson
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? >_<
jordif replied on at Permalink Reply
jordif
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:

#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
vGibson replied on at Permalink Reply
vGibson
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!
jordif replied on at Permalink Reply
jordif
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
vGibson replied on at Permalink Reply
vGibson
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
jordif replied on at Permalink Reply
jordif
Hi,

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
vGibson replied on at Permalink Reply
vGibson
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
$( 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...
jordif replied on at Permalink Reply
jordif
Yes, I see, adding the height should work. You'd only need to change line 19 to:

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() - 50


Jordi

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.3
Version Installed - 5.7.3
Database Version - 20141219000000

# concrete5 Packages
Long Story Short (0.9.6), Touch Gallery (2.0.3).

# concrete5 Overrides
languages/da_DK, languages/de_DE, languages/el_GR, languages/fi_FI, languages/fr_FR, languages/it_IT, languages/ja_JP, languages/nl_NL, languages/ru_RU, languages/sl_SI, languages/sv_SE, languages/tr_TR

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache/2.0.64 (Unix) mod_ssl/2.0.64 OpenSSL/0.9.7a mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 mod_fcgid/2.3.6

# Server API
cgi-fcgi

# PHP Version
5.3.27

# PHP Extensions
bcmath, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, filter, ftp, gd, gettext, hash, iconv, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, pgsql, Phar, posix, pspell, Reflection, session, SimpleXML, soap, sockets, SPL, SQLite, sqlite3, standard, tokenizer, xml, xmlreader, xmlwriter, xsl, Zend Guard Loader, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 1000
memory_limit - 128M
post_max_size - 11M
safe_mode - Off
safe_mode_exec_dir - <i>no value</i>
safe_mode_gid - Off
safe_mode_include_dir - <i>no value</i>
sql.safe_mode - Off
upload_max_filesize - 20M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
safe_mode_allowed_env_vars - PHP_
safe_mode_protected_env_vars - LD_LIBRARY_PATH

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.