How to align text and buttons next to canvas (WebGL + JavaScript + CSS) - javascript

I have a webpage with a canvas for implementing graphics rendering, and would like to align some text and buttons to the left of it. My HTML code is as follows:
<body onload="webGLStart();">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</body>
So what I want to align to the left is everything in the 'controls' class. Currently it is being displayed below the canvas on a new line. I want it to be aligned to the left starting on the same line as the canvas, with the canvas remaining centered.
I am using a stylesheet and would like to know how to implement this using css.
My site can be seen here. It is the Controls section I want to move up towards the top of the page.
Any help would be much appreciated, thank you.

I would suggest you wrap it all in a wrapper div which is centered and has position relative. Then you can position the controls absolute like this:
<div class="wrapper" style="margin: 0 auto; width: 800px; position: relative;">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls" style="position: absolute; top:0; left:0;">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</div>

Here is a makeshift answer. I would use bootstrap for positioning though.
You can use bootstrap.
JSFiddle
is that what you are looking for? use col-sm-{x/12} to size and resize your positions.

Related

How to Draw a Rectangle 10cmx10cm on any Screen Device

Whatever the screen resolution recthangle renders 10cmx10cm on screen.
That means that if you take a ruler then you measure 10cmx10cm.
Can you do it with pure HTML and CSS or do you need javascript code also?
CSS actually supports centimeter units, just like pixels or percentages.
So you can just use :
#your-rectangle {
width: 10cm;
height: 10cm;
}
<hr style="border:1px red solid;width: 10cm;height: 10cm;">
<hr style="border:1px red solid;width: 10cm;height: 10cm;">

Transparent image always on top of Canvas. Draw behind transparent image

Here is my jsfiddle:
Im looking for 2 things:
i always want the transparent image: "https://s23.postimg.org/c3u19aeqz/bmap_Front.gif" to be on top of the drawing/canvas. Lets call it layer foreground (lfg). This image should never be overpainted.
When i save my drawing as image. I only want to save the "drawings" that were drawn underneath the image. This means saving everything except the transparent image.
I tried "playing" with:
ctx.globalCompositeOperation = "source-over";
ctx.globalCompositeOperation = "destination-over";
and
<div id="LayerTown" class="containerChild" style="position: relative;">
<canvas id="canvas" style="position: absolute; left: 0; top: 0; z-index: 0;">
Update your browser
</canvas>
<img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; left: 0; top: 0; z-index: 1;">
</div>
So far nothing has helped me. Since im very new to html/css/js please consider alterating my fiddle if you want to help me, because i have a hard time understanding what i should do, if its just a command line.
Doing what you said in the OP, adding a image element on top of the canvas is the way to go. By adding the CSS rule "pointer-events:none" you will be able to right click the canvas through the image and saving only what's on the canvas.
<div id="LayerTown" class="containerChild" style="position: relative;">
<canvas id="canvas" style="position: absolute;">
Update your browser
</canvas>
<img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; pointer-events: none;">
</div>
You will also have to remove the addImg2Canvas() function from the script as we no longer want to draw the image on the canvas.

Usage of pointer-events:none; with HTML CANVAS

in my web page , I need to display the google map. But my web page also contains canvas elements.
Now if I make the z:index of canvas higher than map I cannot zoom in or pan to left/right.
If i make the z:index of map higher than canvas element,it covers the whole of page as a result i can not see the triangle drawn through the canvas.
I used the css property pointer-events:none; but it only works properly in chrome,and in Mozilla (to good extent). But IE (10) is not using supporting it.
How do I achieve the same .i.e zoom and pan in IE as well.
This is the hmtl part
<section id="intro3" data-navigation-tag="Plan" style="display: block; background-position: 50% 44.866px;">
<canvas id="amenitycanvas" style="display:none;z-index:2;pointer-events:none;"></canvas>
<div id="link" style="position:absolute;">
LOCATION<br>
</div>
<div class="image-display" id="displaylocate" style=" width:100%; height:100%;right:0%;top:0%;position:absolute;display:none;z-index:1;">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.co.in/maps?t=m&q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&ie=UTF8&hq=&hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&z=14&ll=19.104093,72.840396&output=embed"></iframe><br /><small>View in Google Map</small>
</div>
</section>
and the javascript
function HideAndShowFunc(name)
{
if(name=="LOCATION")
{
$("#intro3canvas").hide();
$("#intro3logo50").hide();
$("#essence-luxury").hide();
$("#displayamenity").hide();
$("#projlogodiv").hide();
$("#link").hide();
$("#intro3Ongoing").hide();
$("#intro3Upgoing").hide();
$("#intro3Completed").hide();
$("#arrow").hide();
$("#table-frame").hide();
$("#intro3bg").hide();
$("#amenitycanvas").show();
$("#displaylocate").show();
}
}
You should try Hand.js. It's polyfill for pointer-events and this article might be help you to use Hand.js

How Can I Position a Clickable Image to Top of Browser in jQuery

Obviously I am a novice coder :( This seems like it should be easy, but I can't figure it out.
CSS
div {
display: none;
}
BODY
<div id="div" style="width:100%;height:1750px;z-index:1;">
<iframe src="mypage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
</div>
<iframe src="http://www.website.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
jQuery
$('#hover').mouseenter(function() {
$('#div').show();
}).click(function(e) {
e.preventDefault();
$('#div').hide();
});
This webpage code displays the clickable image "30x1800clear.gif" at the top of the page that opens the "mypage.html" iframe content on hover and closes the ifame content on clicking the image. Which is exactly what I want it to do.
I want the image to stay fixed at the top of the page on scroll. If I try to use ANY styling at all, or surround the code in a DIV with any position styling the image disappears completely.
Can someone show me how to make the image stay fixed at the top of the browser window on scrolling the page?
add position is fixed to image tag. like this
<img src="30x1800clear.gif" width="100%" height="20px" border="0" alt="" style="position: fixed;">
There are several issues here:
You have a div with id div. This is very confusing, so lets change the id to mydiv. In your css, you apply your display:none to div, so to all divs. I guess you want to apply it only to the div in question, so yo should change it to:
#mydiv {
display: none;
}
You're mixing inline style and separate file for the same element, so let's combine everything into the css file:
#mydiv {
width:100%;
height:1750px;
z-index:1;
}
And the first line of your html becomes:
<div id="mydiv">
Now, for the real question: You want to fix the position of the image to the top. Let's add this lines to the #mydiv css block:
position: fixed;
top: 4px; /* You can change this to any number of pixels you want, including 0 */
left: 4px; /* Same thing */

How to let user move an image into div to make a preview

i have
<div id="logo" style="border: 3px coral solid;position:absolute;left:160px;top:35px;width:140px; height:100px; z-index:5">
<img src="img.png" ></img>
</div>
img.png is bigger then div dimension so it will be shown outside div.
i have to show just a piece of image inside that div, so in x from 0 to 140px and in y from 0 to 100px. and i have to let user move image to center only the part that him want. can you help me? can i use some jquery script to do this?
SOLVED USING jqueryui.com/demos/draggable

Categories