ajlkn/skel

A lightweight responsive framework for the www

skel's Issues

Error: TypeError: _.cache.pageWrapper.css(...).css(...).css(...).css(...)._skel_panels_init is not a function

I am getting this error while loading skel panel. Any suggestion how to fix that issue?

Skitter when changing breakpoints

When resizing on Chrome (v30 & Canary v33) on OSX (Macbook Air) page is displayed momentarily without CSS applied. Appears to flash or blink.

This is very evident using the Helios and Prologue templates. Open and resize the horizontal size quickly.

Not able to reproduce in Safari.

Panels not working on Android / Windows phone?

Tested your Panels example page on Android emulator (Google Nexus 7). It just slides screen horizontally, but the panel content doesn't come up. My own site does just the same.

SkelJS is mentioned to work on Android at least, but how about panels?

Example page broken in IE8.

Hi,
The attached image is what I get when I open the skelJS example page with IE8:
http://skeljs.org/uploads/examples/example/index.html
http://skeljs.org/uploads/examples/panels-example/index.html

Seems like the html5shiv.js is being 404?

Supported browsers?

Is there a list of supported browsers somewhere? Thanks

Browser viewportWidth Issues

Hi. I am so frustrated with the seemingly lack of cohesion to www standards by browsers. It makes it near impossible to write code that behaves in a predictable way (layout etc).

I don't think it's a Skel issue but a browser issue, but wanted to mention it here just in case anyone else has these issues and has a workaround or such.

Case in point:

1. Samsung Galaxy Tab 3 10.1" Android 4.2
   Device has a res of 1280x800 ('natural' orientation is landscape; ie. the home btn is on the bottom of the screen)

built-in internet browser
tablet in landscape: viewportWidth = 800px (wrong)
tablet in portrait: viewportWidth = 1280px (wrong)

• resize() event doesn't seem to fire when device rotated

Firefox 26.0.1
tablet in landscape: viewportWidth = 980px (wrong)
tablet in portrait: viewportWidth = 800px (correct)

Chrome
tablet in landscape: viewportWidth = 800px (wrong)
tablet in portrait: viewportWidth = 1280px (wrong)

This is with the config setting useOrientation: true - setting to false does nothing (noticable).

2. Apple iPhone 4 (iOS 4.1) & Apple iPhone 4 (iOS 4.3.2)
   Device has a res of 320x480 ('natural' orientation is portrait; ie. the home btn is on the bottom of the screen)

built-in Safari browser
tablet in landscape: viewportWidth = 480px (correct_)
tablet in portrait: viewportWidth = 320px (correct_)

• the correct viewport widths are reported when the page is refreshed; not when the device is rotated (ie. resize() event not triggered)

This is with the config setting useOrientation: true - setting to false does nothing (noticable).

3. Apple iPad2 (iOS 5.1.1)
   Device has a res of 768x1024 ('natural' orientation is portrait; ie. the home btn is on the bottom of the screen)

built-in Safari browser
tablet in landscape: viewportWidth =1024px (correct)
tablet in portrait: viewportWidth = 768px (correct)

• the correct viewports are only reported when useOrientation: true - setting to false reports incorrect widths.

This is extremely frustrating. I'll try other responsive frameworks to see how they behave in the same environments reported above.

Cheers,
Mark

PS/ I'd like to see a skel.version() function

Fixed header with panels plugin

Hi there, thanks for an awesome framework.
I am trying to make a fixed header, however panels' JS injects a wrapper div with position: relative which prevents me from pinning the header to the top of the page.
What would be the right way to make it work?
Thanks!

Toggle won't wok on iPhone 3GS

Toggle seems not to work on iPhone 3GS.

When I'm on top of the page it works fine, but if I scroll down it doesn't seem to do anything.

why ?

why don't you use tags ?
they are great for downloads :)

i can't use google maps api

if skel is loaded
how can i display a simple google map ?
any example ?

Panels seems to be firing before the page is entirely loaded

This is an IE only issue so far as I can see. The panels are initializing before the entire html has been loaded into the body. I added a console.log to see what html was present as it fires, and it's not the entire html of the page.

A console.log after _.cache.body = jQuery('body'); [which is in a DOMReady function] shows the incomplete html.
[log ends with]

<script src="/js/finalize.js" type="text/javascript"></script>

If I force a refresh it sees the entire html, but a page reload only sees part of it.
[log ends with]

Since this is within a DOMReady function is this a browser bug? I'm working on IE10 with this test.

z-index vs useTransform: true

I had a very big problem with using fancybox with skel-panels. I'm building webpage on template "Prologue". So in default configuration "useTransform: true" there is always left panel on top.

Even if I use default z-index: 100 in skel and 11000 in fancybox overlay, left menu is always on top (when useTransform is true). I've been looking very long for resolve this problem. Now I've found it.. and I've change it to false. Now it's looking good.

Accordions in panel

Hey.

I've been trying to build in a way to handle multiple levels of navigation in panels. My solution is to make parent links accordions which then reveal the child links when clicked / tapped. However, no matter which accordion plugin I use, they all fail. I can get them all to work fine in the main body of a page but as soon as I copy & paste the code into a panel, they don't work. The accordions stay closed and do not open when clicked.

I also had an issue of links, even #, closing the panels. I tried adding skel-panels-ignore (as suggested in another issue) to the links which stopped the panels closing but did not help with the accordions issue.

Any ideas?

My config is as follows:

// Init skelJS 
window._skel_config = {
    prefix: 'wp-content/themes/ckd-reset/style',
    preloadStyleSheets: true,
    resetCSS: true,
    boxModel: 'border',
    preloadStyleSheets: true,
    grid: { gutters: 40 },
    breakpoints: {
        desktop: { range: '1020-', containers: 960 },
        tablet: { range: '681-1019', containers: 640 },
        mobile: { range: '-680', containers: 300, lockViewport: true, grid: { collapse: true, gutters: 20 } }
    }
};

// Init skelJS panels plugin
window._skel_panels_config = {
    panels: {
        leftPanel: {
            breakpoints: 'tablet,mobile',
            useTransform: false,
            position: 'left',
            size: "75%",
            html: '<div data-action="copyHTML" data-args="mobileNav"></div>'
        }
    }
};

skel Panels with Google Chrome and HTML5 forms Autofocus

Using the HTML5 autofocus property and when viewing the page in Google Chrome (windows desktop) "autofocus" is not working when skel-Panels code is loaded on the page.

Tested with Google Chrome Version 30.0.1599.101m

Works as expected with FF24.0 and IE10.

Aside question... I only use panels in the "mobile" break-point... is there any way to just enable (or dynamically add) the panels code/wrappers when the "mobile" break-point is needed? The reason I ask, is this is the second issue I have had with panels, when they aren't even active/visible in "wide" or "narrow" break-points. I just have the code there for when mobile is active.

Configuration detection

I'm having an issue with firefox [v24] but I don't think it's version specific.

I'm testing a mobile vs desktop config. I get the page into mobile mode, <= 640px. I load a new page expecting to stay in mobile mode, but it jumps back into desktop mode.

I added a few logging statements and narrowed it down to getViewportWidth. The issue is the vertical scroll bar as far as I can see.

With the exact same browser widths, IE reports a width of 640, but FF says 657.

I am assuming IE calcs the scrollbar width included with the 640, but FF adds it to the width.

Am I correct? Is there a fix for this?

In my testing I get the window to 640px to get mobile mode, load a page and it kicks back to desktop mode [657px width]. I move 1 px and get dumped back to mobile.

I don't get a consistent FF mobile mode unless I get the window to < 623px. Once in the mobile, I'm good until I get > 640, but a width 623-640 toggles between mobile/desktop when refreshing.

IE8 JS Issue

Hello,

I'm using this on a site that was based on the HTML5up Dopetrope theme: http://html5up.net/dopetrope

If I test either my site or the HTML5up one in IE Tester for IE8, I get an error on internal pages. See the attached screenshot.

Like Box Facebook

I'm getting problems adding like box plugin from Facebook into my page.

Tested without skel and it worked perfectly.

Any idea how to solve it?

Can anything trigger a panel?

Do you have a working example of where a simple link is activating a panel (jsfiddle)?

I am trying with this code:

<p><a href="#" data-action="togglePanel" data-args="rightPanel"><img class="size-medium wp-image-1862" src="http://www.example.com/wp-content/uploads/2014/02/IMG_0681-620x413.jpg" width="620" height="413" /></a></p>

To no avail. However, my overlay works just dandy as (from config):

html:   '<a href="#" class="skel-panels-overlay skel-panels-overlay-top-left xoavl_home"' +
                    'data-action="togglePanel" data-args="leftPanel">XOAVL</a>'

Is this supposed to work?

skel.min.js issue - node not found

I am using Prologue template in MVC-4 project. Following skel.min.js error occured when i load page; also it does not render mobile menu when i run it on mobile simulator. Your help will be much appreciated.

"Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist."

snap attached:

Raw html appearing before css loading

Hi,

I'm using skeljs with html5up templates and I don't understand why raw html appears before css is applied (less than 1 sec to be applied, but effect is really strange).
The same problem occurs on html5up template example page loading, do I have missed something ?

Regards,

Romain.

skel-layers?

Using the HTML5 UP theme "twenty" and noticed it's using skel-layers.min.js. Is there an unminified version available?

Font getting locked.

When we add an open source rich text editor to the text area, the functions are not working like bold, italics, bullets etc.

When I do it without inlcuding skel min js , then its working. I would like to know if skel js locks the font one loaded.

Stop toggle panel from auto closing.

Hi,

I have a toggle panel that opens up on the left side. Whenever I click on a link inside of the panel it closes the panel on mobile devices. I would like to have it stay open for one link in particular which opens up a sub menu. Is this possible?

Thanks!
-John

$ reference in skel-panels.js

Tiny one, but there is a single reference to $ in skel-panels.js (line 1365):

$('[autofocus]').focus();

I presume its just an over sight and is meant to be:

jQuery('[autofocus]').focus();

Thanks

Panels Dead on Firefox 27.0 (Mac only)

First off thanks for what I consider the most light weight and designer-open framework for creating websites. I have been in the process of implementing this into a simple Wordpress theme but I am stumbling on several fronts:

1. Using Wordpress 3.8.1 shows that JQuery's default version in the functions.php is 1.11.0 -- Unfortunately this breaks the animation features of the panels on Chrome version 32.0
2. Your own skeljs Panels examples don't work in your documentation online on Firefox

Seeming Typo in Documentation

When describing your presets in the full documentationn (http://skeljs.org/docs), you write:

standard
Stylesheet prefix set to "style"
Breakpoints set to mobile (480px and below), 1000px (481px to 1000px), and desktop (481px and up)
40px gutters on all grids
1200px containers on desktop, 960px containers on 1000px, and fluid containers on mobile (with collapse enabled)

I presume you meant to write

Breakpoints set to mobile (480px and below), 1000px (481px to 1000px), and desktop (1001px and up)

I really found no different way to contact you, I hope that's alright.

Scroll-to-top compatability

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

skel.lock Cookie

I'm moving closer to production using skeljs and I'm playing with the skel.lock with a "switch to desktop" feature.

It looks like when you use skel.lock it sets a cookie to remember, but the cookie is set for that page only (using path). I'm looking for it to apply to the entire site and have it last for the session... i.e. once they "switch to desktop" it stays on the desktop view for the entire session. Most sites I visit seem to be set this way as well so I thought I was losing my mind when it kept switching back to "mobile" view.

Possibly in next version you might consider adding a configurable option to set cookie path to "/" or "page"

So I changed the code in the unlock/lock functions as follows:

    unlock: function () {

        // Clear the lock state
        _.lockState = null;
        //document.cookie = _.lsc + '=;expires=Thu, 1 Jan 1970 12:00:00 UTC; path=' + window.location.pathname;
        document.cookie = _.lsc + '=;expires=Thu, 1 Jan 1970 12:00:00 UTC; path=/';

...

    lock: function (w) {

        // Set the lock state
        _.lockState = w;
        //document.cookie = _.lsc + '=' + w + ';expires=Thu, 1 Jan 2077 12:00:00 UTC; path='  + window.location.pathname;
        document.cookie = _.lsc + '=' + w + '; path=/';

...

It seems to set the cookie ok, but it apparently is not reading the cookie on page load... almost as if it is looking for cookies only for the specific page path...

Upon further hours of testing... I realized skeljs wasn't reading the cookie names properly. When I used the original code, and skeljs accessed document.cookie, _skel_lock was the first cookie in the list. But when I changed the path to / and skeljs referenced document.cookie, _skel_lock was the last cookie in the list. I assume it might put specific page cookies first in the list?

No big deal, who cares what position is in, right? Well the code skelJS uses to iterate through the cookies only works if the cookie is in the first item in the list, because it matches with "_skel_lock". But the way the cookies are stored, there is a space between each cookie after the semicolon, i.e. cookieName=value; cookieName2=value2; cookieName3=value3;

So if the cookie is first in the list skeljs works ok "_skel_lock"=_skel_lock.

But when the cookie is in the middle or last in the list, skeljs code does not work as the skeljs does not TRIM leading spaces, so it is comparing " _skel_lock" = "_skel_lock" which returns false.

So I altered the skeljs code to the below and it seems to work ok, now. I didn't use TRIM as I read that is not available to IE8 and below.

        _.iterate(x, function (i) {
            var y = x[i].split('=');
            //if (y[0] == _.lsc) {
            if (y[0].replace(/^\s+|\s+$/g, '') == _.lsc) {
                _.lockState = y[1];
                return;
            }
        });

Thoughts? Am I missing something? Or am I right with what I've done?

Overlay Panel (Fixed)

One little caveat that I have run into using panels is the bottom panel. When I put a footer overlay there as try to activate it from the top of the page, it activates by opening a transparent panel in the viewport with Te designated height I specified.

However if I want to see what is in that panel. I have to scroll down and then activate it. Is there a way around this issue?

Jquery Mobile select data-native-menu inside panel doesn't work

When using a jquery mobile select element with data-native-menu set to false to use jqm's inbuilt custom menu. inside skel-js panel - it doesn't work.

clicking on it simply closes the panel.

thanks

Google Page Speed performance

Hello,

This is great framework without any doubt but when we talk about responsive websites for mobile devices speed must be a major factor. If you run html4up.net website on Google page speed this is showing very low page rank. Please have a look.

http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fhtml5up.net%2F

I think things can be improve if SkelJS framework loads dynamic CSS files into single <style> block and is it possible to load it at the bottom of page instead of header which is termed as above the fold by Google.

Waiting for your response as I am developing my website on this framework.

Thanks,
Sarfraz Qasim

Conflicting with PrototypeJS

First of all, skelJS is a great framework. Would it be possible to ensure that it does not conflict with PrototypeJS, which comes as standard with Magento?

I tend to work solely with jQuery which can be forced into noConflict mode; is there a similar feature within skelJS?

At the moment, the only information that I possess is the following error message which is being reported by prototype.js:

Uncaught TypeError: Cannot call method 'call' of undefined

Has anyone had any success with using skelJS and PrototypeJS within the same page?

Call function on body load

Hi AJ,

I just learned about skel.js and really loved it but I'm trying to figure out how to call function on body load as currently it's not working. I'm referring to Helios template you developed.

I'm not sure how to initialize. I'd be glad if you could help me in this.

Thanks,
Vamsi.

Flickering Issue?

I've been using the example file on the site to play around with this, first off it's a wonderful plugin and I REALLY like the built in grid, great work!

With that example file, I've been having some flickering issues on Safari for mobile, and Safari 5.

I'm not sure if this is being caused by the plugin itself or by CSS transitions, any suggestions?

Fixed left menu panel

Hallo,
thx for your superb framework.

I am trying to make a fixed left panel with menu.
What would be the right way to make it work?
Thank you

backface-visibility and youtube videos

I've been given the task of building a new web site using skeljs. I've found some samples from html5up to follow, but I'm stuck on this right now.

They want some youtube videos in iframes, but the they are not showing [black square]. The iframe is there and popluated.

I've narrowed it down to the skel-panels-pageWrapper div and the backface-visibility:hidden css. If I remove the backface-visibility:hidden via firebug I see the video, so it's just a css issue.

The demos I'm working from don't have that css when the page is built so I'm assuming this is something that can be turned off somehow in the config?

working:

not working:

Is there an option to disable the transform & backface-visibility somehow.

links having a target to "_blank" to open up a in new window when used inside panels doesn't work

links having a target to "_blank" to open up a in new window when used inside panels doesn't work

example link when used under panel html opens up in the parent window instead on a new window.

thanks

Murad

skelPanels - Screen Flicker on Zoom in/out on iOS

I've seen some references to screen flickering bugs on iOS in the commit notes as well as in the issues section. But I'm still seeing the flickering when a reference to skel-panels is included on the page (even if skel-panels aren't visible at that breakpoint or even set to go off).

Viewing the examples page at:
http://skeljs.org/uploads/examples/panels-example/index.html

I'm seeing the flickering using an iPad (iOS 6) when I zoom in.... screen flashes. Same issue on iPhone with iOS6 and lockViewport=false

I've reproduced using v0.4.0 and v.0.4.1.

Any thoughts?

Renders incorrectly on WP8

SkelJS site renders poorly on Windows Phone 8. It needs

<meta name="viewport" content="width=device-width, user-scalable=1;" />

to be explicitly specified. Otherwise, it renders in desktop mode. See first image in this link:

SkelJS bugs

In addition, the left panel also renders incorrrectly.

Crash with firefox 4.0

I get this error when loading the page:
uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://URL_TO/skel.min.js :: <TOP_LEVEL> :: line 33" data: no]

Seems to be line 1613 of non-minified version of the code.

Panels cause SmoothScroll stop working in IE9

Hello,
I try use skelJS with panels and I want to add smoothscroll (https://github.com/cferdinandi/smooth-scroll) for nice scrolling. Everything works fine until I try it in IE9. Here smoothscroll don't work.

Then I start experimenting and create basic smoothscroll page with skeljs. When I add 'skel-panels.min.js' it stop working.

To reproduce problem, try basic smoothscroll page and add skel+panels config into header

Compatibility with MVC

This is such amazing work and I really appreciate the effort you've put into it, but would it be possible to make it compatible with MVC? The problem lies with the prefix being used in the init.js, for example, within the prologue theme.

Since essentially with MVC once you call a new controller and action you've modified the URL and virtual directory so the page is unable to find the required css pages. I've tried every kind of path notation I can think of, but nothing seems to work once its published.

I would love to have the mobile css load when required on my other pages but unfortunately I've now had to hack around this by forcing a particular style on the view like so:

@section Styles {
<link href="@Url.Content("/css/style.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("/css/style-wide.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/style-narrow.css")" rel="stylesheet" type="text/css" />
}

I've also attempted to store a hidden html object on the page and add the value to the prefix so I can modify the prefix on the page load for each view call, however unless you call the function on document loaded/ready it returns undefined, and trying to force load the scripts in order on document.ready causes more issues than it solves :(

Any work around available? or tips to get this to work correctly without breaking MVC?

Define base path for css?

Can I define a base path for the CSS files?

On the main path it works... for example:
http://example.com/index.html

But breaks if I get further up, for example:
http://example.com/products/software.html

Looking in chrome it now tries to load:
http://example.com/products/css/style.css

Can I tell it to stick to: http://example.com/css/style.css ?

Panels causing iPad browsers to Crash on Zoom

I was out and using someone else's iPad to browse one of my sites and it caused Safari to crash. Went home and tried it on my iPad Airs (ios 7.0.4 and 7.0.6) and same crash issue in both Safari and Chrome.

If you zoom all the way in and release, then zoom all the way out quickly, to the point where the webpage is considerably smaller than the screen it causes the browser to crash immediately.

Was also able to duplicate it on the panels example site at
http://skeljs.org/uploads/examples/panels-example/index.html

Only happens on panels example and not on the skeljs only example page.

Flicker of unstyled content on Firefox

Hi, I get a brief flash of unstyled content at break points on Firefox 23.0.1 (windows 7). I get it on the example on your site, as well as my own site I am building.

Is this a known issue, have you seen it happen before, and what might be causing it?

PS Love the script otherwise!

Thanks

Load navigation menu in panel

I'm using skeljs to create a responsive website. With the use of panels I can place my menu in a left sidebar menu when the layout is for mobile otherwise it stays just normal.

I saw in the documentation that you can take a part of the page by id and place it in the left panel like this:

window._skel_panels_config = {
preset: 'standard',
panels: {
navPanel: {
breakpoints: "mobile",
position: "left",
size: "80%",
html:'

'
}
}
};
When I use this the menu is not shown in the left panel, when I do $('nav').html() I get the menu but that is not what I want.

My HTML looks like this:

• Start
• Page2
• Page3
• Page3

What do I have to do to get that menu inside my panel?

Should be able to specify base css path for locations

I hacked it like so but should be in the config

/* Locations */

  // Registers a location element
  // Args: string id (Location ID), DOMHTMLElement object (Location element)
  registerLocation: function(id, object) {

    if (id == 'head')
      object._skel_attach = function(x) {
        // Here is the monkey patch
        if( x.href ) {
          x.href = x.href.replace("/css/","/assets/");
        }    
        this.insertBefore( x, _.me );
      };   
    else
      object._skel_attach = function(x) {
        this.appendChild( x ); 
      };

    _.locations[id] = object;

  }, 

What do you think? By the way I really like skeljs thank you!

skel-panels - how to make anchor on toggle panel (language switcher) not closing

I've got second one problem with skel. I would like to use language switcher on left panel (template Prologue 1.0). So, Im inserting it to logo div with absolute position. Everything is working fine on desktop. But.. problem exist with narrower: range: '-960'.

I don't know how to do make clickable form/anchor (on left panel) without closing this panel on click. I'd like slide down flags - then panel is closed. I was trying some classes but without any result.

Please - any help. (http://pojezierze2.jordan.pl/, mobile version...)

nav ul li href error

I am using skeljs and prologue template. I am facing this issue with menus (nav) - when i put a url like "http://google.com" or "/account/login" it throws this error. The menu is using "#" urls by default - it scrolls sections.

Plese help me in this regards.

url in this menu.

CDN files

I was going to throw this up on a free CDN, jsDelivr, but saw the CSS is not minified, & seems that it needs configuring.

IMHO resets should be separate, & with jsDelivr you can d/l a concocted file. (eg //cdn.jsdelivr.net/g/[email protected],[email protected](skel-noscript.min.css)). If there is configuring needed, then perhaps there should be separate files that you can load as-needed?