CSS, Web Development

Responsive images via background-size

As I was doing some image uploading work on a project recently I decided to understand, truly, if, for image post-processing, I should resize and cut corners off to keep ratio or thumbnail and keep the independent size of the image, but risk making it difficult to put into the page.

As an example, I have an image of 700px x 418px. I have a choice between cutting it down to 400px x 400px, cutting off 300px or bringing it down to about 400px x 238px and make it more difficult to add to a Bootstrap powered gallery.

So, I looked at what Facebook did here and I noticed they actually use the 400×238 image as a background image and then used background-size:cover to fix any problems. Fortunately, despite what caniuse.com (http://caniuse.com/#feat=background-img-opts) says, background-size is supported in IE8 (I actually got a Windows 7 VM with IE8 on it from modern.ie and tested it) but, with no content, the media queries for resizing the columns could not function right.

So I need something to tell both IE8 and later browsers how to size this image.

The CSS solution at this link works perfect: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images

In short, here is the post summarised:

<div style="width: 400px">
    <span id="image">
        <span id="image-inner">
        </span>
    </span>
</div>

#image {
    display: inline-block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(image.jpg); 
}


#image-inner {
    display: block;
    height: 0;
    padding-top: 63.3%;
}
Advertisements
CSS

Consistent CSS Buttons in Browsers

This CSS will allow for buttons to show the same in IE7 as they do in Firefox 3.6 and other standards compliant browsers. From what I know Facebook, Youtube, and Google all use this trick to display consistent buttons. Enjoy :).

span.primaryOuter {
    border-bottom: 1px solid #E7E7E7;
    border-right: 1px solid #E7E7E7;
    margin: 3px 0 4px 4px;
    height: 32px;
    position: relative;
    z-index: 100;
    display: inline-block;
}

span.primaryInner {
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #CCCCCC #999999 #999999 #CCCCCC;
    border-right: 1px solid #999999;
    border-style: solid;
    border-width: 1px;
    height: 30px;
    display: inline-block;
}

span.primaryInner input {
    background-position: center bottom;
    background-image: url("/images/bigButtonBack.png");
    border: medium none;
    color: #000000;
    cursor: pointer;
    font: 15px arial, sans-serif;
    height: 30px;
    margin: 0;
    vertical-align: top;
    padding: 0 6px;
    width: auto;
    overflow: visible;
}

span.primaryInner input:active {
    background: none repeat scroll 0 0 #CCCCCC;
}
CSS, Javascript, jQuery

Facebook Top Bar/Bottom Bar Sticky Navigation Bar

This snippet shows you how to make a Facebook bottom bar like they used to have before the latest redesign.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Facebook Navigation Example</title>

    <script>
        // This is the JavaScript that controls the menu
        var SubMenutimer;
        var last_o;

        $(".mainbar").ready(function () {
            $(".staticMenu dt a").click(function () {

                $(".staticMenu dd ul").not($(this).parents(".staticMenu").find("ul")).hide();
                $(".staticMenu dt a").not($(this)).removeClass("selected");
                $(this).parents(".staticMenu").find("ul").toggle();

                if ($(this).parents(".staticMenu").find("ul").css("display") == "none") {
                    $(this).removeClass("selected");
                } else {
                    $(this).addClass("selected");
                }

            });

            $(".staticMenu dd ul li a").click(function () {
                var text = $(this).html();
                $(".staticMenu dt a span").html(text);
                $(".staticMenu dd ul").hide();
            });

            $(document).bind('click', function (e) {
                var $clicked = $(e.target);
                if (!$clicked.parents().hasClass("staticMenu")) {
                    $(".staticMenu dd ul").hide();
                    $(".staticMenu dt a").removeClass("selected");
                }

            });
        });

        function openSubMenu(o) {
            cancelSubMenuClose();

            if (last_o) $(last_o).parent().find("div").hide();

            last_o = o;
            $(o).parent().find("div").show();
        }

        function closeSubMenu() {
            SubMenutimer = setTimeout("close()", 500);
        }

        function cancelSubMenuClose() {
            clearTimeout(SubMenutimer);
        }

        function close() {
            $(last_o).parent().find("div").hide();
        }
    </script>

    <style>
        div.mainbar {
            top: 0;
            z-index: 99;
            padding: 0;
            position: fixed;
            width: 100%;
        }

        div.mainbarInner {
            background: url(/images/pre_top.png);
            border: 1px solid #bcb6aa;
            border-top: 0;
            border-bottom: 0;
            margin: 0 15px;
        }

        ul.mainMenu {
            list-style: none;

        }

        ul.mainMenu li {
            float: left;
            border-right: 1px solid #bcb6aa;
        }

        .mainMenu li a {
            padding: 5px 4px 5px 4px;
            margin-bottom: 1px;
            display: block;
            font-weight: bold;
            color: #444444;
            line-height: 15px;
            text-decoration: none;
        }

        .mainMenu li a:hover {
            background: white;
            text-decoration: none;
        }

        .staticMenu dl {
        }

        .staticMenu dd {
            position: relative;
        }

        /* DT styles for sliding doors */
        .staticMenu dt a {
            padding: 5px 4px 5px 4px;
            margin-bottom: 1px;
            display: block;
            font-weight: bold;
            color: #444444;
            line-height: 15px;
            text-decoration: none;
        }

        .staticMenu dt a.selected {
            background: white;
            position: relative;
            z-index: 99;
            padding-bottom: 6px;
        }

        /* UL styles */
        .staticMenu dd ul {
            display: none;
            list-style: none;
            position: absolute;
            cursor: pointer;
        }

        ul.mainMenuSub {
            position: absolute;
            top: -2px;
            left: -1px;
            padding: 2px;
            border: 1px solid #b4a291;
            background: white;
        }

        ul.mainMenuSub li {
            border: 0;
            width: 223px;
        }

        ul.mainMenuSub li.seperator {
            width: 223px;
            height: 2px;
            display: block;
            background: url(/images/mainmenusep.png) repeat-x;
            margin-bottom: 6px;
            margin-top: 4px;
            overflow: visible;
        }

        ul.mainMenuSub li a:link {
            display: block;
            font-weight: bold;
            text-align: left;
            overflow: hidden;
            padding: 2px 4px 3px 19px;
            color: #444444;
            text-decoration: none;
        }

        ul.mainMenuSub li a:hover {
            background: #444444;
            color: white;
            text-decoration: none;
        }

        ul.mainMenuSub li a img {

            border: 0;
        }

        ul.mainMenuSmall li {
            width: 173px;
        }

        div.mainMenuSubTwo {
            display: none;
            left: 220px;
            position: absolute;
            top: 3px;
            z-index: 99;
            background: white;
        }

        div.mainMenuSubTwo ul {
            border: 1px solid #b4a291;
            padding: 2px;
            background: white;
        }

        a.MainSubExpandable {
            background: white url(/images/mainmenuexpandable.png) no-repeat right top;
        }

        ul.mainMenuSub li a.MainSubExpandable:hover {
            background: #444444 url(/images/mainmenuexpandable.png) no-repeat;
            background-position: right -20px;
        }
    </style>

</head>
<body>
    <div class="mainbar">
        <div class="mainbarInner" style="overflow:visible; position:relative; display:block; height:26px;">
            <ul class="mainMenu">
                <li>
                    <dl style="" class="staticMenu">
                        <dt><a href="/applications" onclick="return false;">Applications</a></dt>
                        <dd>
                            <ul class="mainMenuSub">
                                <li><a>There are no applications here</a></li>
                            </ul>
                        </dd>
                    </dl>
                </li>
                <li>
                    <dl style="" class="staticMenu">
                        <dt><a href="/places" onclick="return false;">Places</a></dt>
                        <dd>
                            <ul class="mainMenuSub">
                                <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Library</a>

                                    <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        <ul>
                                            <li><a href="#">Videos</a></li>
                                            <li><a href="#">Favourites</a></li>
                                            <li><a href="#">Playlists</a></li>
                                            <li><a href="#">Subscriptions</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="seperator"><!-- --></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Networks</a></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Groups</a></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Friends</a></li>
                                <li class="seperator"><!-- --></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Inbox</a></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Channel</a></li>
                            </ul>
                        </dd>
                    </dl>
                </li>
                <li>
                    <dl style="" class="staticMenu">
                        <dt><a href="/settings" onclick="return false;">Settings</a></dt>
                        <dd>
                            <ul class="mainMenuSub">
                                <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Preferences</a>
                                    <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        <ul>
                                            <li><a href="#">About Me</a></li>
                                            <li><a href="#">Appearence</a></li>
                                            <li><a href="#">Main Menu</a></li>
                                            <li><a href="#">Privacy</a></li>
                                            <li><a href="#">Notifications</a></li>
                                            <li><a href="#">Adverts</a></li>
                                            <li><a href="#">Safe Search</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Administration</a>
                                    <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        <ul>
                                            <li><a href="#">Block List</a></li>
                                            <li><a href="#">Parental Controls</a></li>
                                            <li><a href="#">Email Options</a></li>
                                            <li><a href="#">Username</a></li>
                                            <li><a href="#">Password</a></li>
                                            <li><a href="#">Payments</a></li>
                                            <li><a href="#">Linked Accounts</a></li>
                                            <li><a href="#">Security Question</a></li>
                                            <li><a href="#">Deactivate Account</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="seperator"><!-- --></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Help Center</a></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">About StageX</a></li>
                                <li class="seperator"><!-- --></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Developers</a></li>
                            </ul>
                        </dd>
                    </dl>
                </li>
            </ul>
            <div style='float:right;'>
                <ul class="mainMenu" style="float:right;">
                    <li style="border-right:0;">
                        <dl class="staticMenu">
                            <dt><a href="/settings" onclick="return false;">Sam</a></dt>
                            <dd>
                                <ul class="mainMenuSub" style="right:-1px; left:auto;">
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="A" style="cursor:pointer;">Available</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Busy</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Away</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Appear Offline</a></li>
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Log out</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Switch User</a></li>
                                </ul>
                            </dd>
                        </dl>
                    </li>
                </ul>
                <div class="notificationArea" style='float:right;'>
                    Notification Icons
                </div>
            </div>
        </div>
    </div>
</body>
</html>
CSS

CSS Overlaying

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Overlaying</title>

    <style>
        ul.thumbListLayoutBox {
            display: block;
            list-style-image: none;
            list-style-position: outside;
            list-style-type: none;
        }

        ul.thumbListLayoutBox li {
            float: left;
            height: 156px;
            margin: 10px 11px 11px;
            padding: 5px 5px 5px 0px;
            position: relative;
            width: 216px;
            z-index: 1;
        }

        .thumbOuter {
            display: block;
            position: relative;
            text-align: left;
            width: 218px;
        }

        a.thumbList {
            display: block;
            height: 120px;
            overflow: hidden;
            padding: 1px;
            position: relative;
            text-decoration: none;
            width: 214px;
            border: 2px solid #848486;
        }

        a.thumbList img {
            height: 120px;
            width: 214px;
            border: 0;
        }

        div.LowerBar {
            background: black;
            width: 100%;
            height: 18px;
            top: 102px;
            position: absolute;
            display: block;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            filter: alpha(opacity=50);
            opacity: .5;

        }

        div.LowerBarTop {
            border-top: 1px solid black;
            width: 100%;
            height: 18px;
            top: 102px;
            position: absolute;
            display: block;

        }

        div.LowerBarRate {
            height: 24px;
            right: 4px;
            top: 96px;
            position: absolute;
            display: block;

        }
    </style>

</head>
<body>
    <!-- this is the actual thumb div -->
    <div class="thumbOuter">
        <!-- link containing the image -->
        <a href="viewVideo" class="thumbList" >
            <img src="videoThumb" alt="videoTile">
        </a>
        <!-- backer transparent bar -->
        <div class="LowerBar"></div>
        <!-- writing on top of the bar -->
        <div class="LowerBarTop" style="color:white; padding-top:3px; padding-left:3px;">Length of Video</div>
        <div class="LowerBarRate" style="float:right;" id="rateInfo">
            <!-- post the thumbs up here -->
        </div>
    </div>
</body>
</html>

Example

Stage6 Video Thumb

Now, what I would like to draw your attention to is:

.thumbOuter {
    display: block;
    position: relative;
    text-align: left;
    width: 218px;
}

div.LowerBar {
    background: black;
    width: 100%;
    height: 18px;
    top: 102px;
    position: absolute;
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: .5;	
}

This code is the background for the lower bar shown in the picture. Notice how I use top to position the object whilst causing it to float over the video thumb by using position:relative on the bottom div and position:absolute on the top div. There, no need for z-indexs which will confuse IE. Enjoy :).

CSS, Javascript

Creating a JavaScript Overlay Window (Modal)

This tutorial will enable the reader to create CSS div overlay dialogues using JavaScript. This tutorial was taken from another blog, however, since I first visited the blog it has lost most of the tutorial. I had to revisit a previous revision of my website in order to know how to do this so I thought I would make a new post on my blog to keep the knowledge going.

Now, the main thing to understand is that there are extensions that will do this for you, however, I did not use these as they didn’t work… Yes, that’s right; they didn’t work (due to certain JavaScript methods and where the window was being called from) so I revived the home made way.

First thing’s first we need to create two divs, one to darken the screen and one for the dialogue. I should also mention this is easy to convert into a Facebook style message box if you simply make rounded corners for the divs (CSS can do it but only on some browsers and not many, this is how Facebook do it) and making the back dark div only a little bigger than the message window (add a padding or margin).

The first two divs look like this:

<style>
    .darkenBackground {
        background-color: rgb(0, 0, 0);
        opacity: 0.7; /* Safari, Opera */
        -moz-opacity:0.70; /* FireFox */
        filter: alpha(opacity=70); /* IE */
        z-index: 20;
        height: 100%;
        width: 100%;
        background-repeat:repeat;
        position:fixed;
        top: 0px;
        left: 0px;
    }

    .loginboxhover{
        z-index: 20;
        position:fixed;
    }
</style>

<div id="darkBackgroundLayer" class="darkenBackground" style="display:none;"></div>

<div id="exitConfirm_D" class="loginboxhover" style="display:none;" align="center">
    <div id="uploadconfirmleave" style="width:712px; z-index:1;">
        <div class="defaultContainerOuter">
            <h2 class="regTop" id="">Hey You! Yeah! You There!</h2>
            <div class="defaultContainerInner" style="text-align:left; padding:0;">
                <div style="padding-left:5px; padding-right:5px;">
                    <p>
                        This page is attempting to redirect away from itself to another page. In order to stop my servers from exploding this action will stop any files you are currently uploading.
                    </p>
                    <p>Are you sure you wish to navigate away from this page?</p>
                </div>
                <div style="background:#131313; border-top:1px solid #363636; padding:5px; padding-top:7px; color:#fff;">
                    <form action="usrcp.php?home">
                        <div align="right">
                            <input type="submit" value="Yes, Take Me There" class="button7" style="margin-right:3px;">
                            Or <a id="N_RtnUP" class="normalHyp" style="cursor:pointer;">
                                No, Take Me Back to The Uploads
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

As you will notice this has been taken directly from one of my scripts. The first div is darkBackgroundLayer, this is the one that darkens our screen. The second is exitConfirm_D which holds a lot of code. This is the message box. Everything within the main div is just for example reasons.

Now, what we need to do is a good old hide and show:

function ShowExitConfirmPanel(){

    document.getElementById("darkBackgroundLayer").style.display = "block";
    document.getElementById("exitConfirm_D").style.display = "block";

    var newsletter_panel = document.getElementById("exitConfirm_D");

    w = 700;
    h = 346;

    xc = Math.round((document.body.clientWidth/2)-(w/2));
    yc = Math.round((document.body.clientHeight/2)-(h/2));

    var height = yc.toString();
    var temp = height.split("-");

    newsletter_panel.style.left = xc + "px";
    newsletter_panel.style.top = "10" + "em";

}

And hey, presto! The function simply grabs the two divs by their ids, sets their display to block (from none) and then changes the height and position of the main message box to suit our needs.

To close the message box simply use:

function closeit(){
    document.getElementById("darkBackgroundLayer").style.display = "none";
    document.getElementById("exitConfirm_D").style.display = "none";

};