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!!!