Im having a little trouble with Firefox and perspectiveOrign. What i want is the origin to be controlled by mousemovement. So i calculate the percentages for origin, and set them like:
document.querySelector('parent').style.perspectiveOrigin = x% y%.
Logging the the value shows that perspectiveOrigin HAS changed but the interface just dosnt follow... or is very very very jaggy. I works like a charm in chrome and safari.
Is there something special i need to do to make Firefox update the UI with the values that it actually already has.
I made a little example here. the x/y percentages for origin is generated randomly onclick. I chrome - it will follow no matter how fast you are clicking, i Firefox - it follows if you click very slowly, but stops updating if you are clicking too fast.
(Im using Firefox Developer Ed. version: 104)
----After having posted this I ran the code-snippet below in the very same Firefox - and it works like it should. But running the EXACT same code from VSCode with LiveServer gives me the problem right away... Is there some polyfill active in the code runner - if so what polyfill?
<!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>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container {
display: inline-block;
border: 1px solid black;
perspective: 10px;
perspective-origin: 50% 50%;
width: 600px;
height: 500px;
}
div {
border: 1px solid red;
}
.layer1,
.layer2,
.layer3 {
position: absolute;
inset: 0;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="container" onclick="changeOrigin()">
<div class="layer1" style="transform: translateZ(-5px)"></div>
<div class="layer2" style="transform: translateZ(-15px)"></div>
<div class="layer3" style="transform: translateZ(-25px)"></div>
</div>
<script>
const myDiv = document.querySelector(".container");
function changeOrigin() {
console.log("in change origin");
x = Math.random() * 100 + "%";
y = Math.random() * 100 + "%";
myDiv.style.perspectiveOrigin = `${x} ${y}`;
}
</script>
</body>
</html>
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
I have a page that looks like this
The width of the datetimepicker that you see on the picture cant get any smaller.
So what happends when the width is over 1200 px and under about 1550 px is that the datepicker goes outside of its place like this:
When the width is 1550 px or over the width is wide enough to fit the datetimepicker
And when the width is below 1200 the responsiveness kicks in and makes the page look good like this
So what i need help with is how to set for the responsiveness to kick in att 1550 instead of 1200. Is this possible, if yes how?
you can also fix overflow content like this
.button-container {
padding-left: 0;
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-align: baseline;
align-items: baseline;
margin-bottom: 30px;
}
.button-container {
max-width: 300px;
}
.button-wrapper {
background-color: lightblue;
flex-shrink: 0;
}
.button-wrapper button{
padding:5px 15px;
border-radius:5px;
border:1px solid #000;
margin:10px;
}
.button-container::-webkit-scrollbar {
width: 2px;
height:8px;
}
button-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
background: #ff9b51;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
background: gray;
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-container">
<div class="button-wrapper">
<button type="button" class="btn-default">Range</button>
<button type="button" class="btn-default">Week</button>
<button type="button" class="btn-default">Month</button>
<button type="button" class="btn-default">Quarter</button>
<button type="button" class="btn-default">Year</button>
</div>
</div>
You can easily add custom 'breakpoints' to your css in the form of a media query.
#media only screen and (max-width: 1550px) {
// type your styles here
// set your content to be vertically aligned
}
Let me know if this helps :)
I'm experimenting with Wordpress and (the recent version of) dompdf at the moment and ran into an annoying problem regarding the formating.
My Problem: The top-margin of the main content seems not to be considered on the second page generated, resulting in an overlapping with my logo. You can view the generated PDF under this link.
The relevant code from which the PDF is generated reads as follows (it is not perfect yet as i want to resolve the issue first):
function ppt_pdf_output() {
// post-ID of referring page needed
$post=get_post($_POST['postid']);
$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
body {
margin: 30px 0 0 0;
font-family:sans-serif;
text-align:left;
}
img {
margin: 15px 0;
}
#header,
#footer {
position: fixed;
left: 0;
right: 0;
color: #aaa;
font-size: 0.9em;
line-height:1.2em;
}
#header {
top: -30px;
/*border-bottom: 0.1pt solid #aaa;*/
}
#footer {
bottom: 0;
border-top: 0.1pt solid #aaa;
}
#header table,
#footer table {
width: 100%;
border-collapse: collapse;
border: none;
text-align: center;
color: #000;
font-size: 24px;
}
.entry-content {
margin: 100px auto 35px auto;
top: 0; left: 0; bottom: 0; right: 0;
background-color: #d1d977;
width:90%; height:auto;
}
.entry-title {
font-size: 18px;
text-align: center;
}
#header td,
#footer td {
padding: 0;
width: 50%;
}
#footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
.gallery-item {
display:inline-block;
}
br[style] {
display:none;
}
.gallery + p {
clear:left;
}
</style>
</head>
<body><div id="header">
<table>
<tr>
<td>ANTRAG</td>
<td style="text-align: right;"><img src="path/to/logo.png" /></td>
</tr>
</table>
</div>
<div id="footer">
<div class="page-number"></div>
</div>';
$output .='
<!--<h1 class="entry-title">'. $post->post_title .'</h1>-->
<div class="entry-content">' .
apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';
return $output;
}
As you can see, the formatting on the first page is as it should be (or at least as I intended it to be), but after the page break the content area (for visualization reasons provided with a green background) just starts at the beginning of the page, regardless of which number I give the margin.
Has anybody an idea how to resolve this issue? I've been working on this for countless hours and just don't know what to do at this point.
Any help would be greatly appreciated.
Kind regards
Olli
UPDATE: Of course I found this solution only just. I will try this and see if I can get the issue resolved with this.
UPDATE2: Still no luck. I'm now stuck with the following code (the output can be found under the link provided earlier):
function ppt_pdf_output() {
// post-ID of referring page needed
$post=get_post($_POST['postid']);
$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
#page {
margin: 120px 50px 80px 50px;}
#header {
position: fixed;
top: -82px;
width: 100%;
height: 109px;
background: #aaa url("path/to/logo.png") no-repeat right;
}
#content {
width: 100%;
height: 85%;
background-color: #d1d977;
}
footer {
position: fixed;
bottom: -65px;
height: 30px;
background-color: #333399;
}
footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
br[style] {
display:none;
}
</style>
</head>
<body><div id="header">
<h2>ANTRAG</h2>
</div>
<footer>
<div class="page-number"></div>
</footer>';
$output .='<h1>'. $post->post_title .'</h1>
<div id="content">' .
apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';
return $output;
}
It seems just so fragile. For example, as soon as I change the font-size of the h1 element, it gets overlapped by the logo. After the page break, it looks okay, but that just seems an coincidence - as soon as I change the font-size or the text, the text again gets overlapped. Will absolute positioning change anything or do you have any other tipps as how to resolve this anoying issue? Margins of any kind don't seem to work either.
You're on the right track. As you've seen, when an element is split across pages (as your content area is) some of the formatting information does not follow. This is by design.
The correct tact is to define the page margins so that they are large enough to hold your header/footer content and place the header/footer into that space. The content will then just fill the "body" of the document (i.e. the space inside the page margins). This is what you've attempted, but you haven't given enough space for the header. The header is positioned 82px inside the page margin but the height of the header is 109px. Because of this any content that has a small margin will still fall under the header.
Try this instead:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</title>
<style>
#page {
margin: 120px 50px 80px 50px;
}
#header {
position: fixed;
top: -115px;
width: 100%;
height: 109px;
background: #aaa url("path/to/logo.png") no-repeat right;
}
#content {
background-color: #d1d977;
}
footer {
position: fixed;
bottom: -65px;
height: 30px;
background-color: #333399;
}
footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
br[style] {
display:none;
}
</style>
</head>
<body>
<div id="header">
<h2>ANTRAG</h2>
</div>
<footer>
<div class="page-number"></div>
</footer>
<h1>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</h1>
<div id="content">
...
</div>
</body>
</html>
Note that you also don't have to specify any height/width for the content element (unless you want to further constrict the space it uses).
With CSS3 you could go with your original styling and re-use the margins by applying the box-decoration-break property. However as of writing dompdf does not yet support this property.
So I plan on making this really long image, its small right now, but I increased the height out to how long I expected it to be. Here's my code so far:
<!doctype html>
<meta charset="utf-8">
<head>
<style>
body {background-color: black}
.image {background-image: url('http://i.imgur.com/JrsEkO9.jpg');
width: 640px;
height: 25000px;
position: absolute;
left: 50%;
top: 40%;
margin:-228px 0 0 -400px;
repeat-x: no;
-webkit-background-size: 640px 25000px;
min-width: 640px;
min-height: 25000px;}
</style>
</head>
<html>
<body>
<div class="image">
</div>
</html>
</body>
It looks like I was hoping it would on a desktop, but when opened on an ipad the image is fuzzy. Any suggestions? Here's a link to see the problem: http://bit.ly/HrG9oc
I am modifying the HTML5 port of the game Jump'n'Bump to run on Apple and Android-based mobile devices. I use a cheap 1 GHz Cortex-A8 Android 4.0.3 tablet for testing. I have encountered strange behaviour in the system's Browser. I normally get a very low frame-rate of about 1 FPS (entire screen is re-drawn every frame, setTimeout is used...). However, when I add a <div> which has a position:fixed CSS attribute before the <canvas> tag, the frame-rate skyrockets and the game becomes playable.
Could someone please explain this odd phenomenon? Are there some rendering modes in the Android Browser which influence canvas performance? Is this a cross-platform issue? How do I make sure the page works efficiently in the user's browser?
An outline of the code I'm working on:
<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">
<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body { margin: 0px 0px 0xp 0px }
canvas { border: 0px solid black; }
img.resource { display:none; }
#fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
#gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
canvas {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit
image-rendering: optimize-contrast; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE
}
</style>
<body onload="init()" text="#FFFFFF" bgcolor="#000000">
<!-- image resources like this here: -->
<img class="resource" id='rabbits' src='rabbit.png'/>
<!-- *** remove the line below and the game slows down *** -->
<div id='fixed_div'></div>
<div id="gameArea"><canvas id="screen" width="400" height="256"></canvas></div>
</body>
</html>
This issue is so curious.
Try using Request Animation Frame instead of setInterval (without the magic div, =])
function getRequestAnimFrame() {
var game = this;
// requestAnim shim layer by Paul Irish
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / fps);
};
}
Maybe this help to increase the perform.