Category: Work
-
Full screen web pages (or modals) on iOS Safari
—
in WorkBecause the top and bottom bars on iOS Safari slides up and down when scrolling, I was having some difficulty coding a full-screen page for it. $(window).height() on only gets the initial height upon page load, which includes the full header and footer bars. $(window).resize() wasn’t triggering when I scroll, either. I ended up finding…
-
WordPress Development with Roots (Bootstrap, SASS/LESS) and Grunt
—
in WorkRequirements XCode Git (easy via Homebrew) node.js – http://nodejs.org/download/ or https://github.com/joyent/node/wiki/installation SASS – http://sass-lang.com/install LESS – http://lesscss.org/ GruntJS – http://gruntjs.com/getting-started Grunt Plugins SASS – https://github.com/gruntjs/grunt-contrib-sass CSSmin – https://github.com/gruntjs/grunt-contrib-cssmin Watch – https://github.com/gruntjs/grunt-contrib-watch Uglify (for compiling JS files) – https://github.com/gruntjs/grunt-contrib-uglify Example: npm install grunt –save-dev npm install grunt-contrib-uglify –save-dev Use with SublimeText For a faster…
-
the little things I learned today about Android/Cordova/PhoneGap
For work, I had to help test a cordova iOS app and port it for Android. For some reason, the usual deviceready code wasn’t working: if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { // is on PhoneGap $(function() { document.addEventListener(“deviceready”, deviceIsReady, false); }); } else { // not on PhoneGap } Instead, this worked: if ( window.device ) { document.addEventListener(“deviceready”,…
-
Beginner front-end resources for HTML5 mobile/web apps
—
in WorkI’ve been doing front-end code for a Cordova/PhoneGap app. Despite the whole debate on Native vs. HTML5/hybrid, there are just some projects wherein I have no say when it comes to the client’s preferred language to use (I agree that 100% Native code is better, but like I said, the decision isn’t mine to make).…
-
un-fixing the position of the navbar in mobile view on Bootstrap with CSS and jQuery
—
in WorkThe floating navbar on responsive/mobile Bootstrap templates has a fixed position. But when the menu becomes longer, I needed to make it ‘relative’ in position so that the person can scroll down the items to see the other links. jQuery function mobile_header() { /* on mobile, opening the menu scrolls to top and removed the…
-
no longer the first day of september
—
in WorkIt’s sort-of the start of September, and I may have not done everything I said I wanted to do back in July, but this week has been a week of learning new things, so time hasn’t been completely wasted. I managed to try out and install Jekyll, and I’m still evaluating how convenient it is…
-
Supporting IE8 with Foundation by ZURB
—
in WorkSince I’m using Foundation 4 for Save22, and they’ve pulled the plug on IE8 (and lower) support, here are some incredibly useful codes on Git that you’ll probably need if you want it to work properly in IE. Just note that without these fixes, IE8 will render the website’s mobile layout instead of the desktop…
-
the zero (or negative) height problem of elements inside an initially hidden container
—
in Workphew, that was a long title. But it took me a while to figure out too. basically, I was working on creating a grid with list elements having the same height. I had done this before on Save22’s older version, and had made a function for it: function same_height(container) { var items_height = []; $(container).each(function()…
-
bootstrap: two toggle buttons on the nav bar
—
in WorkProblem: Both menus on the mobile version collapses when the buttons are pressed. You only want one menu to unfold at a time. Found a fix here: http://jsfiddle.net/gNUEx/ Modified the code a bit: var navbar = $(‘.navbar’); navbar.on(‘click’, ‘[data-toggle=”collapse”]’, function(event){ var $target = $($(this).data(‘target’)); if(!$target.hasClass(‘in’)) $(‘.container .in’).removeClass(‘in’).height(0); })