I have a simple WebGL code which displays a 3D graph. It works well but I would like to set a value for the width different from 100%; i.e I would like to put the webGL animation in a small box.
Below my code; I tried to put the WebGL into a 500px box with CSS "height" and "width" but it doesn't work : the animation still takes 100% of width :
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - trackball controls</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
.container {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<center><div id="container"></div></center>
<script src="three.js/build/three.min.js"></script>
<script src="three.js/examples/js/controls/TrackballControls.js"></script>
<script src="three.js/examples/js/Detector.js"></script>
<script src="three.js/examples/js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;
init();
animate();
function init() {
...
}
function onWindowResize() {
...
}
function animate() {
requestAnimationFrame( animate );
controls.update();
// For displaying
render();
}
function render() {
renderer.render( scene, camera );
stats.update();
}
</script>
</body>
</html>
How to circumvent this issue ?
Thanks
UPDATE 1 :
Ok sorry for the class-id confusion.
Concerning the div container, I am using appenChild in WebGL code to add a renderer domElement.
With the following code :
<html lang="en">
<head>
<title>three.js webgl - trackball controls</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
#container {
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="three.js/build/three.min.js"></script>
<script src="three.js/examples/js/controls/TrackballControls.js"></script>
<script src="three.js/examples/js/Detector.js"></script>
<script src="three.js/examples/js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
...
</script>
</body>
</html>
I don't get a centered box with WebGL animation. The WebGL window is shifted on the right like this (width is set to 300 px) but it is not centered like I would.
PS: margin-left:auto and margin-right:auto don't seem to work for centering.
Thanks.
There are multiple issues with your html.
your container is defined in your css as a class, you have it in your html as an id
you have nothing in the div container
<center></center> is deprecated Use margin-left:auto; margin:right:auto; in your css.
Give that another go and see how you get on
1)
The canvas is still 100% of the page width because you probably have that set up in your onWindowResize function. In order for your canvas to be a certain size, you need to tell three.js that, not CSS.
To highlight, these couple lines are dependent on width and height:
camera = new THREE.PerspectiveCamera(50, width / height, 1, 10000);
renderer.setSize(width, height);
2)
You want to set margin-left: auto; margin-right: auto to the canvas if your container is truly a "container." Also, since canvas' display is by default inline, you need to use display: block.
See it in action: http://jsfiddle.net/60uzdyss/
Related
I want to make responsive page using react JS. I have some problems making it. I don't really know how media query CSS works, but for #media(max-width:1024) and #media(max-width:768px) sizes it works as I expected.
I guess for size #media (max-width:425px) will also work as where #media(max-width:768px) works. But apparently starting from #media(max-width:425px) it follows the previous breakpoint(#media(max-width:768px)) and #media(max-width:375px) following the #media(max-width:425px) style. At breakpoint 320px back to my expectations.
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
This is content
</div>
</body>
</html>
And this is my CSS code:
.container{
background-color: red;
height: 100vh;
}
#media(max-width:1024px){
.container{
background-color: yellow;
}
}
#media(max-width:768px){
.container{
background-color: green;
}
}
#media(max-width:425px){
.container{
background-color: blue;
}
}
#media(max-width:375px){
.container{
background-color: rosybrown;
}
}
#media(max-width:320px){
.container{
background-color: rosybrown;
}
}
Is there a way for each breakpoint to take its own style. As in max-width:1024px which takes a yellow background and max-width:768px takes a green background. Is it possible if I want if at max-width:425px it takes a blue background and at max-width:375 it takes a rosybrown color. Thank you in advance.
Try adding the only screen
#media(only screen and max-width:768px){
.container{
background-color: green;
}
}
I'm incredibly new to JavaScript, and honestly thought I had a solid plan-of-attack to make my logo smaller after scrolling from the top by 10px. The goal is to make the logo (normally 400px in width) get smaller (to 100px) upon scrolling down from the top.
Can anyone help me understand why this code isn't returning any visual response?
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="normalize.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--<div id="header">Header</div>-->
<div id="header">
<img id="header-image" src="logo-mockup.png">
</div>
<p>THIS IS ALL JUST FILLER TEXT RIGHT NOW.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The CSS:
#header {
background-color: #f1f1f1; /* Grey background */
padding: 30px 0px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font size */
font-weight: bold;
position: fixed; /* Fixed position - sit on top of the page */
top: 0;
width: 100%; /* Full width */
height:90px;
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
#header-image {
padding: 0px 10px; /* Some padding */
text-align: center;
top: 0;
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
p {
margin:300px;
}
And the JS:
function scrollFunction() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
document.getElementById("header-image").style.width = "100";
} else {
document.getElementById("header-image").style.width = "400";
}
}
You need to set up an eventListener that calls scrollFunction whenever the user scrolls the wheel.
A shortcut would be to just change <body> to <body onscroll="scrollFunction()">.
You could also set up an event listener in the javascript:
window.addEventListener("scroll", function(e) {
scrollFunction();
}
Your scrollFunction() in never called. You should add event listener for window scroll and remember to add the unit at the end for setting the width- in your case 'px'.
window.onscroll = function() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
document.getElementById("header").style.width = "100px";
} else {
document.getElementById("header").style.width = "400px";
}
}
I have this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
border: 1px solid red;
}
.container {
height: 500px;
width: 500px;
border: 1px solid green;
transform: scale(1.6);
position: relative;
left: 300px;
top: 150px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div class="container">
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</div>
</body>
</html>
It works perfect without transform: scale(1.6);. However, the #draggable moves faster than the mouse with the transform property. How can I make it draggable and scale the container to a value like 1.65? Is there any draggable option I'm supposed to use?
This can be solved by adjusting for the transform: scale(1.6). When the item is dragged, it uses it's position to adjust the top and left of the dragged item. With the scale(), these values are off and you will see the items movement move that same factor faster then the mouse.
x1 = x * 1.6;
y1 = y * 1.6;
To move with the mouse, we need to adjust this back to the same 1:1 (instead of 1:1.6) ratio. This can be done like so:
jQuery > Draggable > Drag Option
drag: function(e, ui) {
// Adjust for Scale
var myScale = parseFloat($('.container').css('transform').split(',')[3]);
var myTop = Math.round(ui.position.top / myScale);
var myLeft = Math.round(ui.position.left / myScale);
ui.position = {
top: myTop,
left: myLeft
};
}
FYI, $('.container').css('transform') will return: matrix(1.6, 0, 0, 1.6, 0, 0). See more: Get CSS transform property with jQuery
You could hard code 1.6 into your script, but I like to keep things portable. So if you change the CSS, you don't have to change this script. See more about setting position: http://api.jqueryui.com/draggable/#event-drag
Working Example: https://jsfiddle.net/Twisty/1gnehyum/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
text-align: center;
}
#prob {
background-color: #F00;
width: 300px;
text-align: center;
line-height: 200px;
display: inline-block;
vertical-align: middle;
}
#prob img {
width: 200px;
height: 150px;
display: inline;
vertical-align: middle;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var img = new Image();
img.src = 'http://galerijauspomena.net76.net/images/10042011744.jpg';
var div = $("#prob").get()[0];
alert($(window).height()); // First showing good height, but few px larger than a page
document.getElementById("cont").style.lineHeight = $(document).height() + 'px';
$(window).resize(
function(){
alert($(document).height()); // On resize down or up, its showing always bigger px, even on Firefox freeze browser!
document.getElementById("cont").style.lineHeight = $(document).height() + 'px';
}
);
div.appendChild(img);
});
</script>
</head>
<body>
<div id="cont"> <!-- nbsp in order to line-height to work. Is it any way without it? -->
<div id="prob"> </div>
</div>
</body>
</html>
After resizing, I found that computed height is always bigger, although I do resize down or up. Am I making some mistakes?
Also, on resize, Firefox freeze it self...
If I'm understanding what you're trying to do, you want to use $(window).height() and not document. The problem is that increasing the line-height would increase the size of the document, which would then increase the line-height, increasing the document size, etc. So it would just keep getting bigger and bigger.
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
position: absolute;
background-color: #ccffcc;
display: none;
height: 200px;
margin: 0 auto;
width: 200px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
}
//]]>
</script>
so when the user clicks it runs show() which places the css box on top. However i want it to be centered in the browser. I've set the margin: 0 auto; which should be doing the trick shouldnt it?
I'm just trying to create an overlay function without using jquery because it seems to be incompatible with my schools cms templates.
Thanks
Margin: 0 auto won't work on position absolute elements, they exist in their own little world, outside of normal flow. So in order to pull this off, you need to do an extra step. The CSS dead centre technique will work here.
Try setting the top and left attributes on your overlay.
Use % to set top and left position. Set css attribute top:10%; Left 40%;