jalxob / cool-kitten Goto Github PK

The viewport meta tag is not working on iPad, i try to change it with this one

< meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >

and everything works fine.

I do not understand why for a bit of time my version no longer works the same way.
Besides, I also have the problem when I re-retrieves the latest version available.
When I click on a menu entryis the button just before which is activated, the selected button will not be activated. And it is only after scrolled down a bit to change that.
Anyone know why?

Hi all, I am using this for my portfolio website. Everything looks fine except when I bring it up on 27 inch mac screen, the content doesnt fill up the screen and the slides edges are visible without scrolling. Does this make sense? How can I fix this?

Navbars last link

Tested the homepage on an ipad, it looks nice, but doesn't apple parallax.

When using nav instead of scrolling, it will not set active class for the 2 last sections. It will set it only when you scroll down some more.

I was wondering if anyone could help me understand a way of implementing a feature whereby I can list 4-5 items within one particular slide, and clicking on any of these items will trigger a horizontal navigation to a 'subset' slide section if you like that is separate from the main site.

Note that I want the horizontal navigation to be triggered by a click action. Is this possible using this plugin?

I want to believe it is as simple as modifying the below function to use scrollLeft instead and hiding the sub-slides with css to begin with. But I fear it might not be this simple? Any suggestions please?

function goToByScroll(dataslide) {
htmlbody.animate({
    scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');

}
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});

Thanks

Trying to use this framework, however the data slide attribute in the div is stopping my form from submitting. Does anyone have a fix for this issue? thanks for the help.

Hi.

I've tried to reduce the amount of padding at the top and bottom of the .slide class (to 80px) but find that the navigation links then scroll a bit too far, resulting in the slide title scrolling off the top of the page, especially on a small screen.

I can't see in the JS where this might be caused.

Any suggestions?

Hi there!

Thank you very much for the plugin! I am midway through starting to implement the plugin - however I am rather new to this and don't understand how to utilise the instructions on the README file, and whether it is necessary to do or not. Similarly whetehr I need to keep the compile.sh script.

Many thanks,
Max

Hey. You are probably already aware, but just in case; your website is down so any newcomers to your project are going to be put-off from your amazing project!

Hi there, sorry for a second question!

I was wondering what compatibility your plugin has, as I see it contains code relating to ie7,8,9. Which browsers does it support please?

Thanks,
Max

Hi,
I've been using the following CSS for full screen backgrounds but it doesn't work with Cool Kitten.

.slide1 {
background: url(images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

When I remove the 'no-repeat center center fixed' from the first line the background image will appear, however the image then repeats, defeating the purpose.

Has anyone got full screen backgrounds to work with Cool Kitten?

Although adding height: 100% to the class .slide

.slide{
background-attachment: fixed;
width:100%;
height:100%; /* changed from auto */
position: relative;
padding:140px 0;
}

This doesn't seem to work, not sure if its my code or the framework. I have also attempted adding 100% height to the id #slide1 etc etc still no 100% height.

Hello, Im loving Cool Kitten but since i would need a horizontal scroll i was wondering is there someway to get it work? Otherwise everything is working with Cool Kitten so big thanks to the developer!

I'm using Cool Kitten framework for www.s2sministries.com and am very pleased! I have 9 menu links. 1-3 work perfectly for highlighting the active link to corresponding div. Menu items 4-9 also highlight when active, but menu item 3 is always showing active. Is there a simple fix for this?
Thanks.

Hi, it would be great to see some docs for this framework, how to use stellar and cool kitten methods, diffrent ways to allign background, etc

Hi,

I'm looking for a way to add a responsive .png image on the top of a slide as shown in this website (clouds, waves and mountain. Not multiples png but only one layer): http://boy-coy.com/#home

Or if anyone know another similar website who use the same effect?

Thank's for any help and sorry for my poor english ;)

When I run this command "sudo npm install uglify-js -g" I get the following error

npm http GET https://registry.npmjs.org/uglify-js
npm http 304 https://registry.npmjs.org/uglify-js
npm http GET https://registry.npmjs.org/source-map
npm http GET https://registry.npmjs.org/optimist
npm http 304 https://registry.npmjs.org/source-map
npm ERR! error installing [email protected]

npm ERR! Error: No compatible version found: source-map@'>=0.1.7- <0.2.0-'
npm ERR! Valid install targets:
npm ERR! ["0.0.0","0.1.0","0.1.1","0.1.2","0.1.3"]
npm ERR! at installTargetsError (/usr/share/npm/lib/cache.js:488:10)
npm ERR! at next_ (/usr/share/npm/lib/cache.js:438:17)
npm ERR! at next (/usr/share/npm/lib/cache.js:415:44)
npm ERR! at /usr/share/npm/lib/cache.js:408:5
npm ERR! at saved (/usr/share/npm/lib/utils/npm-registry-client/get.js:147:7)
npm ERR! at Object.oncomplete (/usr/lib/nodejs/graceful-fs.js:230:7)
npm ERR! You may report this log at:
npm ERR! http://bugs.debian.org/npm
npm ERR! or use
npm ERR! reportbug --attach /home/[took-out-my-username]/www/cool-kitten/npm-debug.log npm
npm ERR!
npm ERR! System Linux 3.2.0-40-generic
npm ERR! command "node" "/usr/bin/npm" "install" "uglify-js" "-g"
npm ERR! cwd /home/[took-out-my-username]/www/cool-kitten
npm ERR! node -v v0.6.12
npm ERR! npm -v 1.1.4
npm ERR! message No compatible version found: source-map@'>=0.1.7- <0.2.0-'
npm ERR! message Valid install targets:
npm ERR! message ["0.0.0","0.1.0","0.1.1","0.1.2","0.1.3"]
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/[took-out-my-username]/www/cool-kitten/npm-debug.log
npm not ok

I am unable to download uglify-js and therefore unable to run the complie.sh file.

The website I'm working on has a set of divs using stellar.js background parallax solution. From the 3rd on, the browser calculates the "background-position-y" value incorrectly, sometimes.

The images get a white space on top, as if the background had a margin. It doesn't happen all the time, but if i keep refreshing the page, this will fatally happen (on Chrome and old versions of Firefox).

Is there a way to solve this problem?

When i open cool-kitten site in android browser, i'm facing problem with parallax effect. The content and background image related to parallax division are constantly blinking.

Hey, author of Stellar.js here. I really appreciate that you like my plugin enough to include it in your first open source project :)

I just thought I should raise the question about whether this project should be referred to as "boilerplate" as opposed to a "framework".

You can get a good idea of what constitutes a framework here: http://net.tutsplus.com/articles/web-roundups/20-javascript-frameworks-worth-checking-out/

Now, compare that to this list of web dev boilerplate packages: http://mashable.com/2011/06/13/boilerplates-templates-dev/

I think making this change would avoid confusion. I see that you've bundled your own responsive grid, so it might be a better idea to create a new project specifically for your grid styles (with an equally fun name, of course), then include it in the "Cool Kitten" boilerplate package. What do you think? :)

Hi,I'm new here and confused how to use these files. I can't find any documents or tutorial . Please help me to apply to my site.Thanks.

I would like to add more than 2 background images to this page: http://kamer-vragen.com/appartementamsterdam1.html

I have added a 3rd slide with the same code as slide 2, but for some reason, the background image on the 3rd slide (the one below the kitchen photo) will not appear on Safari 5.0 (on my old Mac), but does appear on Safari 7.0 (my new Mac). On my (office) Windows machine it's visible on Firefox, not on Chrone. Anyone has ideas how to fix this?

The waypoints don't correctly update the navbar.

Logging the 'dataslide' variable in scripts.js shows that the waypoint doesn't update to the current slide until the viewport is past the padding.

This happens even on the sample site you've linked to.

Just wondering if this is only happening on my Safari browser.. or is others receiving the same issue. The parallax background slides very skippy when it slides to different sections..

Thanks for any insight on this issue.

I love your framework! But I was wondering if you plan on trying to port it to a WordPress Theme Framework?

If so, that would be awesome!

If you try to set parallax backgrounds to cover so they can resize themselves according to the viewport size, scrolling becomes unstable and skippy.

Hi,
When I choose the "Credits" - bar, it slides to slide4 but the bar menu 4 color (credits) doesn't change. Is there any way to fix it?

Does anyone have any modified code on this that would update the url hash on navigation click? I'm also looking for a way to link to a particular panel from an outside resource by passing a hash through the url? Surely someone has integrated this framework with that feature.

Has anyone else encountered/resolved a problem where the nav doesn't work on iOS. It seems to only be phones though and not tablets. For me the issue persists across all major mobile browsers, not just safari. I'm going to continue to look into the issue and test on as many devices as possible, but if anybody else has come across this and has anything that can help I'd love to hear it.

To fix the waypoint inaccuracy, and to have a Dynamic header height without relying on using a fixed value padding to compensate:

1 - replace the waypoint v1 library with v2. Can be found here:
https://github.com/imakewebthings/jquery-waypoints .
This is crucial as v2 supports multiple waypoints which will be required.

2 - make sure your header has the class .menu as per the cool kitten grid.

3 - Replace script.js with my extended version below:

jQuery(document).ready(function($){

    $(window).stellar();

    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');

//waypoint 1 for offsetting scroll down
slide.waypoint(function (direction) {

    dataslide = $(this).attr('data-slide');
  if (direction === 'down') {
    $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');

  }
}, {
  offset: function() {

    return $(".menu").outerHeight(true)+1;
  }
});

//waypoint 2 for offsetting scroll up
slide.waypoint(function (direction) {
 dataslide = $(this).attr('data-slide');
 if (direction === 'up') {
     $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');

  }
}, {
  offset: function() {
    return $(".menu").outerHeight(true)-2; // -1px to pass the waypoint, then another pixel as the jquery animate offset needs -1 to compensate for browser rounding differences 
  }

});

    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    function goToByScroll(dataslide, menuHeight) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top - menuHeight
        }, 2000, 'easeInOutQuint');        
    }

    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        menuHeight = $(".menu").outerHeight(true)-1; // Calculate .menu height and then subtract by 1px to compensate for browser rounding (when the slide heights aren't whole numbers).
        goToByScroll(dataslide, menuHeight);
    });

    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        menuHeight = $(".menu").outerHeight(true)-1; // Calculate .menu height and then subtract by 1px to compensate for browser rounding (when the slide heights aren't whole numbers Chrome rounds the Opposite way to FF and can leave a 1px gap between the slide and head).
        goToByScroll(dataslide, menuHeight);

    });

});

Enjoy!

Notes. You may see a 1px "step" at the end of the scroll animation. I haven't been able to cure this yet, and i think it has something to do with browser rounding on responsive slide heights that aren't whole numbers.

What would i insert to not make the background Parallax images move and instead make them flat?

Not a big issue but if you are using css buttons, or specifically the class button, your links wont work. Easy fix is rename your class to anything but button (if you can, ".button" is easily changed but "button" is not). I think this has to do with js.js and and the e.preventDefault function used with "button" for slides.