Jump to content

Archived

This topic is now archived and is closed to further replies.

canadiangazelles

ScrollSpy on Front Page

Recommended Posts

canadiangazelles    6
canadiangazelles

Hi Everyone, 

 

I'm trying to create an effect whereby a text sprite in a DepthCharge section changes depending on the subsection of the page that the user is on.

 

Please visit the draft site at http://hti.flywheelsites.com/ to see what I mean. As you scroll down, you'll note that the text (via the DepthCharge section) follows, coming to a rest at the bottom of the section. 

 

What I'd like to do is to have the middle word "Professional" dynamically change (via a fade animation) to another word depending on the users location on the page. I'm not even sure if this is possible through scrollspy so I thought I'd ask the more advanced gurus out there if I should even attempt this or if it would involve going outside of DMS to bring in non-futureproofed plugins or code? 

 

Thanks in advance for your input. 

 

 

Share this post


Link to post
Share on other sites
Rob    547
Rob

I'm going to redirect this for the developer of DepthCharge to chime in.  However, I think you should consider hiring him or, one of our other developers to customize your desired result. 

 

As we don't provide this kind of customization the forum, I'm sure you'll understand this is the best way to get you  some answers and set a way of achieving results.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
canadiangazelles    6
canadiangazelles

That's a great suggestion, Rob. Thanks for pointing me in the right direction.

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

I have asked the developer to follow up on this topic.

  • Like 1

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
etcio+    10
etcio

Jenny: Thanks for the heads up!

Hey CG,
 

It's definitely possible, but it isn't going to be something built into DC inherently.

You'll want to use scrollspy to change the contents of the text div directly, and add a CSS animation to the transition. You can fire any js event you want with scrollspy.

Let me know if that makes sense.

  • Like 1

Share this post


Link to post
Share on other sites
canadiangazelles    6
canadiangazelles

Veeeery interesting; thanks for the feedback, etcio. Is there a sample code that you can forward me to which I can pick apart to learn how this is done? I haven't seen a page use that effect before so I haven't been able to structure in my mind what the code would look like and all my attempts have fallen flat. 

 

My initial thinking was that this effect needs two parts: 

 

1. Defining the text as a class as .navbar is defined below

$(".navbar").scrollspy();
$('[data-spy="scroll"]').each(function()
{
$(this).scrollspy('refresh');
});
$("ul.nav li").on("activate", function()
{
console.log("ACTIVATED");
});

 

2. Changing that based on the scroll position in the page (so changing .parent('li') below to whatever the class above is defined as.

active = $(selector)
.parent('li')
.addClass('active')

if (active.parent('.dropdown-menu')) {
active = active.closest('li.dropdown').addClass('active')
}

active.trigger('activate')

 

I hope it's clear that I'm trying to work through this myself but if there are any resources or suggestions you may have to help me conceptually and in practice, that would be greatly appreciated. 

 

Many thanks in advance :)

Share this post


Link to post
Share on other sites
etcio+    10
etcio

CG - I'm trying to visualize exactly what you need, but that site above has a password and I can't get to it.

Are you using this script? https://github.com/sxalexander/jquery-scrollspy

I believe you could get away with a simpler implementation.

 

<script type='text/javascript'>
    $(document).ready(function() {
            $('#your-element').scrollspy({
                min: $('#anchor').offset().top,
                onEnter: function(element, position) {
                    $("#depthcharge-text").html('new header');
                },
                onLeave: function(element, position) {
                    $("#depthcharge-text").html('old header');
                }
            });
        });
</script>

Something to that effect.

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

Please let us know if you still need help with this topic otherwise I will close it in 7 days. Thanks!


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
canadiangazelles    6
canadiangazelles

Thanks etcio and jenny. that's perfect! I'll take it from here. many thanks.

  • Like 1

Share this post


Link to post
Share on other sites

  • Similar Content

    • dreamsight
      By dreamsight+
      I had a call from a client saying their site wasn't displaying correctly. The DepthCharge sections have stopped working. The background and the sprites are showing, but static and left aligned.
      I deactivated all plugins bar DepthCharge Section and DMS Professional Tools, but still the same.
      I also can't load the DMS editor now. The Console doesn't show anything other than an old missing image.
      http://cbfnet.co.uk/
    • kwaoru
      By kwaoru
      Hi,
      After I installed platform 5, a Scroll Nav stopped working properly. It stopped following down as I scroll down the screen and it is very frustrating....
      I tried to add a new Scroll Nav, deactivated platform 5 or whatever I could think of to refresh to get the function back but nothing works out...
      Please please please help me wise folks out there!
      Thanks,
    • kwaoru
      By kwaoru
      Hi,
      After I installed platform 5, a Scroll Nav stopped working properly. It stopped following down as I scroll down the screen and it is very frustrating....
      I tried to add a new Scroll Nav, deactivated platform 5 or whatever I could think of to refresh to get the function back but nothing works out...
      Please please please help me wise folks out there!
      Thanks,
    • tuciudadenred
      By tuciudadenred+
       
      I have problems with the scroll, someone who can help me?
      Video_1487265541.wmv
    • jagipson
      By jagipson+
      I am trying to make a scroll anchor to move down the page but once it get there it opens the button. I have the scroll part that was easy but how do I get the button open the form once it scrolls down? I am trying to accomplish what this website has: http://www.gainor.net/jobs/view/production-designer-design-agency/  You press the Apply Now button and it scrolls down to the other apply button and then opens it all by clicking the one button any suggestions on how i can accomplish this?
       
      Thanks
       
       
×