[Pro] What is my problem?

Ernie_Simpson · January 27, 2013, 12:29am

Here’s the deal - I created a “sticky” menu as part of this website. It works great, but on this one page with the YouTube vids, Safari has problems with it staying fixed. Firefox and Chrome work great, just not Safari. Any ideas why not?

http://myproof.thebigerns.com/larrypens/refills.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · January 27, 2013, 2:18am

Which sticky.js are you using Ernie - there seems to be a few.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 27, 2013, 3:52am

Dave,

It’s a really small script, you can see it in the head but here is the git of it (I think):

github.com

TheBigErns/cssway/blob/master/sticky.js

// If you have jQuery directly, then skip next line
google.load("jquery", "1");

function sticky_relocate() {
  var window_top = $(window).scrollTop();
	var div_top = $('#sticky-anchor').offset().top;
	if (window_top > div_top) $('.projectNav').addClass('sticky')
	else $('.projectNav').removeClass('sticky');
}
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
	$(window).scroll(sticky_relocate);
	sticky_relocate();
});

The goal was to change the nav from a relative to fixed position just as it scrolls to the top of the window. Early experiments had exposed an animation stutter when this happened, so now the script targets an empty div (id="sticky-anchor") inline just before the nav (id="sticky-nav") so really pretty simple.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · January 27, 2013, 10:14am

Yes I saw that but couldn’t see the jquery call or where the parameters were being set.

That is why I was curious about where it came from so that I could look at the blurb/docs for it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 27, 2013, 3:29pm

It’s a Stackoverflow script, I think. JQuery is being called via Google’s
Ajax library, here:

  <script src="http://www.google.com/jsapi"></script>

with comments in the script on what to do if you have called jquery
directly.

It uses onscroll to do the job. The #sticky-anchor div provides an offset
reference so we can compare with and know if users scroll down far enough.
If so, then #sticky-nav would be applied with a CSS class which fixes the
position to the page top. If not, then it removes the CSS class so it can
revert to the relative position it had when the page loaded.

Works perfectly on every page with no issue. Just this one with the
embedded videos - and then only in Safari.

–
Ernie Simpson

On Sun, Jan 27, 2013 at 5:14 AM, DeltaDave email@hidden wrote:

Yes I saw that but couldn’t see the jquery call or where the parameters
were being set.

That is why I was curious about where it came from so that I could look at
the blurb/docs for it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · January 27, 2013, 3:38pm

JQuery is being called via Google’s Ajax library, here:

with comments in the script on what to do if you have called jquery directly.

Yes I see - I wasn’t familiar with that javascript call.

I had noted the qualifiers in the script and wasn’t sure (still not) if it was implemented correctly.

No obvious js errors on the page - just trying to rule out things.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 27, 2013, 4:04pm

Cool. If I remove the embedded youtube vids, then functionality works fine
in Safari (remember, FF and Chrome don’t have any issue on this one page).

So it is only Safari, only this one page with YouTube embeds.

Safari is used by the majority of mobile browsers, but only about 6% of
desktop users - so since this page is not really that tall and the
advantage of having the vids there instead of as links away from the site
makes me think that this problem is worth tolerating.

–
Ernie Simpson

On Sun, Jan 27, 2013 at 10:38 AM, DeltaDave email@hidden wrote:

JQuery is being called via Google’s Ajax library, here:

with comments in the script on what to do if you have called jquery
directly.

Yes I see - I wasn’t familiar with that javascript call.

I had noted the qualifiers in the script and wasn’t sure (still not) if it
was implemented correctly.

No obvious js errors on the page - just trying to rule out things.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · January 27, 2013, 7:26pm

As a matter of interest did you try Walter’s Sticker action - does pretty much the same thing.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 27, 2013, 8:43pm

The Sticker action would not be the solution here for two reasons:

I need the nav to stick ONLY when it reaches the top of the window. In
other words, it must scroll with the page only until it reaches the window
top, then scroll no more until the user scrolls back up again.
The Sticker action only works on layered html items. This is an inline
construction and therefore not compatible with Sticker.

–
Ernie Simpson

On Sun, Jan 27, 2013 at 2:26 PM, DeltaDave email@hidden wrote:

As a matter of interest did you try Walter’s Sticker action - does pretty
much the same thing.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · January 27, 2013, 11:16pm

Yes you are correct - Sticker requires CSS positioned layered elements but it does the ‘only stick when at the top’ thing.

So Sticker will be a solution for others trying to do the same thing without a fully inline layout.

As to the Safari problem - I have been trying this with a couple of different JS solutions with the same result from Safari when using video content.

My conclusion is that it is a Safari bug.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 28, 2013, 2:07pm

Just tested it here, and no, it does not require a layered element.

Walter

On Jan 27, 2013, at 6:16 PM, DeltaDave wrote:

Yes you are correct - Sticker requires CSS positioned layered elements but it does the ‘only stick when at the top’ thing.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · January 28, 2013, 2:40pm

Walter can you please have a look at these 2 pages

One uses your Sticker action http://www.deltadesign.co/fw_examples/jQuery/walters-sticker.html

the other uses a jQuery script http://www.deltadesign.co/fw_examples/jQuery/jquery-sticker.html

What I am seeing with yours is that when the Div with the Sticker action applied gets to the top of the window it jumps to the right slightly.

This may well be to do with my implementation but the jQuery version doesn’t do it.

Any ideas.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 28, 2013, 2:56pm

Instead of using margin on the .widget class, add padding on the sidebar element instead. Then you won’t see that jump.

Walter

On Jan 28, 2013, at 9:40 AM, DeltaDave wrote:

Walter can you please have a look at these 2 pages

One uses your Sticker action http://www.deltadesign.co/fw_examples/jQuery/walters-sticker.html

the other uses a jQuery script http://www.deltadesign.co/fw_examples/jQuery/jquery-sticker.html

What I am seeing with yours is that when the Div with the Sticker action applied gets to the top of the window it jumps to the right slightly.

This may well be to do with my implementation but the jQuery version doesn’t do it.

Any ideas.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · January 28, 2013, 3:06pm

Thanks Walter - I thought it may have been my implementation.

But can you please explain why yours was affected and the jQuery version wasn’t.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 28, 2013, 3:09pm

Sorry Walter, when I tried it it gave me an error containing this line of
code

  fwError('Sorry! This Action must be applied to a layered HTML box');

–
Ernie Simpson

On Mon, Jan 28, 2013 at 9:07 AM, Walter Lee Davis email@hiddenwrote:

Just tested it here, and no, it does not require a layered element.

Walter

On Jan 27, 2013, at 6:16 PM, DeltaDave wrote:

Yes you are correct - Sticker requires CSS positioned layered elements
but it does the ‘only stick when at the top’ thing.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 28, 2013, 3:14pm

Don’t know if this is it, but the jquery example differs from the action in
that the featured div has position:static instead of position:relative.

–
Ernie Simpson

On Mon, Jan 28, 2013 at 9:40 AM, DeltaDave email@hidden wrote:

Walter can you please have a look at these 2 pages

One uses your Sticker action
http://www.deltadesign.co/fw_examples/jQuery/walters-sticker.html

the other uses a jQuery script
http://www.deltadesign.co/fw_examples/jQuery/jquery-sticker.html

What I am seeing with yours is that when the Div with the Sticker action
applied gets to the top of the window it jumps to the right slightly.

This may well be to do with my implementation but the jQuery version
doesn’t do it.

Any ideas.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 28, 2013, 3:16pm

You must have an older version, I removed that requirement a while back when someone pointed out to me that it did work.

Walter

On Jan 28, 2013, at 10:09 AM, Ernie Simpson wrote:

Sorry Walter, when I tried it it gave me an error containing this line of
code
 fwError('Sorry! This Action must be applied to a layered HTML box');
–
Ernie Simpson

On Mon, Jan 28, 2013 at 9:07 AM, Walter Lee Davis email@hiddenwrote:

Just tested it here, and no, it does not require a layered element.

Walter

On Jan 27, 2013, at 6:16 PM, DeltaDave wrote:

Yes you are correct - Sticker requires CSS positioned layered elements
but it does the ‘only stick when at the top’ thing.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 28, 2013, 3:20pm

Actually, by using Safari’s ‘Inspect Element’ feature you can see how the
code changes before and after the scroll triggers in either example. In the
Action example a top and left attribute are added.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 28, 2013, 3:29pm

Oh, I just looked, and yes that error is still in there. Your element must be a DIV, set with the CSS checkbox or Layer checkbox checked. That error is popped if the element isn’t found by line 325, which is looking specifically for a DIV. If you are using my HTML5 Actions, you might be trying to apply it to a section or article, and that could be the entire problem.

Walter

On Jan 28, 2013, at 10:09 AM, Ernie Simpson wrote:

Sorry Walter, when I tried it it gave me an error containing this line of
code
 fwError('Sorry! This Action must be applied to a layered HTML box');
–
Ernie Simpson

On Mon, Jan 28, 2013 at 9:07 AM, Walter Lee Davis email@hiddenwrote:

Just tested it here, and no, it does not require a layered element.

Walter

On Jan 27, 2013, at 6:16 PM, DeltaDave wrote:

Yes you are correct - Sticker requires CSS positioned layered elements
but it does the ‘only stick when at the top’ thing.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 28, 2013, 3:31pm

That fixes the element relative to the window when the browser is resized. It’s a belt-and-braces approach to fix the issue of resizing causing the element in a centered layout to truly remain static rather than moving along with the content in the window.

Walter

On Jan 28, 2013, at 10:20 AM, Ernie Simpson wrote:

Actually, by using Safari’s ‘Inspect Element’ feature you can see how the
code changes before and after the scroll triggers in either example. In the
Action example a top and left attribute are added.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options