size of h2.site-description field

kerin2014 · Member · Oct 13, 2014 at 8:21 am
Copy link

Add topic to favorites
how can i determine the size in bytes of h2.site-description?

I am using it to as a bucket for some CSS animations, and am encountering a filesize limit of around 123px x 450px

how can I determine the exact amount of memory allocated to h2.site-description?

I want to perform a precise conversion of bytes to pixels and produce an image file that will exactly fit whatever the field size is, and not get “cut off” unexpectedly during the animation.

A better solution would be this:

how I can I statically increase via custom CSS the size of the h2.site-description field in order to be able to animate potentially very large .png files containing dozens if not hundreds of 123px x 150px thumbnail images?

For example, if I had 5 such images, the .png file would be 123px x 750px. A small .png file of this size currently gets truncated during an animation, and my working hypothesis is that this has to do with the amount of memory allocated to h2.site-description.

Please advise.

Many thanks.

The blog I need help with is: (visible only to logged in users)
kerin2014 · Member · Oct 13, 2014 at 8:50 am
Copy link
actually this probably sounds dumb the way i phrased it since

h2.site-description is a class not a “field”

still there must be some way to determine how much of a memory bucket can be allocated to site description. Somewhere there has to be HTML that says something like

name of field
size of field

It is obvious there is some limit that is preventing my animation from working on more than very small .png files.

we are obviously at the edge of my HTML understanding here, but you can be sure I will be doing a lot of homework to understand more or less comprehensively how this header/masthead area is put together — which is extremely difficult to do by simply by using the Firefox Inspect, since you are not getting the entire picture.

I will try looking at the source and see if that helps.
kerin2014 · Member · Oct 13, 2014 at 9:06 am
Copy link
looking at the source, this is what i find
```
<div class="site-branding">
							<a href="http://needlepointland.com/" title="NEEDLEPOINT LAND" rel="home">
					<img src="http://needlepointlandstore.files.wordpress.com/2014/09/fontfolio-header.png" width="235" height="100" alt="">
				</a>
						<h1 class="site-title"><a href="http://needlepointland.com/" title="NEEDLEPOINT LAND" rel="home">NEEDLEPOINT LAND</a></h1>
			<h2 class="site-description">Where Stitching Lives!</h2>
		</div>
```
okay to the h2 tag defines a heading that reads “Where Stitching Lives!” — so is the size of this header equal to the length of this string? And does then act as a limit to the ,png file that uses this class — ie, must the .png file be <= the
size in bytes (assuming a pixels to bytes conversion) of this string?

these are probably dumb questions, or maybe I am overthinking this, but what I’m to trying to do is greatly increase the size of the .png file that can be animated, while still fitting in the “viewport” layered atop the grey background rectangle where the animation takes place.
kerin2014 · Member · Oct 13, 2014 at 9:30 am
Copy link
the other theory is this.

let’s assume all of the above is wrong — ie there is not field size concept at that is meaningful here. that the the size of the h2 heading is whatever you type it to be in your css, and has no bearing on the background .png file, as you can see in my custom css code
```
h2.site-description {
	height: 150px;
	width: 123px;
	background: url('//needlepointlandstore.files.wordpress.com/2014/10/ad-cartouche-1.png');   ... //
```
the question remains, obviously the limit of the .png file is not 123×150, which would make animation meaningless, since the idea is traverse a file of some length… I keep going back to question, what is preventing the css animation from processing “ad-cartouche” files that whose height exceeds around 450px? (assuming one keep the 123px width constant in all the concatenated thumbnails that I use to produce an ad-cartouche file?)

it is quite puzzling. could it be there is some limit to the background property of h2.site-description?

any help or nudges in the right direction would be most appreciated.
kerin2014 · Member · Oct 13, 2014 at 10:13 am
Copy link
i have created a test .png file that demonstrates the truncation that occurs with css3 animation on my blog.

it consists of 4 concatenated number boxes, each sized 123px x 150px. From top to bottom, the boxes are number 1 – 4.

demo cartouche

as you can see on the blog, this box demonstrates that the animation ignores the yellow box 2 — thus proving that there is some arbitrary and unexplained 450px height limit.

the animation also behaves unexpectedly, depending on the browser, and does not appear to process the boxes sequentially, either top down, or vice versa.

again, any help much appreciated.
hallluke · Member · Oct 13, 2014 at 11:49 am
Copy link
There is no sort of memory allocation as you describe it in HTML. The only practical considerations you need to make are that if you have lots of images it will take longer for your pages to load.

The problem here is that in your animation code you’ve only set the endpoint as 300px despite using a 600px image. Change it to the following (and adjust the -webkit prefix bit too) and the image should cycle through all 4 colours in a perfect loop:
```
@keyframes scrollad {
  0%{
    background-position:0 0;
  }
  100%{
    background-position:0 600px;
  }
}
```
kerin2014 · Member · Oct 13, 2014 at 12:17 pm
Copy link
thx but does not work at 600px. the yellow box is still skipped entirely. there is still some 450px limit. i will continue to try out different things, but thank you for the very good suggestion.
kerin2014 · Member · Oct 13, 2014 at 12:27 pm
Copy link
i exited the css editor then went back in and it worked! who knows why.

thx halluke!

No items found.