geekmonster

Hello I'm having a of a time getting my image element aligned in the top right corner of my web application and everything I try fails. at the top (head) of the page I'm using a navbar and below that I have an input group. I'm trying to float right an image (which is my school logo) but no matter what I do. I cant get it to sit nica and square where i want it. I provided a screen shoot of the problems I'm having and included is a code snippet. Can somebody please tell me WTH I'm doing wrong here?

First part of code is NavBar and the second is input group. How would I set the logo by itself above the blue side panel where its supposed to be?

<nav class="navbar navbar-progress">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Existential Graph Editor</a>
        </div>
        <ul class="nav navbar-nav">
            <!--li class="active"><a href="#">Home</a></li-->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">File
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Edit
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
        </ul>
        <!--ul class="nav navbar-nav navbar-right">
            <!--li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li-->
            <!--img src="../images/uahLogo.png" class="img-rounded" -->
        <!--/ul-->
    </div>
</nav>
<form>
        <!--label class="label label-primary" for="drawType">Enter Expression (e, c, p, q):</label-->
    <div class="input-group">
        <input id="drawType" type="text" class="form-control" placeholder="Enter Expression" aria-describedby="basic-addon2">
        <span  class="input-group-addon" id="drawC" onclick="return OnClickDraw();">Submit</span>
        <span  class="input-group-addon" id="clear" onclick="return clearArea();">Clear</span>
        <span  class="input-group-addon" id="save">Save</span>
        <span  class="uahImg"><img src="../images/uahLogo.png" height="100"> </span>
    </div>
</form>

Hello

I'm trying to add a drag and drop event to my js/jquery code in which after my shape is rendered to the canvas I need to move the shape around by selecting it then dragging it into position. I'm not sure if I need to use jquery or just plain old javascript. I've been tinkering around with it but its not working for me. Can somebody give me a hint please?

function drawCircle(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(100, 75, 25, 0, 2 * Math.PI);
    ctx.stroke();
}

function clearArea() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    return false;
}

function drawEllipse(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI);
    ctx.stroke();

}

function drawP(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "12px serif";
    ctx.fillText("p", 50, 100);
}

function drawQ(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "12px serif";
    ctx.fillText("q", 50, 100);
}
function OnClickDraw() {
    var drawtype = $('#drawType').val().toLowerCase();
    switch(drawtype) {
        case 'c':
            drawCircle();
            break;
        case 'e':
            drawEllipse();
            break;
        case 'p':
            drawP();
            break;
        case 'q':
            drawQ();
            break;
    }
    return false;
}

As you can see I'm using jquery already in my switch statement...

One more question,

If I wanted to put this in a switch statement where I would only need one button do I need to eliminate the onclick functions in my HTML?

Thanks guys

@Foxy and @never scared

This code was just working b4 I went to work and when I came back two of my function arent working now. The circle and Ellipse functions render to the canvas but the other 2 won't and I can't figure out why.

Here's my code:

function drawCircle(){
   var canvas = document.getElementById("myCanvas");
   var radius = document.getElementById("getRadius").value;
   var ctx = canvas.getContext("2d");
   
   ctx.beginPath();
   ctx.arc(100, 75, radius, 0, 2 * Math.PI);
   ctx.stroke();
 }

function clearArea(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawEllipse(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
    ctx.stroke();

}

function drawP(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "48px serif";
    ctx.fillText("P", 50, 50);
}

function drawQ(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "48px serif";
    ctx.fillText("Q", 50, 50);
}

<!DOCTYPE html>
<html>
<head>
	<!-- meta tag goes here -->
	<title>EG_Editor</title>
</head>
<body>

<h1>EG_Editor</h1><em>SMAP UAH</em>

<!-- action - where the form send data to -->
<!-- method - what HTTP method (get/post) -->
<!-- content goes here -->

<form>
	<label for="getRadius">Expression:</label>
	<input id="getRadius" type="text" placeholder=" enter expression"/>
	<input type="button" id="drawC" value="Circle" onclick="drawCircle();"/>
	<input type="button" id="drawE" value="Ellipse" onclick="drawEllipse();"/>
	<input type="button" id="drawP" value="P" onclick="drawP();"/>
	<input type="button" id="drawQ" value="Q" onclick="drawQ();"/>
	<input type="button" id="clear" value="Clear" onclick="clearArea();"/>
	<br>
	<canvas id="myCanvas"></canvas>
	<script type="text/javascript" src="app.js"></script>
</form>


</body>
</html>

I mean it was just working. I wanted to add some css in order to space out the elements on the canvas but now I cant see two of them.

PLEASE HELP!!!