Fade or Slide Content
Santa Clara Vanguard!

The features of this example web page design are:

  • The same HTML, CSS and Javascript can be used for both fading or horizontall sliding in content when a button is clicked.
  • The content on this page is responsive - alters itself depending upon the width of the device used to view it.
  • Each article content can have a unique header background image and can have unique header text color and/or placement.
  • The article text area can have a flexible maximum width.
  • Text links can have custom color and custom hover color.
  • The footer will either be at the bottom of the browser window (if content is not tall enough) or will be pushed down below the bottom of the browser window (if the content is tall).
  • To choose between "fade" or "slide" is easy - just change the variable "transitionType" value to either "fade" or "slide" in the javascript code
HTML Code

Copy and paste just under the <title> and </title> line


<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var userName = "UsernamE";//for use with Projects button
var btnActiveColor = "#6ECC5E";//hexidecimal color for currently clicked button text color
var transitionType = "fade";//options are "fade" or "slide"
var fadeTime=1000;//time in milliseconds to fade to new positions
var slideTime=1000;//time in milliseconds to shift to new positions
var maxHeaderWidth = "100%";//options such as "100%", "80%", "1024px", or "980px"
var maxContentWidth = "1200px";
var adobewebfontsappname ="dreamweaver";
</script>
<script src="http://use.edgefonts.net/open-sans:n4:default.js" type="text/javascript"></script>

Copy and paste just under <body> tag and above the </body> tag


<nav>
<div class="btn" id="btn1">
<div class="btnText">Button 1</div>
</div>
<div class="btn" id="btn2">
<div class="btnText">Button 2</div>
</div>
<div class="btn" id="btn3">
<div class="btnText">Button 3</div>
</div>
<div class="btn" id="btn4">
<div class="btnText">Button 4</div>
</div>
<div class="btn" id="btn5">
<div class="btnText">Button 5</div>
</div>
<div class="btn" id="btnProjects">
<div class="btnText">Projects</div>
</div>
</nav>
<div id="allArticles">
<div id="allArticlesWrapper">
<article id="article1">
<header id="header1">
<div class="headerTitle">Header 1 Title</div>
</header>
<section id="section1">
<p>article 1 content</p>
</section>
</article>
<article id="article2">
<header id="header2">
<div class="headerTitle">Header 2 Title</div>
</header>
<section id="section2">
<p>article 2 content</p>
</section>
</article>
<article id="article3">
<header id="header3">
<div class="headerTitle">Header 3 Title</div>
</header>
<section id="section3">
<p>article 3 content</p>
</section>
</article>
<article id="article4">
<header id="header4">
<div class="headerTitle">Header 4 Title</div>
</header>
<section id="section4">
<p>article 4 content</p>
</section>
</article>
<article id="article5">
<header id="header5">
<div class="headerTitle">Header 5 Title</div>
</header>
<section id="section5">
<p>article 5 content</p>
</section>
</article>
</div>
</div>
<footer>
<div id="footerText">© Copyright 20## First Last. All rights reserved.</div>
</footer>
CSS

Create a new CSS file, save is as p#-styles.css and save it into your project#/styles folder where the # represents your project number, so for example, project2 your file would be p2-styles.css saved in project2/styles folder and for project3 your file would be p3-styles.css saved in project3/styles folder. Save and close the file.

Then back to your HTML page, use the CSS Designer panel to link the CSS file to the HTML. The final code should look something like this: <link href="project#/styles/p#-styles.css" rel="stylesheet" type="text/css"> located above the </head> tag

Copy and paste into your p#-styles.css file


* {/*The * symbol is a wild card which means all the rules below apply to EVERYTHING!*/
box-sizing: border-box;/*DO NOT CHANGE THIS!!!*/
margin: 0;/*DO NOT CHANGE THIS!!!*/
padding: 0;/*DO NOT CHANGE THIS!!!*/
position: relative;/*DO NOT CHANGE THIS!!!*/
/*DO NOT ADD ANY MORE TO THIS BLOCK!!!*/
}
body {
width: 100%;
height: auto;
font-family: "open-sans";
font-size: 100%;
background-color: #000000;/*adjust this to your desired value*/
color: #FFFFFF;/*adjust this to your desired value*/
z-index: 0;
}
/*-----top bar and buttons-----*/
nav, .btn {
height: 30px;/*adjust this to your desired height depending upon your .btnText font-size*/
}
nav {
width: 100%;
position: fixed;/*"fixed" will stick to top, "absolute" will allow bar to scroll vertically with page*/
top: 0;
left: 0;
z-index: 400;
background-color: #000000;
display: flex;
align-content: center;
justify-content: center;/* center, flex-start, flex-end, space-between */
flex-direction: row;
flex-wrap: nowrap;
}
.btn {
width: 100px;/*adjust this to your desired width*/
text-align: center;
cursor: pointer;
margin: 0 25px;/*adjust this to your desired margins - 1st number is for top and bottom, 2nd number is for left and right*/
display: flex;
align-content: center;
flex-direction: row;
flex-wrap: nowrap;
z-index: 500;
}
.btnText {
margin: auto;/*REQUIRED to vertically and horizontally center*/
color:#fff;/*adjust this to your desired text color*/
z-index: 501;
}
/*----header styles------*/
header, #allArticles {
width: 100%;/*This is changed by javascript*/
margin: auto;
}
header {
display: flex;
align-content: center;
justify-content: center;/* flex-start, flex-end, space-between */
height: 400px;/*adjust this to your desired header height*/
background-repeat: no-repeat;
background-position: top center;
background-size: cover;/*REQUIRED to completely cover the entire width of headers*/
margin-bottom: 10px;/*To separate header from main text section */
z-index: 201;
}
.headerTitle {
text-align: center;
color: #000000;/*Text color*/
font-size: 3em;
font-weight: bold;
margin: auto;/*REQUIRED to vertically and horizontally center*/
z-index: 202;
}
#header1 {
background-image: url(../images/bg1.jpg);
}
#header2 {
background-image: url(../images/bg2.jpg);
}
#header3 {
background-image: url(../images/bg3.jpg);
}
#header4 {
background-image: url(../images/bg4.jpg);
}
#header5 {
background-image: url(../images/bg5.jpg);
}
/*----Main content styles -------*/
#allArticles {
width: 100%;
height: auto;
}
#allArticles {
margin: 0 auto;
z-index: 100;
}
#allArticlesWrapper {
z-index: 200;
}
article {
float: left;
z-index: 300;
height: auto;
}
section h1 {
text-align: center;
font-size: 2em;
}
section p {
margin-bottom: 1em;
text-indent: 0em;
}
figure {
height: auto;
float: right;/* or left */
margin: 0 10px;
padding: 5px;
border: 1px #060 solid;
text-align: center;
}
figure img {
width: 100%;
height: auto;
}
figure p, figcaption p {
text-indent: 0;
}
section {
margin: 0 auto;/* centers the text content */
z-index: 201;
}
/*---for any text link----*/
a {/*allows fora timed transition for text link hover effect*/
-webkit-transition: all 0.5s linear 0s;
-o-transition: all 0.5s linear 0s;
transition: all 0.5s linear 0s;
}
a:link, a:visited {
color: #090;
}
a:hover, a:active {
color: #f00;
}
.clearFloat {
clear: both;
width: 100%;
height: 0;
}
/*-----Footer styles---------*/
footer {
height: 40px;
width: 100%;
font-size: 0.8em;
display: flex;
align-content: center;
justify-content: flex-end;/* center, flex-start, flex-end */
flex-direction: row;
flex-wrap: nowrap;
}
#footerText {
margin: auto 0;
padding: 5px;
}
/*------Styles for mobile phones--------*/
@media screen and (max-width:667px) {
nav, .btn {
height: 0;
display: none;
}
#allArticles, #allArticlesWrapper, article {
height: auto;
width: 100%;
overflow: visible;
}
#allArticles {
padding: 0px;
}
article {
margin-bottom: 5px;
float: none;
}
article figure, article img {
float: none;
margin: 5px auto;
}
section {
padding: 5px;
}
}
Javascript

Copy and paste just below your <link href="project#/styles/p#-styles.css" rel="stylesheet" type="text/css"> line and above the </head> tag in the HTML. Scripts should always come after any style sheet because the styles should be applied first before any Javascript actions are executed - like putting on socks before you put on your shoes.


<script src="http://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/transit.js"></script>
<script src="http://www.freestyleacademy.rocks/Digital_Media/examples/Fading_or_Sliding_Content_Responsive.js"></script>
Customizing your site

Required changes

  1. DOCUMENT TITLE - In the HTML, change the "Untitled Document" inside the <title> and </title> tag to something more appropriate for your project.
  2. PROJECT BUTTON USERNAME - In the HTML Code view, under the <title> and </title> line, change "UsernamE" with YOUR UsernamE where capital letters matter - for example "LeoF" or "DarthV", NOT "leof" or "darthv". This will ensure that your Project button goes to the right webpage.
  3. BUTTON ACTIVE TEXT COLOR - Go to kuler.adobe.com to pick a color - copy the hexidecimal code such as #fa23bc for the color you want for your active button. In the HTML Code view, under the <title> and </title> line, choose and replace the hexidecimal value (don't delete the # symbol) for the btnActiveColor with the color you want for the active button color. The Javascript needs this for all button clicks.
  4. FADE or SLIDE? - In the HTML Code view, under the <title> and </title> line, change the value for transitionType as either "fade" (default) or "slide" which will set the content transitions when a button is clicked.
  5. FADE TIME - In the HTML Code view, under the <title> and </title> line, change the value for fadeTime for the duration of fade transitions where the units are milliseconds - so the default 1000 = 1 second. If you want a different value, then change the value such as 500 = 0.5 seconds, 1200 = 1.2 seconds, 1500 = 1.5 seconds, etc.
  6. SLIDE TIME - In the HTML Code view, under the <title> and </title> line, change the value for slideTime for the duration of slide transitions where the units are milliseconds - so the default 1000 = 1 second. If you want a different value, then change the value such as 500 = 0.5 seconds, 1200 = 1.2 seconds, 1500 = 1.5 seconds, etc.
  7. HEADER MAX WIDTH - In the HTML Code view, under the <title> and </title> line, change the value for maxHeaderWidth - options such as "100%" (default), "80%", "1024px", or "980px" - for how WIDE you want to header images to be displayed.
  8. CONTENT MAX WIDTH - In the HTML Code view, under the <title> and </title> line, change the value for maxContentWidth - options such as "1200px" (default), "90%", "1024px", or "980px" - for how WIDE you want to main content to be displayed.
  9. In the HTML Code view, under the <title> and </title> line, do NOT change the var adobewebfontsappname ="dreamweaver"; line at all since it's needed for web fonts from Dreamweaver.
  10. FOOTER YEAR - At the bottom of the HTML Code view in the <footer> tag, change 20## to the correct year - so 20## changes to .
  11. FOOTER NAME - At the bottom of the HTML Code view in the <footer> tag, change "First Last" to your name - such as Darth Vader, no quotes.
  12. BUTTON TEXT - Change the text of each button instead of Button 1, Button 2, etc. - either in Code view, Design or Live view.
  13. BUTTON FORMATTING - Change the appearance of your buttons by making changes in your CSS for the ".btn" rule such as margin-right (to space out buttons more/less), background-color, or for the ".btnText" rule such as font-family, font-size, font-weight, color (for font), etc. Be careful not to edit the styles in the @media screen and (max-width:667px) block.
  14. HEADER TEXT - Change the text of each header instead of Header 1 Title, Header 2 Title, etc. - either in Code view, Design or Live view.
  15. HEADER IMAGE HEIGHT - In your CSS file, change height of the "header" rule for the height you want for all your headers - for example height: 500px; or height: 650px; etc. For mobile phones, you can set a different height for "header" in the @media screen and (max-width:667px) block.
  16. HEADER IMAGES - Create your original background images with width of 2000px and height that matches what you set for CSS "header" height above - for example 2000x500px or 2000x650px. Name your images as bg1.jpg, bg2.jpg, etc. (CSS is linked to .jpgs NOT .pngs) and move them into your project#/images folder through Finder.
  17. HEADER TEXT FORMATTING - Make changes to your header text in the CSS ".headerTitle" rule such as custom font-family, change the font-size, change the font-weight, color. Be careful not to edit the styles in the @media screen and (max-width:667px) block.
  18. ARTICLE CONTENT - VERY IMPORTANT! DUH! - Obviously, add content for each article as required for the project.

Recommended Changes

  • CONTENT BACKGROUND SOLID COLOR - By default, the content background color is black (CSS "body" rule background-color: #000000) and the text color is white (CSS "body" rule color: #ffffff). Change this, if you wish to your desired background color and text color. Be careful not to edit the styles in the @media screen and (max-width:667px) block.
  • CONTENT FONT - To change font styles for the main content under the headers, in the CSS, add to the "section" rule properties of font-family, font-size, color, etc. with your own desired values. Be careful not to edit the styles in the @media screen and (max-width:667px) block.
  • HEADING TITLES - You should use the heading tags of <h1> for titles within your content to break up large chunks of text - just like the yellow <h1> headings used on this page. Then to style the tags in your CSS file, look for and edit "section h1" by changing/adding properties such as font-size, color, text-align, etc. with your own desired values. For mobile phones, you can set a different styles for "header" and ".headerText" in the @media screen and (max-width:667px) block.
  • CUSTOM BOLD STYLES - You can select text and press CMD+B to make them bold. A <strong > and </strong> tag will wrap around the text in Code view. You can custom style the strong tag just like the orange <strong > tags used on this page. To style the tag in your CSS file, add a "strong" rule and add properties such as font-size, color, etc. with your own desired values. Be careful not to add/edit the these styles in the @media screen and (max-width:667px) block.
  • CUSTOM TEXT LINK STYLES - You can create custom text link colors for their normal and hover states similar to this link. In your CSS files, look for and edit the "a:link, a:visited" and "a:hover, a:active" rules with your own desired property styles.
  • CUSTOM PARAGRAPH STYLES - By default, each paragraph first line is indented and has space below it to separate one paragraph from the next paragraphe. In your CSS files, look for and edit the "section p" rule with your own desired styles.
  • USE COLUMNS - Like the two columns for this page, you should implement 2, 3, or 4 columns on your page for content as discussed and practiced in class.

How to embed MEDIA - videos, images, audio ...