Related
So I've tried adapting this http://jsfiddle.net/mariusc23/s6mLJ/31/ code to my webpage so that my nav bar hides when scrolling down and appears when scrolling back up, however it doesn't seem to work and I just can't see the problem, I've included my code below, thanks for the help!
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
</script>
<style type="text/css">
a {
box-sizing: border-box;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}
header {
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
}
.nav-up {
top: -110px;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</li> <!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
I'm currently trying to make a movie review blog post and really want to make everything just stand out, but I'm only relatively new to Css,html and javascript therefore I really can't identify any problems I might have and how to fix them. Again thank you for y'alls help :)
its because you have additional closing tag on line no 15 and 98 in your html, I have fixed that see below demo
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
a {
box-sizing: border-box;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}
header {
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
}
.nav-up {
top: -110px;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
I am currently having trouble with a project that I am currently working on, where i have to create a quote machine with 5 quotes. I need to have a forward and backward button for the quotes. i currently have it mostly all done but when i push the forward button and reach the last quote, if i keep clicking, I get undefined written in my element which i just want it to stop at the last one or loop back to the first one, and the same thing happens when i push the back button.
please help.
Here is my code.
var quoteArray = ["If you're already a front-end developer, well, pretend you're also wearing a pirate hat. - Ethan Marcotte, Responsive Web Design",
"Website without visitors is like a ship lost in the horizon. - Dr. Christopher Dayagdag",
"If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea--no matter how appallingly bad--can be made usable in the right circumstances, with enough effort.” - Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability",
"The true ENTREPRENEUR is a risk taker, not an excuse maker. - VDEXTERS",
"Being first in the search result organically in Google is the dream of all website owners. ― Dr. Chris Dayagdag"];
var i = 0;
var backButton = document.getElementById("back");
var forwardButton = document.getElementById("forward");
document.querySelector(".quote")
.innerHTML = quoteArray[0];
setInterval(function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++];
if (i == quoteArray.length) i = 0;
},5000);
backButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i--];
if(quoteArray.length == -1) {
document
.querySelector(".quote")
.innerHTML = quoteArray[4];
}
})
forwardButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++];
if(quoteArray.length == 5) {
document
.querySelector(".quote")
.innerHTML = quoteArray[0];
}
})
body {
width: 100%;
height: 100%;
}
a, .hero{
color: rgb(255, 255, 255);
}
#back, #forward {
font-size: 30px;
}
.nav {
display: flex;
justify-content: space-between;
align-items:center;
color: rgb(255, 255, 255);
width: 100%;
}
.hero {
background-image: linear-gradient(
rgb(0, 0, 0, 0.3) 10%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.3) 80%
),
url(./images/landscape-3969127_1280.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
height: 400px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
}
#back, #forward {
padding-left: 10px;
padding-right: 10px;
}
.buttons {
padding: 20px;
}
.quote {
font-size: 18px;
font-weight: bold;
}
.logo {
margin: 0 50px;
}
ul {
display: flex;
justify-content: center;
margin-right: 50px;
padding: 0px;
}
ul a {
padding-left: 30px;
padding-right: 30px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
li {
list-style: none;
}
.nav a {
color: rgb(255, 255, 255)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="nav">
<div class="logo"><h1>Logo</h1></div>
<ul>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</div>
<div class="row">
<div class="quote"></div>
</div>
<div class="buttons">
<i id="back" class="far fa-arrow-alt-circle-left"></i></i>
<i id="forward" class="far fa-arrow-alt-circle-right"></i></i>
</div>
</div>
<script src="./quote.js"></script>
</body>
</html>
% is your friend. You're getting undefined because you try accessing an element outside of the list. Let i go up as high as you want and as low as you want and just implement these calculations
increasing:
quoteArray[i++ % quoteArray.length]
decreasing:
i = (i - 1 + quoteArray.length) % quoteArray.length;
quoteArray[i]
var quoteArray = ["If you're already a front-end developer, well, pretend you're also wearing a pirate hat. - Ethan Marcotte, Responsive Web Design",
"Website without visitors is like a ship lost in the horizon. - Dr. Christopher Dayagdag",
"If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea--no matter how appallingly bad--can be made usable in the right circumstances, with enough effort.” - Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability",
"The true ENTREPRENEUR is a risk taker, not an excuse maker. - VDEXTERS",
"Being first in the search result organically in Google is the dream of all website owners. ― Dr. Chris Dayagdag"];
var i = 0;
var backButton = document.getElementById("back");
var forwardButton = document.getElementById("forward");
document.querySelector(".quote")
.innerHTML = quoteArray[0];
setInterval(function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++ % quoteArray.length];
}, 5000);
backButton.addEventListener("click", function() {
i = (i - 1 + quoteArray.length) % quoteArray.length;
document
.querySelector(".quote")
.innerHTML = quoteArray[i];
})
forwardButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++ % quoteArray.length];
})
body {
width: 100%;
height: 100%;
}
a, .hero{
color: rgb(255, 255, 255);
}
#back, #forward {
font-size: 30px;
}
.nav {
display: flex;
justify-content: space-between;
align-items:center;
color: rgb(255, 255, 255);
width: 100%;
}
.hero {
background-image: linear-gradient(
rgb(0, 0, 0, 0.3) 10%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.3) 80%
),
url(./images/landscape-3969127_1280.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
height: 400px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
}
#back, #forward {
padding-left: 10px;
padding-right: 10px;
}
.buttons {
padding: 20px;
}
.quote {
font-size: 18px;
font-weight: bold;
}
.logo {
margin: 0 50px;
}
ul {
display: flex;
justify-content: center;
margin-right: 50px;
padding: 0px;
}
ul a {
padding-left: 30px;
padding-right: 30px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
li {
list-style: none;
}
.nav a {
color: rgb(255, 255, 255)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="nav">
<div class="logo"><h1>Logo</h1></div>
<ul>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</div>
<div class="row">
<div class="quote"></div>
</div>
<div class="buttons">
<a><i id="back" class="far fa-arrow-alt-circle-left"></i></a>
<a><i id="forward" class="far fa-arrow-alt-circle-right"></i></a>
</div>
</div>
<script src="./quote.js"></script>
</body>
</html>
I created a system in a website I'm making that uses a single HTML file, with the user clicking buttons on either side of the page to scroll the content. Of course, I want to hide the buttons when the user reaches either end of the content (i.e. disable the left arrow when on the leftmost page). I'm using console.log() to print the left value of the <div> containing the content, which is what I .animate() with jQuery to create the effect. However, when I scroll once using the buttons, the value changes to 0px, which is already the default CSS value of the <div>. Scrolling again, the value changes to -99.9999px, which is also the value when I scroll back to the first page. This means that my button disappears as soon as I scroll to the third page, hampering further navigation. The inline style attribute always contains the expected value, however. What is the reason for these discrepancies?
Be forewarned, the Snippet is very messed up. You might need to copy and paste into some local files. Sorry about that. The #box is the <div> you should paying attention to. Thanks!
Snippet:
body {
background-image: url("images/pinecones.JPG");
min-height: 100%;
margin: 0px;
background-repeat: no-repeat;
max-width: 100%;
overflow-x: hidden;
}
::selection {
background-color: green;
}
::-moz-selection {
background-color: green;
}
footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
width: 100%;
padding: 5px;
padding-right: 0px;
padding-left: 0px;
font-family: monospace;
}
p {
font-family: 'Cambria', sans-serif;
margin: 10px;
margin-bottom: 20px;
text-indent: 20px;
}
div.page:hover {
font-size: 120%;
}
h1 {
font-family: sans-serif;
}
#box {
position: relative;
left: 0%;
}
.banner-text {
text-indent: 0px;
font-family: sans-serif;
font-size: 30px;
letter-spacing: 3px;
color: white;
margin: 0px;
margin-top: 20px;
margin-right: 35px;
display: inline-block;
float: right;
cursor: pointer;
}
.banner-text:hover {
font-size: 30px;
}
#media screen and (max-width: 1200px) {
.banner-text {
font-size: 25px;
}
}
#media screen and (max-width: 1100px) {
.banner-text {
font-size: 20px;
}
}
/* I'll need to add more progressions of this, sizing down the margin and eventually getting rid of this to go mobile. */
#banner {
background-color: #000000;
opacity: 0.8;
width: 100%;
height: 150px;
position: absolute;
top: 0px;
right: 0px;
display: block;
z-index: -1;
}
#banner-text {
display: block;
position: absolute;
left: 340px;
}
#navbar {
position: absolute;
left: 340px;
top: 50px;
color: white;
}
.nav-text {
text-indent: 0px;
float: left;
margin: 0px;
margin-right: 30px;
margin-top: 30px;
font-family: sans-serif;
letter-spacing: 2px;
font-style: italic;
cursor: pointer;
}
.nav-text:hover {
font-size: 120%;
margin-right: 15px;
}
#media-box {
position: absolute;
right: 0px;
z-index: 1;
margin: 20px;
width: 200px;
}
.media {
float: right;
cursor: pointer;
}
.contact-info {
position: absolute;
right: 0px;
margin-top: 10px;
margin-right: 5px;
font-size: 14px;
color: white;
font-family: sans-serif;
letter-spacing: 1px;
}
.phone {
cursor: default;
top: 50px;
}
.email {
top: 80px;
cursor: pointer;
}
#logo {
position: absolute;
top: 0px;
left: 0px;
display: block;
}
.page {
display: block;
background-color: black;
opacity: 0.8;
color: white;
}
.box {
position: absolute;
top: 500px;
width: 100%;
}
#title {
position: relative;
width: 50%;
font-style: italic;
font-size: 24px;
font-family: sans-serif; /* Redundant if decide to use sans-serif elsewhere */
letter-spacing: 2px;
}
#title-text:hover {
font-size: 100%;
}
.arrow {
position: fixed;
margin: 10px;
cursor: pointer;
z-index: 100;
}
.left {
left: 0px;
visibility: hidden;
}
.right {
right: 0px;
}
.main {
width: 50%;
margin: auto;
position: relative;
height: 300px;
}
.intro { /* Need to fix this thing not scrolling right */
width: 50%;
margin-left: 20px;
}
#left {
position: relative;
margin-left: 68px;
width: 25%;
height: 355px;
right: 0px;
}
#bottom {
width: 50%;
position: relative;
}
/* The pages position values below */
.second {
position: absolute;
left: 62.5%;
}
.third {
position: absolute;
left: 112.5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<link href="simple-scrollbar.css" rel="stylesheet"/>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Bud, Branch & Blossom Landscaping, LLC</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://buzinas.github.io/simple-scrollbar/simple-scrollbar.min.js"></script>
</head>
<body>
<div id="media-box">
<img id="linkedin" class="media" src="images/linkedin.png" title="Linkedin"/>
<img id="houzz" class="media" src="images/houzz.png" title="Houzz"/>
<img id="instagram" class="media" src="images/instagram.png" title="Instagram"/>
<img id="facebook" class="media" src="images/facebook.png" title="Facebook"/>
<a class="contact-info phone" href="tel:+15175151723">(517)-515-1723</a>
<a class="contact-info email" href="#">Contact us today!</a>
</div>
<div id="banner">
<div id="banner-text">
<p id="maintenance" class="banner-text">MAINTENANCE.</p>
<p id="installation" class="banner-text">INSTALLATION.</p>
<p id="design" class="banner-text">DESIGN.</p>
</div>
<div id="navbar">
<p id="about" class="nav-text">About Us</p>
<p id="gallery" class="nav-text">Our Work</p> <!-- Whichever one Tommy likes better. -->
</div>
</div>
<!-- Everything on top of the banner -->
<div id="logo"><img src="images/whitelogo.png"/></div>
<!-- Content -->
<div id="box">
<div class="first box">
<img class="left arrow" src="images/left_arrow.png"/>
<img class="right arrow" src="images/right_arrow.png"/>
<div class="first page intro">
<p>Bud, Branch & Blossom Landscaping is a small, independent landscaping firm that serves the Greater Lansing area.</p>
<p>We perform a variety of landscaping services, including landscape design, plant installation and removal, hardscaping, and lawn maintenance.</p>
<p>Bud, Branch & Blossom is also an active member of the Michigan Nursery and Landscape Association (MNLA), and is approved by the Michigan Department of Agriculture and Natural Resources (MDANR).</p>
</div>
<div class="first page intro">
<p>Tommy we need another testimonial yo.</p>
</div>
</div>
<!-- Second page -->
<div class="second box">
<div id="title" class="second page">
<p id="title-text">About Us</p>
</div>
<div class="second page main" ss-container>
<p>Bud, Branch & Blossom owner Tommy Morgan has spent years researching plants, shrubs, and trees. Before forming the company, he redesigned spaces in his own yard, honing his understanding of how textures and colors fit beside each other in garden beds. That appreciation for landscape composition serves his customers well. He enjoys making connections with his clients and getting to spend time outdoors doing what he loves.</p>
<p>The business started with a few small design projects, supplemented by several lawn mowing jobs. A year after forming the company, Tommy hired his first employees – people who, as he says, “understand that all of the work we do is in service to our customers.” He’s invested in top-of-the-line equipment, with brands like Exmark, Stihl, and Redmax lining our equipment racks.</p>
</div>
</div>
<!-- Third page -->
<div class="third box">
<div id="left" class="third page" ss-container>
<p>Design work allows us to share our creativity with our customers. Owner Tommy Morgan enjoys creating artwork with natural components. When designing a garden, many important factors must be considered, such as light, soil conditions, water, drainage conditions, and location. </p>
<p>The first step of the design process involves a free initial consultation. This allows us to understand your needs, and gives us an opportunity to see and understand the space. Following this, a design will be presented to you, along with pictures of plants/materials being used, and an estimate of the cost.</p>
</div>
</div>
</div>
<footer class="page">Copyright © Bud, Branch & Blossom Landscaping, LLC. All rights reserved.</footer>
<script type="text/javascript"> // Hover effects
// Elements
var fb = document.getElementById('facebook');
var ig = document.getElementById('instagram');
var hz = document.getElementById('houzz');
var li = document.getElementById('linkedin');
// Social media
fb.addEventListener('mouseover', function() {
fb.src = "images/facebook_hover.png";
});
fb.addEventListener('mouseleave', function() {
fb.src = "images/facebook.png";
});
ig.addEventListener('mouseover', function() {
ig.src = "images/instagram_hover.png";
});
ig.addEventListener('mouseleave', function() {
ig.src = "images/instagram.png";
});
hz.addEventListener('mouseover', function() {
hz.src = "images/houzz_hover.png";
});
hz.addEventListener('mouseleave', function() {
hz.src = "images/houzz.png";
});
li.addEventListener('mouseover', function() {
li.src = "images/linkedin_hover.png";
});
li.addEventListener('mouseleave', function() {
li.src = "images/linkedin.png";
});
</script>
<script type="text/javascript"> // PAGE SCRIPT
function test() {
xleft = document.getElementById('box').style.left;
console.log(xleft);
if(xleft == '-500%') {
$('.right').css('visibility', 'hidden');
} else {
$('.right').css('visibility', 'visible');
}
}
$('.right').click(function() {
$('#box').animate({
left: '-=100%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('.left').click(function() {
$('#box').animate({
left: '+=100%'
}, 400);
if(xleft == '-200%') {
$('.left').css('visibility', 'hidden');
} else {
$('.left').css('visibility', 'visible');
}
});
$('#about').click(function() {
$('#box').animate({
left: '-100%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#design').click(function() {
$('#box').animate({
left: '-200%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#installation').click(function() {
$('#box').animate({
left: '-300%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#maintenance').click(function() {
$('#box').animate({
left: '-400%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#gallery').click(function() {
$('#box').animate({
left: '-500%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('.email').click(function() {
$('#box').animate({
left: '-600%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
</script>
</body>
</html>
I am trying to increase the width of the twitter feed displayed on my webpage, I added a Div id to it and tried increasing its size in css however it stops getting bigger after a certain point, Also I want to add images in my portfolio section which includes 3 random pictures of like computers which get bigger and change size when you hover over them in css, how do I do this? Also I can't figure out how to change the color of the background of the webpage, everything I have tried doesn't work. Thanks.
I have provided the HTML, CSS and JS code for my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<style>
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat', Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display: inline-block;
height: 500px;
width: 650px;
}
#twitter {
display: inline-block;
height: 300px;
width: 300px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</head>
<body>
<div class="mainlogo">
<div>Muhammed's
<br>Webpage
</div>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
#applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"><u>Basic Information</u></h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"><u>Curriculum Vitae</u></h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service
environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"><u>Portfolio</u></h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"><u>Report</u></h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</div>
</body>
</html>
Your Twitter feed has a width set in HTML property. Erase the property and move it to CSS. That should fix the Twitter thing. Edit: Remember that the height is set on Twitter > Settings > Widget > Height.
- EDIT 1 -
Now that I know your Twitter feed can't be controlled by you, you have to control the result of your Twitter script which will normally be 600px of height by default. No matter what this is, you know it will end up styling an iframe with the twitter-timeline CSS class, so you only need to overwrite the value like this:
.twitter-timeline {
height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}
- END EDIT 1 -
You just gave away all of your personal information to strangers around the web. You'll probably be spammed in a few seconds if they are true. I suggest you ONLY provide necessary code. There is a lot of CSS and HTML not related to the question, you can simply ask them in another question or explain them apart of each other.
To place pictures you can do many things, being them random means either JavaScript or preloaded with PHP. I imagine you would be loading them from your site, let's say /images/computers/ and give them a class, for instance photo. Then on CSS, you can do the following:
.photo {
height:200px;
}
.photo:hover {
height:400px;
}
That will make it bigger on hover using CSS. If you like to animate it, you might want to use other CSS properties. Search on the web, you'll find them.
- EDIT 2 -
So, looking at your pictures with the class photo, I see that you were not adding the % values correctly. You need to find a balanced value for each one of your images. In your case, we are playing with image padding, margin and width basically. So there are 3 images and you know that the percentage must reach something around 100%:
.photo {
background-color: white;
padding: 1%;
margin-left: 5%;
margin-bottom: 2%;
-webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
float: left;
width: 25%;
transition: all 0.25s ease-out;
}
According to this code I wrote for you, now the formula is:
(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%
6 times 1% because the padding will be added to both left and right of the picture.
- END EDIT 2 -
The background color of the website? That is just too basic. It depends on your needs, you can set your background color to the <html> or <body>. I'll use HTML:
html {
background-color:red;
}
With that, your website will have a red background. Of course you can use HEX, or rgb() or rgba() or color names, whatever you want.
Try this codes.
twitter frame having max-width="520" that is a boundary.portfolia images supported responsive also.
MAKE IT COOL,WE LOVE OUR CODING.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="homepage.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:500,700,800italic,600|Montserrat' rel='stylesheet' type='text/css'>
</head>
<div class="mainlogo">
<body>Muhammed's
<br>Webpage</body>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id = "twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by #applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio" style="height:250px">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
<ul class="portfolioimg" style="">
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
</ul>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</body>
</html>
<style>
body{
background-color:gray;
}
.portfolioimg {
clear: both;
display: block;
margin: 30px auto 0;
padding: 0;
position: static !important;
text-align: center;
width: 1000px;
background-color:transparent;
}
.portfolioimg > li {
background-color: transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none;
margin-right: 40px;
text-align: center;
}
.portfolioimg > li img{
width:200px;
}
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat' , Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa ;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display:inline-block;
height: 500px;
width: 650px;
}
#twitter {
display:inline-block;
height: 300px;
width: 520px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
So Im keep coming up with typeError: Cannot read property 'style' undefined.
It situated on the last line of javascript.
Anyone any suggestions.
The finished piece is to be a marquee with vertically scrolling text.
window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
/* defineMarquee()
Initializes the contents of the marquee, determines the
top style positions of each marquee item, and sets the
onclick event handlers for the document
*/
function defineMarquee() {
var topValue
var allElems = document.getElementsByTagName("*");
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
}
//Extract the "top" CSS class from marqueeTxt
for (var i = 0; i < marqueeTxt.length; i++) {
if (marqueeTxt[i].getComputedStyle) {
topValue = marqueeTxt[i].getPropertyValue("top")
} else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle("top");
}
marqueeTxt[i].style.top = topValue;
}
document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
Starts the marquee in motion
*/
function startMarquee() {
if (marqueeOff == true) {
timeID = setInterval("moveText()", 50);
marqueeOff = false;
}
}
/* stopMarquee()
Stops the Marquee
*/
function stopMarquee() {
clearInterval(timeID);
marqueeOff = true;
}
/* moveText ()
move the text within the marquee in a vertical direction
*/
function moveText() {
for (var i = 0; i < marqueeTxt.length; i++) {
topPos = parseInt(marqueeTxt[i].style.top);
}
if (topPos < -110) {
topPos = 700;
} else {
topPos -= 1;
}
marqueeTxt[i].style.top = topPos + "px";
}
* {
margin: 0px;
padding: 0px
}
body {
font-size: 15px;
font-family: Arial, Helvetica, sans-serif
}
#pageContent {
position: absolute;
top: 0px;
left: 30px;
width: 800px
}
#links {
display: block;
width: 100%;
margin-bottom: 20px;
border-bottom: 1px solid rgb(0, 153, 102);
float: left
}
#links {
list-style-type: none
}
#links li {
display: block;
float: left;
text-align: center;
width: 19%
}
#links li a {
display: block;
width: 100%;
text-decoration: none;
color: black;
background-color: white
}
#links li a:hover {
color: white;
background-color: rgb(0, 153, 102)
}
#leftCol {
clear: left;
float: left
}
h1 {
font-size: 24px;
letter-spacing: 5px;
color: rgb(0, 153, 102)
}
#main {
float: left;
width: 450px;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid rgb(0, 153, 102);
padding-bottom: 15px
}
#main img {
float: right;
margin: 0px 0px 10px 10px
}
#main p {
margin-bottom: 10px
}
address {
width: 100%;
clear: left;
font-style: normal;
font-size: 12px;
border-top: 1px solid black;
text-align: center;
padding-bottom: 15px
}
.marquee {
position: absolute;
top: 0px;
left: 0px;
width: 280px;
height: 300px;
background-color: rgb(0, 153, 102);
color: white;
border: 5px inset white;
padding: 0px;
overflow: hidden;
position: relative
}
#marqueeTxt1 {
font-size: 1.4em;
letter-spacing: 0.15em;
border-bottom: 1px solid white
}
input {
width: 120px;
margin: 5px;
font-size: 0.9em
}
#marqueeButtons {
width: 280px;
text-align: center
}
#marqueeTxt1 {
position: absolute;
top: 40px;
left: 20px
}
#marqueeTxt2 {
position: absolute;
top: 90px;
left: 20px
}
#marqueeTxt3 {
position: absolute;
top: 170px;
left: 20px
}
#marqueeTxt4 {
position: absolute;
top: 250px;
left: 20px
}
#marqueeTxt5 {
position: absolute;
top: 330px;
left: 20px
}
#marqueeTxt6 {
position: absolute;
top: 410px;
left: 20px
}
#marqueeTxt7 {
position: absolute;
top: 490px;
left: 20px
}
#marqueeTxt8 {
position: absolute;
top: 570px;
left: 20px
}
#marqueeTxt9 {
position: absolute;
top: 640px;
left: 20px
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 3
BYSO Web Page
Author: Gavin Macken
Date: 28 Feb `15
Filename: byso.htm
Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
<title>Boise Youth Symphony Orchestra</title>
<link href="bstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="marquee.js"></script>
</head>
<body>
<form id="marqueeForm" action="">
<div id="pageContent">
<div id="head">
<img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" />
</div>
<ul id="links">
<li>Home Page
</li>
<li>About BYSO
</li>
<li>Our Director
</li>
<li>Join BYSO
</li>
<li>Contact Us
</li>
</ul>
<div id="leftCol">
<div class="marquee">
<div id="marqueeTxt1" class="marqueeTxt">
Schedule of Events
</div>
<div id="marqueeTxt2" class="marqueeTxt">
Holiday Concert
<br />December 14, 7:30 PM
<br />Boise Civic Center
</div>
<div id="marqueeTxt3" class="marqueeTxt">
Christmas Concert
<br />Dec. 16, 7 PM
<br />Our Savior Episcopal Church
</div>
<div id="marqueeTxt4" class="marqueeTxt">
Spring Concert
<br />Feb. 27, 7 PM
<br />Boise Civic Center
</div>
<div id="marqueeTxt5" class="marqueeTxt">
Easter Fanfare
<br />March 14, 9 PM
<br />Our Savior Episcopal Church
</div>
<div id="marqueeTxt6" class="marqueeTxt">
High School MusicFest
<br />May 2, 3 PM
<br />Boise Central High School
</div>
<div id="marqueeTxt7" class="marqueeTxt">
Summer Concert
<br />June 15, 7:30 PM
<br />Frontier Concert Hall
</div>
<div id="marqueeTxt8" class="marqueeTxt">
Fourth Fest
<br />July 4, 4 PM
<br />Canyon View Park
</div>
<div id="marqueeTxt9" class="marqueeTxt">
Frontier Days
<br />August 9, 1 PM
<br />Boise Concert Hall
</div>
</div>
<div id="marqueeButtons">
<input type="button" id="startMarquee" value="Start Marquee" />
<input type="button" id="stopMarquee" value="Pause Marquee" />
</div>
</div>
<div id="main">
<h1>Boise Youth Symphony Orchestra</h1>
<img src="byso.jpg" alt="" />
<p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with beautiful music while offering the highest quality musical training to over 1,000 teens throughout Idaho for the past 30 years. BYSO has established an outstanding reputation
for its high quality sound, its series of commissioned works, and collaborations with prominent musical groups such as the Idaho and Boise Symphony Orchestras, the Montana Chamber Orchestra, the Boise Adult Choir and the Western Symphony Orchestra.
Last year the group was invited to serve as the U.S. representative to the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
<p>Leading this success for the past decade has been Boise Symphony artistic director Denise Young. In a concert review by John Aehl, music critic for the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that the orchestra is playing
better than ever."</p>
</div>
<address>
BYSO · 300 Mountain Lane · Boise, Idaho 83702 · (208) 555 - 9114
</address>
</div>
</form>
</body>
</html>
The code that uses marqueeTxt[i] needs to be inside the for(var i) loop.
This will fix that error. The marquee still doesn't scroll because marqueeTxt[i].style.top is empty. The way defineMarquee() tries to set this doesn't work. When I step through it, neither getComputedStyle nor currentStyle are defined, so it skips over both methods of setting topValue.
window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
/* defineMarquee()
Initializes the contents of the marquee, determines the
top style positions of each marquee item, and sets the
onclick event handlers for the document
*/
function defineMarquee() {
var topValue
var allElems = document.getElementsByTagName("*");
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
}
//Extract the "top" CSS class from marqueeTxt
for (var i = 0; i < marqueeTxt.length; i++) {
if (marqueeTxt[i].getComputedStyle) {
topValue = marqueeTxt[i].getPropertyValue("top")
} else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle("top");
}
marqueeTxt[i].style.top = topValue;
}
document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
Starts the marquee in motion
*/
function startMarquee() {
if (marqueeOff == true) {
timeID = setInterval("moveText()", 50);
marqueeOff = false;
}
}
/* stopMarquee()
Stops the Marquee
*/
function stopMarquee() {
clearInterval(timeID);
marqueeOff = true;
}
/* moveText ()
move the text within the marquee in a vertical direction
*/
function moveText() {
for (var i = 0; i < marqueeTxt.length; i++) {
topPos = parseInt(marqueeTxt[i].style.top);
if (topPos < -110) {
topPos = 700;
} else {
topPos -= 1;
}
marqueeTxt[i].style.top = topPos + "px";
}
}
* {
margin: 0px;
padding: 0px
}
body {
font-size: 15px;
font-family: Arial, Helvetica, sans-serif
}
#pageContent {
position: absolute;
top: 0px;
left: 30px;
width: 800px
}
#links {
display: block;
width: 100%;
margin-bottom: 20px;
border-bottom: 1px solid rgb(0, 153, 102);
float: left
}
#links {
list-style-type: none
}
#links li {
display: block;
float: left;
text-align: center;
width: 19%
}
#links li a {
display: block;
width: 100%;
text-decoration: none;
color: black;
background-color: white
}
#links li a:hover {
color: white;
background-color: rgb(0, 153, 102)
}
#leftCol {
clear: left;
float: left
}
h1 {
font-size: 24px;
letter-spacing: 5px;
color: rgb(0, 153, 102)
}
#main {
float: left;
width: 450px;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid rgb(0, 153, 102);
padding-bottom: 15px
}
#main img {
float: right;
margin: 0px 0px 10px 10px
}
#main p {
margin-bottom: 10px
}
address {
width: 100%;
clear: left;
font-style: normal;
font-size: 12px;
border-top: 1px solid black;
text-align: center;
padding-bottom: 15px
}
.marquee {
position: absolute;
top: 0px;
left: 0px;
width: 280px;
height: 300px;
background-color: rgb(0, 153, 102);
color: white;
border: 5px inset white;
padding: 0px;
overflow: hidden;
position: relative
}
#marqueeTxt1 {
font-size: 1.4em;
letter-spacing: 0.15em;
border-bottom: 1px solid white
}
input {
width: 120px;
margin: 5px;
font-size: 0.9em
}
#marqueeButtons {
width: 280px;
text-align: center
}
#marqueeTxt1 {
position: absolute;
top: 40px;
left: 20px
}
#marqueeTxt2 {
position: absolute;
top: 90px;
left: 20px
}
#marqueeTxt3 {
position: absolute;
top: 170px;
left: 20px
}
#marqueeTxt4 {
position: absolute;
top: 250px;
left: 20px
}
#marqueeTxt5 {
position: absolute;
top: 330px;
left: 20px
}
#marqueeTxt6 {
position: absolute;
top: 410px;
left: 20px
}
#marqueeTxt7 {
position: absolute;
top: 490px;
left: 20px
}
#marqueeTxt8 {
position: absolute;
top: 570px;
left: 20px
}
#marqueeTxt9 {
position: absolute;
top: 640px;
left: 20px
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 3
BYSO Web Page
Author: Gavin Macken
Date: 28 Feb `15
Filename: byso.htm
Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
<title>Boise Youth Symphony Orchestra</title>
<link href="bstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="marquee.js"></script>
</head>
<body>
<form id="marqueeForm" action="">
<div id="pageContent">
<div id="head">
<img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" />
</div>
<ul id="links">
<li>Home Page
</li>
<li>About BYSO
</li>
<li>Our Director
</li>
<li>Join BYSO
</li>
<li>Contact Us
</li>
</ul>
<div id="leftCol">
<div class="marquee">
<div id="marqueeTxt1" class="marqueeTxt">
Schedule of Events
</div>
<div id="marqueeTxt2" class="marqueeTxt">
Holiday Concert
<br />December 14, 7:30 PM
<br />Boise Civic Center
</div>
<div id="marqueeTxt3" class="marqueeTxt">
Christmas Concert
<br />Dec. 16, 7 PM
<br />Our Savior Episcopal Church
</div>
<div id="marqueeTxt4" class="marqueeTxt">
Spring Concert
<br />Feb. 27, 7 PM
<br />Boise Civic Center
</div>
<div id="marqueeTxt5" class="marqueeTxt">
Easter Fanfare
<br />March 14, 9 PM
<br />Our Savior Episcopal Church
</div>
<div id="marqueeTxt6" class="marqueeTxt">
High School MusicFest
<br />May 2, 3 PM
<br />Boise Central High School
</div>
<div id="marqueeTxt7" class="marqueeTxt">
Summer Concert
<br />June 15, 7:30 PM
<br />Frontier Concert Hall
</div>
<div id="marqueeTxt8" class="marqueeTxt">
Fourth Fest
<br />July 4, 4 PM
<br />Canyon View Park
</div>
<div id="marqueeTxt9" class="marqueeTxt">
Frontier Days
<br />August 9, 1 PM
<br />Boise Concert Hall
</div>
</div>
<div id="marqueeButtons">
<input type="button" id="startMarquee" value="Start Marquee" />
<input type="button" id="stopMarquee" value="Pause Marquee" />
</div>
</div>
<div id="main">
<h1>Boise Youth Symphony Orchestra</h1>
<img src="byso.jpg" alt="" />
<p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with beautiful music while offering the highest quality musical training to over 1,000 teens throughout Idaho for the past 30 years. BYSO has established an outstanding reputation
for its high quality sound, its series of commissioned works, and collaborations with prominent musical groups such as the Idaho and Boise Symphony Orchestras, the Montana Chamber Orchestra, the Boise Adult Choir and the Western Symphony Orchestra.
Last year the group was invited to serve as the U.S. representative to the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
<p>Leading this success for the past decade has been Boise Symphony artistic director Denise Young. In a concert review by John Aehl, music critic for the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that the orchestra is playing
better than ever."</p>
</div>
<address>
BYSO · 300 Mountain Lane · Boise, Idaho 83702 · (208) 555 - 9114
</address>
</div>
</form>
</body>
</html>
Above is almost right,but still has a error.Change
if(marqueeTxt[i].getComputedStyle) {
topValue = marqueeTxt[i].getPropertyValue("top")
} else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle("top");
}
to topValue=getStyle(marqueeTxt[i],'top');,
and add
function getStyle(elem,name){
//如果属性存在于style[]中，那么他已被设置了，并是最终的
if(elem.style[name])
return elem.style[name];
//否则尝试ie的办法
else if(elem.currentStyle)
return elem.currentStyle[name];
//或者w3c的方法，如果存在的话
else if(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/([A-Z])/g,"-$1");
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(elem,'');
return s&&s.getPropertyValue(name);
}//否则用户使用的是其他浏览器，返回null
else return null;
}
Then the file will work.
So I managed to solve this one thanks to the .getComputedStyle method.
Thank you for putting me on the right path.
window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
/* defineMarquee()
Initializes the contents of the marquee, determines the
top style positions of each marquee item, and sets the
onclick event handlers for the document
*/
function defineMarquee() {
var topValue = 0;
var allElems = document.getElementsByTagName("*");
for(var i = 0; i < allElems.length; i++){
if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
}
//Extract the "top" CSS class from marqueeTxt
for(var i = 0; i < marqueeTxt.length; i++){
if (window.getComputedStyle) {
topValue = document.defaultView.getComputedStyle(marqueeTxt[i]).getPropertyValue("top");}
else if (marqueeTxt[i].currentStyle) {
topValue = document.defaultView.marqueeTxt[i].currentStyle["top"];
}
marqueeTxt[i].style.top = topValue;
}
document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
Starts the marquee in motion
*/
function startMarquee() {
if(marqueeOff == true) {
timeID = setInterval("moveText()", 50);
marqueeOff = false;
}
}
/* stopMarquee()
Stops the Marquee
*/
function stopMarquee() {
clearInterval(timeID);
marqueeOff = true;
}
/* moveText ()
move the text within the marquee in a vertical direction
*/
function moveText (){
for(var i = 0; i < marqueeTxt.length; i++) {
topPos = parseInt(marqueeTxt[i].style.top);
if(topPos < -110) {
topPos = 700;
} else { topPos -= 1;
}
marqueeTxt[i].style.top = topPos + "px";
}
}
* {margin: 0px; padding: 0px}
body {font-size: 15px; font-family: Arial, Helvetica, sans-serif}
#pageContent {position: absolute; top: 0px; left: 30px; width: 800px}
#links {display: block; width: 100%; margin-bottom: 20px;
border-bottom: 1px solid rgb(0,153, 102); float: left}
#links {list-style-type: none}
#links li {display: block; float: left; text-align: center; width: 19%}
#links li a {display: block; width: 100%; text-decoration: none; color: black;
background-color: white}
#links li a:hover {color: white; background-color: rgb(0,153,102)}
#leftCol {clear: left; float: left}
h1 {font-size: 24px; letter-spacing: 5px; color: rgb(0, 153,102)}
#main {float: left; width: 450px; margin-left: 10px;
padding-left: 10px; border-left: 1px solid rgb(0,153,102);
padding-bottom: 15px}
#main img {float: right; margin: 0px 0px 10px 10px}
#main p {margin-bottom: 10px}
address {width: 100%; clear: left; font-style: normal; font-size: 12px;
border-top: 1px solid black; text-align: center;
padding-bottom: 15px}
.marquee {position: absolute; top: 0px; left: 0px;
width: 280px; height: 300px;
background-color: rgb(0, 153, 102); color:white;
border: 5px inset white;
padding:0px; overflow:hidden; position:relative}
#marqueeTxt1 {font-size: 1.4em; letter-spacing: 0.15em; border-bottom: 1px solid white}
input {width: 120px; margin: 5px; font-size: 0.9em}
#marqueeButtons {width: 280px; text-align: center}
#marqueeTxt1 {position: absolute; top: 40px; left: 20px}
#marqueeTxt2 {position: absolute; top: 90px; left: 20px}
#marqueeTxt3 {position: absolute; top: 170px; left: 20px}
#marqueeTxt4 {position: absolute; top: 250px; left: 20px}
#marqueeTxt5 {position: absolute; top: 330px; left: 20px}
#marqueeTxt6 {position: absolute; top: 410px; left: 20px}
#marqueeTxt7 {position: absolute; top: 490px; left: 20px}
#marqueeTxt8 {position: absolute; top: 570px; left: 20px}
#marqueeTxt9 {position: absolute; top: 640px; left: 20px}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 3
BYSO Web Page
Author: Gavin Macken
Date: 28 Feb `15
Filename: byso.htm
Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
<title>Boise Youth Symphony Orchestra</title>
<link href="bstyles.css" rel="stylesheet" type="text/css" />
<script type = "text/javascript" src = "marquee.js"></script>
</head>
<body>
<form id="marqueeForm" action="">
<div id="pageContent">
<div id="head"><img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" /></div>
<ul id="links">
<li>Home Page</li>
<li>About BYSO</li>
<li>Our Director</li>
<li>Join BYSO</li>
<li>Contact Us</li>
</ul>
<div id="leftCol">
<div class="marquee">
<div id="marqueeTxt1" class="marqueeTxt">
Schedule of Events
</div>
<div id="marqueeTxt2" class="marqueeTxt">
Holiday Concert<br />
December 14, 7:30 PM<br />
Boise Civic Center
</div>
<div id="marqueeTxt3" class="marqueeTxt">
Christmas Concert<br />
Dec. 16, 7 PM<br />
Our Savior Episcopal Church
</div>
<div id="marqueeTxt4" class="marqueeTxt">
Spring Concert<br />
Feb. 27, 7 PM<br />
Boise Civic Center
</div>
<div id="marqueeTxt5" class="marqueeTxt">
Easter Fanfare<br />
March 14, 9 PM<br />
Our Savior Episcopal Church
</div>
<div id="marqueeTxt6" class="marqueeTxt">
High School MusicFest<br />
May 2, 3 PM<br />
Boise Central High School
</div>
<div id="marqueeTxt7" class="marqueeTxt">
Summer Concert<br />
June 15, 7:30 PM<br />
Frontier Concert Hall
</div>
<div id="marqueeTxt8" class="marqueeTxt">
Fourth Fest<br />
July 4, 4 PM<br />
Canyon View Park
</div>
<div id="marqueeTxt9" class="marqueeTxt">
Frontier Days<br />
August 9, 1 PM<br />
Boise Concert Hall
</div>
</div>
<div id="marqueeButtons">
<input type="button" id="startMarquee" value="Start Marquee" />
<input type="button" id="stopMarquee" value="Pause Marquee" />
</div>
</div>
<div id="main">
<h1>Boise Youth Symphony Orchestra</h1>
<img src="byso.jpg" alt="" />
<p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with
beautiful music while offering the highest quality musical training to over
1,000 teens throughout Idaho for the past 30 years. BYSO
has established an outstanding reputation for its high quality sound, its
series of commissioned works, and collaborations with prominent musical groups
such as the Idaho and Boise Symphony Orchestras, the Montana Chamber
Orchestra, the Boise Adult Choir and the Western Symphony Orchestra.
Last year the group was invited to serve as the U.S. representative to
the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
<p>Leading this success for the past decade has been Boise Symphony artistic
director Denise Young. In a concert review by John Aehl, music critic for
the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that
the orchestra is playing better than ever."</p>
</div>
<address>
BYSO · 300 Mountain Lane · Boise, Idaho 83702 · (208) 555 - 9114
</address>
</div>
</form>
</body>
</html>