WebApps learnings: Servlets and JSPs: June 2014

Wednesday, June 18, 2014

Showing an Image/Icon in place of html input type file Browse button

When we use html input type file component, we get a button and file text in the page, like below:

To show an icon/button/image in place of above content, we can use javascript and css.
Using CSS we show image and using javascript, we submit the form:

Files:

upload.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/css/fileUpload.css"/>
<script type="text/javascript" src="resources/js/fileUpload.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload File Demo</title>
</head>
<body>
    <form>
        <div class="upload">
            <input type="file" name="datafile"
                onchange="fileUpload(this.form,'upload.file','upload'); return false;" /></br>
        </div>
    </form>
</body>
</html>

fileUpload.css:
div.upload {
    background: url('../images/images.jpeg');
    background-repeat: no-repeat;
    background-size:50px 50px;
}

div.upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

fileUpload.js
function fileUpload(form, action_url, div_id) {
    // Create the iframe...
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "upload_iframe");
    iframe.setAttribute("name", "upload_iframe");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("border", "0");
    iframe.setAttribute("style", "width: 0; height: 0; border: none;");

    // Add to document...
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name = "upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event...
    var eventHandler = function() {

        if (iframeId.detachEvent)
            iframeId.detachEvent("onload", eventHandler);
        else
            iframeId.removeEventListener("load", eventHandler, false);

        // Message from server...
        if (iframeId.contentDocument) {
            content = iframeId.contentDocument.body.innerHTML;
        } else if (iframeId.contentWindow) {
            content = iframeId.contentWindow.document.body.innerHTML;
        } else if (iframeId.document) {
            content = iframeId.document.body.innerHTML;
        }

        document.getElementById(div_id).innerHTML = content;

        // Del the iframe...
        setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
    }

    if (iframeId.addEventListener)
        iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent)
        iframeId.attachEvent("onload", eventHandler);

    // Set properties of form...
    form.setAttribute("target", "upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("encoding", "multipart/form-data");

    // Submit the form...
    form.submit();
}

Monday, June 16, 2014

Navigation menu content switcher: html/jsp, css, javascript

Goal:
We have a flat navigation bar with menu options: Home, Careers, Contact Us.
When ever user clicks on any of these options, corresponding content has to be shown below.

It is achieved using simple javascript function.

Please find all the files content below:

1. switcher.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
    href="resources/css/SwitcherStyles.css" />
<script type="text/javascript" src="resources/js/SwitcherJs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Switcher Demo</title>
</head>
<body>
    <div>
        <ul>
            <li><a href="#" id="a1" onclick="changeMenu(this.id);">Home</a></li>
            <li><a href="#" id="a2" onclick="changeMenu(this.id);">Careers</a></li>
            <li><a href="#" id="a3" onclick="changeMenu(this.id);">Contact
                    Us</a></li>
        </ul>
    </div>
    <div id="div-home" style="display: block;">
        <p>
            This is the content related to <b>Home</b>
        </p>
    </div>
    <div id="div-careers" style="display: none;">
        <p>
            This is the content related to <b>Careers</b>
        </p>
    </div>
    <div id="div-contactus" style="display: none;">
        <p>
            This is the content related to <b>Contact Us</b>
        </p>
    </div>
</body>
</html>

2. Javascript: SwitcherJs.js

function changeMenu(id) {
    var homeDiv = document.getElementById("div-home");
    var careersDiv = document.getElementById("div-careers");
    var contactUsDiv = document.getElementById("div-contactus");

    if("a1" == id) {
        homeDiv.style.display = 'block';
        careersDiv.style.display = 'none';
        contactUsDiv.style.display = 'none';
    } else if("a2" == id) {
        homeDiv.style.display = 'none';
        careersDiv.style.display = 'block';
        contactUsDiv.style.display = 'none';
    } else if("a3" == id) {
        homeDiv.style.display = 'none';
        careersDiv.style.display = 'none';
        contactUsDiv.style.display = 'block';
    }
}

3. CSS: SwitcherStyles.css

li {
    display: inline;
    padding: 20px;
}

a {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
}

a:HOVER {
    color: #F90;
    background-color: #FFF;
}

ul {
    border: 1px solid;
    margin: 0px;
    padding: 8px 0px;
}

Demo Screenshots:

Monday, June 9, 2014

Showing icon for a web site: Using link tag in html page

We can show icon for a website in browser using link tag like below in the html page:

<link rel="SHORTCUT ICON" href="resources/images/icon.ico">

Include this line in the head section of the html page.

image extension must be .ico