Scroll-to-top compatability about skel HOT 10 CLOSED

Are you using panels? If so, set useTransform to false in your panels
config.

On 1/5/2014 12:05 AM, Mark wrote:

Hi AJ.

I've now tried 2 scroll-to-top plugins and neither seem to work with Skel. When I remove Skel they both work fine.

Have you managed to get any to work?

The 2 I've tried are:

1. http://mattvarone.com/web-design/uitotop-jquery-plugin/
2. http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

Cheers,

Mark

---

Reply to this email directly or view it on GitHub:
#34

from skel.

Thanks AJ.

I've taken 'panels' out of the code and the 'scroll to top' still won't
work.

As soon as I remove the 'skel settings' the 'scroll to top' works (but of
course the page looks like crap now as the breakpoints aren't being
detected (and associated style sheets are therefore not loaded).

Something is conflicting - I suspect one or more DOM events but I'm not
sure which.

Want to see my code? I can either zip up my site and give you a Dropbox
link or give you the URL to browse the site (site requires un/pw) so you
can see it with Firebug. For either option please email me directly as I
don't want to show the details GitHub.

Cheers,
Mark

PS/ 'unveil' works with skel no prob.

On Mon, Jan 6, 2014 at 6:06 AM, aj [email protected] wrote:

Are you using panels? If so, set useTransform to false in your panels
config.

On 1/5/2014 12:05 AM, Mark wrote:

Hi AJ.

I've now tried 2 scroll-to-top plugins and neither seem to work with
Skel. When I remove Skel they both work fine.

Have you managed to get any to work?

The 2 I've tried are:

1. http://mattvarone.com/web-design/uitotop-jquery-plugin/
2. http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

Cheers,

Mark

---

Reply to this email directly or view it on GitHub:
#34

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/34#issuecomment-31612340
.

from skel.

Might be easier if you incorporate the scroll-to-top plugin in one of your
own simple skel frameworks.

Here's the simplest scroll-to-top plugin I've found ->
http://davidwalsh.name/jquery-top-link

David Walsh doesn't provide a single download link, so get the code from my
Dropbox -> https://www.dropbox.com/sh/lnvhwyfp5qevuxs/OX6xfUQkKO

Cheers,
Mark

On Mon, Jan 6, 2014 at 1:04 PM, Mark Read [email protected] wrote:

Thanks AJ.

I've taken 'panels' out of the code and the 'scroll to top' still won't
work.

As soon as I remove the 'skel settings' the 'scroll to top' works (but of
course the page looks like crap now as the breakpoints aren't being
detected (and associated style sheets are therefore not loaded).

Something is conflicting - I suspect one or more DOM events but I'm not
sure which.

Want to see my code? I can either zip up my site and give you a Dropbox
link or give you the URL to browse the site (site requires un/pw) so you
can see it with Firebug. For either option please email me directly as I
don't want to show the details GitHub.

Cheers,
Mark

PS/ 'unveil' works with skel no prob.

On Mon, Jan 6, 2014 at 6:06 AM, aj [email protected] wrote:

Are you using panels? If so, set useTransform to false in your panels
config.

On 1/5/2014 12:05 AM, Mark wrote:

Hi AJ.

I've now tried 2 scroll-to-top plugins and neither seem to work with
Skel. When I remove Skel they both work fine.

Have you managed to get any to work?

The 2 I've tried are:

1. http://mattvarone.com/web-design/uitotop-jquery-plugin/
2. http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

Cheers,

Mark

---

Reply to this email directly or view it on GitHub:
#34

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/34#issuecomment-31612340
.

from skel.

Does the actual scrolling not work, or do the fixed elements themselves not show up? Also are you seeing any errors in the JS console?

from skel.

Firebug shows no errors (Script, Net, Console).

When Skel is 'enabled':

• The fixed element shows (at the bottom of the page, not the bottom of
  the browser window).
• The element doesn't "hover" bottom right of the browser window.

Download my sample from the Dropbox link and run the index.html locally to
see the floating element working.

On Tue, Jan 7, 2014 at 7:59 AM, aj [email protected] wrote:

Does the actual scrolling not work, or do the fixed elements themselves
not show up? Also are you seeing any errors in the JS console?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/34#issuecomment-31686416
.

from skel.

That's due to position: fixed being incompatible with CSS transforms
(which is what skel-panels uses). See:

http://cameronspear.com/blog/css-transform-obliterates-position-fixed/

Two ways to fix this:

1. Disable CSS transforms in Panels. You can do this by setting
   useTransform: false in your Panels configuration.

or

1. Disable Panels. Simply remove the <script> element loading
   skel-panels.min.js. Note that even loading skel-panels.min.js without
   a configuration will apply a few CSS transforms to the page, so if
   you don't plan to use panels, don't load the script at all.

from skel.

Thanks AJ.

I already tried that when you mentioned it a day or so ago.

I've gone further that commenting out the panels config/settings script and
removed both skel-panels.min.js (and jquery.droptron.js just to be sure)
from my index.html file.

Still no joy.

On Tue, Jan 7, 2014 at 10:40 AM, aj [email protected] wrote:

That's due to position: fixed being incompatible with CSS transforms
(which is what skel-panels uses). See:

http://cameronspear.com/blog/css-transform-obliterates-position-fixed/

Two ways to fix this:

1. Disable CSS transforms in Panels. You can do this by setting
   useTransform: false in your Panels configuration.

-or-

1. Disable Panels. Simply remove the <script> element loading
   skel-panels.min.js.

On 1/6/2014 5:34 PM, Mark wrote:

Firebug shows no errors (Script, Net, Console).

When Skel is 'enabled':

• The fixed element shows (at the bottom of the page, not the bottom of
  the browser window).
• The element doesn't "hover" bottom right of the browser window.

Download my sample from the Dropbox link and run the index.html locally
to
see the floating element working.

On Tue, Jan 7, 2014 at 7:59 AM, aj [email protected] wrote:

Does the actual scrolling not work, or do the fixed elements themselves
not show up? Also are you seeing any errors in the JS console?

—
Reply to this email directly or view it on GitHub<
https://github.com/n33/skelJS/issues/34#issuecomment-31686416>
.

---

Reply to this email directly or view it on GitHub:
#34 (comment)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/34#issuecomment-31699666
.

from skel.

AJ, have finally solved the issue. The scroll-to-top div needed z-index.

The final website will eventually be shown here -> http://ezypay.us

Cheers,
Mark

On Tue, Jan 7, 2014 at 10:50 AM, Mark Read [email protected] wrote:

Thanks AJ.

I already tried that when you mentioned it a day or so ago.

I've gone further that commenting out the panels config/settings script
and removed both skel-panels.min.js (and jquery.droptron.js just to be
sure) from my index.html file.

Still no joy.

On Tue, Jan 7, 2014 at 10:40 AM, aj [email protected] wrote:

That's due to position: fixed being incompatible with CSS transforms
(which is what skel-panels uses). See:

http://cameronspear.com/blog/css-transform-obliterates-position-fixed/

Two ways to fix this:

1. Disable CSS transforms in Panels. You can do this by setting
   useTransform: false in your Panels configuration.

-or-

1. Disable Panels. Simply remove the <script> element loading
   skel-panels.min.js.

On 1/6/2014 5:34 PM, Mark wrote:

Firebug shows no errors (Script, Net, Console).

When Skel is 'enabled':

• The fixed element shows (at the bottom of the page, not the bottom
  of
  the browser window).
• The element doesn't "hover" bottom right of the browser window.

Download my sample from the Dropbox link and run the index.html locally
to
see the floating element working.

On Tue, Jan 7, 2014 at 7:59 AM, aj [email protected] wrote:

Does the actual scrolling not work, or do the fixed elements themselves
not show up? Also are you seeing any errors in the JS console?

—
Reply to this email directly or view it on GitHub<
https://github.com/n33/skelJS/issues/34#issuecomment-31686416>
.

---

Reply to this email directly or view it on GitHub:
#34 (comment)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/34#issuecomment-31699666
.

from skel.

Forgot to mention I've also resolved the issue when a mobile device (ie.
tablet - like my Samsung Galaxy Tab 3) uses landscape as it's 'natural'
orientation.

It's not an automatic solution (unfortunately), for reasons discussed
before, but it's what I think is an acceptable solution for my (future)
website visitors.

I got the idea from your code re: skel.lock / skel.unlock() (in the
documentation).

In essence I display a bar at the top of the screen that says "Tap to
change screen width from 1280 to 800". Tapping calls skel.lock(800).

A 'close' button in the bar hides the bar and sets a flag in localStorage
not to display the bar upon page reload.

However, if they happen to rotate the screen then the bar displays again,
giving them the chance to change the screen width (ie. breakpoint). Again,
skel.lock() is called, the new breakpoint dependencies are loaded, and the
user clicks on the 'close' option once again.

The whole process is quite smooth and fairly unobtrusive.

I only apply the logic to non-mobile touch devices (ie. tablets). I don't
apply the logic to mobile (smartphones) because I find virtually all of
them have a natural 'portrait' orientation. And I don't apply the logic to
desktops because virtually none would need this additional feature.

The only thing that would make this solution better is if the lock function
didn't reload the page (perhaps removing and inserting css etc into the DOM
in-situ). I might look at doing this one day.

Cheers,
Mark

On Tue, Jan 7, 2014 at 8:59 PM, Mark Read [email protected] wrote:

AJ, have finally solved the issue. The scroll-to-top div needed z-index.

The final website will eventually be shown here -> http://ezypay.us

Cheers,
Mark

On Tue, Jan 7, 2014 at 10:50 AM, Mark Read [email protected] wrote:

Thanks AJ.

I already tried that when you mentioned it a day or so ago.

I've gone further that commenting out the panels config/settings script
and removed both skel-panels.min.js (and jquery.droptron.js just to be
sure) from my index.html file.

Still no joy.

On Tue, Jan 7, 2014 at 10:40 AM, aj [email protected] wrote:

That's due to position: fixed being incompatible with CSS transforms
(which is what skel-panels uses). See:

http://cameronspear.com/blog/css-transform-obliterates-position-fixed/

Two ways to fix this:

1. Disable CSS transforms in Panels. You can do this by setting
   useTransform: false in your Panels configuration.

-or-

1. Disable Panels. Simply remove the <script> element loading
   skel-panels.min.js.

On 1/6/2014 5:34 PM, Mark wrote:

Firebug shows no errors (Script, Net, Console).

When Skel is 'enabled':

• The fixed element shows (at the bottom of the page, not the bottom
  of
  the browser window).
• The element doesn't "hover" bottom right of the browser window.

Download my sample from the Dropbox link and run the index.html
locally to
see the floating element working.

On Tue, Jan 7, 2014 at 7:59 AM, aj [email protected] wrote:

Does the actual scrolling not work, or do the fixed elements
themselves
not show up? Also are you seeing any errors in the JS console?

—
Reply to this email directly or view it on GitHub<
https://github.com/n33/skelJS/issues/34#issuecomment-31686416>
.

---

Reply to this email directly or view it on GitHub:
#34 (comment)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/34#issuecomment-31699666
.

from skel.

Cool. Glad to hear you've found a solution.

from skel.