Tag Archives: HTML

HTML

Avoiding Wrapper Divs in ReactJs

Hi everyone,

Just a quick post on how you can avoid wrapper divs in ReactJs. It’s particularly useful when populating tables or creating parts of a larger component. Instead of the following:

return (
  
Frogs Turtles
);

You can use fragments:

import React, { Fragment } from 'react'
...
return (
  
    Frogs
    Turtles
  
);

The fragment won’t polute the dom and mean that you don’t need to add any additional styling. Check out these links for more info:
https://reactjs.org/docs/fragments.html
https://stackoverflow.com/a/49375945/522859
https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Advertisements

How to Add a FontAwesome Icon using :after

Hey everyone,

Just a quick post on how to add a fontawesome icon using :after:


.fl-cart-product-price:after{
content: 'f00d';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0px 0px 0px 10px;
color: #555;
font-size: 85%;
text-decoration: none;
}

See this stackoverflow post for more info: http://stackoverflow.com/a/18793584/522859

Dragging a File from File Explorer Causes Google Chrome to Crash

Hey everyone,

A team member found an interesting bug today that caused chrome to go non-responsive. The cause was simply dragging a file from the file explorer onto a drag and drop upload area. It is reproducible on every site I’ve tested, including Gmail and Dropbox.

Reproduce

  • Go to https://mail.google.com
  • Click compose
  • Click attach files (close any of the annoying popups that appear)
  • DRAG a number of files from the file selector window to the new message screen (they will start to upload) (IMPORTANT: these need to be dragged from the file selector popup, NOT a new explorer window)
  • While they are still uploading hit cancel on the file browser window. Browser will go non-responsive

A bug has been reported here: https://code.google.com/p/chromium/issues/detail?id=388661

Random Class Directive – AngularJS

Hey everyone,

Just another small directive. This one adds a random class from the provided array to the element.

Check out this fiddle to see the demo: http://jsfiddle.net/uvSVj/3/

Random Background Directive

Random Background Directive

I used this directive to add a random background to each of my wrapper divs:

Random Background Real World Usage

To use it in your app simply define a list of classes in your controller:

app.controller("MyCtrl", function MyCtrl($scope) {
    
    /* A random class is picked from this list */
    $scope.classes = [
        //"bg-buildings",
        "red",
        "blue",
        "yellow",
        "green",
        "orange",
        "black",
        "purple"
    ];        
});

Then add the directive to your page (can be an existing element):

A random class will then be selected from the list and appended to the elements current list of classes (if any).

The easiest way to see how it’s done is probably just to check out the fiddle above, but there’s a code dump below if you need it:

The Random Class Directive

app.directive("ngRandomClass", function () {
    return {
        restrict: 'EA',
        replace: false,
        scope: {
            ngClasses: "="
        },
        link: function (scope, elem, attr) {            

            //Add random background class to selected element
            elem.addClass(scope.ngClasses[Math.floor(Math.random() * (scope.ngClasses.length))]);
        }
    }
});

Sample Html

Random Class Directive

www.whatibroke.com

Sample JS

/* 
    http://www.whatibroke.com/?p=899
    Adds a random class to element
    Usage: add ng-random-class to element
*/

var app = angular.module('myApp', []);

app.controller("MyCtrl", function MyCtrl($scope) {
    
    /* A random class is picked from this list */
    $scope.classes = [
        //"bg-buildings",
        "red",
        "blue",
        "yellow",
        "green",
        "orange",
        "black",
        "purple"
    ];        
});

Sample Styles

/* Just a demo div */
.test{
    width: 50px;
    height: 50px;
    margin: 10px;
    padding: 5px;
    float: left;   
    -webkit-transition: 400ms linear all;
	-moz-transition: 400ms linear all;
	-ms-transition: 400ms linear all;
	-o-transition: 400ms linear all;
	transition: 400ms linear all;
    cursor: pointer;
    border-radius: 10px;    
}

.test:hover{
    opacity: 0.8;    
}

body{
	background-color: #F0F0F0;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: #363636;
    text-align: center;
    vertical-align: middle;
}

/* Random classes */
.red {
    background-color: red !important;
    height: 75px;
    width: 75px;
}

.blue {
    background-color: blue !important;
    height: 40px;
    width: 40px;
}

.yellow {
    background-color: yellow !important;
    height: 20px;
    width: 20px;
}

.green {
    background-color: green !important;
    height: 63px;
    width: 63px;
}
.purple {
    background-color: purple !important;
    height: 82px;
    width: 82px;
}
.black {
    background-color: black !important;
    height: 29px;
    width: 29px;
}
.orange {
    background-color: orange !important;
    width: 42px;
    height: 42px;
}

Let me know if you run into any issues and feel free to use/change however you want.

Forcing a Link to Behave Normally – AngularJS

Hey everyone,

Another quick post. Working with AngularJS this morning I had a need for a link to redirect to a login page that was not contained within the “angular” part of the app. Unfortunately Angular was overriding the behavior and trying to route it.

The solution is fairly easy for this, simply add a target attribute:



Sign In


Sign In

There are a few other solutions depending on your use case, check out the following StackOverflow post for more info: http://stackoverflow.com/a/16838013/522859

ng-class with ng-repeat – AngularJS

Hey everyone,

Just another quick AngularJS post. This one is for using ng-class with ng-repeat. The goal here is to have a class applied to the non-selected elements. To start with, we’ll chuck the following in our controller:

$scope.transmission = {
selected: null,
options: [
{
name: 'Any'
},			
{	
name: 'Manual'
},			
{
name: 'Automatic'
}			
]
};

Here we’re just creating a few random objects. To keep things simple we’re going with transmission types: a manual car, automatic or any. Next you’ll want to add the markup:

...
{{option.name}}
...

Finally the class to be applied:

.line-through{
	text-decoration: line-through;
}

Creating a ‘Starts With’ Filter in AngularJs

Hey everyone,

Just a quick post on how to create a simply custom filter in AngularJS. We’ll be using the same regions objects as the other day:

{
	"regions": [
		{
			"id": "1",
			"postcode": "4700",
			"name": "Rockhampton",
			"description": "One of the major cities in Central Queensland."
		},
		{
			"id": "16",
			"postcode": "4214",
			"name": "Keppel Island",
			"description": "Awesome islands, very few people, heaps of fish beautiful clear water."
		}
	]
}

We’ll create the filter like so:

app.filter('regionsWithPostcode', function(){
	return function(regions, postcode){

		//Create vars
		var matching_regions = [];		

		//Check if input matches current postcode
		if(regions && postcode){		 	
		 	
		 	//Loop through each region
			for(var i = 0; i < regions.length; i++){
				if(regions[i].postcode.substr(0, postcode.length) == postcode){
					matching_regions.push(regions[i]);
				}
			}

			//Return matching regions
			return matching_regions;
		}
		else{
			return regions;
		}		
	}
});

And finally, we’ll setup the HTML as follows:

	
Use Postcode
{{region.name}}