Parallax scrolling questions

Hello,
the site I'm referring to is www.faqtotumwebdesignermilano.it/ardop. What I'm trying to achieve is to have the first slideshow module to get "out" of the normal scrolling flow of the page, staying fixed where it is. The following gKbottom modules will overlap it during the scrolling.

Is it something achievable with this template?

If yes, could you please address me on where I should look?

Thank you very much,

Matteo

Hi

Can you show me an example of such action. I cannot imagine what you have in mind.

I've sent you a .pdf file that is explaining what I'm meaning.

In case you consider it important for other customers I can put it in .jpg and post it here.

Thank you,

M

Hi

It's possible, but will require modifications to template's code and we do not support that.

I cannot even come up with any tips, since it will have to be scripted additionally. I believe something close to:

Code: Select all

$('.onepage .gkmod-4').each(function(){
$(this).append('<a href="#'+$(this).next().attr('id')+'"></a>');
});


and than style this new <a></a> element to look like in Your screen.

Thank you very much.
I'll try to figure it out starting from what you said.

M

Hi

Start from copying this code to /layout/blocks/head.php just remember to separate it so no conflict will be produced. An actual code should looks like this:

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$('.onepage .gkmod-4').each(function(){
$(this).append('<a href="#'+$(this).next().attr('id')+'"></a>');
});
});})(jQuery)</script>


Hello,
in case someone can be interested, here's how someone more skilled than me fixed the problem using only override.css:

#gkHeader{position: fixed; width: 100%; z-index: 0;}
#gkPageContent{z-index: 2!important;}
#gkBottom1{background-color: rgb(255, 255, 255) ! important; z-index: 2 ! important; position: relative;}
#gkBottom2{position: relative; z-index: 2;}

#gkContentWrapper>#gkPageContentWrap>#gkHeader{position: relative;}
#gkContentWrapper>#gkPageContentWrap>#gkPageContent{position: relative; background-color: rgb(255, 255, 255); margin-top: 300px;}

Ciao

M

hi

Ok. I like it too, but You may want to ask Your friend for some fixes for mobile layout. It look bad now. Or just use it for desktop only by putting it into:

Code: Select all

@media only screen and (min-width:1024px) {
........
}


I disabled the responsiveness in template settings (as my clients asked for) and on my mobile it's working perfectly...
Can you tell me what is wrong on your side?

Thank you very much for the feedback,

M

Hi

It looks like this for me on iphone 5 and demo look ok, so try separate the change to a bigger screen layouts.

That's weird.
It can be possible you still have it in your iPhone browser's cache? I disabled the responsiveness of the template and on my iPhone 4s the website has exactly the same look of the desktop version.

Please let me know,

thank you again

M

Hi

This may be the problem. I do not have my phone on me to check it right now, but You are most probably right. If you can see it correctly than fine. Ok. I'm closing this thread before I will start seeing new issues where there are none