Comments (10)
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:
- http://mattvarone.com/web-design/uitotop-jquery-plugin/
- 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:
- http://mattvarone.com/web-design/uitotop-jquery-plugin/
- 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,
MarkPS/ '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:
- http://mattvarone.com/web-design/uitotop-jquery-plugin/
- 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:
- Disable CSS transforms in Panels. You can do this by setting
useTransform: false in your Panels configuration.
or
- 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:
- Disable CSS transforms in Panels. You can do this by setting
useTransform: false in your Panels configuration.-or-
- 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:
- Disable CSS transforms in Panels. You can do this by setting
useTransform: false in your Panels configuration.-or-
- 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,
MarkOn 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:
- Disable CSS transforms in Panels. You can do this by setting
useTransform: false in your Panels configuration.-or-
- 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.
Related Issues (20)
- How to centre row content? HOT 1
- Skel and Wordpress HOT 3
- Skel 1.0:( HOT 1
- Cannot get css file
- Typo in scss
- request info
- Conditionals
- Cannot read property 'grid' of undefined in skel-layout HOT 3
- skel menu nav dont work on iphone 6
- Proper docs? HOT 6
- Sending email HOT 2
- Is it possible to set row height in Grid Layout?
- once deployed, click on link does not work
- https:// HOT 1
- grid offsets not working for some reason HOT 2
- Using Skel in a template
- Articles display before scroll is finished.
- Prioritizing a cell not working for small
- skel deprecetaed
- Skel-panels documentation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skel.