Resizing using javascript manipulation of CSS

Question

I'm running into a problem with resizing a window using javascript.

The first image shows the original layout, the second shows the window resizing to a smaller size, and the third shows the issue when you resize the screen to the original size.

//none used

* {
	font-family: 'Lato', sans-serif; ;
}


/* ########Elements below######## */
body {
	margin: auto;
	background-color: #22ee63;
}

header {
	background: linear-gradient(rgba(255,255,255,0.8) 60%,rgba(255,0,0,0));
}

td {
	padding: 0rem 0rem 0rem 0rem;
	
}

/* Resized Elements */

@media (min-width: 397px) {
	header {
		height: 4.5rem;
	}
}

@media (max-width: 397px) {
	header {
		height: 8.1rem;
	}
}
/* ########Classes below######## */

.card {
	background-image: url("Images/LibraryStudy.png");
	background-position: center;
}

/* Resized Classes */

@media (min-width: 397px) {
	.card {
		padding-bottom: 56.25%; /* Aspect Ratio 16:9*/
		width: 100%;
	}
}

@media (max-width: 397px) {
	.card {
		width: 100%;
		height: 18rem;
	}
}

/* ########IDs below######## */

#logo-container {
	width: 6.266rem;
}

#nav-logo {
	height: 2rem;
	width: 2rem;
	padding: 0.3125rem 0rem 0.3125rem 0.3125rem;
	float: left;
	display: inline;
}

#logo-container > h1 {
	display: inline;
	padding: 0.65625rem 0rem 0rem 0.65625rem;
	position: relative;
	font-size: 1.125rem;
	font-weight: 100;
}

#logo-container > h1 > a {
	text-decoration: none;
}

#login-form {
	padding: 0.3125rem 0.3125rem 0.3125rem 0rem;
	width: 17rem;
}

#login-frame {
	vertical-align: top;
}

#login-text {
	/*-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	font-weight: 700;
	border-radius: .4rem;
	height: 1.1rem;*/

}

#persist-box {
	vertical-align: top;
}

#persist-text {
	font-size: 0.5rem;
	vertical-align: 0.2rem;
}

#password-recovery > a {
	font-size: 0.5rem;
	vertical-align: .2rem;
	padding-left: .2rem;
}

#first-card {
	z-index: -1;
	position: fixed;
	top: 0;
}

/* Resized IDs */

@media (min-width: 397px) {

	#logo-container {
		margin: ;
		display: inline;
	}

	#login-form {
		clear: ;
		display: inline;
		float: right;
		margin: ;
	}
}

@media (max-width: 397px) {

	#logo-container {
		margin: auto;
		display: block;
	}

	#login-form {
		clear: both;
		display: block;
		float: none;
		margin: auto;
	}
}
/* ########Pseudo below######## */
#password-recovery > a:link {
	color: black;
	text-decoration: none;
}

#password-recovery > a:visited {
	color: gray;
}

#password-recovery > a:hover {
	text-decoration: underline;
}

#logo-container > h1 > a:link {
	color: black;
}

#logo-container > h1 > a:visited {
	color: black;
}

#logo-container > h1 > a:hover {
	text-shadow: 0.01562rem 0.01562rem 0.0781rem #000000;
}

<!doctype html>
<html>
	<head>
		<!-- Meta -->
		<title>My CE Web App</title>
		<!-- Fonts -->
		<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700' rel='stylesheet' type='text/css'>
		<!-- CSS file -->
		<link type="text/css" rel="stylesheet" href="MyCELanding.css">
		<!-- JS files -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
		<script type='text/javascript' src='MyCE_scriptLanding.js'></script>
	</head>
	<body>
		<header>
			<div id="logo-container">
				<object type="image/svg+xml" id="nav-logo" data="Images/My_CE_Final_Icon.svg">Your browser does not support SVG</object>
				<h1> 
					<a href="/" id="header">My CE</a> 
				</h1>
			</div>
			<form id="login-form">
				<table cellspacing="0" role="presentation">
					<tbody>
							<tr>
								<td>
									<input type="email" name="email" placeholder="email" tabindex="1">
								</td>
								<td>
									<input type="password" name="password" placeholder="password" tabindex="2">
								</td>
								<td>
									<label id="login-frame" for="login-text">
										<input value="Log In" tabindex="4" id="login-text" type="submit">
									</label>
								</td>
							</tr>
							<tr>
								<td>
									<input id="persist-box" type="checkbox" name="persist-login" value="1" tabindex="3">
									<label for="persist-box" id="persist-text">
										Keep me logged in
									</label>
								</td>
								<td id="password-recovery">
									<a href="/">Forgot your password?</a>
								</td>
							</tr>
					</tbody>
				</table>
			</form>
		</header>
		<section id="first-card" class="card">

		</section>
	</body>
</html>

@BurningLights edited the code above. its $(window).ready(responsiveFn).resize(responsiveFn); — efong5
– efong5, Commented Dec 4, 2015 at 2:43
@efong5 Media queries don't require multiple style sheets. They just activate different parts of your stylesheet depending on things like browser size, orientation, etc. Here's an article describing media queries: developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…. — BurningLights
– BurningLights, Commented Dec 4, 2015 at 2:47
@efong If it's that much trouble, then I could give you some advice about your jQuery. Since you're using rem units, use this style html, body { font: 500 10px/1.4 'Arial'; } If you this $('html').css('font-size', '20px') all of your lengths in rem will double. So there's potential for some resizing, that's theory I've never tested it myself. — zer00ne
– zer00ne, Commented Dec 4, 2015 at 3:04

Stefan Yohansson · Accepted Answer · 2015-12-04 03:28:49Z

1

you're using an older solution for a new problem. Can you try to use bootstrap? It's an amazing framework for responsive and many common CSS/JS User interface problems.

If you can spend two or four hours reading about grid and many amazing things in bootstrap (or another css framework) you'll save years of productivity.

About current question, try this in else {}:

$("header").css("height","")
$("#logo-container").css("margin","");
$("#logo-container").css("display","inline");
$("#login-form").css("clear","");
$("#login-form").css("display","inline");
$("#login-form").css("float","right");
$("#login-form").css("margin","");

edited Dec 4, 2015 at 3:28

answered Dec 4, 2015 at 3:04

Stefan Yohansson

6776 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

efong5 Over a year ago

I'll look into it! I'm still curious about the current issue though, any insights?

efong5 Over a year ago

Doesn't quite fix it. Thanks for the effort though!

Collectives™ on Stack Overflow

Resizing using javascript manipulation of CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related