NewFiveFour | Blog | Portfolio


Use html to order a border with a title around things

You can group items with a border in HTML using fieldset and you can also give that border a title using legend.

The title breaks the border briefly at the top.

Here’s an example which you can use to impress your friends, family, dogs, cats and potential parliamentary representatives.

<fieldset style="border: 1px dashed black">
  <legend>Ladies and gentlemen we are floating in space</legend>
  Sup
</fieldset>
css html

HTML, CSS: Make a div float in the middle of page

First make the position of the div fixed. We’ll place it at the bottom of our screen by setting the bottom to 5px.

We make it so the div starts from the middle of the screen by setting the left property to 50%.

But this won’t make it exactly in the middle of the screen, of course, since this mean it starts from the middle of the screen, not that its centre point is in the middle of the screen.

To properly centre the div use the transform property to move the div half its width to the left.

  <div
    style="position: fixed; bottom: 5px; left: 50%; transform: translateX(-50%);">
    I am centered. Rejoice.
  </div>
css html

A loading spinner for XMLHTTPRequest

Take this CSS which will show a loading spinner similar to iPhone’s. It takes up the entire background, and has 0.5 transparency.

#cover {
  background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center rgba(255, 255, 255, 0.5);
  position: absolute;
  height: 100%;
  width: 100%;
}

Now place the html below your holding div <div v-show="loading" id="cover"></div>.

The v-show is vuejs saying only show it when the loading variable is true. But you can turn it on and off however you please.

Let’s turn it on and off – via this.loading=true/false – in our XMLHTTPREQUEST.

I have a very simple reactive observe, onNext and onError. But simply we turn it just before we send the request and turn it off when we receive something back.

observe: function(receiver) {
  var xhttp = new XMLHttpRequest()
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) receiver.onNext(xhttp.response)
    else if(this.readyState ==4 && this.status!=200) receiver.onError(xhttp.statusText)
  }
  xhttp.open("GET", "https://whatever", true)
  xhttp.send()
  this.loading = true
},
onNext: function(pagination) {
  this.loading = false
  ...
},
onError: function(message) {
  this.loading = false
  ...
}
css javascript vuejs

Android: Detect a fling

If you want to detect a fling on a view, create a GestureDetector that for an argument takes a SimpleOnGestureListener.

final static GestureDetector.SimpleOnGestureListener simpleDetector = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        super.onFling(e1, e2, velocityX, velocityY);
        Log.d("HI", "on fling");
        return true; // If you've consumed it
    }
};
final static GestureDetector detector = new GestureDetector(simpleDetector);

It’s within these methods you calculate what kind of fling it is.

Within your onTouch event listener return with return detector.onTouchEvent(motionEvent);.

And make sure the view you’re listening on is clickable. And that should be it.

android android-fling

Android: Simple view dragging tutorial

Let’s say you’ve added a touch listener to a view. And in that listener you have a motionEvent.

Use this code to start dragging that view in onTouch.

if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
    ClipData data = ClipData.newPlainText("", "");
    View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(
            view);
    view.startDrag(data, shadowBuilder, view, 0);
    return true;
} else {
    return false;
}

The clipdata is the data passed to the drop area. And the shadowBuilder is what the view looks like when dragged.

There’s no drop area, but you can look that up.

android android-drag-drop

Page 1 of 78
Next