<!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.
Related
I have a question that was half answered by other posts like this:
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
or that:
Does overflow:hidden applied to <body> work on iPhone Safari?
The Question is about that overflow:hidden in iOS Safari and mobile Chrome is not working like I expected it.
overflow:hidden on the body works for Firefox. And if you try the code below that way in Firefox it is exactly how it should work.
So I already see, overflow:hidden is not working on the body for iOS Safari and the mobile Chrome – you have to wrap everything in a div below the body and give that an overflow:hidden. But this way unfortunately is not doing what I want, because it will ignore the JavaScript function scrollLeft.
Here is a quick description of what is supposed to happen:
You open the site. The body or wrapper will be seen half, cause it has a width:180%.
A jQuery code is scrolling the whole thing to {scrollLeft:(right)} where it supposed to stay. (at least on the x-axis)
Clicking the button should move the site to the left where also the site should stay. (on the x-axis / y-axis should be possible to scroll)
Maybe it is a bit complicated; feel free to copy the code if you want to try it yourself.
What I think the problem might be is that overflow:hidden gets overwritten or overwrites the JavaScript function.
Do anyone have an idea how to solve this problem?
Maybe another way to tell the browser to not scroll in the x-axis...
Here is my code:
<!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" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scroll test</title>
<style>
#charset "UTF-8";
:root {
--blue: #127296;
}
html {
height: 100%;
font-size: 20px
}
body {
margin: 0px;
overflow-x: hidden;
}
.wrapper {
/* overflow-x: hidden; */
}
.textfeld {
color: var(--blue);
padding: 30px 35px 150vh 35px;
}
.white {
color: white;
}
button {
border: none;
background: none;
font-size: 1em;
padding: 2px 5px 15px 5px;
align-self: center;
}
.eins {
grid-column: 1/ span 6;
}
.zwei {
grid-column: 7 / -1;
background-color: var(--blue);
}
#content {
width: 180%;
grid-template-columns: repeat(12, 1fr);
margin: 0px;
height: auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="content">
<div class="spalte eins fr">
<div class="textfeld content">
<button type="button" name="button" class="button_2">Click</button>
</div>
</div>
<div class="spalte zwei">
<div class="textfeld content de white">
<button type="button" name="button" class="button">Click</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var left = $(document).outerWidth() - $(window).width();
var right = $(window).width() - $(document).outerWidth();
$('body, html').scrollLeft(left);
$(".button").click(function() {
$('body, html').animate({
scrollLeft: (right)
}, 200);
console.log("click");
});
$(".button_2").click(function() {
$('body, html').animate({
scrollLeft: (left)
}, 200);
});
});
</script>
</html>
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/
I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at
jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/
You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);
I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;
I have am image on my page and i am changing its image source with java script.
All I need is to change this image with some beautiful sliding effect.
What I want is when i click on a button to change the image, the first image should disappear and another one should show in some some decent way (not like a jerk or blink)
You can put second image behind the first one, and then make fadeout() efect on the first image.
use this code
$(".firstimage_classname").fadeout();
$(".secondimage_classname").fadeIn();
you can give time interval as well.
otherwise try
$(".firstimage_classname").slideUp();
$(".secondimage_classname").fadeIn();
Try This Code
$(".YourClassSelector").fadeIn(1000).delay(2000).fadeOut(2000, function () {
var $next = $(this).attr('src','http://abc.com/logo.png');
});
Hope it would helps you.
Enjoy
Here you go example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Srtict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.front{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 10;
}
.back{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">
<img src="1.jpg" class="front" />
</div>
<script type="text/javascript">
$(function(){
$('.front').click(function(){
$('#content').append('<img src="2.jpg" class="back" />');
$(this).fadeOut(500, function(){
$('.front').remove();
$('.back').addClass('front').removeClass('back');
});
});
});
</script>
</body>
</html>
Safari: Works
Firefox: Weird floating issue on initial page load, works after browser resize
Chrome: End boxes jump around quickly when making window smaller
(have not tested other browsers)
Video displaying browser issues: http://tinypic.com/r/2gxo8w3/6
Full script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<style>
.box {
height: 250px;
background-color: #999;
float: left;
margin-right: 10px;
margin-top: 10px;
}
#boxes {
width: 100%;
overflow: auto;
}
.end-box {
margin-right: 0;
}
.top-box {
margin-top: 0;
}
</style>
<body>
<div id='boxes'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box'>7</div>
<div class='box'>8</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
columns = Math.floor($('#boxes').width()/225); //min box/column size (before spacing)
var spacing = ((columns - 1) * 10/$('#boxes').width())*100; //10px spacing between boxes
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');//removes margins
$('.box:nth-child(-n'+columns+')').addClass('top-box');
$(window).resize(function() {
columnsCheck = Math.floor($('#boxes').width()/225);
if(columns != columnsCheck) {
$('.end-box').removeClass('end-box');
$('.top-box').removeClass('top-box');
$('.box:nth-child('+columnsCheck+'n+0)').addClass('end-box');
}
columns = columnsCheck;
var spacing = ((columns - 1) * 10/$('#boxes').width())*100;
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');
$('.box:nth-child(-n'+columns+')').addClass('top-box');
});
</script>
</body>
</html>
How can I solve this issue (while maintaining 10px margins). I am also open to alternative methods of creating this effects via JavaScript/jQuery (trying to avoid pure CSS3).