Inaccurate width onload issue

**everlive** · 03-13-2016, 06:52 AM

I'll take that punch my notoriously abrasive associate.

Actually, the main reason why I haven't shown all of my work is because I recognize that I am far and behind in terms of skill compared to the lot of you. I assume what took me a week to figure out you guys can do in an hour. I know I am trying something new or just hasn't been explored by the more skilled competitors and I want to get a lead on this as much as possible before I am completely outmatched by those who have been doing this for years if it takes off.

HTML Structure W3C Validated:

Code:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
		<title>slidetest</title>
		<link rel="stylesheet" type="text/css" href="agility-defaults.css">
		
	</head>
	<body>
		<div id="agility-box">
			<div id="agility-control"></div>
			<div id="agility-filter"></div>
			
			<div id="agility-set" class="fallset-1">
				<div class="agility-block">
					<a href="http://www.yahoo.com">
						<div>
							<span>Build Up</span>
						</div>
						<img src="http://www.codingforums.com/images/1.jpg" alt="imager-1" />
					</a>
				</div>
				<div class="agility-block">
					<a href="http://www.deviantart.com">
						<div>
							<span>Guide It</span>
						</div>
						<img src="http://www.codingforums.com/images/2.jpg" alt="imager-2" />
					</a>
				</div>
				<div class="agility-block">
					<a href="http://www.deviantart2.com">
						<div>
							<span>Tranverse It</span>
						</div>
						<img src="http://www.codingforums.com/images/3.jpg" alt="imager-3" />
					</a>
				</div>
				<div class="agility-block">
					<a href="http://www.deviantart3.com">
						<div>
							<span>Prepare It</span>
						</div>
						<img src="http://www.codingforums.com/images/4.jpg" alt="imager-4" />
					</a>
				</div>
				<div class="agility-block">
					<a href="http://www.deviantart.com">
						<div>
							<span>Guard It</span>
						</div>
						<img src="http://www.codingforums.com/images/5.jpg" alt="imager-5" />
					</a>
				</div>
				<div class="agility-block">
					<a href="http://www.deviantart4.com">
						<div>
							<span>Respect It</span>
						</div>
						<img src="http://www.codingforums.com/images/6.jpg" alt="imager-6" />
					</a>
				</div>
				<div class="agility-block">
					<a href="http://www.deviantart.com">
						<div>
							<span>Play It</span>
						</div>
						<img src="http://www.codingforums.com/images/7.jpg" alt="imager-7" />
					</a>
				</div>
				<div class="agility-block">
					<a href="http://www.deviantart6.com">
						<div>
							<span>Frame It</span>
						</div>
						<img src="http://www.codingforums.com/images/8.jpg" alt="imager-8" />
					</a>
				</div>
			</div>
		</div>

		<script src="agility.js"></script>
	</body>
</html>

CSS:

Code:

html,
body {
	margin:0;
	padding:0;
}

body {
	background-image: url('images/background.png');
}

#agility-box,
#agility-box * {
	margin:0;
	padding:0;
	outline: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-decoration:none;
	list-style:none;
	backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	font-family:'arial', sans-serif;
	text-transform:uppercase;
}

#agility-box {
	position:relative;
	width: 100%;
	display:block;
}

#agility-control,
#agility-filter{
	display:none;
}

#agility-set.svgengage {
	position:relative;
	width: 100%;
	pointer-events:none;
}

.svgengage .agility-block svg {
	pointer-events:none;
}

.svgengage .agility-block svg a {
	pointer-events:auto;
}

.svgengage .agility-block svg a image {
	transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	transition:transform .5s;
}

.svgengage .agility-block svg a:hover image {
	transform:translate(-5%,-5%) scale(1.1);
	-o-transform:translate(-5%,-5%) scale(1.1);
	-ms-transform:translate(-5%,-5%) scale(1.1);
	-moz-transform:translate(-5%,-5%) scale(1.1);
	-webkit-transform:translate(-5%,-5%) scale(1.1);
}

.svgengage .agility-block svg a polygon {
    stroke: #fff;
    stroke-opacity: 0.2;
    stroke-width: 8px;
	opacity:0;
	transition:opacity 0.5s;
	pointer-events:none;
}

.svgengage .agility-block svg a:hover polygon {
	opacity:0.8;
}

.svgengage .agility-block svg a text {
	color:#fff;
	fill:currentColor;
	text-anchor: middle;
	alignment-baseline:central;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	opacity:0;
	transition:opacity 0.5s;
	pointer-events:none;
}

.svgengage .agility-block svg a:hover text {
	opacity:1;
}

/***FALLBACKS***/
#agility-box .fallset-1,
#agility-box .fallset-2 {
	width:100%;
	overflow:hidden;
}

#agility-box .fallset-2 {
	padding-right:1%;
}

#agility-box .fallset-1 .agility-block {
	width:25%;
}

#agility-box .fallset-2 .agility-block {
	width:24%;
	margin: 1% 0% 0 1%;
}

#agility-box .fallset-1 .agility-block,
#agility-box .fallset-2 .agility-block {
	float:left;
}

#agility-box .fallset-1 .agility-block a,
#agility-box .fallset-2 .agility-block a {
	position:relative;
	display:block;
	overflow:hidden;
}

#agility-box .fallset-1 .agility-block a > div,
#agility-box .fallset-2 .agility-block a > div {
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
	display:block;
	padding:5px;
    border: 8px solid rgba(255, 255, 255, 0.1);
	color:#fff;
	text-overflow: ellipsis;
	background-color:#000;
	background-color:rgba(0,0,0,0.8);
	overflow:hidden;
	opacity:0;
	transition:opacity 0.5s;
}

#agility-box .fallset-1 .agility-block a > div > span,
#agility-box .fallset-2 .agility-block a > div > span {
	position:relative;
	top:50%;
	transform:translateY(-50%);
	-o-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	display:block;
	text-align:center;
	opacity:0;
	transition:opacity 0.5s;
}

#agility-box .fallset-1 .agility-block a:hover > div,
#agility-box .fallset-1 .agility-block a:hover > div > span,
#agility-box .fallset-2 .agility-block a:hover > div,
#agility-box .fallset-2 .agility-block a:hover > div > span {
	opacity:1;
}

#agility-box .fallset-1 .agility-block a > img,
#agility-box .fallset-2 .agility-block a > img {
	width:100%;
	height:auto;
	display:block;
	transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	transition:transform .5s;
}

#agility-box .fallset-1 .agility-block a:hover > img,
#agility-box .fallset-2 .agility-block a:hover > img {
	transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1);
}

@media only screen and (max-width:1024px) {
	#agility-box .fallset-1 .agility-block {
		width:33.333333333333333333333333333333%;
	}
	
	#agility-box .fallset-2 .agility-block {
		width:32.333333333333333333333333333333%;
	}
}

@media only screen and (max-width:765px) {
	#agility-box .fallset-1 .agility-block {
		width:50%;
	}
	
	#agility-box .fallset-2 .agility-block {
		width:49%;
	}
}

@media only screen and (max-width:480px) {
	#agility-box .fallset-1 .agility-block {
		width:100%;
	}
	
	#agility-box .fallset-2 .agility-block {
		width:99%;
	}
}

**deathshadow** · 03-13-2016, 01:00 PM

Well, that certainly does fall into the category of something I would NEVER suggest that ANYONE do on a website if they care about accessibility, usability, etc, etc...

But it also raises more questions... like why are you even messing around on scripting with this in the first place? To what end/purpose is this actually in there to accomplish?

REALLY you seem to have a goodly number of DIV for nothing, little if anything resembling semantics... I'm wondering what it is you're doing that needs much more than:

Code:

<ul id="agility">
	<li>
		<a href="http://www.yahoo.com">
			<span>Build Up</span>
			<img src="images/1.jpg" alt="imager-1">
		</a>
	</li><li>
		<a href="http://www.deviantart.com">
			<span>Guide It</span>
			<img src="images/2.jpg" alt="imager-2">
		</a>
	</li><li>
		<a href="http://www.deviantart2.com">
			<span>Tranverse It</span>
			<img src="images/3.jpg" alt="imager-3">
		</a>
	</li><li>
		<a href="http://www.deviantart3.com">
			<span>Prepare It</span>
			<img src="images/4.jpg" alt="imager-4">
		</a>
	</li><li>
		<a href="http://www.deviantart.com">
			<span>Guard It</span>
			<img src="images/5.jpg" alt="imager-5">
		</a>
	</li><li>
		<a href="http://www.deviantart4.com">
			<span>Respect It</span>
			<img src="images/6.jpg" alt="imager-6">
		</a>
	</li><li>
		<a href="http://www.deviantart.com">
			<span>Play It</span>
			<img src="images/7.jpg" alt="imager-7">
		</a>
	</li><li>
		<a href="http://www.deviantart6.com">
			<span>Frame It</span>
			<img src="images/8.jpg" alt="imager-8">
		</a>
	</li>
</ul>

... since it's quite clearly a list of choices / thumbs / whatever -- and I'm not even sure you need the span. Big tip, if every element inside a parent container is getting the same class, it's HIGHLY likely none of them need the same class... and be careful with things that overlap inheritance like opacity.

I'd have to see this live someplace to make sense out of what it is you're even trying to accomplish from a layout standpoint since, well... without the images it's just a broken mess here. Once you have that width, what are you even going to do with it? To what end do you want/need it? So far I'm not seeing anything that warrants more than half the code you have there unless you're going to start in with outdated inaccessible methodology like mcSwitchy -- aka using JavaScript to control the layout. (which is just begging for "epic fail" in most cases)

**everlive** · 03-13-2016, 02:37 PM

You make it sounds as if the images I am using are required, plug in any image before you mess with the code on assumptions. Stop dismissing elements please, the div wrapper around the span is there for a reason.

You are looking at the default code for when JavaScript is disabled. It says it right in the CSS comment called fallbacks. I am building from a foundation of CSS that is disabled when JS is enabled to generate things in the JS file, I thought I made this clear.

I am using Div tags for the class blocks because I am not use to the idea of using a list for absolute position because its a list and I am thinking in segments or detachable blocks. It makes it easier to keep with the flow of coding.

I could probably turn a UL list into div blocks when JS is activated though. For a later date though.

**kdengsub** · 03-13-2016, 04:35 PM

I could probably turn a UL list into div blocks when JS is activated though. For a later date though. ????

**everlive** · 04-06-2016, 08:47 PM

Thread "bump"

Okay, I am back to this issue as I am done with the ground work for the plugin itself. I have deemed this problem somewhat trivia because it only happens once, but if possible I would like to limit the amount of needless function calls as possible.

Here is a link of what I am dealing with: https://www.sitepoint.com/community/...t-sizes/220206

No code should be required but will post if requested, its basically:
1. Detect window.innerWidth/parent.clientWidth.
2. Match child.clientWidth to window.innerWidth/parent.clientWidth when initialized.
3. Double initialize to get accurate measurement that factors out the scrollbar.

I am aware you guys do not approve of cross-site posting, and I believe I got scolded when I tried to make the same thread across 3 different sites. So I am posting just a link into an existing thread on the same subject. I am not getting any response. Some of these forums are surprisingly barren to communication even though they look well traveled.

Would registering to stack.overflow be a good idea?

Thread: Inaccurate width onload issue

Thread Tools

Rate This Thread

Tags for this Thread

Posting Permissions