EDIT: I figured it out. in one of the attached script was window.onload what caused for canvas to be created after everything alse was already executed. So when I added a script the canvas yet did not exist :)
I cannot change the size of canvas element.
I build typical website with Bootstrap and the code in my index.html is like this:
<div id="container">
//some code
<div id="divForCanvas">
</div>
</div>
<script src="js/index2.js"></script>
in the index2.js I append canvas as a child of
<div id="divForCanvas"></div>
What happens is that the generated canvas has different width and height than its div parent.
Is there a way to adjust size of canvas after it was already generated (without editing index2.js) ?
A canvas element has a size in pixels, which applies to the bitmap you draw onto, and it has a CSS size like any other HTML element. These two are not the same (exactly like how a JPEG has a size in pixels but can be displayed at any size on screen), but you can set either one at any time.
The CSS size can be set in the normal ways, via a stylesheet, the style property of the <canvas> element, or through the JS myCanvas.style.* properties.
The size of the canvas contents can be set through the width and height properties of the <canvas> tag, or the JS myCanvas.width and myCanvas.height properties. Note that these are numbers, not CSS values, so you would say "<canvas width='200'>", not "<canvas width='200px'>". Setting either value will immediately clear the canvas contents, and in fact is the easiest way to do so.
Like an <img>, a <canvas> element is displayed by default at its 'natural' size, i.e. its size in pixels, unless its CSS width and height are set to depend on the containing element (for example if you set width:100%).
Related
so the css applied within will respond to the size of the element.
I am looking for a way to have a react element make an inner screen that stuff in it will respond to this element size rather than the screen size,
<ReactElement className="w-1/2">
<div className="bg-red-200 lg:bg-blue-200"/>
</ReactElement>
so when the element is half the size the div will respond to that screen size rather than the global viewport
I already tried a react iFrame but it didn't work because styles don't carry over and I don't really want to reload them again
I am trying to make a p always have the same width and height as an image that is placed next to it.
I set specific dimensions to both of the divs containing those elements, and then set the img width and height to 100% (as mentioned here). Unfortunately that led to images getting distorted even if I used the dimensions of the actual images being provided. Forgot to mention that I use Picturefill by the way, perhaps it has something to do with that..
I should mention that it is possible to somewhat control the amount of distortion, by adjusting the values in the sizes attribute of the picturefill HTML. However it turned out that I would have to add thousands of different values to that attribute to actually make it work this way. It just didn't really feel like the correct approach to something like this.
HTML
<div>
<img
sizes="(min-width: ...px) ...vw, (min-width: ...px) ...vw etc"
srcset="/images/img1.jpg 280w,
/images/img2.jpg 350w"
alt="...">
</div>
<div>
<p> ... </p>
</div>
Set the image width to 100% and height to auto. That way, the image will preserve its aspect ratio while still being resized.
Working in an environment where only css-selectors are available for retrieving elements I want to obtain the element in the DOM which covers the whole browser-window. Using developer tools I found out that <body> has some margin in my case which makes it unsuitable for my requirements.
I further discovered that the <html> element covers the whole area of the browser-window. Is it safe to use that DOM-node when it is about the document properties? I.e. getting the width/height for example?
Does by any chance <html> correspond to what is referred to as document in javascript?
EDIT: Side note on the setup:
I'm working with interns wrapped WD version and want to coordinate mouse movements relative to the document. I was aiming for using a method like selectByCssSelector to coodinate mouse movements with respect to that selected element. Working with the <html> node here seems to work out so far. I just never touched the <html> node before and never saw anyone else do, that is why I wanted to be assured that it is not bad using that node.
The document object is a DOM HTML object so, yes, it does correspond to the <html> tag, but not in the way you think. It is not like a <body> or <span> tag. It tells the browser that the following code or information is HTML. Just like how <?php tells the server that there is PHP code and <script type="text/javascript"> tells the browser that there is Javascript code. For more information on that, check out this page.
If you don't want to get the width and height of the body, you can use window.innerWidth and window.innerHeight. This should get the height and width of the entire window (excluding any scrollbars or toolboxes).
You can also use documentElement to get the width and height of the entire document.
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
This may be the final answer that you are looking for, but you can also find the width and height of the entire document by using document in jQuery.
var width = $(document).width();
var height = $(document).height();
The html represents all markup and content in the document, but it does not correspond to the document object. Instead, it appears as its property, document.documentElement (though it can be referred to in many other ways, too, e.g. document.children[0]).
As you note, the body element may have a margin, and by default it has a 8px margin on all sides. Thus, instead of it, the html element is the one you should refer to as corresponding to the entire viewport in the browser window, assuming that you let the dimensions of the html element default to that. You can get the dimensions as document.documentElement.clientWidth and document.documentElement.clientHeight.
However, for historical reasons, by CSS definitions, the background of the html element always covers the entire canvas even if the element has been set to smaller dimensions. You can see this if you set both a background and a border on it; the background may extend outside the border. Moreover, the CSS spec also specifies that if no background set for html, the background of body is used instead.
It's probably something silly, however, with the code I have right now, I can edit non spoilered pictures on the fly, so that their thumbnail is changed to the spoiler thumbnail.
$("[src='path/to/original/thumbnail.jpg']").attr('src', "/static/spoiler.png")
however, the new the thumbnail retains the size of the original thumbnail, and my spoiler image looks extremely strange unless it's at the correct size.
How do I set the thumbnails size, after being changed to the spoiler image?
Width needs to be 94px, and height needs to be 128px, for the record.
Depends on how the image originally got its height and width. If via css, then simply change the height and width using JQuery's ".css()" method:
$("[src='/static/spoiler.png']").css('width', '94px').css('height': '128px');
Or if height and width is set via an attribute:
$("[src='/static/spoiler.png']").attr('width', "94px").attr('height', "128px")
Don't set the src as an attribute, set the property directly:
$("[src='path/to/original/thumbnail.jpg']").each(function(){
this.src = "/static/spoiler.png";
});
I'm using Blueprint CSS to create a 3 column layout:
LEFT COLUMN: span-6
CENTER COLUMN: span-12
RIGHT COLUMN: span-6
In the center column I want to place an SWF object which needs a fixed size upon initialization:
swfobject.embedSWF(url, "flashDiv", flashWidth, flashHeight, params);
I could calculate the initial size relative to the browser window:
var flashWidth = window.innerWidth*0.50;
var flashHeight = window.innerHeight*0.50;
And resize with jQuery:
$(window).height()
But if a Blueprint layout does change based on the browser, then this would seem unnecessary.
In that case, how would I calculate the initial width and height relative to the column-width of the center column in this layout (span-12)?
You'd make an HTML element that behaves in the way you want, then embed the Flash in the HTML element sized at 100% x 100%
Firstly I'd suggest thinking a little more about your flashHeight value as is it really likely to be 50% of the height of the page?
Secondly, resizing flash dynamically I don't believe is possible and I wouldn't think it's a good idea if you can. Keep your graphical elements a fixed size and allow the text and freeform elements to flow around them as the page size changes.