きこ くき

I like solving problems, surf-pop and pugs. @Sarah_Jaaane

[kiko-kuki]

mmenu bug for Android Galaxy S4

Trigger the mobile menu open using $("#mobile-nav").trigger("open"); on the mobile nav element.

If you use the attribute href="#mobile-nav" on the trigger for mobile nav it won't work for Android Galaxy S4.

[kiko-kuki]

Getting Facebook like & share count, Twitter url share count and Pinterest pin count via JSON ajax request

// Facebook

$.getJSON('http://graph.facebook.com/fql?q=select%20comment_count%2C%20share_count%2C%20like_count%20from%20link_stat%20where%20url%20%3D%20%22http%3A%2F%2Fwww.monki.com"', function(data) {   var counts = data["data"][0];   var share_count = counts["share_count"];   var like_count = counts["like_count"];   console.log("shares: " + share_count);   console.log("likes: " + like_count); });

// Twitter

$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=http://www.monki.com&callback=?', function(data) {   var tweet_count = data.count;   console.log("tweets: " + tweet_count); });

// Pinterest

$.getJSON('http://api.pinterest.com/v1/urls/count.json?url=http%3A%2F%2Fwww.monki.com&callback=?', function(data) {   var pin_count = data.count;   console.log("pins: " + pin_count); });

[kiko-kuki]

iOS Web App Splash Screen Dimensions

iPhone: 320x460

iPhone Retina: 640x920

iPhone 5: 640x1096

iPad Portrait: 768x1004

iPad Landscape: 1024x748

iPad Retina Landscape: 1536x2008

iPad Retina Portrait: 2048x1496

[kiko-kuki]

Configuring Pony for Authenticated SMTP Namesco email

Pony.options = {

  :via => :smtp,

  :via_options => {

    :address              => 'smtp.hosts.co.uk',

    :port                 => '587',

    :enable_starttls_auto => true,

    :user_name            => 'your username',

    :password             => 'your password',

    :authentication       => :login,

    :domain               => "your domain" #or local

  }

}

[kiko-kuki]

Firefox d3 svg clip-path bug with pointer events

If you set a clip path on an svg element, in Firefox only, you won't be able to register any events, click, mousenter etc, on it.

Put the elements in a group and set the clip path on the group and you'll then be able to register events on those elements.

[kiko-kuki]

LESS CSS mixin for vendor-prefixed RGBA background-color

The only variables you need to pass in are your RGBA values.

LESS will convert this to the gradient filter format.

  /* Background Color */

.background-color(@r,@g,@b,@o) {

    @op: @o*255;

    @orounded: round(@op);

    @ohex: ~`parseInt("@{orounded}").toString(16)`;

    @rhex: ~`parseInt("@{r}").toString(16)`;

    @ghex: ~`parseInt("@{g}").toString(16)`;

    @bhex: ~`parseInt("@{b}").toString(16)`;

    @hex: ~`"#" + "@{ohex}" + "@{rhex}" + "@{ghex}" + "@{bhex}"`;

    background-color: transparent;

    background-color: rgba(@r, @g, @b, @o); 

    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{hex},endColorstr=@{hex})";

    zoom: 1;

}

Check this out for more vendor-prefix LESS mixins.

[kiko-kuki]

Handling tap event in Windows 8 Metro app (Javascript / Visual Basic 11 Beta)

var tapview = document.getElementById("tappableSection"); var gestureRecognizer;

function initializeGesture() {     gestureRecognizer = new Windows.UI.Input.GestureRecognizer();     gestureRecognizer.gestureSettings = Windows.UI.Input.GestureSettings.tap;     gestureRecognizer.addEventListener("tapped", onTapped); }

var processDown = function (evt) {     // Get the current PointerPoint     var pp = evt.currentPoint;     // Feed the PointerPoint to GestureRecognizer     gestureRecognizer.processDownEvent(pp); };

var processMove = function (evt) {     // Get intermediate PointerPoints     var pps = evt.intermediatePoints;     // processMoveEvents takes an array of intermediate PointerPoints      gestureRecognizer.processMoveEvents(pps); };

var processUp = function (evt) {     // Get the current PointerPoint      var pp = evt.currentPoint;    // Feed GestureRecognizer    gestureRecognizer.processUpEvent(pp); };

var onTapped = function (evt) {     // TAP TAP TAPPITY TAP };

tapview.addEventListener('MSPointerDown', processDown, false); tapview.addEventListener('MSPointerMove', processMove, false); tapview.addEventListener('MSPointerUp', processUp, false);

initializeGesture();

[kiko-kuki]

Dynamic Lion style scrollbars

*Not totally browser tested, so have a play around*

So the scrollbars in windows are ugly & I wanted to make them look like the Mac OS X Lion scrollbars; invisible when not being used, overlaying the page rather than pushing all content to the side and minimilist looking.

I also didn't want to add endless container divs as in jscrollpane.

::-webkit-scrollbar {     width:0; }

.scroller {     position:absolute;     top:0;     height:20px;     right:0;     width:7px;     border-radius:4px;     background-color:rgba(0, 0, 0, 0.5);     z-index:inheritt; }

  var n = 0; var t = -1;

function scroll_detect() {   if (!$.browser.webkit) {     $('*').each(function(){       if ($(this).css('overflowY') == "visible" || $(this).css('overflowY') == "auto") {         $(this).addClass('scrollable').css('overflowY','hidden');       }     });     $('body').on("mousewheel", "*.scrollable", function(event, delta, deltaX, deltaY){       if (this.scrollHeight > $(this).outerHeight()) {         var scrolla = ($(this).scrollTop());         var scrollb = (deltaY * 30);         $(this).scrollTop(scrolla - scrollb);         cancelEvent(event);       }     });   }

  $('*').not('#content').scroll(function() {      var top = $(this).position().top;     if (!$(this).next().hasClass('scroller')) {       $('<div class="scroller" id="scroller_' + n + '"></div>').insertAfter($(this)).css({'left':$(this).position().left+$(this).outerWidth() - 7,'top':top});       n++;     } else {       $(this).next().fadeIn();     }     var scroller_id = $(this).next().attr('id');     var scroller_height = $(this).outerHeight()*0.2;     var ratio = (($(this).scrollTop())/(this.scrollHeight - $(this).outerHeight()));     var place = ratio*($(this).outerHeight()-scroller_height) + top;     $(this).next().css({'top':place,'height':scroller_height});     if ( t != -1) clearTimeout(t);     t = setTimeout("hide_scroll_bars('#" + scroller_id + "')",500);   }); }

function hide_scroll_bars(scroller) {   $(scroller).fadeOut(); }

function cancelEvent(e) {   e = e ? e : window.event;   if(e.stopPropagation) e.stopPropagation();   if(e.preventDefault) e.preventDefault();   e.cancelBubble = true;   e.cancel = true;   e.returnValue = false;   return false; }