Month: March 2015

  • Scaling Images to full screen in Unity

    First, you’d put the image into your scene and give it a name, in this case “mainStage”. Then in the code: float worldScreenHeight = Camera.main.orthographicSize * 2;         float worldScreenWidth = worldScreenHeight / Screen.height * Screen.width;         mainStage = GameObject.Find (“mainStage”);         SpriteRenderer sr = mainStage.GetComponent<SpriteRenderer>();         mainStage.transform.localScale = new Vector2(…

  • Displaying small height tables in Outlook 2013

    The other Outlooks look fine, but in 2013, when you try to make a short table/table cell it looks crap. The way to fix that is to set font-size to 1 and line-height to the height you want. <td height=”1″ bgcolor=”#cccccc” style=”font-size: 1px; line-height: 10px;”>&nbsp;</td>

  • Clear input field

    This code clears a text input field if it is the default text specified in the js. This can be used for things like search boxes or text fields in a form. To use it, add in the js: clearInput(“inputClass”,”defaultText”); where “inputClass” is the class of the text field and “defaultText” is the default text…

  • Responsive Tables bug fix

    I really like the solution to making tables responsive by Zurb Studios. It only really works for tables where the first column is consistent but for those it works really well. Only problem is there is a bug at around window size of 768px and also has some CSS issues. I’ve updated the js and…

  • Toggle Buttons

    To make a button toggle the visibility of things when clicked use: $(“.toggleBtn”).click(     function(event) {         event.preventDefault();         $(this).toggleClass(“current”);         var contentClass = $(this).attr(“href”).substring(1);         if (contentClass == “”) {             $(this).next().slideToggle();         } else {             $(“.” + contentClass).slideToggle();         }     } ); Then give a button the class of ‘toggleBtn’ and…

  • Using JS to mimic media queries

    Sometimes this is required. To do this use: var winSize = window.outerWidth; if(winSize === undefined){             winSize = $(window).width();         }         console.log(winSize);         if (winSize > 480) {             // change style for non-mobile         } else {            // change style for mobile         } View the demo Download the demo

  • Hide an element when clicking outside of it

    From http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it I used this for hiding a mobile navigation when tapping outside of it: $(document).mouseup(function (e) {     var container = $(“YOUR CONTAINER SELECTOR”);     if (!container.is(e.target) // if the target of the click isn’t the container…         && container.has(e.target).length === 0) // … nor a descendant of the container     {         container.hide();…

  • Hover and focus mixin using @content

    A simple mixin that ensures you add focus styling along with your hovers: SASS: @mixin hoverFocus { &:hover, &:focus { @content; } } /* example */ .defaultBtn{ @include hoverFocus{ text-decoration: none; } }  which then outputs to: .defaultBtn:hover, .defaultBtn:focus {  text−decoration: none; }

  • Making a page template in Drupal 7

    To make a new custom page template, first make a new custom content type. Then copy page.tpl.php from the modules/system/ folder into your theme folder and rename it to page–[content type machine name].tpl.php ( Note: If your machine name has any underscores they change to dashes in the file name. )Then make/open the template.php in…

  • Drupal 7 Basic Theming

    To make a sub theme, add a new folder with the name of your theme in sites/all/themes/[themename] In that folder you need a text file called [themename].info. In it you need basic info like name = [name that’s displayed in Drupal]base theme = [name of theme this is based off eg bootstrap]description = [more info…