Layout states using jQuery and Data Attributes

Developer
Niels Oeltjen
Size
3,078 Kb
Views
36,432
  1. Layout states using jQuery and Data Attributes Previews
  2. Layout states using jQuery and Data Attributes HTML Codes
  3. Layout states using jQuery and Data Attributes CSS Codes
  4. Layout states using jQuery and Data Attributes JS Codes

How do I make an layout states using jquery and data attributes?

A simple yet flexible method for showing and hiding content based on layout 'states'. Works with media queries.This is not intended to present a solid UI pattern, just a simple methodology for handling layout.. What is a layout states using jquery and data attributes? How do you make a layout states using jquery and data attributes? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

Layout states using jQuery and Data Attributes Previews
IQ Test

Layout states using jQuery and Data Attributes - Script Codes HTML Codes

<!DOCTYPE html>
<html class="state-initial">
<head> <meta charset="UTF-8"> <title>Layout states using jQuery and Data Attributes</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div role="main" class="animated"> <div role="navigation" class="padded animated">	<h3>Navigation</h3>	<ul>	<li><a data-state="pres" href="#">Presentation</a></li>	<li><a data-state="sidebar" href="#">Sidebar</a></li>	<li>Item</li>	<li>Item</li>	<li>Item</li>	<li>Item</li>	</ul>	<p class="close"><a data-state="initial" href="#">Close</a></p>	</div>	<div role="sidebar" class="padded animated">	<h3>Sidebar</h3>	<p>This is the sidebar content.</p>	<p class="close"><a data-state="initial" href="#">Close</a></p>	</div>	<div role="content" class="padded animated">	<h3>Layout states using jQuery and Data Attributes</h3>	<p>A simple yet flexible method for showing and hiding content based on layout 'states'. Works with media queries.</p>	<p>This is not intended to present a solid UI pattern, just a simple methodology for handling layout.</p>	<p><a data-state="nav" href="#">Switch to 'nav' state</a></p>	<p><a data-state="sidebar" href="#">Switch to 'sidebar' state</a></p>	<p><a data-state="pres" href="#">Switch to 'presentation' state</a></p>	</div>
</div>
<div role="presentation" class="padded animated">	<h3>Presentation</h3>	<p>This is the presentation content.</p>	<p><a data-state="initial" href="#">Switch to 'Initial' state</a></p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Layout states using jQuery and Data Attributes - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Orienta);
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box;	box-sizing: border-box;
}
html, body {	padding: 0;	margin: 0;	height: 100%;
}
body {	color: #423e34;	font-family: 'Orienta', sans-serif;	background-color: #ffff00;
}
.padded {	padding: 1em;	margin: 0;
}
.animated {	-webkit-transition: margin 0.5s ease;	transition: margin 0.5s ease;
}
.close {	display: none;
}
/* Default styles Use this section to position elements on page load
*/
[role^="main"] {	position: absolute;	top: 0;	left: 0;	margin-left: 0%;	width: 100%;	height: 100%;
}
[role^="navigation"] {	position: absolute;	top: 0;	left: 0;	width: 10em;	margin-left: -12em;	height: 100%;
}
[role^="sidebar"] {	position: absolute;	top: 0;	left: 0;	width: 10em;	margin-left: -12em;	height: 100%;
}
[role^="content"] {	max-width: 40em;
}
[role^="presentation"] {	position: fixed;	top: 0;	right: 0;	width: 100%;	margin-right: -100%;	height: 100%;
}
/* Load state */
.state-initial {	/* Any styling for on load state */
}
/* Nav state */
.state-nav [role^="navigation"] {	margin-left: 0em;
}
.state-nav [role^="content"] {	margin-left: 12em;
}
/* Sidebar state */
.state-sidebar [role^="sidebar"] {	margin-left: 0em;
}
.state-sidebar [role^="content"] {	margin-left: 12em;
}
/* Pre state */
.state-pres [role^="presentation"] {	position: fixed;	top: 0;	right: 0;	width: 100%;	margin-right: 0%;	background-color: white;
}
.state-pres [role^="main"] {	margin-left: -100%;
}
/* Now get responsive */
@media only screen and (max-width: 52em) {	[role^="navigation"],	[role^="sidebar"] {	width: 90%;	margin-left: -100%;	z-index: 2;	background-color: yellow;	-moz-box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.4);	-webkit-box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.4);	box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.4);	color: #000000;	}	/* Nav state */	.state-nav [role^="content"],	.state-sidebar [role^="content"] {	margin-left: 0;	}	.state-nav,	.state-sidebar {	background-color: #eed200;	} /* Show the close button */	.close {	display: block;	}
}

Layout states using jQuery and Data Attributes - Script Codes JS Codes

/* This little bit of code captures the value of the "data=state" attribute on an element and applies that value to the html element (can be used on any element) */
/* Uses jQuery 1.8.3 */
$('[data-state]').click(function(e) { state = $(this).attr('data-state'); $('html') // or 'body'	.removeClass(	function(i, c) { var m = c.match(/state\d+/g); if(m != null)	return m.join(" ");	})	.addClass('state-' + state);	e.preventDefault();
});
Layout states using jQuery and Data Attributes - Script Codes
Layout states using jQuery and Data Attributes - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 4
Size 3,078 Kb
Views 36,432
Do you need developer help for Layout states using jQuery and Data Attributes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Another nice loader
Text as background
Prose.io repo icon
SVG icons coloured using js and hash
Paralax without plugin
Pretty css spinner
Emoji selectors
Loading animation
Large menu pattern
Simple spinner
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!