Spacer Problem with fixed slide out container

[markimark]

I do not know if the title says something but here is a short screencast that I have made:

http://www.screencast.com/t/0HumRE55RkjZ

maybe it helps to understand.

My fixed container is a slide out container and if the container is fully extended, the remaining page content continues to scroll behind it. However, if the container is open and if I scroll down the page, then close the fixed slide out container and scroll up the page, a huge whitespace appears, which obviously is related to the height of the slide out container, which is now closed. If I continue to scroll up the page, the huge gap disappears with 1 jump. That doesn´t look good at all.

Is there anything I can do about it. There should be another calculation triggered if I close that fixed slide out container. So if I scroll up after closing it, the hight is not relevant anymore.

Any help??????

[bigspotteddog]

Wow! Awesome interaction. Nice work.

On to the problem. The plugin creates a "spacer" when the target element goes fixed to compensate for the void. What seems to be happening is, the plugin is not aware that anything has changed when the user clicks to close the contact slide out, until the window scroll event is fired, by scrolling the window.

I would have to do a lot of work to duplicate what you have done in an attempt to replicate the issue. However, I just committed a change that allows you to trigger a recalculation of the page. Here is the call:

$(<target>).trigger('scroll');

This does the same thing a window scroll would do, without having to actually scroll the window.

Please let me know if that works.

[markimark]

Thank you. I appreciate your uplifting words, really.

Do I understand it right that I have to add that line to the plugin ini? I am not that good on code, sorry.....

On Fri, Mar 2, 2012 at 8:37 PM, bigspotteddog < reply@reply.github.com

wrote:

Wow! Awesome interaction. Nice work.

On to the problem. The plugin creates a "spacer" when the target element goes fixed to compensate for the void. What seems to be happening is, the plugin is not aware that anything has changed when the user clicks to close the contact slide out, until the window scroll event is fired, by scrolling the window.

I would have to do a lot of work to duplicate what you have done in an attempt to replicate the issue. However, I just committed a change that allows you to trigger a recalculation of the page. Here is the call:

$().trigger('scroll');

This does the same thing a window scroll would do, without having to actually scroll the window.

Please let me know if that works.

---

Reply to this email directly or view it on GitHub:

https://github.com/bigspotteddog/ScrollToFixed/issues/15#issuecomment-4292518

[bigspotteddog]

Nope, you don't have to add any code to the ini. After your animation, to hide the slide out, has completed, call:

$(<target>).trigger('scroll');

That will cause the plugin to think the scroll bar has moved. It will then recalculate the element, which should get rid of the gap.

[markimark]

This is what I use to create the effect. Can you show me where to include? I think it is not so easy because I use the slideToggle. Maybe this is not the best solution for making this work....???

// The Sky Container jQuery(document).ready(function($){ $("#sky-gate-wrap").click(function(){ $("#sky-inner").animate({'opacity':'0'},300); $("#sky-gate-center-icon").hide(); $("#sky-gate span").animate({'opacity':'0'},300); $('#sky').slideToggle(1200, function() { $("#sky-gate span, #sky-gate-center-icon").toggleClass('active'); $("#sky-gate-center-icon, #sky-gate span, #sky-inner").show().animate({'opacity':'1'},600); return false; }); }); });

[bigspotteddog]

I am not familiar with Sky Container, but it looks like you might be able to put it here:

// The Sky Container
jQuery(document).ready(function($){
    $("#sky-gate-wrap").click(function(){
        $("#sky-inner").animate({'opacity':'0'},300);
        $("#sky-gate-center-icon").hide();
        $("#sky-gate span").animate({'opacity':'0'},300);
        $('#sky').slideToggle(1200, function() {
            $("#sky-gate span, #sky-gate-center-icon").toggleClass('active');
            $("#sky-gate-center-icon, #sky-gate span, #sky-inner").show().animate({'opacity':'1'},600);

            // looks like you might be able to put it here:
            $(<target>).trigger('scroll');

            return false;
        });
    });
});

Don't forget to get the latest version of the scroll to fixed plugin.

Can you send me a link to the Sky Container plugin? Also, would it be possible for me to gain access to your website? I would be able to more deterministically tell you where to put it.

[markimark]

Actually the sky container is nothing "official". It is just something I have created and named it "my sky container". It is simple jQuery stuff. Do I have to modify anything on that code snippet? do I have to replace with anything else? I am asking because if I paste in the code as is above, it gives me a syntax error.

[bigspotteddog]

Yes, you have to replace with whatever jquery selector you are using for the scroll to fixed element. Whatever you put in here: $().scrollToFixed(), is what you put in here: $().trigger('scroll').

[markimark]

OK, got it now. Sorry for being so ........

Will try out in a minute or so.

As I said, the sky container is something I did, it is not a plugin and the website is only local at the moment. I have a better understanding now. I try and let you know. Thank you very much for your patience.

Greetings from Berlin

On Fri, Mar 2, 2012 at 10:24 PM, bigspotteddog < reply@reply.github.com

wrote:

Yes, you have to replace with whatever jquery selector you are using for the scroll to fixed element. Whatever you put in here: $().scrollToFixed(), is what you put in here: $(<same thing>).trigger('scroll').

---

Reply to this email directly or view it on GitHub:

https://github.com/bigspotteddog/ScrollToFixed/issues/15#issuecomment-4294379

[markimark]

Hooray, yippy, yup, yup....

It is working now. Love it. Cool - Thank you so much. You made my day.

[bigspotteddog]

That's great! Now, you can get some rest :) Have a good night.

Greetings from Las Vegas

[markimark]

Hui, Las Vegas. I love that place. Was there a couple of times. Love the dessert, too. It is lunch time at your time, right. Enjoy your day. Yes, I go to bed now.

Cheers

[markimark]

Hi. Unfortunately it is me again. No bedtime for me. It is not working. I don't know why I thought it does but it isn't. I like the effect of the fixed container so much and I really want it to work.

The site I work on is a word press theme and it is only on my local server available for developing. However.... because I really want this, I have recreated the main elements as a regular website and have uploaded it to my server. You can view the markup and all files related to it, here:

http://mark-i-mark.com/lab/skytest/

Will you help me to make it work as wanted? It would be a pitty if I would have to forget that idea. Please let me know if I can assist you in any other way.

Cheers Mark

[bigspotteddog]

Hi Mark.

I just checked in a change that will snap spacer out when 'scroll' is triggered. There is no change for you to make. You just need to get the latest version of the scroll to fixed plugin.

I hope this works better for you and thanks for the test website. That really helped me see what is going on :)

Best of luck.

[bigspotteddog]

Here is one more update for you. Get the latest plugin and it will snap into position once the animation completes. Or, you can apply these changes to your code to simulate an animation that makes the fixed spacer move with your sky animation.

<script>
// Very cool stuff. Controlls the stop behavior of container when scrolling
// src: https://github.com/bigspotteddog/ScrollToFixed (see Plugins>Effects for Examples
$(document).ready(function(){

        // a new option to set the classname of the spacer.
        $('#sky-wrap').scrollToFixed({spacerClass:'sky-wrap-spacer'});

        $('#sky-gate').bind('fixed', function() { $(this).css('background', 'red'); });
        $('#sky-gate').bind('unfixed', function() { $(this).css('color', ''); });
});

// The Sky Container
$(document).ready(function(){
    $("#sky-gate-wrap").click(function(){
        $("#sky-inner").animate({'opacity':'0'},300);
        $("#sky-gate-center-icon").hide();
        $("#sky-gate span").animate({'opacity':'0'},300);

        //a scroll flag to stop the timer below.
        stopScroll = false;
        //start the timer
        scroll();

        $('#sky').slideToggle(1200, function() {
            $("#sky-gate span, #sky-gate-center-icon").toggleClass('active');
            $("#sky-gate-center-icon, #sky-gate span, #sky-inner").show().animate({'opacity':'1'},600);

            //stop the timer when the animation is done.
            stopScroll = true;

            return false;
        });
    });
});

//a function that sets the height of the sky-wrap so the spacer follows its height.
var stopScroll = false;
function scroll() {
    if (!stopScroll) {
        setTimeout(scroll, 30);
    }
    $('.sky-wrap-spacer').height($('#sky-wrap').height());
}
</script>

[markimark]

Hi ...,

I am glad I did the testsite. Your solutions are just great. I did not like the "snap" of the first solution (email) but I like the second approach. That looks really good and natural. I am very happy that I contacted you and maybe it could help to even improve your wonderful plugin. I think that slide out containers have become very popular amongst us developers. They add just a little bit of "something" to any design.

Again, thanks a lot and have a very good night, if you are not already sleeping.

Cheers Mark

On Sat, Mar 3, 2012 at 6:05 AM, bigspotteddog < reply@reply.github.com

wrote:

Here is one more update for you. Get the latest plugin and it will snap into position once the animation completes. Or, you can apply these changes to your code to simulate an animation that makes the fixed spacer move with your sky animation.

---

Reply to this email directly or view it on GitHub:

https://github.com/bigspotteddog/ScrollToFixed/issues/15#issuecomment-4298533

[markimark]

I hate saying that, but....

it all was working without any problems with the test page. Then I copied the code in my working website and it does not behave. The script stops at the yellow marked line. Meaning, the slider does not open at all. Only the span, holding the text, is fading out and that's it. I don´t know what is different with the working site other than it is a wordpress site. I use all scripts within wp with

jQuery(document).ready(function($){ .... }); non conflict mode.

Other than that, I have no idea why the script does stop here but not with the testsite. If you also have no idea why, can you smooth that snap jump by using "animation" within the plugin? You know what I mean? If I can not use the snippet below, I could use the adjusted plugin as is but the new build in "snap" correction is a little harsh. Maybe you can smooth it up by using the jQuery animation feature?

Sorry that this still is not the end of the story....... ;-)

On Sat, Mar 3, 2012 at 6:05 AM, bigspotteddog < reply@reply.github.com

wrote:

Here is one more update for you. Get the latest plugin and it will snap into position once the animation completes. Or, you can apply these changes to your code to simulate an animation that makes the fixed spacer move with your sky animation.

---

Reply to this email directly or view it on GitHub:

https://github.com/bigspotteddog/ScrollToFixed/issues/15#issuecomment-4298533

[markimark]

Look, this is what the "console" says when testing in IE9 and clicking the contact bar and nothing else happens than the fading out of the text:

http://cl.ly/2X211644103K0a332t2G

line 164 is exactly where the container with id #sky-wrap starts. Does it ring a bell?

[markimark]

Oh, I see, there is no yellow marked line here. I did that in my email client but you can not see it here. So it stops at line 5 below the headline // The Sky Container

[markimark]

I just tried out your basic modification of the plugin, the snap correction, without the additional script that you gave me in your second email....

and it does not work with the wp site either. So what is it? The wp site does not accept any of your changes. If I use the modified plugin as is, all is working but the same way as it did before the modifications. If I use the additional script, which I liked most, it is running the script (fades out the text) but is not sliding out the contact container.

Is it because of the nature of wp sites, different php files for header and content and footerß I thought, once it is rendered, it is the same as any other site?

So all you did is working fine on regular sites but not at all at wp sites. I hate that....... I really thought your work paid out.

Hmmmmm?

[markimark]

################### PLEASE READ FIRST #############################

I am glad that I could not resist playing with the code. You already did such a great work, so I wanted to work! First things first. Your solution of the second email you send to me - is working now. Guess what it was......

I mentioned above that in wordpress, I use the non conflict mode. I changed all of your code accordingly but I left out the last new function that checks the height and sets it new. That function was using the $ and that was not accepted in non conflict mode. So I changed the wrapping of that function and it was working like a charme.

However..... I have the feeling that the basic solution, without that extra script, just using the plugin with the new "snap correction" is still not working. There is no "non conflict mode" issue involved in that. I have to make a new test and will tell you but for the moment I am more than glad. I prefered the second solution anyway. It looks much better that way than with the new "snap correction jump" that you added to the plugin. So there is still that question if that "jump" can be made more smotth, using jQuery animation?

[markimark]

....after testing again the new native behavior of the plugin (snap correction), I can say, it works but it does not make things much better than it was before. Now the site jumps without showing the huge whitespace that was visible before but it still jumps. It was the jump at the end of scrolling to the top that I didn't like when I contacted you. Every jump of a website is weired, I think. So maybe the jump can be smoothed a bit but I really love the second solution that you came up with. I do understand that this can't be build in as a default behavior but I will work with it whenever I use a sliding container in combination with your plugin.

Great help!!!!! Thank you again. Now I can enjoy my weekend. I could not have enjoyed that without seeing the problem solved. It is just how I am.....

Greetings from Berlin, finally it feels a little like Springtime.

Mark p.s. sorry for posting here, email style but I don´t have your regular email.

[bigspotteddog]

Hi Mark,

I did not like the jump either, which is why I kept working on it until I came up with the second solution. I love what you did and I wanted it to work too :) I am glad it worked for you. I am still trying to think of ways to smooth out the jump in the plugin. It would be nice if a resize event was fired when a div size changes; unfortunately, it doesn't work that way. When I come up with something I will let you know.

Enjoy your weekend!

[markimark]

Hi Joe,

I am sure you will come up with something. If you are like I am, you will not stop thinking about it before a solution has been found. ;-)

How is living in Las Vegas? Can it be nice or is it as bad as mostly shown on TV? Usually we all only know the lights and the glamour......

Have a great weekend, too.

Mark

On Sat, Mar 3, 2012 at 4:10 PM, bigspotteddog < reply@reply.github.com

wrote:

Hi Mark,

I did not like the jump either, which is why I kept working on it until I came up with the second solution. I love what you did and I wanted it to work too :) I am glad it worked for you. I am still trying to think of ways to smooth out the jump in the plugin. It would be nice if a resize event was fired when a div size changes; unfortunately, it doesn't work that way. When I come up with something I will let you know.

Enjoy your weekend!

---

Reply to this email directly or view it on GitHub:

https://github.com/bigspotteddog/ScrollToFixed/issues/15#issuecomment-4301297

[bigspotteddog]

Hey Mark,

Vegas is actually a very nice place to live. The weather is incredible, year round, and Red Rock Canyon is one of the prettiest places on earth. It is a very young city, so everything is clean and new; and, as you might have seen on TV, they blowup anything that is getting old and start over :) I call it the most convenient city in the in the US as everything is right around the corner and there are usually 4 of everything on each corner. Living away from The Strip, it feels like a normal city.

There are some negatives, over dramatized on TV, but they are not that much different than any other big city. The crime is higher than I would like, but I lived in Los Angeles and the crime is not so great there either.

Overall, it is very nice.

Take care.

Joe