Skip to content

Instantly share code, notes, and snippets.

View rcmlee99's full-sized avatar

Roger Lee rcmlee99

  • Sydney, Australia
View GitHub Profile
@rcmlee99
rcmlee99 / Side-Menu-Exposed-On-Large-Viewport:-Nightly.markdown
Created March 25, 2015 05:29
Side Menu Exposed On Large Viewport: Nightly

Side Menu Exposed On Large Viewport: Nightly

Demo showing how to wire up a left side menu that stays exposed on large viewports.

A Pen by Ionic on CodePen.

License.

@rcmlee99
rcmlee99 / Flickr-Search-Example:-Nightly.markdown
Created March 25, 2015 05:26
Flickr Search Example: Nightly

Flickr Search Example: Nightly

Demo of loading images using the Flickr API with Ionic.

A Pen by Ionic on CodePen.

License.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>jQuery Mobile - iScroll - Flickr JSON</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
# First verify the version of Java being used is not SunJSK.
java -version
# Get the latest Sun Java SDK from Oracle http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u1-download-513651.html
wget http://download.oracle.com/otn-pub/java/jdk/7u1-b08/jdk-7u1-linux-i586.rpm
# Rename the file downloaded, just to be nice
mv jdk-7u1-linux-i586.rpm\?e\=1320265424\&h\=916f87354faed15fe652d9f76d64c844 jdk-7u1-linux-i586.rpm
# Install Java
.ul-inline-no-style() {
margin: 0px;
list-style: none;
.clearfix;
li {
float: left;
display: block;
}
}
.textShadowBlack(@shadow: 0 1px 0px rgba(0,0,0,1)) {
text-shadow: @shadow;
}
.textShadowWhite(@shadow: 0 1px 0px rgba(255,255,255,1)) {
text-shadow: @shadow;
}
// This is the mixin
.highlight(@backgroundColor, @textColor) {
::selection, -moz::selection {
background: @backgroundColor;
color: @textColor;
}
}
// This is how you use it
// the retina mixin. An example goes: .at2x(img/header@2x.png, 650px, 150px, top, left, no-repeat, scroll)
// Put the size that the image appears on a non-retina, e.g. if it's a 200px x 200px non-retina, that is the effective size. The @2x 400px x 400px is calculated automatically. The order to type it is width then height.
// A modification of the retina.js less mixin - https://github.com/imulus/retinajs
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(@path, @w: auto, @h: auto, @xpos: 0, @ypos: 0, @repeat: no-repeat, @attachment: scroll) {
background-image: url(@path);
background-position: @xpos @ypos;
background-repeat: @repeat;