Archives

Archives / 2014 / October

Bootstrap Image Carousel Fade Transition

Tuesday, October 28, 2014

No Comments

The built in image carousel animation for Bootstrap is a slide, which is nice, but I found this fade transition while Googling, and it seems to work well. I found it here on http://codepen.io/Rowno/pen/Afykb and it’s penned by Roland Warmerdam.

Html:

<div class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <img class="img-rounded" src="..." alt="...">
        </div>
        <div class="item">
            <img class="img-rounded" src="..." alt="...">
        </div>
        <div class="item">
            <img class="img-rounded" src="..." alt="...">
        </div>
    </div>
</div>

Css (less):

.carousel-fade {
    .carousel-inner {
        .item {
            opacity: 0;
            -moz-transition-property: opacity;
            -o-transition-property: opacity;
            -webkit-transition-property: opacity;
            transition-property: opacity;
        }

        .active {
            opacity: 1;
        }

        .active.left,
        .active.right {
            left: 0;
            opacity: 0;
            z-index: 1;
        }

        .next.left,
        .prev.right {
            opacity: 1;
        }
    }

    .carousel-control {
        z-index: 2;
    }
}

Formatting File Upload Input with Bootstrap

Friday, October 24, 2014

Bootstrap

1 Comment

If you’re using file upload forms in your Bootstrap themed website and would like to format the button and the field nicely, take a peek at this article by Cory LaViska. He nails it.

A small example which produces an input-group like this (“Fil” means file in Swedish):

<div class="editor-label">
    <label>Fil</label>
    <div class="input-group">
        <span class="input-group-btn">
            <span class=" btn btn-default btn-file">
                välj fil... <input type="file" name="data" id="data">
            </span>
        </span>
        <input type="text" id="valdfil" class="form-control" readonly />
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $(document).on('change', '.btn-file :file', function () {
            var input = $(this),
                numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label]);
        });

        $('.btn-file :file').on('fileselect', function (event, numFiles, label) {
            console.log(numFiles);
            console.log(label);
            $("#valdfil").val(label);
        });
    });

</script>

You must also add these CSS lines:

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Using FontAwesome in Universal Apps

Tuesday, October 14, 2014
Universal Apps FontAwesome
No Comments

Want to use FontAwesome in Universal Apps (both Windows Phone & Windows 8.1). The procedure is similar to how you do it for WPF:

1) Install-Package FontAwesome

2) Mark the file /fonts/fontawesome-webfont.ttf with “Build Action” set to “Content” (not “Resource”)

3) Try out the font like this in a sample Windows Phone main page:
```
<Viewbox>
    <TextBlock Text="&#xf09b;"                 FontFamily="fonts/fontawesome-webfont.ttf#FontAwesome" />
</Viewbox>
```
And you should see:

Note that the steps and syntax is a bit different from how you do it in WPF.
Using FontAwesome in WPF

Tuesday, October 14, 2014
WPF FontAwesome
No Comments

Want to use FontAwesome (http://fontawesome.io/) in your WPF application? With a few simple steps you can do it.

1) Use Nuget and Install-Package FontAwesome

2) Mark the file /fonts/fontawesome-webfont.ttf and set it’s “Build Action” to “Resource”

3) Test the font in a simple TextBlock like this:
```
<Window x:Class="FontAwesomeWPFBlogTest.MainWindow"         
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         
    Title="MainWindow"         
    Height="350"         
Width="525">
    <Grid>
        <Viewbox>
            <TextBlock Text="&#xf09b;"
                        FontFamily="pack://application:,,,/fonts/#FontAwesome" />
        </Viewbox>
    </Grid>
</Window>
```
Run it and you should see this:

The “hardest” thing is to make sure you enter the right icon-hexcode for the Text property. You can look at the different icons available in the icon-gallery page on http://fontawesome.io/icons/ then check the name of the icon you like. After that, go to the /Contents/font-awesome.css file in your project and look it up there, say for example the paint-brush icon:
```
.fa-paint-brush:before {   content: "\f1fc";
}
```
The content-value says “\f1fc” which is the hex value of the paint-brush symbol in the font and that is the value you have to enter in the Text-property in your XAML:

Text=”&#f1fc;”